Extract brita water card into a template

config/lovelace/decluttering_templates/cards/brita_water_card.yaml

@@ -0,0 +1,49 @@
+brita_water_card:
+  card:
+    type: custom:button-card
+    template:
+      - default
+      - with_state_indicator
+    name: Brita water
+    entity: script.brita_pour_water
+    custom_fields:
+      remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]"
+    tap_action:
+      action: toggle
+    styles:
+      card:
+        - background: >
+            [[[
+              const remaining = states['input_number.brita_remaining_liters'].state;
+              const percent = 100 - (remaining / 150 * 100);
+              return 'linear-gradient(180deg, var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + percent + '%, var(--primary-color) ' + percent + '%)'
+            ]]]
+        - color: white
+      name:
+        - color: >
+            [[[
+              const remaining = states['input_number.brita_remaining_liters'].state;
+              const percent = 100 - (remaining / 150 * 100);
+
+              return percent < 75 ? 'black' : 'white';
+            ]]]
+      icon:
+        - color: >
+            [[[
+              const remaining = states['input_number.brita_remaining_liters'].state;
+              const percent = 100 - (remaining / 150 * 100);
+
+              return percent < 25 ? 'black' : 'white';
+            ]]]
+      custom_fields:
+        remaining_liters:
+          - position: absolute
+          - top: 5px
+          - right: 5px
+          - font-size: 12px
+    variables:
+      state_indicator_id: binary_sensor.brita_should_change_filter
+      state_indicator_size: 5px
+      state_indicator_off_size: 0px
+      state_indicator_on_color: var(--color-red)
+      state_on_indicator_on_color: var(--color-red)

config/lovelace/home_dashboard/kitchen_dashboard.yaml

@@ -48,31 +48,8 @@
       - type: horizontal-stack
         title: Brita
         cards:
-          - type: custom:button-card
+          - type: custom:decluttering-card
-            template: default
+            template: brita_water_card
-            name: Pour water
-            entity: script.brita_pour_water
-            custom_fields:
-              remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]"
-            tap_action:
-              action: toggle
-            styles:
-              card:
-                - background: >
-                    [[[
-                      const remaining = states['input_number.brita_remaining_liters'].state;
-                      const percent = 100 - (remaining / 150 * 100);
-                      return 'linear-gradient(180deg, var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + percent + '%, var(--primary-color) ' + percent + '%)'
-                    ]]]
-                - color: white
-              icon:
-                - color: white
-              custom_fields:
-                remaining_liters:
-                  - position: absolute
-                  - top: 5px
-                  - right: 5px
-                  - font-size: 12px
           - type: custom:button-card
             template: default
             name: New filter

config/lovelace/home_dashboard/main_dashboard.yaml

@@ -126,53 +126,8 @@
                     entity: binary_sensor.pi_hole_enabled
                     name: Pi-Hole
                     icon: mdi:pi-hole
-                  - type: custom:button-card
+                  - type: custom:decluttering-card
-                    template:
+                    template: brita_water_card
-                      - default
-                      - with_state_indicator
-                    name: Brita water
-                    entity: script.brita_pour_water
-                    custom_fields:
-                      remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]"
-                    tap_action:
-                      action: toggle
-                    styles:
-                      card:
-                        - background: >
-                            [[[
-                              const remaining = states['input_number.brita_remaining_liters'].state;
-                              const percent = 100 - (remaining / 150 * 100);
-                              return 'linear-gradient(180deg, var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + percent + '%, var(--primary-color) ' + percent + '%)'
-                            ]]]
-                        - color: white
-                      name:
-                        - color: >
-                            [[[
-                              const remaining = states['input_number.brita_remaining_liters'].state;
-                              const percent = 100 - (remaining / 150 * 100);
-
-                              return percent < 75 ? 'black' : 'white';
-                            ]]]
-                      icon:
-                        - color: >
-                            [[[
-                              const remaining = states['input_number.brita_remaining_liters'].state;
-                              const percent = 100 - (remaining / 150 * 100);
-
-                              return percent < 25 ? 'black' : 'white';
-                            ]]]
-                      custom_fields:
-                        remaining_liters:
-                          - position: absolute
-                          - top: 5px
-                          - right: 5px
-                          - font-size: 12px
-                    variables:
-                      state_indicator_id: binary_sensor.brita_should_change_filter
-                      state_indicator_size: 5px
-                      state_indicator_off_size: 0px
-                      state_indicator_on_color: var(--color-red)
-                      state_on_indicator_on_color: var(--color-red)
 
       # Column 2
       - type: vertical-stack