diff --git a/src/panels/lovelace/cards/hui-sensor-card.ts b/src/panels/lovelace/cards/hui-sensor-card.ts index 2434527bcb..cde93f3056 100755 --- a/src/panels/lovelace/cards/hui-sensor-card.ts +++ b/src/panels/lovelace/cards/hui-sensor-card.ts @@ -8,7 +8,7 @@ import { import { TemplateResult } from "lit-html"; import "@polymer/paper-spinner/paper-spinner"; -import { LovelaceCard } from "../types"; +import { LovelaceCard, LovelaceCardEditor } from "../types"; import { LovelaceCardConfig } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -133,7 +133,7 @@ const coordinates = ( return calcPoints(history, hours, width, detail, min, max); }; -interface Config extends LovelaceCardConfig { +export interface Config extends LovelaceCardConfig { entity: string; name?: string; icon?: string; @@ -145,6 +145,15 @@ interface Config extends LovelaceCardConfig { } class HuiSensorCard extends LitElement implements LovelaceCard { + public static async getConfigElement(): Promise { + await import("../editor/config-elements/hui-sensor-card-editor"); + return document.createElement("hui-sensor-card-editor"); + } + + public static getStubConfig(): object { + return {}; + } + public hass?: HomeAssistant; private _config?: Config; private _history?: any; 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 new file mode 100644 index 0000000000..8ae1eb5e51 --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts @@ -0,0 +1,194 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { TemplateResult } from "lit-html"; +import { struct } from "../../common/structs/struct"; +import "@polymer/paper-input/paper-input"; +import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-listbox/paper-listbox"; + +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-sensor-card"; +import { configElementStyle } from "./config-elements-style"; + +import "../../components/hui-theme-select-editor"; +import "../../../../components/entity/ha-entity-picker"; + +const cardConfigStruct = struct({ + type: "string", + entity: "string?", + name: "string?", + icon: "string?", + graph: "string?", + unit: "string?", + detail: "number?", + theme: "string?", + hours_to_show: "number?", +}); + +export class HuiSensorCardEditor extends hassLocalizeLitMixin(LitElement) + implements LovelaceCardEditor { + public hass?: HomeAssistant; + private _config?: Config; + + public setConfig(config: Config): void { + config = cardConfigStruct(config); + + this._config = { type: "sensor", ...config }; + } + + static get properties(): PropertyDeclarations { + return { hass: {}, _config: {} }; + } + + get _entity(): string { + return this._config!.entity || ""; + } + + get _name(): string { + return this._config!.name || ""; + } + + get _icon(): string { + return this._config!.icon || ""; + } + + get _graph(): string { + return this._config!.graph || "line"; + } + + get _unit(): string { + return this._config!.unit || ""; + } + + get _detail(): number { + return this._config!.number || 1; + } + + get _theme(): string { + return this._config!.theme || "default"; + } + + get _hours_to_show(): number { + return this._config!.hours_to_show || 24; + } + + protected render(): TemplateResult { + if (!this.hass) { + return html``; + } + + const graphs = ["line", "none"]; + + return html` + ${configElementStyle} +
+
+ + +
+
+ + + + ${ + graphs.map((graph) => { + return html` + ${graph} + `; + }) + } + + +
+
+ + +
+
+ + +
+
+ `; + } + + 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) { + 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-sensor-card-editor": HuiSensorCardEditor; + } +} + +customElements.define("hui-sensor-card-editor", HuiSensorCardEditor);