Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Few errors in Chrome #149

Open
wants to merge 2 commits into
base: Meteo-France
Choose a base branch
from
Open

Few errors in Chrome #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a65fb23
Add files via upload
fdecourt Oct 21, 2024
adb78bd
Create hacs.json
fdecourt Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 141 additions & 133 deletions dist/meteofrance-weather-card-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
//V0.2
const fireEvent = (node, type, detail, options) => {
options = options || {};
detail = detail === null || detail === undefined ? {} : detail;
Expand All @@ -11,15 +12,12 @@ const fireEvent = (node, type, detail, options) => {
return event;
};

if (
!customElements.get("ha-switch") &&
customElements.get("paper-toggle-button")
) {
if (!customElements.get("ha-switch") && customElements.get("paper-toggle-button")) {
customElements.define("ha-switch", customElements.get("paper-toggle-button"));
}

if (!customElements.get("ha-entity-picker")) {
(customElements.get("hui-entities-card")).getConfigElement();
customElements.get("hui-entities-card").getConfigElement();
}

const LitElement = customElements.get("hui-masonry-view")
Expand All @@ -31,6 +29,7 @@ const css = LitElement.prototype.css;
const HELPERS = window.loadCardHelpers();

const DefaultSensors = new Map([
["detailEntity", "_rain_chance"],
["cloudCoverEntity", "_cloud_cover"],
["rainChanceEntity", "_rain_chance"],
["freezeChanceEntity", "_freeze_chance"],
Expand All @@ -40,14 +39,57 @@ const DefaultSensors = new Map([
]);

export class MeteofranceWeatherCardEditor extends LitElement {
constructor() {
super();
// Ensure _config always starts as an object with a default card type
this._config = { type: "custom:meteofrance-weather-card" };
}

setConfig(config) {
this._config = { ...config };
// Merge provided config with defaults to avoid undefined issues
this._config = {
type: "custom:meteofrance-weather-card",
name: config.name || "", // Default empty name
entity: config.entity || "",
icons: config.icons || "",
current: config.current !== false, // Ensure it's boolean
details: config.details !== false,
daily_forecast: config.daily_forecast !== false,
hourly_forecast: config.hourly_forecast !== false,
number_of_hourly_forecasts: config.number_of_hourly_forecasts || 5,
number_of_daily_forecasts: config.number_of_daily_forecasts || 5,
one_hour_forecast: config.one_hour_forecast !== false,
alert_forecast: config.alert_forecast !== false,
animated_icons: config.animated_icons !== false,
wind_forecast_icons: config.wind_forecast_icons !== false,
humidity_forecast: config.humidity_forecast !== false,
alertEntity: config.alertEntity || "",
cloudCoverEntity: config.cloudCoverEntity || "",
freezeChanceEntity: config.freezeChanceEntity || "",
rainChanceEntity: config.rainChanceEntity || "",
rainForecastEntity: config.rainForecastEntity || "",
snowChanceEntity: config.snowChanceEntity || "",
uvEntity: config.uvEntity || "",
detailEntity: config.detailEntity || "",
};

// Automatically set default values if only entity and type are provided
if (Object.keys(config).length === 2 && config.entity !== undefined) {
this._weatherEntityChanged(config.entity.split(".")[1]);
fireEvent(this, "config-changed", { config: this._config });
}
}

static get properties() {
return { hass: {}, _config: {} };
}

// Ensure the card `type` is always part of the config to prevent "No card type configured"
get _type() {
return this._config.type || "custom:meteofrance-weather-card";
}


get _entity() {
return this._config.entity || "";
}
Expand All @@ -61,43 +103,49 @@ export class MeteofranceWeatherCardEditor extends LitElement {
}

get _current() {
return this._config.current !== false;
return this._config.current ?? true;
}

get _details() {
return this._config.details !== false;
return this._config.details ?? true;
}

get _daily_forecast() {
return this._config.daily_forecast ?? true;
}

get _forecast() {
return this._config.forecast !== false;
get _number_of_daily_forecasts() {
return this._config.number_of_daily_forecasts || 5;
}

get _number_of_forecasts() {
return this._config.number_of_forecasts || 5;
get _hourly_forecast() {
return this._config.hourly_forecast ?? true;
}

get _number_of_hourly_forecasts() {
return this._config.number_of_hourly_forecasts || 5;
}

// Météo France
// Switches state
get _one_hour_forecast() {
return this._config.one_hour_forecast !== false;
return this._config.one_hour_forecast ?? true;
}

get _alert_forecast() {
return this._config.alert_forecast !== false;
return this._config.alert_forecast ?? true;
}

get _animated_icons() {
return this._config.animated_icons !== false;
return this._config.animated_icons ?? true;
}

get _wind_forecast_icons() {
return this._config.wind_forecast_icons !== false;
return this._config.wind_forecast_icons ?? true;
}

get _humidity_forecast() {
return this._config.humidity_forecast !== false;
}
// Config value
return this._config.humidity_forecast ?? true;
}

get _alertEntity() {
return this._config.alertEntity || "";
}
Expand Down Expand Up @@ -130,6 +178,7 @@ export class MeteofranceWeatherCardEditor extends LitElement {
return this._config.detailEntity || "";
}


firstUpdated() {
HELPERS.then((help) => {
if (help.importMoreInfoControl) {
Expand All @@ -139,114 +188,66 @@ export class MeteofranceWeatherCardEditor extends LitElement {
}

render() {
if (!this.hass) {
if (!this.hass || !this._config) {
return html``;
}

return html`
<div class="card-config">
<div>
<paper-input
label="Name"
.value="${this._name}"
.configValue="${"name"}"
@value-changed="${this._valueChanged}"
></paper-input>
${this.renderSensorPicker(
"Détail",
this._detailEntity,
"detailEntity"
)}
<paper-input
label="Icons location"
.value="${this._icons}"
.configValue="${"icons"}"
@value-changed="${this._valueChanged}"
></paper-input>
<!-- Primary weather entity -->
${this.renderWeatherPicker("Entity", this._entity, "entity")}
${this.renderWeatherPicker("Entité", this._entity, "entity")}
${this.renderTextField("Nom", this._name, "name")}
${this.renderSensorPicker("Détail", this._detailEntity, "detailEntity")}
<!-- Switches -->
<ul class="switches">
${this.renderSwitchOption("Show current", this._current, "current")}
${this.renderSwitchOption("Show details", this._details, "details")}
${this.renderSwitchOption(
"Show one hour forecast",
this._one_hour_forecast,
"one_hour_forecast"
)}
${this.renderSwitchOption(
"Show alert",
this._alert_forecast,
"alert_forecast"
)}
${this.renderSwitchOption(
"Show forecast",
this._forecast,
"forecast"
)}
${this.renderSwitchOption(
"Use animated icons",
this._animated_icons,
"animated_icons"
)}
${this.renderSwitchOption(
"Show wind icons",
this._wind_forecast_icons,
"wind_forecast_icons"
)}
${this.renderSwitchOption(
"Show humidity forecast",
this._humidity_forecast,
"humidity_forecast"
)}
${this.renderSwitchOption("Météo actuelle", this._current, "current")}
${this.renderSwitchOption("Détails", this._details, "details")}
${this.renderSwitchOption("Alertes", this._alert_forecast, "alert_forecast")}
${this.renderSwitchOption("Pluie dans l'heure", this._one_hour_forecast, "one_hour_forecast")}
${this.renderSwitchOption("Prévisions par heure", this._hourly_forecast, "hourly_forecast")}
${this.renderSwitchOption("Prévisions par jour", this._daily_forecast, "daily_forecast")}
${this.renderSwitchOption("Humidité", this._humidity_forecast, "humidity_forecast")}
${this.renderSwitchOption("Girouette", this._wind_forecast_icons, "wind_forecast_icons")}
${this.renderSwitchOption("Icones animées", this._animated_icons, "animated_icons")}
</ul>
<!-- -->
<paper-input
label="Number of future forcasts"
type="number"
min="1"
max="8"
value=${this._number_of_forecasts}
.configValue="${"number_of_forecasts"}"
@value-changed="${this._valueChanged}"
></paper-input>
${this.renderNumberField("Nombres d'heures", this._number_of_hourly_forecasts, "number_of_hourly_forecasts")}
${this.renderNumberField("Nombres de jours", this._number_of_daily_forecasts, "number_of_daily_forecasts")}
<!-- Meteo France weather entities -->
${this.renderSensorPicker(
"Risque de pluie",
this._rainChanceEntity,
"rainChanceEntity"
)}
${this.renderSensorPicker("Risque de pluie", this._rainChanceEntity, "rainChanceEntity")}
${this.renderSensorPicker("UV", this._uvEntity, "uvEntity")}
${this.renderSensorPicker(
"Couverture nuageuse",
this._cloudCoverEntity,
"cloudCoverEntity"
)}
${this.renderSensorPicker(
"Risque de gel",
this._freezeChanceEntity,
"freezeChanceEntity"
)}
${this.renderSensorPicker(
"Risque de neige",
this._snowChanceEntity,
"snowChanceEntity"
)}
${this.renderSensorPicker(
"Vigilance Météo",
this._alertEntity,
"alertEntity"
)}
${this.renderSensorPicker(
"Pluie dans l'heure",
this._rainForecastEntity,
"rainForecastEntity"
)}
${this.renderSensorPicker("Couverture nuageuse", this._cloudCoverEntity, "cloudCoverEntity")}
${this.renderSensorPicker("Risque de gel", this._freezeChanceEntity, "freezeChanceEntity")}
${this.renderSensorPicker("Risque de neige", this._snowChanceEntity, "snowChanceEntity")}
${this.renderSensorPicker("Vigilance Météo", this._alertEntity, "alertEntity")}
${this.renderSensorPicker("Pluie dans l'heure", this._rainForecastEntity, "rainForecastEntity")}
${this.renderTextField("Répertoire des icones", this._icons, "icons")}
</div>
</div>
`;
}

renderTextField(label, state, configAttr) {
return this.renderField(label, state, configAttr, "text");
}

renderNumberField(label, state, configAttr) {
return this.renderField(label, state, configAttr, "number");
}

renderField(label, state, configAttr, type) {
return html`
<ha-textfield
label="${label}"
.value="${state}"
type="${type}"
.configValue=${configAttr}
@input=${this._valueChanged}
></ha-textfield>
`;
}

renderWeatherPicker(label, entity, configAttr) {
return this.renderPicker(label, entity, configAttr, "weather");
}
Expand All @@ -272,26 +273,36 @@ export class MeteofranceWeatherCardEditor extends LitElement {
renderSwitchOption(label, state, configAttr) {
return html`
<li class="switch">
<ha-switch
.checked=${state}
.configValue="${configAttr}"
@change="${this._valueChanged}"
></ha-switch
><span>${label}</span>
</div>
</li>
<ha-switch
.checked=${state}
.configValue="${configAttr}"
@change="${this._valueChanged}"
></ha-switch
><span>${label}</span>
</li>
`;
}

_weatherEntityChanged(entityName) {
DefaultSensors.forEach((sensorSuffix, configAttribute) => {
const entity = "sensor." + entityName + sensorSuffix;
if (this.hass.states[entity] !== undefined)
this._config = {
...this._config,
[configAttribute]: entity,
};
});
_weatherEntityChanged(weatherEntityName) {
const weatherEntityNameFull = "weather." + weatherEntityName;
const state = this.hass.states[weatherEntityNameFull];
if (state !== undefined) {
const friendly_name = state.attributes.friendly_name;
this._config = {
...this._config,
name: friendly_name || "",
};

DefaultSensors.forEach((sensorSuffix, configAttribute) => {
const entity = "sensor." + weatherEntityName + sensorSuffix;
if (this.hass.states[entity] !== undefined) {
this._config = {
...this._config,
[configAttribute]: entity,
};
}
});
}
}

_valueChanged(ev) {
Expand Down Expand Up @@ -340,7 +351,4 @@ export class MeteofranceWeatherCardEditor extends LitElement {
}
}

customElements.define(
"meteofrance-weather-card-editor",
MeteofranceWeatherCardEditor
);
customElements.define("meteofrance-weather-card-editor", MeteofranceWeatherCardEditor);
Loading