From 912c09132d636ea74054a5d54449a3a7bc514b3e Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Fri, 13 Sep 2019 00:12:11 -0500 Subject: [PATCH 1/7] UI Editor for picture-glance card Closes https://github.com/home-assistant/home-assistant-polymer/issues/3700 --- .../lovelace/cards/hui-picture-glance-card.ts | 20 +- .../hui-picture-glance-card-editor.ts | 242 ++++++++++++++++++ 2 files changed, 261 insertions(+), 1 deletion(-) create mode 100644 src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index c214baf33310..86b97c980f08 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,24 @@ 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 { + entity: "", + title: "", + image: + "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", + camera_view: "auto", + aspect_ratio: "50%", + tap_action: { action: "more-info" }, + hold_action: { action: "more-info" }, + entities: [], + }; + } + @property() public hass?: HomeAssistant; @property() private _config?: PictureGlanceCardConfig; 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 000000000000..8eb36c88700a --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts @@ -0,0 +1,242 @@ +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, +} 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 entitiesConfigStruct = struct.union([ + { + entity: "entity-id", + name: "string?", + icon: "icon?", + }, + "entity-id", +]); + +const cardConfigStruct = struct({ + type: "string", + title: "string?", + entity: "string?", + image: "string?", + camera_image: "string?", + camera_view: "string?", + state_iamge: "object?", + 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 || ""; + } + + get _camera_image(): string { + return this._config!.camera_image || ""; + } + + get _camera_view(): string { + return this._config!.camera_view || ""; + } + + 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: "none" }; + } + + get _hold_action(): ActionConfig { + return this._config!.hold_action || { action: "none" }; + } + + 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} + `; + })} + + + +
+

Toggle Editor to input State Image

+
+ + +
+ +
+ `; + } + + 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; + } +} From a9f002a757a154bf0a4715d59635d1aca981606e Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Wed, 18 Sep 2019 23:07:37 -0500 Subject: [PATCH 2/7] address review comments --- .../lovelace/cards/hui-picture-glance-card.ts | 1 - .../hui-entities-card-editor.ts | 15 ++---- .../config-elements/hui-glance-card-editor.ts | 15 ++---- .../config-elements/hui-map-card-editor.ts | 15 ++---- .../hui-picture-glance-card-editor.ts | 49 ++++++++++--------- src/panels/lovelace/editor/types.ts | 9 ++++ 6 files changed, 49 insertions(+), 55 deletions(-) diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 86b97c980f08..5e25870b26c2 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -42,7 +42,6 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { public static getStubConfig(): object { return { entity: "", - title: "", image: "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", camera_view: "auto", 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 65ce890bedb3..2817b58c46c8 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 476b26b0fd8d..5f6e86c72d22 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 29a77cf4d9ca..b531c616a98d 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 index 8eb36c88700a..378adca7627d 100644 --- 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 @@ -19,6 +19,7 @@ import { EntitiesEditorEvent, EditorTarget, actionConfigStruct, + entitiesConfigStruct, } from "../types"; import { HomeAssistant } from "../../../../types"; import { LovelaceCardEditor } from "../../types"; @@ -29,15 +30,6 @@ import { PictureGlanceCardConfig } from "../../cards/types"; import { EntityConfig } from "../../entity-rows/types"; import { processEditorEntities } from "../process-editor-entities"; -const entitiesConfigStruct = struct.union([ - { - entity: "entity-id", - name: "string?", - icon: "icon?", - }, - "entity-id", -]); - const cardConfigStruct = struct({ type: "string", title: "string?", @@ -122,31 +114,32 @@ export class HuiPictureGlanceCardEditor extends LitElement return html` ${configElementStyle}
- + Documentation - + .configValue=${"camera_image"} + @change="${this._valueChanged}" + allow-custom-entity + domain-filter="camera" + >
-

Toggle Editor to input State Image

+ +

Toggle Editor to input State Image options

