From 0c509670fdd9355cb33e741d0d8c2d8c2cb1290e Mon Sep 17 00:00:00 2001
From: Viet Ngoc <ngocjohn@me.com>
Date: Wed, 28 Aug 2024 18:32:19 +0200
Subject: [PATCH] refactor: add update hass on state change for custom cards

---
 src/vehicle-info-card.ts | 96 ++++++++++++++++++++++------------------
 1 file changed, 53 insertions(+), 43 deletions(-)

diff --git a/src/vehicle-info-card.ts b/src/vehicle-info-card.ts
index 3a8aa46..4f15c98 100644
--- a/src/vehicle-info-card.ts
+++ b/src/vehicle-info-card.ts
@@ -51,8 +51,6 @@ import {
   defaultConfig,
   getCarEntity,
 } from './utils/ha-helpers';
-import { languages } from './localize/languageImports';
-import { imageOverlay } from 'leaflet';
 
 const HELPERS = (window as any).loadCardHelpers ? (window as any).loadCardHelpers() : undefined;
 
@@ -67,10 +65,10 @@ export class VehicleCard extends LitElement implements LovelaceCard {
   @property({ type: Object }) private config!: VehicleCardConfig;
   @property({ type: Boolean }) public editMode = false;
   @property({ type: Boolean }) loading = true;
+  @property() public additionalCards: { [key: string]: any[] } = {};
 
   @state() private selectedTheme!: string;
   @state() private vehicleEntities: VehicleEntities = {};
-  @state() private additionalCards: { [key: string]: any[] } = {};
   @state() private customButtons: { [key: string]: any[] } = {};
   @state() private activeCardType: string | null = null;
   @state() private ecoScoresVisible!: boolean;
@@ -121,31 +119,6 @@ export class VehicleCard extends LitElement implements LovelaceCard {
     this.applyTheme(this.selectedTheme);
   }
 
-  private getGridRowSize(): number {
-    const { show_slides, show_map, show_buttons } = this.config;
-
-    let gridRowSize = 2;
-    if (show_slides) gridRowSize += 2;
-    if (show_map) gridRowSize += 2;
-    if (show_buttons) gridRowSize += 2;
-    return gridRowSize;
-  }
-
-  public getCardSize() {
-    // console.log('mansory', this.getGridRowSize());
-    return 3;
-  }
-
-  public getLayoutOptions() {
-    const gridRowSize = this.getGridRowSize();
-    console.log('sections', gridRowSize);
-    return {
-      grid_min_rows: gridRowSize,
-      grid_columns: 4,
-      grid_min_columns: 4,
-    };
-  }
-
   private configureCustomCards(): void {
     const lang = this.selectedLanguage;
 
@@ -175,6 +148,46 @@ export class VehicleCard extends LitElement implements LovelaceCard {
     }
   }
 
+  private async createCards(cardConfigs: LovelaceCardConfig[], stateProperty: string): Promise<void> {
+    if (HELPERS) {
+      const helpers = await HELPERS;
+      const cards = await Promise.all(
+        cardConfigs.map(async (cardConfig) => {
+          const element = await helpers.createCardElement(cardConfig);
+          element.hass = this.hass;
+          return element;
+        })
+      );
+      this.additionalCards[stateProperty] = cards;
+    }
+    this.requestUpdate();
+  }
+
+  private getGridRowSize(): number {
+    const { show_slides, show_map, show_buttons } = this.config;
+
+    let gridRowSize = 2;
+    if (show_slides) gridRowSize += 2;
+    if (show_map) gridRowSize += 2;
+    if (show_buttons) gridRowSize += 2;
+    return gridRowSize;
+  }
+
+  public getCardSize() {
+    // console.log('mansory', this.getGridRowSize());
+    return 3;
+  }
+
+  public getLayoutOptions() {
+    const gridRowSize = this.getGridRowSize();
+    console.log('sections', gridRowSize);
+    return {
+      grid_min_rows: gridRowSize,
+      grid_columns: 4,
+      grid_min_columns: 4,
+    };
+  }
+
   private async configureAsync(): Promise<void> {
     this.selectedTheme = this.config.selected_theme?.theme || 'Default';
     if (this.config.selected_language && this.config.selected_language === 'system') {
@@ -222,7 +235,6 @@ export class VehicleCard extends LitElement implements LovelaceCard {
         this.customNotify = customNotify;
       }
     }
-    this.requestUpdate();
   }
 
   // https://lit.dev/docs/components/styles/
@@ -254,20 +266,6 @@ export class VehicleCard extends LitElement implements LovelaceCard {
     super.disconnectedCallback();
   }
 
-  private async createCards(cardConfigs: LovelaceCardConfig[], stateProperty: string): Promise<void> {
-    if (HELPERS) {
-      const helpers = await HELPERS;
-      const cards = await Promise.all(
-        cardConfigs.map(async (cardConfig) => {
-          const element = await helpers.createCardElement(cardConfig);
-          element.hass = this.hass;
-          return element;
-        })
-      );
-      this.additionalCards[stateProperty] = cards;
-    }
-  }
-
   private createCustomButtons(buttonConfigs: ButtonConfigItem | ButtonConfigItem[], stateProperty: string) {
     const btn = Array.isArray(buttonConfigs)
       ? buttonConfigs.map((config) => ({ ...config, type: stateProperty }))
@@ -295,6 +293,18 @@ export class VehicleCard extends LitElement implements LovelaceCard {
         eletricBar.classList.remove('show-after');
       }
     }
+    //update hass on custom cards
+    if (changedProps.has('hass')) {
+      this._updateHassOnCards();
+    }
+  }
+
+  private _updateHassOnCards(): void {
+    Object.keys(this.additionalCards).forEach((stateProperty) => {
+      this.additionalCards[stateProperty].forEach((card) => {
+        card.hass = this.hass;
+      });
+    });
   }
 
   // https://lit.dev/docs/components/lifecycle/#reactive-update-cycle-performing