From 44eaa3abad525196836ada4450c10b2b70e858d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Tue, 26 Mar 2019 23:31:43 +0100 Subject: [PATCH] A bit of cleanup in the card editor (#2984) * edit-card shouldn't need to know about the path * fix * Store config as object at all times, convert when necessary * Hidden is not a property of mwc-button. No need to hide anyway... --- .../card-editor/hui-dialog-edit-card.ts | 28 ++++- .../editor/card-editor/hui-edit-card.ts | 112 +++++++----------- 2 files changed, 65 insertions(+), 75 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 28651529ce..c0a058aeca 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -12,6 +12,7 @@ import { LovelaceCardConfig } from "../../../../data/lovelace"; import "./hui-edit-card"; import "./hui-dialog-pick-card"; import { EditCardDialogParams } from "./show-edit-card-dialog"; +import { addCard, replaceCard } from "../config-util"; declare global { // for fire event @@ -32,19 +33,22 @@ export class HuiDialogEditCard extends LitElement { @property() private _cardConfig?: LovelaceCardConfig; + @property() private _newCard?: boolean; + constructor() { super(); this._cardPicked = this._cardPicked.bind(this); this._cancel = this._cancel.bind(this); + this._save = this._save.bind(this); } public async showDialog(params: EditCardDialogParams): Promise { this._params = params; + const [view, card] = params.path; + this._newCard = card !== undefined ? false : true; this._cardConfig = - params.path.length === 2 - ? (this._cardConfig = params.lovelace.config.views[ - params.path[0] - ].cards![params.path[1]]) + card !== undefined + ? params.lovelace.config.views[view].cards![card] : undefined; } @@ -66,9 +70,10 @@ export class HuiDialogEditCard extends LitElement { `; @@ -82,6 +87,19 @@ export class HuiDialogEditCard extends LitElement { this._params = undefined; this._cardConfig = undefined; } + + private async _save(cardConf: LovelaceCardConfig): Promise { + const lovelace = this._params!.lovelace; + await lovelace.saveConfig( + this._params!.path.length === 1 + ? addCard(lovelace.config, this._params!.path as [number], cardConf) + : replaceCard( + lovelace.config, + this._params!.path as [number, number], + cardConf + ) + ); + } } declare global { diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts index 15644f5fa1..d44b13f41b 100644 --- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts @@ -33,10 +33,9 @@ import "./hui-card-preview"; // tslint:disable-next-line import { HuiCardPreview } from "./hui-card-preview"; import { LovelaceCardEditor, Lovelace } from "../../types"; -import { ConfigValue, ConfigError } from "../types"; +import { ConfigError } from "../types"; import { EntityConfig } from "../../entity-rows/types"; import { getCardElementTag } from "../../common/get-card-element-tag"; -import { addCard, replaceCard } from "../config-util"; import { afterNextRender } from "../../../../common/util/render-status"; declare global { @@ -58,15 +57,17 @@ export class HuiEditCard extends LitElement { public lovelace?: Lovelace; - public path?: [number] | [number, number]; - public closeDialog?: () => void; + public saveCard?: (cardConf: LovelaceCardConfig) => Promise; + + public newCard?: boolean; + @property() private _configElement?: LovelaceCardEditor | null; @property() private _uiEditor?: boolean; - @property() private _configValue?: ConfigValue; + @property() private _cardConfig?: LovelaceCardConfig; @property() private _configState?: string; @@ -76,8 +77,6 @@ export class HuiEditCard extends LitElement { @property() private _errorMsg?: TemplateResult; - private _cardType?: string; - private get _dialog(): PaperDialogElement { return this.shadowRoot!.querySelector("paper-dialog")!; } @@ -86,6 +85,20 @@ export class HuiEditCard extends LitElement { return this.shadowRoot!.querySelector("hui-card-preview")!; } + // tslint:disable-next-line + private __cardYaml: string | undefined; + + private get _cardYaml(): string | undefined { + if (!this.__cardYaml) { + this.__cardYaml = yaml.safeDump(this._cardConfig); + } + return this.__cardYaml; + } + + private set _cardYaml(yml: string | undefined) { + this.__cardYaml = yml; + } + public constructor() { super(); this._saving = false; @@ -98,7 +111,8 @@ export class HuiEditCard extends LitElement { return; } - this._configValue = { format: "yaml", value: undefined }; + this._cardConfig = undefined; + this._cardYaml = undefined; this._configState = "OK"; this._uiEditor = true; this._errorMsg = undefined; @@ -119,7 +133,7 @@ export class HuiEditCard extends LitElement { : html` @@ -162,7 +176,6 @@ export class HuiEditCard extends LitElement {
${this.hass!.localize("ui.common.cancel")} @@ -222,22 +234,9 @@ export class HuiEditCard extends LitElement { this._saving = true; - const cardConf: LovelaceCardConfig = - this._configValue!.format === "yaml" - ? yaml.safeLoad(this._configValue!.value!) - : this._configValue!.value!; - try { - const lovelace = this.lovelace!; - await lovelace.saveConfig( - this._creatingCard - ? addCard(lovelace.config, this.path as [number], cardConf) - : replaceCard( - lovelace.config, - this.path as [number, number], - cardConf - ) - ); + await this.saveCard!(this._cardConfig!); + this._cardYaml = undefined; this.closeDialog!(); } catch (err) { alert(`Saving failed: ${err.message}`); @@ -247,12 +246,9 @@ export class HuiEditCard extends LitElement { } private _handleYamlChanged(ev: CustomEvent): void { - this._configValue = { format: "yaml", value: ev.detail.value }; + this._cardConfig = yaml.safeLoad(ev.detail.value); try { - const config = yaml.safeLoad( - this._configValue.value - ) as LovelaceCardConfig; - this._updatePreview(config); + this._updatePreview(this._cardConfig!); this._configState = "OK"; } catch (err) { this._configState = "YAML_ERROR"; @@ -264,7 +260,7 @@ export class HuiEditCard extends LitElement { } private _handleUIConfigChanged(value: LovelaceCardConfig): void { - this._configValue = { format: "json", value }; + this._cardConfig = value; this._updatePreview(value); } @@ -294,35 +290,23 @@ export class HuiEditCard extends LitElement { } private async _toggleEditor(): Promise { - if (this._uiEditor && this._configValue!.format === "json") { - this._configValue = { - format: "yaml", - value: yaml.safeDump(this._configValue!.value), - }; - this._uiEditor = !this._uiEditor; - } else if (this._configElement && this._configValue!.format === "yaml") { - const yamlConfig = this._configValue!.value; - const cardConfig = yaml.safeLoad(yamlConfig) as LovelaceCardConfig; - this._uiEditor = !this._uiEditor; - if (cardConfig.type !== this._cardType) { - const succes = await this._loadConfigElement(cardConfig); - if (!succes) { - this._loadedDialog(); - } - this._cardType = cardConfig.type; + this._cardYaml = undefined; + if (this._uiEditor) { + this._uiEditor = false; + } else if (this._configElement) { + const success = await this._loadConfigElement(this._cardConfig!); + if (!success) { + this._loadedDialog(); } else { - this._configValue = { - format: "json", - value: cardConfig, - }; - this._configElement.setConfig(cardConfig); + this._uiEditor = true; + this._configElement.setConfig(this._cardConfig!); } } this._resizeDialog(); } private _isConfigValid(): boolean { - if (!this._configValue || !this._configValue.value) { + if (!this._cardConfig) { return false; } if (this._configState === "OK") { @@ -333,14 +317,10 @@ export class HuiEditCard extends LitElement { } private _isConfigChanged(): boolean { - if (this._creatingCard) { + if (this.newCard) { return true; } - const configValue = - this._configValue!.format === "yaml" - ? yaml.safeLoad(this._configValue!.value) - : this._configValue!.value; - return JSON.stringify(configValue) !== JSON.stringify(this.cardConfig); + return JSON.stringify(this._cardConfig) !== JSON.stringify(this.cardConfig); } private async _loadConfigElement(conf: LovelaceCardConfig): Promise { @@ -357,10 +337,11 @@ export class HuiEditCard extends LitElement { const elClass = customElements.get(tag); let configElement; + this._cardConfig = conf; + if (elClass && elClass.getConfigElement) { configElement = await elClass.getConfigElement(); } else { - this._configValue = { format: "yaml", value: yaml.safeDump(conf) }; this._updatePreview(conf); this._uiEditor = false; this._configElement = null; @@ -374,10 +355,6 @@ export class HuiEditCard extends LitElement { Your config is not supported by the UI editor:
${err.message}
Falling back to YAML editor. `; - this._configValue = { - format: "yaml", - value: yaml.safeDump(conf), - }; this._updatePreview(conf); this._uiEditor = false; this._configElement = null; @@ -388,17 +365,12 @@ export class HuiEditCard extends LitElement { configElement.addEventListener("config-changed", (ev) => this._handleUIConfigChanged(ev.detail.config) ); - this._configValue = { format: "json", value: conf }; this._configElement = configElement; await this.updateComplete; this._updatePreview(conf); return true; } - private get _creatingCard(): boolean { - return this.path!.length === 1; - } - private _openedChanged(ev): void { if (!ev.detail.value) { this.closeDialog!();