diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts index e207cbe38b..088703a930 100644 --- a/src/panels/lovelace/cards/hui-error-card.ts +++ b/src/panels/lovelace/cards/hui-error-card.ts @@ -13,7 +13,7 @@ import { LovelaceCard } from "../types"; import { HomeAssistant } from "../../../types"; import { ErrorCardConfig } from "./types"; -export const createErrorCardElement = (config) => { +export const createErrorCardElement = (config: ErrorCardConfig) => { const el = document.createElement("hui-error-card"); el.setConfig(config); return el; @@ -46,7 +46,11 @@ export class HuiErrorCard extends LitElement implements LovelaceCard { return html` ${this._config.error} -
${safeDump(this._config.origConfig)}
+ ${this._config.origConfig + ? html` +
${safeDump(this._config.origConfig)}
+ ` + : ""} `; } diff --git a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts index 9bce069854..8850d46c15 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts @@ -1,7 +1,5 @@ import "@polymer/paper-input/paper-textarea"; -import deepClone from "deep-clone-simple"; - import { createCardElement } from "../../create-element/create-card-element"; import { HomeAssistant } from "../../../../types"; import { LovelaceCardConfig } from "../../../../data/lovelace"; @@ -15,6 +13,10 @@ export class HuiCardPreview extends HTMLElement { private _element?: LovelaceCard; private _config?: LovelaceCardConfig; + private get _error() { + return this._element?.tagName === "HUI-ERROR-CARD"; + } + constructor() { super(); this.addEventListener("ll-rebuild", () => { @@ -37,12 +39,9 @@ export class HuiCardPreview extends HTMLElement { } set error(error: ConfigError) { - const configValue = createErrorCardConfig( - `${error.type}: ${error.message}`, - undefined + this._createCard( + createErrorCardConfig(`${error.type}: ${error.message}`, undefined) ); - - this._createCard(configValue); } set config(configValue: LovelaceCardConfig) { @@ -66,9 +65,10 @@ export class HuiCardPreview extends HTMLElement { return; } - if (curConfig && configValue.type === curConfig.type) { + // in case the element was an error element we always want to recreate it + if (!this._error && curConfig && configValue.type === curConfig.type) { try { - this._element.setConfig(deepClone(configValue)); + this._element.setConfig(configValue); } catch (err) { this._createCard(createErrorCardConfig(err.message, configValue)); } 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 cc53b1e305..66e3ed2429 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -8,6 +8,8 @@ import { property, } from "lit-element"; +import deepFreeze from "deep-freeze"; + import { HomeAssistant } from "../../../../types"; import { HASSDomEvent } from "../../../../common/dom/fire_event"; import { @@ -55,6 +57,9 @@ export class HuiDialogEditCard extends LitElement { this._viewConfig = params.lovelaceConfig.views[view]; this._cardConfig = card !== undefined ? this._viewConfig.cards![card] : undefined; + if (this._cardConfig && !Object.isFrozen(this._cardConfig)) { + this._cardConfig = deepFreeze(this._cardConfig); + } } private get _cardEditorEl(): HuiCardEditor | null { @@ -248,19 +253,20 @@ export class HuiDialogEditCard extends LitElement { } private _handleCardPicked(ev) { - this._cardConfig = ev.detail.config; + const config = ev.detail.config; if (this._params!.entities && this._params!.entities.length > 0) { - if (Object.keys(this._cardConfig!).includes("entities")) { - this._cardConfig!.entities = this._params!.entities; - } else if (Object.keys(this._cardConfig!).includes("entity")) { - this._cardConfig!.entity = this._params!.entities[0]; + if (Object.keys(config).includes("entities")) { + config.entities = this._params!.entities; + } else if (Object.keys(config).includes("entity")) { + config.entity = this._params!.entities[0]; } } + this._cardConfig = deepFreeze(config); this._error = ev.detail.error; } private _handleConfigChanged(ev) { - this._cardConfig = ev.detail.config; + this._cardConfig = deepFreeze(ev.detail.config); this._error = ev.detail.error; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts index bc19be2282..b76bf47ed9 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts @@ -9,6 +9,8 @@ import { query, } from "lit-element"; +import deepFreeze from "deep-freeze"; + import { HomeAssistant } from "../../../../types"; import { LovelaceCardConfig } from "../../../../data/lovelace"; import "./hui-card-editor"; @@ -52,6 +54,9 @@ export class HuiDialogSuggestCard extends LitElement { {}, true ); + if (!Object.isFrozen(this._cardConfig)) { + this._cardConfig = deepFreeze(this._cardConfig); + } if (this._dialog) { this._dialog.open(); } diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts index fcaa54af6c..3ff9faae8c 100644 --- a/src/panels/lovelace/ha-panel-lovelace.ts +++ b/src/panels/lovelace/ha-panel-lovelace.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import * as deepFreeze from "deep-freeze"; +import deepFreeze from "deep-freeze"; import { fetchConfig,