diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index 5ed9dcd1e3..9a178f22d4 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -21,6 +21,8 @@ import { PictureElementsCardConfig } from "./types"; class HuiPictureElementsCard extends LitElement implements LovelaceCard { @property() public hass?: HomeAssistant; + @property() private _elements?: LovelaceElement[]; + public static getStubConfig( hass: HomeAssistant, entities: string[], @@ -70,6 +72,14 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { } this._config = config; + + this._elements = this._config.elements.map( + (elementConfig: LovelaceElementConfig) => { + const element = createStyledHuiElement(elementConfig); + element.hass = this.hass; + return element as LovelaceElement; + } + ); } protected updated(changedProps: PropertyValues): void { @@ -78,11 +88,8 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { return; } - if (changedProps.has("hass")) { - for (const el of Array.from( - this.shadowRoot!.querySelectorAll("#root > *") - )) { - const element = el as LovelaceElement; + if (this._elements && changedProps.has("hass")) { + for (const element of this._elements) { element.hass = this.hass; } } @@ -120,14 +127,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { .entity=${this._config.entity} .aspectRatio=${this._config.aspect_ratio} > - ${this._config.elements.map( - (elementConfig: LovelaceElementConfig) => { - const element = createStyledHuiElement(elementConfig); - element.hass = this.hass; - - return element; - } - )} + ${this._elements} `; diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index ce16ff300a..b9ae0b4503 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -88,15 +88,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { this._config = config; } - public connectedCallback(): void { - super.connectedCallback(); - this.rescale_svg(); - } - - protected firstUpdated(): void { - this.rescale_svg(); - } - protected render(): TemplateResult { if (!this.hass || !this._config) { return html``; @@ -165,7 +156,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { ${ - this._setTemp === undefined || this._setTemp === null + stateObj.state === UNAVAILABLE + ? this.hass.localize("state.default.unavailable") + : this._setTemp === undefined || this._setTemp === null ? "" : Array.isArray(this._setTemp) ? this._stepSize === 1 @@ -255,12 +248,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { } protected shouldUpdate(changedProps: PropertyValues): boolean { + if (changedProps.has("_setTemp")) { + return true; + } return hasConfigOrEntityChanged(this, changedProps); } protected updated(changedProps: PropertyValues): void { super.updated(changedProps); + if (changedProps.has("_setTemp")) { + this.rescale_svg(); + } + if ( !this._config || !this.hass || @@ -287,8 +287,16 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { if (!stateObj) { return; } - this._setTemp = this._getSetTemp(stateObj); - this.rescale_svg(); + const newTemp = this._getSetTemp(stateObj); + if ( + Array.isArray(this._setTemp) && + Array.isArray(newTemp) && + (this._setTemp[0] !== newTemp[0] || this._setTemp[1] !== newTemp[1]) + ) { + this._setTemp = newTemp; + } else if (this._setTemp !== newTemp) { + this._setTemp = newTemp; + } } private rescale_svg() { @@ -322,9 +330,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { return this.hass!.config.unit_system.temperature === UNIT_F ? 1 : 0.5; } - private _getSetTemp(stateObj: HassEntity) { + private _getSetTemp( + stateObj: HassEntity + ): undefined | number | [number, number] { if (stateObj.state === UNAVAILABLE) { - return this.hass!.localize("state.default.unavailable"); + return undefined; } if ( diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 3b1ba96e00..e25f870708 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -633,17 +633,16 @@ class HUIRoot extends LitElement { if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) { view = document.createElement("hui-panel-view"); view.config = viewConfig; - view.lovelace = this.lovelace; view.index = viewIndex; } else { view = document.createElement("hui-view"); - view.lovelace = this.lovelace; view.columns = this.columns; view.index = viewIndex; } this._viewCache![viewIndex] = view; } + view.lovelace = this.lovelace; view.hass = this.hass; const configBackground = viewConfig.background || this.config.background; diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index f09529e1c0..a2a986a2db 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -157,7 +157,7 @@ export class HUIView extends LitElement { if (configChanged) { this._createCards(lovelace.config.views[this.index!]); } else if (editModeChanged || changedProperties.has("columns")) { - this._recreateColumns(); + this._createColumns(); } if (hassChanged && !configChanged) { @@ -217,10 +217,6 @@ export class HUIView extends LitElement { root.style.display = elements.length > 0 ? "block" : "none"; } - private async _recreateColumns() { - this._createColumns(); - } - private _createColumns() { this._createColumnsIteration++; const iteration = this._createColumnsIteration;