Date: Tue, 24 Sep 2019 22:54:52 -0500 Subject: [PATCH 3/7] address review comments --- .../hui-picture-glance-card-editor.ts | 66 +++++++++++++------ 1 file changed, 47 insertions(+), 19 deletions(-) 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 index 378adca7627d..70ef19022cec 100644 --- 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 @@ -68,7 +68,9 @@ export class HuiPictureGlanceCardEditor extends LitElement } get _image(): string { - return this._config!.image || ""; + return this._config!.image || this._camera_image + ? "" + : "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png"; } get _camera_image(): string { @@ -76,7 +78,7 @@ export class HuiPictureGlanceCardEditor extends LitElement } get _camera_view(): string { - return this._config!.camera_view || ""; + return this._config!.camera_view || this._camera_image ? "auto" : ""; } get _state_image(): {} { @@ -84,15 +86,15 @@ export class HuiPictureGlanceCardEditor extends LitElement } get _aspect_ratio(): string { - return this._config!.aspect_ratio || ""; + return this._config!.aspect_ratio || "50%"; } get _tap_action(): ActionConfig { - return this._config!.tap_action || { action: "none" }; + return this._config!.tap_action || { action: "more-info" }; } get _hold_action(): ActionConfig { - return this._config!.hold_action || { action: "none" }; + return this._config!.hold_action || { action: "more-info" }; } get _show_name(): boolean { @@ -114,25 +116,32 @@ export class HuiPictureGlanceCardEditor extends LitElement return html` ${configElementStyle}
- Documentation
@@ -158,7 +171,11 @@ export class HuiPictureGlanceCardEditor extends LitElement
-

Toggle Editor to input State Image options

Date: Tue, 24 Sep 2019 22:59:40 -0500 Subject: [PATCH 4/7] fallback to yaml if state image used --- .../editor/config-elements/hui-picture-glance-card-editor.ts | 1 - 1 file changed, 1 deletion(-) 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 index 70ef19022cec..2d99410ff982 100644 --- 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 @@ -37,7 +37,6 @@ const cardConfigStruct = struct({ image: "string?", camera_image: "string?", camera_view: "string?", - state_iamge: "object?", aspect_ratio: "string?", tap_action: struct.optional(actionConfigStruct), hold_action: struct.optional(actionConfigStruct), From fe64f81cd68a6f8e93c1e2bfccf7377aa1809cb3 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Wed, 25 Sep 2019 07:58:34 -0500 Subject: [PATCH 5/7] push default changes --- src/panels/lovelace/cards/hui-picture-glance-card.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 5e25870b26c2..0de4d1a6b87c 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -41,13 +41,6 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { } public static getStubConfig(): object { return { - entity: "", - image: - "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", - camera_view: "auto", - aspect_ratio: "50%", - tap_action: { action: "more-info" }, - hold_action: { action: "more-info" }, entities: [], }; } From d2f6cd0c438dbce4c658ea48d6c878f7a466db88 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Wed, 25 Sep 2019 11:35:18 -0500 Subject: [PATCH 6/7] default image for config --- src/panels/lovelace/cards/hui-picture-glance-card.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 0de4d1a6b87c..be67eca759e9 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -41,6 +41,8 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { } public static getStubConfig(): object { return { + image: + "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", entities: [], }; } From acc24df7bbdfa209391ae1d4cb1e2ac8bd1dfe24 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Wed, 25 Sep 2019 15:18:53 -0500 Subject: [PATCH 7/7] Update hui-picture-glance-card-editor.ts --- .../editor/config-elements/hui-picture-glance-card-editor.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 2d99410ff982..1d5df3d946af 100644 --- 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 @@ -85,7 +85,7 @@ export class HuiPictureGlanceCardEditor extends LitElement } get _aspect_ratio(): string { - return this._config!.aspect_ratio || "50%"; + return this._config!.aspect_ratio || ""; } get _tap_action(): ActionConfig {