Update icon border progress to 1.7.0 - multi configuration support

Author: lsmarsden

modules/icon_border_progress/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+### v1.7.0
+
+<details><summary>See Changes</summary>
+
+- Added ability to define multiple configurations for the same button.
+Define separate configuration blocks with conditions, and the configuration matching the condition will be used.
+If multiple configurations match, the first one in the list will be used.
+</details>
+
 ### v1.6.0
 
 <details><summary>See Changes</summary>

modules/icon_border_progress/README.md

@@ -242,6 +242,38 @@ icon_border_progress:
 
   </details>
 
+  <details>
+    <summary><strong>Conditional configurations for the same button</strong></summary>
+
+This example shows two different configurations for the same button, based on the battery level of a device.
+If multiple configuration conditions match, the first matching configuration in the list will be used.
+
+```yaml
+icon_border_progress:
+  - button: main
+    source: sensor.robo_vac[battery_level]
+    condition:
+      condition: "state",
+      entity_id: "vacuum.robo_vac",
+      state: "docked",
+    color_stops:
+      - percent: 0
+        color: "red"
+      - percent: 100
+        color: "green"
+  - button: main
+    source: sensor.robo_vac[cleaning_progress]
+    condition:
+      condition: "state",
+      entity_id: "vacuum.robo_vac",
+      state: "cleaning",
+    color_stops:
+      - percent: 0
+        color: "blue"
+```
+
+  </details>
+
 ## Install this module
 
 1. Install [Bubble Card](https://github.com/Clooos/Bubble-Card) in Home Assistant if you haven't already.

modules/icon_border_progress/__tests__/integration.test.js

@@ -93,7 +93,7 @@ describe("icon_border_progress - Integration Tests", () => {
         {
           button: "main",
           source: "sensor.progress",
-          background_color: "#333333",
+          background_color: "rgb(51, 51, 51)",
           condition: [
             {
               condition: "state",
@@ -126,7 +126,7 @@ describe("icon_border_progress - Integration Tests", () => {
       expect(progressStrokeDashArray).toBeTruthy();
 
       // Verify background styling is applied
-      expect(mainIcon.style.background).toBeTruthy();
+      expect(mainIcon.style.background).toBe("rgb(51, 51, 51)");
 
       // Setup - Change condition to false
       mockHass.states["sensor.enable_progress"] = { state: "off" };
@@ -142,6 +142,67 @@ describe("icon_border_progress - Integration Tests", () => {
       expect(mainIcon.style.background).toBe(mainIcon.dataset.originalBackground || "");
     });
 
+    // https://github.com/lsmarsden/bubble-card-modules/issues/1#issuecomment-3102650787
+    it("should apply first condition matching when multiple button configs are defined", () => {
+      // Setup - Real YAML configuration with actual condition
+      mockThis.config.icon_border_progress = [
+        {
+          button: "main",
+          source: "sensor.progress",
+          background_color: "rgb(255, 0, 0)",
+          condition: [
+            {
+              condition: "state",
+              entity_id: "sensor.enable_progress",
+              state: "off",
+            },
+          ],
+        },
+        {
+          button: "main",
+          source: "sensor.progress",
+          background_color: "rgb(0, 255, 0)",
+          condition: [
+            {
+              condition: "state",
+              entity_id: "sensor.enable_progress",
+              state: "on",
+            },
+          ],
+        },
+        {
+          button: "main",
+          source: "sensor.progress",
+          background_color: "rgb(0, 0, 255)",
+          condition: [
+            {
+              condition: "state",
+              entity_id: "sensor.enable_progress",
+              state: "on",
+            },
+          ],
+        },
+      ];
+      mockHass.states["sensor.progress"] = { state: "75" };
+      mockHass.states["sensor.enable_progress"] = { state: "off" };
+
+      // exercise - call with state off
+      icon_border_progress.call(mockThis, mockCard, mockHass);
+
+      // verify
+      const mainIcon = mockCard.querySelector(".bubble-icon-container");
+      expect(mainIcon.style.background).toBe("rgb(255, 0, 0)");
+
+      // set up - change condition to on
+      mockHass.states["sensor.enable_progress"] = { state: "on" };
+
+      // exercise - call with state on
+      icon_border_progress.call(mockThis, mockCard, mockHass);
+
+      // verify first matching condition should apply
+      expect(mainIcon.style.background).toBe("rgb(0, 255, 0)");
+    });
+
     it("should handle rapid condition state changes correctly", () => {
       // Setup - Configuration with numeric condition
       mockThis.config.icon_border_progress = [

modules/icon_border_progress/code.js

@@ -85,18 +85,33 @@ export function icon_border_progress(card, hass) {
     applyProgressStyling(buttonElement, adjustedProgress, progressColor, colors, buttonConfig);
   }
 
-  // Main processing loop
-  toArray(config).forEach((buttonConfig) => {
-    const button = buttonConfig.button;
-    if (!button) return;
+  // group button configs by button name
+  function groupByButton(configArray) {
+    return configArray.reduce((groups, buttonConfig) => {
+      const button = buttonConfig.button;
+      if (!button) return groups;
+
+      if (!groups.has(button)) {
+        groups.set(button, []);
+      }
+      groups.get(button).push(buttonConfig);
+      return groups;
+    }, new Map());
+  }
 
+  // Main processing loop
+  groupByButton(toArray(config)).forEach((buttonConfigs, button) => {
     const selector = getElementSelector(button);
     const buttonElement = card.querySelector(selector);
     if (!buttonElement) return;
 
     storeOriginalBackground(buttonElement);
 
-    if (!checkAllConditions(buttonConfig.condition)) {
+    // Find the first configuration with matching conditions
+    const matchingConfig = buttonConfigs.find((config) => checkAllConditions(config.condition));
+
+    if (!matchingConfig) {
+      // No matching conditions found, cleanup styling
       cleanupProgressStyling(buttonElement);
       const updateIntervalId = buttonElement.dataset.progress_update_interval;
       if (updateIntervalId) {
@@ -108,20 +123,20 @@ export function icon_border_progress(card, hass) {
 
     const progressSource = resolveConfig([
       {
-        config: buttonConfig,
+        config: matchingConfig,
         path: "source",
       },
       {
-        config: buttonConfig,
+        config: matchingConfig,
         path: "entity",
         metadata: { deprecated: true, replacedWith: "source" },
       },
     ]);
 
     manageTimerUpdater(buttonElement, progressSource, () => {
-      updateProgressDisplay(progressSource, buttonConfig, buttonElement);
+      updateProgressDisplay(progressSource, matchingConfig, buttonElement);
     });
-    updateProgressDisplay(progressSource, buttonConfig, buttonElement);
-    applyEffects(buttonElement, buttonConfig.effects || []);
+    updateProgressDisplay(progressSource, matchingConfig, buttonElement);
+    applyEffects(buttonElement, matchingConfig.effects || []);
   });
 }

modules/icon_border_progress/module.yaml

@@ -1,7 +1,7 @@
 module_info:
   id: icon_border_progress
   name: Icon Border Progress
-  version: 1.6.0
+  version: 1.7.0
   creator: lsmarsden
   link: >-
     https://github.com/lsmarsden/bubble-card-modules/tree/main/icon_border_progress