From d738f6e2f6db5b2408509b804961e3f7e1c3a1c4 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Sun, 13 Jan 2019 08:34:03 +0100 Subject: [PATCH] Rebuild just the card instead of entire view (#2452) * Rebuild just the card instead of entire view * Only rebuild card, not view --- .../lovelace/common/create-card-element.ts | 2 +- .../lovelace/common/create-hui-element.ts | 2 +- .../lovelace/common/create-row-element.ts | 2 +- src/panels/lovelace/hui-root.ts | 9 +---- src/panels/lovelace/hui-view.ts | 34 ++++++++++++++++--- src/panels/lovelace/types.ts | 7 ++++ 6 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/panels/lovelace/common/create-card-element.ts b/src/panels/lovelace/common/create-card-element.ts index 0b7c18a562..f10d5bd9b5 100644 --- a/src/panels/lovelace/common/create-card-element.ts +++ b/src/panels/lovelace/common/create-card-element.ts @@ -106,7 +106,7 @@ export const createCardElement = ( customElements.whenDefined(tag).then(() => { clearTimeout(timer); - fireEvent(element, "rebuild-view"); + fireEvent(element, "ll-rebuild"); }); return element; diff --git a/src/panels/lovelace/common/create-hui-element.ts b/src/panels/lovelace/common/create-hui-element.ts index eac2082a3d..8b15a4fec1 100644 --- a/src/panels/lovelace/common/create-hui-element.ts +++ b/src/panels/lovelace/common/create-hui-element.ts @@ -72,7 +72,7 @@ export const createHuiElement = ( customElements.whenDefined(tag).then(() => { clearTimeout(timer); - fireEvent(element, "rebuild-view"); + fireEvent(element, "ll-rebuild"); }); return element; diff --git a/src/panels/lovelace/common/create-row-element.ts b/src/panels/lovelace/common/create-row-element.ts index a2bc40f8d0..8afa9aefc8 100644 --- a/src/panels/lovelace/common/create-row-element.ts +++ b/src/panels/lovelace/common/create-row-element.ts @@ -115,7 +115,7 @@ export const createRowElement = ( customElements.whenDefined(tag).then(() => { clearTimeout(timer); - fireEvent(element, "rebuild-view"); + fireEvent(element, "ll-rebuild"); }); return element; diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 313a628fa6..5fa119540f 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -50,13 +50,6 @@ import { afterNextRender } from "../../common/util/render-status"; const CSS_CACHE = {}; const JS_CACHE = {}; -declare global { - // tslint:disable-next-line - interface HASSDomEvents { - "rebuild-view": {}; - } -} - let loadedUnusedEntities = false; class HUIRoot extends hassLocalizeLitMixin(LitElement) { @@ -298,7 +291,7 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
+ })}" @ll-rebuild='${this._debouncedConfigChanged}'> `; } diff --git a/src/panels/lovelace/hui-view.ts b/src/panels/lovelace/hui-view.ts index b830a2d05b..b9caadf627 100644 --- a/src/panels/lovelace/hui-view.ts +++ b/src/panels/lovelace/hui-view.ts @@ -14,13 +14,14 @@ import { HaStateLabelBadge } from "../../components/entity/ha-state-label-badge" import applyThemesOnElement from "../../common/dom/apply_themes_on_element"; import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin"; -import { LovelaceViewConfig } from "../../data/lovelace"; +import { LovelaceViewConfig, LovelaceCardConfig } from "../../data/lovelace"; import { HomeAssistant } from "../../types"; import { Lovelace, LovelaceCard } from "./types"; import { createCardElement } from "./common/create-card-element"; import { computeCardSize } from "./common/compute-card-size"; import { showEditCardDialog } from "./editor/card-editor/show-edit-card-dialog"; +import { HuiErrorCard } from "./cards/hui-error-card"; let editCodeLoaded = false; @@ -47,7 +48,7 @@ export class HUIView extends hassLocalizeLitMixin(LitElement) { public lovelace?: Lovelace; public columns?: number; public index?: number; - private _cards: LovelaceCard[]; + private _cards: Array; private _badges: Array<{ element: HaStateLabelBadge; entityId: string }>; static get properties(): PropertyDeclarations { @@ -239,8 +240,7 @@ export class HUIView extends hassLocalizeLitMixin(LitElement) { const elements: LovelaceCard[] = []; const elementsToAppend: HTMLElement[] = []; config.cards.forEach((cardConfig, cardIndex) => { - const element = createCardElement(cardConfig) as LovelaceCard; - element.hass = this.hass; + const element = this._createCardElement(cardConfig); elements.push(element); if (!this.lovelace!.editMode) { @@ -287,6 +287,32 @@ export class HUIView extends hassLocalizeLitMixin(LitElement) { applyThemesOnElement(root, this.hass!.themes, config.theme); } } + + private _createCardElement(cardConfig: LovelaceCardConfig) { + const element = createCardElement(cardConfig) as LovelaceCard; + element.hass = this.hass; + element.addEventListener( + "ll-rebuild", + (ev) => { + // In edit mode let it go to hui-root and rebuild whole view. + if (!this.lovelace!.editMode) { + ev.stopPropagation(); + this._rebuildCard(element, cardConfig); + } + }, + { once: true } + ); + return element; + } + + private _rebuildCard( + element: LovelaceCard, + config: LovelaceCardConfig + ): void { + const newCard = this._createCardElement(config); + element.parentElement!.replaceChild(newCard, element); + this._cards = this._cards.splice(this._cards.indexOf(element), 1, newCard); + } } declare global { diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index db3f7af72b..bf394921b2 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -1,6 +1,13 @@ import { HomeAssistant } from "../../types"; import { LovelaceCardConfig, LovelaceConfig } from "../../data/lovelace"; +declare global { + // tslint:disable-next-line + interface HASSDomEvents { + "ll-rebuild": {}; + } +} + export interface Lovelace { config: LovelaceConfig; editMode: boolean;