From 96c5fdcbeb517f29243488a016af5c56262c887c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 10 Sep 2020 15:17:32 +0200 Subject: [PATCH] Fix some lovelace editors (#6911) * Fix some lovelace editors * let -> const --- .../lovelace/components/hui-action-editor.ts | 35 ++++----- .../config-elements/hui-button-card-editor.ts | 77 ++++++++++--------- .../config-elements/hui-light-card-editor.ts | 28 +++---- .../hui-picture-card-editor.ts | 26 +++---- .../hui-picture-entity-card-editor.ts | 76 +++++++++--------- .../hui-picture-glance-card-editor.ts | 49 ++++-------- 6 files changed, 131 insertions(+), 160 deletions(-) diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index 5899360217..dea53bd0d3 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/src/panels/lovelace/components/hui-action-editor.ts @@ -1,4 +1,5 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; +import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-textarea"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; @@ -9,7 +10,7 @@ import { property, TemplateResult, } from "lit-element"; -import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event"; +import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-service-picker"; import { ActionConfig, @@ -20,17 +21,6 @@ import { import { HomeAssistant } from "../../../types"; import { EditorTarget } from "../editor/types"; -declare global { - // for fire event - interface HASSDomEvents { - "action-changed": undefined; - } - // for add event listener - interface HTMLElementEventMap { - "action-changed": HASSDomEvent; - } -} - @customElement("hui-action-editor") export class HuiActionEditor extends LitElement { @property() public config?: ActionConfig; @@ -42,21 +32,21 @@ export class HuiActionEditor extends LitElement { @property() protected hass?: HomeAssistant; get _action(): string { - return this.config!.action || ""; + return this.config?.action || ""; } get _navigation_path(): string { - const config = this.config! as NavigateActionConfig; + const config = this.config as NavigateActionConfig; return config.navigation_path || ""; } get _url_path(): string { - const config = this.config! as UrlActionConfig; + const config = this.config as UrlActionConfig; return config.url_path || ""; } get _service(): string { - const config = this.config! as CallServiceActionConfig; + const config = this.config as CallServiceActionConfig; return config.service || ""; } @@ -107,13 +97,14 @@ export class HuiActionEditor extends LitElement { .configValue="${"service"}" @value-changed="${this._valueChanged}" > -

Toggle Editor to input Service Data

+ Service data can only be entered in the code editor ` : ""} `; } private _valueChanged(ev: Event): void { + ev.stopPropagation(); if (!this.hass) { return; } @@ -121,12 +112,12 @@ export class HuiActionEditor extends LitElement { if (this[`_${target.configValue}`] === target.value) { return; } - if (target.configValue === "action") { - this.config = { action: "none" }; - } if (target.configValue) { - this.config = { ...this.config!, [target.configValue!]: target.value }; - fireEvent(this, "action-changed"); + const newConfig = + target.configValue === "action" + ? { action: target.value } + : { ...this.config!, [target.configValue!]: target.value }; + fireEvent(this, "value-changed", { value: newConfig }); } } } diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts index 36ce2aab96..a2285c087d 100644 --- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts @@ -2,14 +2,18 @@ import "@polymer/paper-input/paper-input"; import { customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; +import { assert, boolean, object, optional, string } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; import { stateIcon } from "../../../../common/entity/state_icon"; +import { computeRTLDirection } from "../../../../common/util/compute_rtl"; +import "../../../../components/ha-formfield"; import "../../../../components/ha-icon-input"; +import "../../../../components/ha-switch"; import { ActionConfig } from "../../../../data/lovelace"; import { HomeAssistant } from "../../../../types"; import { ButtonCardConfig } from "../../cards/types"; @@ -17,16 +21,8 @@ import "../../components/hui-action-editor"; import "../../components/hui-entity-editor"; import "../../components/hui-theme-select-editor"; import { LovelaceCardEditor } from "../../types"; -import { - actionConfigStruct, - EditorTarget, - EntitiesEditorEvent, -} from "../types"; -import "../../../../components/ha-switch"; -import "../../../../components/ha-formfield"; +import { actionConfigStruct, EditorTarget } from "../types"; import { configElementStyle } from "./config-elements-style"; -import { computeRTLDirection } from "../../../../common/util/compute_rtl"; -import { assert, object, string, optional, boolean } from "superstruct"; const cardConfigStruct = object({ type: string(), @@ -63,11 +59,11 @@ export class HuiButtonCardEditor extends LitElement } get _show_name(): boolean { - return this._config!.show_name || true; + return this._config!.show_name ?? true; } get _show_state(): boolean { - return this._config!.show_state || false; + return this._config!.show_state ?? false; } get _icon(): string { @@ -75,7 +71,7 @@ export class HuiButtonCardEditor extends LitElement } get _show_icon(): boolean { - return this._config!.show_icon || true; + return this._config!.show_icon ?? true; } get _icon_height(): string { @@ -85,11 +81,11 @@ export class HuiButtonCardEditor extends LitElement } get _tap_action(): ActionConfig { - return this._config!.tap_action || { action: "more-info" }; + return this._config!.tap_action || { action: "toggle" }; } get _hold_action(): ActionConfig { - return this._config!.hold_action || { action: "none" }; + return this._config!.hold_action || { action: "more-info" }; } get _theme(): string { @@ -123,7 +119,7 @@ export class HuiButtonCardEditor extends LitElement .hass=${this.hass} .value="${this._entity}" .configValue=${"entity"} - @change="${this._valueChanged}" + @value-changed="${this._valueChanged}" allow-custom-entity >
@@ -161,7 +157,7 @@ export class HuiButtonCardEditor extends LitElement
@@ -175,7 +171,7 @@ export class HuiButtonCardEditor extends LitElement @@ -189,7 +185,7 @@ export class HuiButtonCardEditor extends LitElement @@ -225,7 +221,7 @@ export class HuiButtonCardEditor extends LitElement .config="${this._tap_action}" .actions="${actions}" .configValue="${"tap_action"}" - @action-changed="${this._valueChanged}" + @value-changed="${this._valueChanged}" > `; } - private _valueChanged(ev: EntitiesEditorEvent): void { + private _change(ev: Event) { if (!this._config || !this.hass) { return; } const target = ev.target! as EditorTarget; + const value = target.checked; - if ( - this[`_${target.configValue}`] === target.value || - this[`_${target.configValue}`] === target.config - ) { + if (this[`_${target.configValue}`] === value) { + return; + } + + this._config = { + ...this._config, + [target.configValue!]: value, + }; + fireEvent(this, "config-changed", { config: this._config }); + } + + private _valueChanged(ev: CustomEvent): void { + if (!this._config || !this.hass) { + return; + } + const target = ev.target! as EditorTarget; + const value = ev.detail.value; + + if (this[`_${target.configValue}`] === value) { return; } if (target.configValue) { - if (target.value === "") { + if (value !== false && !value) { this._config = { ...this._config }; delete this._config[target.configValue!]; } else { @@ -266,18 +278,11 @@ export class HuiButtonCardEditor extends LitElement target.configValue === "icon_height" && !isNaN(Number(target.value)) ) { - newValue = `${String(target.value)}px`; + newValue = `${String(value)}px`; } this._config = { ...this._config, - [target.configValue!]: - target.checked !== undefined - ? target.checked - : newValue !== undefined - ? newValue - : target.value - ? target.value - : target.config, + [target.configValue!]: newValue !== undefined ? newValue : value, }; } } diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts index 6e37bd0358..90b63d4276 100644 --- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts @@ -2,11 +2,12 @@ import "@polymer/paper-input/paper-input"; import { customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; +import { assert, object, optional, string } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; import { stateIcon } from "../../../../common/entity/state_icon"; import "../../../../components/ha-icon-input"; @@ -17,13 +18,8 @@ import "../../components/hui-action-editor"; import "../../components/hui-entity-editor"; import "../../components/hui-theme-select-editor"; import { LovelaceCardEditor } from "../../types"; -import { - actionConfigStruct, - EditorTarget, - EntitiesEditorEvent, -} from "../types"; +import { actionConfigStruct, EditorTarget } from "../types"; import { configElementStyle } from "./config-elements-style"; -import { string, object, optional, assert } from "superstruct"; const cardConfigStruct = object({ type: string(), @@ -100,7 +96,7 @@ export class HuiLightCardEditor extends LitElement .value=${this._entity} .configValue=${"entity"} .includeDomains=${includeDomains} - @change=${this._valueChanged} + @value-changed=${this._valueChanged} allow-custom-entity >
@@ -145,7 +141,7 @@ export class HuiLightCardEditor extends LitElement .config=${this._hold_action} .actions=${actions} .configValue=${"hold_action"} - @action-changed=${this._valueChanged} + @value-changed=${this._valueChanged} >
`; } - private _valueChanged(ev: EntitiesEditorEvent): void { + private _valueChanged(ev: CustomEvent): void { if (!this._config || !this.hass) { return; } const target = ev.target! as EditorTarget; + const value = ev.detail.value; - if ( - this[`_${target.configValue}`] === target.value || - this[`_${target.configValue}`] === target.config - ) { + if (this[`_${target.configValue}`] === value) { return; } if (target.configValue) { - if (target.value === "") { + if (value !== false && !value) { this._config = { ...this._config }; delete this._config[target.configValue!]; } else { this._config = { ...this._config, - [target.configValue!]: target.value ? target.value : target.config, + [target.configValue!]: value, }; } } diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts index 98fbf6af9a..8858545325 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts @@ -2,11 +2,12 @@ import "@polymer/paper-input/paper-input"; import { customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; +import { assert, object, optional, string } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; import { ActionConfig } from "../../../../data/lovelace"; import { HomeAssistant } from "../../../../types"; @@ -14,13 +15,8 @@ import { PictureCardConfig } from "../../cards/types"; import "../../components/hui-action-editor"; import "../../components/hui-theme-select-editor"; import { LovelaceCardEditor } from "../../types"; -import { - actionConfigStruct, - EditorTarget, - EntitiesEditorEvent, -} from "../types"; +import { actionConfigStruct, EditorTarget } from "../types"; import { configElementStyle } from "./config-elements-style"; -import { string, object, optional, assert } from "superstruct"; const cardConfigStruct = object({ type: string(), @@ -89,7 +85,7 @@ export class HuiPictureCardEditor extends LitElement .config="${this._tap_action}" .actions="${actions}" .configValue="${"tap_action"}" - @action-changed="${this._valueChanged}" + @value-changed="${this._valueChanged}" > @@ -184,8 +180,7 @@ export class HuiPictureEntityCardEditor extends LitElement )} (${this.hass.localize( "ui.panel.lovelace.editor.card.config.optional" )})" - type="number" - .value="${Number(this._aspect_ratio.replace("%", ""))}" + .value="${this._aspect_ratio}" .configValue="${"aspect_ratio"}" @value-changed="${this._valueChanged}" > @@ -201,7 +196,7 @@ export class HuiPictureEntityCardEditor extends LitElement @@ -215,7 +210,7 @@ export class HuiPictureEntityCardEditor extends LitElement @@ -231,7 +226,7 @@ export class HuiPictureEntityCardEditor extends LitElement .config="${this._tap_action}" .actions="${actions}" .configValue="${"tap_action"}" - @action-changed="${this._valueChanged}" + @value-changed="${this._valueChanged}" > @@ -180,8 +171,7 @@ export class HuiPictureGlanceCardEditor extends LitElement )} (${this.hass.localize( "ui.panel.lovelace.editor.card.config.optional" )})" - type="number" - .value="${Number(this._aspect_ratio.replace("%", ""))}" + .value="${this._aspect_ratio}" .configValue="${"aspect_ratio"}" @value-changed="${this._valueChanged}" > @@ -195,7 +185,7 @@ export class HuiPictureGlanceCardEditor extends LitElement .hass=${this.hass} .value="${this._entity}" .configValue=${"entity"} - @change="${this._valueChanged}" + @value-changed="${this._valueChanged}" allow-custom-entity >
@@ -209,7 +199,7 @@ export class HuiPictureGlanceCardEditor extends LitElement .config="${this._tap_action}" .actions="${actions}" .configValue="${"tap_action"}" - @action-changed="${this._valueChanged}" + @value-changed="${this._valueChanged}" >