diff --git a/src/panels/lovelace/cards/hui-history-graph-card.js b/src/panels/lovelace/cards/hui-history-graph-card.js index 129d83d1a7..e6ce58032f 100644 --- a/src/panels/lovelace/cards/hui-history-graph-card.js +++ b/src/panels/lovelace/cards/hui-history-graph-card.js @@ -8,6 +8,11 @@ import "../../../data/ha-state-history-data"; import { processConfigEntities } from "../common/process-config-entities"; class HuiHistoryGraphCard extends PolymerElement { + static async getConfigElement() { + await import(/* webpackChunkName: "hui-history-graph-card-editor" */ "../editor/config-elements/hui-history-graph-card-editor"); + return document.createElement("hui-history-graph-card-editor"); + } + static getStubConfig() { return { entities: [] }; } diff --git a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts new file mode 100644 index 0000000000..02641fd444 --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts @@ -0,0 +1,156 @@ +import { + html, + LitElement, + TemplateResult, + customElement, + property, +} from "lit-element"; +import "@polymer/paper-input/paper-input"; + +import "../../components/hui-entity-editor"; + +import { struct } from "../../common/structs/struct"; +import { EntitiesEditorEvent, EditorTarget } from "../types"; +import { HomeAssistant } from "../../../../types"; +import { LovelaceCardEditor } from "../../types"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import { HistoryGraphCardConfig } from "../../cards/hui-history-graph-card"; +import { EntityConfig } from "../../entity-rows/types"; +import { processEditorEntities } from "../process-editor-entities"; +import { configElementStyle } from "./config-elements-style"; + +const entitiesConfigStruct = struct.union([ + { + entity: "entity-id", + name: "string?", + }, + "entity-id", +]); + +const cardConfigStruct = struct({ + type: "string", + entities: [entitiesConfigStruct], + title: "string?", + hours_to_show: "number?", + refresh_interval: "number?", +}); + +@customElement("hui-history-graph-card-editor") +export class HuiHistoryGraphCardEditor extends LitElement + implements LovelaceCardEditor { + @property() public hass?: HomeAssistant; + + @property() private _config?: HistoryGraphCardConfig; + + @property() private _configEntities?: EntityConfig[]; + + public setConfig(config: HistoryGraphCardConfig): void { + config = cardConfigStruct(config); + this._config = config; + this._configEntities = processEditorEntities(config.entities); + } + + get _entity(): string { + return this._config!.entity || ""; + } + + get _title(): string { + return this._config!.title || ""; + } + + get _hours_to_show(): number { + return this._config!.number || 24; + } + + get _refresh_interval(): number { + return this._config!.number || 0; + } + + protected render(): TemplateResult | void { + 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 (!ev.detail && this[`_${target.configValue}`] === target.value) { + return; + } + + if (ev.detail && ev.detail.entities) { + this._config.entities = ev.detail.entities; + this._configEntities = processEditorEntities(this._config.entities); + } else if (target.configValue) { + if (target.value === "") { + delete this._config[target.configValue!]; + } else { + let value: any = target.value; + if (target.type === "number") { + value = Number(value); + } + this._config = { + ...this._config, + [target.configValue!]: value, + }; + } + } + + fireEvent(this, "config-changed", { config: this._config }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-history-graph-card-editor": HuiHistoryGraphCardEditor; + } +} diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts index b7c794f6e0..40108d668d 100644 --- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts @@ -174,7 +174,7 @@ export class HuiSensorCardEditor extends LitElement >