diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.js b/src/panels/lovelace/cards/hui-weather-forecast-card.js index 091aced005..0ef2b8c2c2 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.js +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.js @@ -2,7 +2,22 @@ import "../../../cards/ha-weather-card"; import LegacyWrapperCard from "./hui-legacy-wrapper-card"; +// should be interface when converted to TS +export const Config = { + entity: "", + name: "", +}; + class HuiWeatherForecastCard extends LegacyWrapperCard { + static async getConfigElement() { + await import(/* webpackChunkName: "hui-weather-forecast-card-editor" */ "../editor/config-elements/hui-weather-forecast-card-editor"); + return document.createElement("hui-weather-forecast-card-editor"); + } + + static getStubConfig() { + return {}; + } + constructor() { super("ha-weather-card", "weather"); } diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts new file mode 100644 index 0000000000..8854c411a8 --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts @@ -0,0 +1,103 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { TemplateResult } from "lit-html"; + +import { struct } from "../../common/structs/struct"; +import { EntitiesEditorEvent, EditorTarget } from "../types"; +import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin"; +import { HomeAssistant } from "../../../../types"; +import { LovelaceCardEditor } from "../../types"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import { Config } from "../../cards/hui-weather-forecast-card"; +import { configElementStyle } from "./config-elements-style"; + +import "../../../../components/entity/ha-entity-picker"; + +const cardConfigStruct = struct({ + type: "string", + entity: "string?", + name: "string?", +}); + +export class HuiWeatherForecastCardEditor + extends hassLocalizeLitMixin(LitElement) + implements LovelaceCardEditor { + public hass?: HomeAssistant; + private _config?: Config; + + public setConfig(config: Config): void { + config = cardConfigStruct(config); + this._config = config; + } + + static get properties(): PropertyDeclarations { + return { hass: {}, _config: {} }; + } + + get _entity(): string { + return this._config!.entity || ""; + } + + get _name(): string { + return this._config!.name || ""; + } + + protected render(): TemplateResult { + if (!this.hass) { + return html``; + } + + return html` + ${configElementStyle} +
+
+ + +
+
+ `; + } + + private _valueChanged(ev: EntitiesEditorEvent): void { + if (!this._config || !this.hass) { + return; + } + const target = ev.target! as EditorTarget; + if (this[`_${target.configValue}`] === target.value) { + return; + } + if (target.configValue) { + if (target.value === "") { + delete this._config[target.configValue!]; + } else { + this._config = { + ...this._config, + [target.configValue!]: target.value, + }; + } + } + fireEvent(this, "config-changed", { config: this._config }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-weather-forecast-card-editor": HuiWeatherForecastCardEditor; + } +} + +customElements.define( + "hui-weather-forecast-card-editor", + HuiWeatherForecastCardEditor +);