From 864f2619a22d3aaf7a643d085dbe34006e0e60ba Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sun, 13 Jan 2019 23:49:11 +0100
Subject: [PATCH] Rebuild card instead of entire stack (#2467)

---
 src/panels/lovelace/cards/hui-stack-card.ts | 41 +++++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 0c6e35e257..4a08f32294 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -11,10 +11,6 @@ interface Config extends LovelaceCardConfig {
 }
 
 export abstract class HuiStackCard extends LitElement implements LovelaceCard {
-  protected _cards?: LovelaceCard[];
-  private _config?: Config;
-  private _hass?: HomeAssistant;
-
   static get properties() {
     return {
       _config: {},
@@ -32,6 +28,9 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
       element.hass = this._hass;
     }
   }
+  protected _cards?: LovelaceCard[];
+  private _config?: Config;
+  private _hass?: HomeAssistant;
 
   public abstract getCardSize(): number;
 
@@ -41,10 +40,7 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
     }
     this._config = config;
     this._cards = config.cards.map((card) => {
-      const element = createCardElement(card) as LovelaceCard;
-      if (this._hass) {
-        element.hass = this._hass;
-      }
+      const element = this._createCardElement(card) as LovelaceCard;
       return element;
     });
   }
@@ -61,4 +57,33 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
   }
 
   protected abstract renderStyle(): TemplateResult;
+
+  private _createCardElement(cardConfig: LovelaceCardConfig) {
+    const element = createCardElement(cardConfig) as LovelaceCard;
+    if (this._hass) {
+      element.hass = this._hass;
+    }
+    element.addEventListener(
+      "ll-rebuild",
+      (ev) => {
+        ev.stopPropagation();
+        this._rebuildCard(element, cardConfig);
+      },
+      { once: true }
+    );
+    return element;
+  }
+
+  private _rebuildCard(
+    element: LovelaceCard,
+    config: LovelaceCardConfig
+  ): void {
+    const newCard = this._createCardElement(config);
+    element.replaceWith(newCard);
+    this._cards = this._cards!.splice(
+      this._cards!.indexOf(element),
+      1,
+      newCard
+    );
+  }
 }