Merge pull request #540 from flixlix/fix-individual-colors-does-not-h…

…ave-field fix: 🐛 individual colors when does not have field
flixlix · Apr 14, 2024 · 4625dc1 · 4625dc1
2 parents 8f8e440 + 19b2494
commit 4625dc1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 33 deletions.
diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
@@ -68,7 +68,7 @@ export const individualLeftBottomElement = (
         .icon=${individualObj?.icon}
       ></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
-        ? html` <span class="individual-bottom individual-left-top"
+        ? html` <span class="individual-bottom individual-left-bottom"
             >${individualObj?.showDirection
               ? html`<ha-icon class="small" .icon=${individualObj?.invertAnimation ? "mdi:arrow-up" : "mdi:arrow-down"}></ha-icon>`
               : ""}${displayState}

diff --git a/src/style/all.ts b/src/style/all.ts
@@ -223,47 +223,37 @@ export const allDynamicStyles = (
   if (individual?.some((ind) => ind.has)) {
     const getStylesForIndividual = (field: IndividualDeviceType, index: number) => {
       const colors = ["#d0cc5b", "#964cb5", "#b54c9d", "#5bd0cc"];
-      const getFieldName = (index: number) => {
-        switch (index) {
-          case 0:
-            return "left-top";
-          case 1:
-            return "left-bottom";
-          case 2:
-            return "right-top";
-          case 3:
-            return "right-bottom";
-          default:
-            return "left-top";
-        }
-      };
+      const fieldNames: string[] = ["left-top", "left-bottom", "right-top", "right-bottom"];
 
-      const fieldName = getFieldName(index);
+
+      if(!fieldNames?.[index]) {
+        console.log('\x1b[41m%s\x1b[0m', 'src/style/all.ts:230 field, index', field, index);
+      }
+      const fieldName = fieldNames?.[index] || "left-top";
 
       let individualColor = field?.color;
       if (typeof individualColor === "object") individualColor = convertColorListToHex(individualColor);
       main.style.setProperty(`--individual-${fieldName}-color`, individualColor || colors[index] || "#d0cc5b");
 
-      // Individual 1
-
-      if (individual?.[index] !== undefined) {
-        main.style.setProperty(
-          `--icon-individual-${fieldName}-color`,
-          field?.color_icon !== false ? `var(--individual-${fieldName}-color)` : `var(--primary-text-color)`
-        );
-        main.style.setProperty(
-          `--text-individual-${fieldName}-color`,
-          field?.color_value ? `var(--individual-${fieldName}-color)` : `var(--primary-text-color)`
-        );
-        main.style.setProperty(
-          `--secondary-text-individual-${fieldName}-color`,
-          field?.secondary_info?.color_value ? `var(--individual-${fieldName}-color)` : `var(--primary-text-color)`
-        );
-      }
+      main.style.setProperty(
+        `--icon-individual-${fieldName}-color`,
+        field?.color_icon !== false ? `var(--individual-${fieldName}-color)` : `var(--primary-text-color)`
+      );
+      main.style.setProperty(
+        `--text-individual-${fieldName}-color`,
+        field?.color_value ? `var(--individual-${fieldName}-color)` : `var(--primary-text-color)`
+      );
+      main.style.setProperty(
+        `--secondary-text-individual-${fieldName}-color`,
+        field?.secondary_info?.color_value ? `var(--individual-${fieldName}-color)` : `var(--primary-text-color)`
+      );
     };
 
+    let individualIndex = 0;
     individual.forEach((_, index) => {
-      getStylesForIndividual(entities.individual[index], index);
+      if (!individual[index].has) return;
+      getStylesForIndividual(entities.individual[index], individualIndex);
+      individualIndex++;
     });
   }
 };