diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index c214baf333..be67eca759 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -21,7 +21,7 @@ import "../components/hui-warning-element"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { DOMAINS_TOGGLE } from "../../../common/const"; -import { LovelaceCard } from "../types"; +import { LovelaceCard, LovelaceCardEditor } from "../types"; import { EntityConfig } from "../entity-rows/types"; import { HomeAssistant } from "../../../types"; import { longPress } from "../common/directives/long-press-directive"; @@ -35,6 +35,18 @@ const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]); @customElement("hui-picture-glance-card") class HuiPictureGlanceCard extends LitElement implements LovelaceCard { + public static async getConfigElement(): Promise { + await import(/* webpackChunkName: "hui-picture-glance-card-editor" */ "../editor/config-elements/hui-picture-glance-card-editor"); + return document.createElement("hui-picture-glance-card-editor"); + } + public static getStubConfig(): object { + return { + image: + "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", + entities: [], + }; + } + @property() public hass?: HomeAssistant; @property() private _config?: PictureGlanceCardConfig; diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts index 65ce890bed..2817b58c46 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts @@ -18,7 +18,11 @@ import "../../../../components/ha-switch"; import { processEditorEntities } from "../process-editor-entities"; import { struct } from "../../common/structs/struct"; -import { EntitiesEditorEvent, EditorTarget } from "../types"; +import { + EntitiesEditorEvent, + EditorTarget, + entitiesConfigStruct, +} from "../types"; import { HomeAssistant } from "../../../../types"; import { LovelaceCardEditor } from "../../types"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -28,15 +32,6 @@ import { EntitiesCardEntityConfig, } from "../../cards/types"; -const entitiesConfigStruct = struct.union([ - { - entity: "entity-id", - name: "string?", - icon: "icon?", - }, - "entity-id", -]); - const cardConfigStruct = struct({ type: "string", title: "string|number?", diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts index 476b26b0fd..5f6e86c72d 100644 --- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts @@ -18,22 +18,17 @@ import "../../../../components/ha-switch"; import { struct } from "../../common/structs/struct"; import { processEditorEntities } from "../process-editor-entities"; -import { EntitiesEditorEvent, EditorTarget } from "../types"; +import { + EntitiesEditorEvent, + EditorTarget, + entitiesConfigStruct, +} from "../types"; import { HomeAssistant } from "../../../../types"; import { LovelaceCardEditor } from "../../types"; import { fireEvent } from "../../../../common/dom/fire_event"; import { configElementStyle } from "./config-elements-style"; import { GlanceCardConfig, ConfigEntity } from "../../cards/types"; -const entitiesConfigStruct = struct.union([ - { - entity: "entity-id", - name: "string?", - icon: "icon?", - }, - "entity-id", -]); - const cardConfigStruct = struct({ type: "string", title: "string|number?", diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts index 29a77cf4d9..b531c616a9 100644 --- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts @@ -13,7 +13,11 @@ import "../../components/hui-entity-editor"; import "../../components/hui-input-list-editor"; import { struct } from "../../common/structs/struct"; -import { EntitiesEditorEvent, EditorTarget } from "../types"; +import { + EntitiesEditorEvent, + EditorTarget, + entitiesConfigStruct, +} from "../types"; import { HomeAssistant } from "../../../../types"; import { LovelaceCardEditor } from "../../types"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -23,15 +27,6 @@ import { EntityConfig } from "../../entity-rows/types"; import { PolymerChangedEvent } from "../../../../polymer-types"; import { MapCardConfig } from "../../cards/types"; -const entitiesConfigStruct = struct.union([ - { - entity: "entity-id", - name: "string?", - icon: "icon?", - }, - "entity-id", -]); - const cardConfigStruct = struct({ type: "string", title: "string?", diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts new file mode 100644 index 0000000000..1d5df3d946 --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts @@ -0,0 +1,270 @@ +import { + html, + LitElement, + TemplateResult, + customElement, + property, +} from "lit-element"; +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 "../../components/hui-action-editor"; +import "../../components/hui-entity-editor"; +import "../../../../components/entity/ha-entity-picker"; + +import { struct } from "../../common/structs/struct"; +import { + EntitiesEditorEvent, + EditorTarget, + actionConfigStruct, + entitiesConfigStruct, +} from "../types"; +import { HomeAssistant } from "../../../../types"; +import { LovelaceCardEditor } from "../../types"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import { configElementStyle } from "./config-elements-style"; +import { ActionConfig } from "../../../../data/lovelace"; +import { PictureGlanceCardConfig } from "../../cards/types"; +import { EntityConfig } from "../../entity-rows/types"; +import { processEditorEntities } from "../process-editor-entities"; + +const cardConfigStruct = struct({ + type: "string", + title: "string?", + entity: "string?", + image: "string?", + camera_image: "string?", + camera_view: "string?", + aspect_ratio: "string?", + tap_action: struct.optional(actionConfigStruct), + hold_action: struct.optional(actionConfigStruct), + entities: [entitiesConfigStruct], +}); + +@customElement("hui-picture-glance-card-editor") +export class HuiPictureGlanceCardEditor extends LitElement + implements LovelaceCardEditor { + @property() public hass?: HomeAssistant; + + @property() private _config?: PictureGlanceCardConfig; + + @property() private _configEntities?: EntityConfig[]; + + public setConfig(config: PictureGlanceCardConfig): 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 _image(): string { + return this._config!.image || this._camera_image + ? "" + : "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png"; + } + + get _camera_image(): string { + return this._config!.camera_image || ""; + } + + get _camera_view(): string { + return this._config!.camera_view || this._camera_image ? "auto" : ""; + } + + get _state_image(): {} { + return this._config!.state_image || {}; + } + + get _aspect_ratio(): string { + return this._config!.aspect_ratio || ""; + } + + get _tap_action(): ActionConfig { + return this._config!.tap_action || { action: "more-info" }; + } + + get _hold_action(): ActionConfig { + return this._config!.hold_action || { action: "more-info" }; + } + + get _show_name(): boolean { + return this._config!.show_name || false; + } + + get _show_state(): boolean { + return this._config!.show_state || false; + } + + protected render(): TemplateResult | void { + if (!this.hass) { + return html``; + } + + const actions = ["more-info", "toggle", "navigate", "call-service", "none"]; + const views = ["auto", "live"]; + + return html` + ${configElementStyle} +
+ + + +
+ + + ${views.map((view) => { + return html` + ${view} + `; + })} + + + +
+ +
+ + +
+ +
+ `; + } + + private _valueChanged(ev: EntitiesEditorEvent): void { + if (!this._config || !this.hass) { + return; + } + const target = ev.target! as EditorTarget; + let value = target.value; + + if (target.configValue! === "aspect_ratio" && target.value) { + value += "%"; + } + + if (ev.detail && ev.detail.entities) { + this._config.entities = ev.detail.entities; + this._configEntities = processEditorEntities(this._config.entities); + } else if (target.configValue) { + if ( + this[`_${target.configValue}`] === value || + this[`_${target.configValue}`] === target.config + ) { + return; + } + + if (value === "") { + delete this._config[target.configValue!]; + } else { + this._config = { + ...this._config, + [target.configValue!]: value ? value : target.config, + }; + } + } + fireEvent(this, "config-changed", { config: this._config }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-picture-glance-card-editor": HuiPictureGlanceCardEditor; + } +} diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts index 3507ddc314..42a04fd5dc 100644 --- a/src/panels/lovelace/editor/types.ts +++ b/src/panels/lovelace/editor/types.ts @@ -56,3 +56,12 @@ export const actionConfigStruct = struct({ service: "string?", service_data: "object?", }); + +export const entitiesConfigStruct = struct.union([ + { + entity: "entity-id", + name: "string?", + icon: "icon?", + }, + "entity-id", +]);