Move more button card button theming to modules

home_automation/Home-Assistant-Configs#249

admin_dashboard.yaml

@@ -354,42 +354,148 @@ views:
               - entity: automation.family_has_left
               - entity: switch.presence_simulation
               - entity: binary_sensor.front_door
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.back_door
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.basement_studio_door
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.emma_bedroom_door
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.front_window_1
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.front_window_2
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.kitchen_big_window
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.living_room_front_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.downstairs_bathroom_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.upstairs_bathroom_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.stairwell_bottom_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.emma_bedroom_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.living_room_back_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.mud_room_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.basement_studio_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.stairwell_top_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.kallen_bedroom_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.master_bedroom_motion
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: alarm_control_panel.nerdhome_alarm_panel
                 name: Nerd Home Alarm
+                state_map:
+                  disarmed: Disarmed
+                  armed_home: Armed Home
+                  armed_away: Armed Away
               - entity: binary_sensor.front_doorbell_ding_mqtt
+                state_map:
+                  'on': Ringing
+                  'off': Clear
               - entity: binary_sensor.front_doorbell_motion_mqtt
+                state_map:
+                  'on': Detected
+                  'off': Clear
               - entity: binary_sensor.stairway_window_lower
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.mud_room_window
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: input_boolean.lockdown_issue
               - entity: binary_sensor.front_window_3
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.side_window_1
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.side_window_2
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.side_window_3
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.side_window_4
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.back_window_1
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.back_window_2
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.kitchen_sink_window
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.downstairs_bathroom_window_1
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.downstairs_bathroom_window_2
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.stairway_window_upper
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: binary_sensor.upstairs_bathroom_window
+                state_map:
+                  'on': Open
+                  'off': Closed
               - entity: sensor.living_room_windows_open
                 name: Living Room Windows
       - type: grid

main_dashboard.yaml

@@ -7135,3 +7135,209 @@ views:
                       name: Sync Issue
                     - entity: input_button.basement_led_strip_reset
                       name: LED Strip Reset
+  - type: sections
+    max_columns: 4
+    title: Temp
+    path: temp
+    icon: mdi:asterisk
+    sections:
+      - type: grid
+        cards:
+          - type: heading
+            heading: Washer Controls
+            heading_style: title
+            icon: mdi:washing-machine
+          - type: custom:stack-in-card
+            cards:
+              - type: entities
+                entities:
+                  - entity: input_number.washer_cycle_length
+                    name: Cycle Length
+                  - entity: input_datetime.washer_finished
+                    name: Finished At
+                  - entity: input_boolean.washer_finished
+                    name: Cycle Finished
+                    secondary_info: Turn off after collecting laundry
+                  - type: custom:timer-bar-card
+                    filter: true
+                    show_empty: The washer is not currently running
+                    entities:
+                      - entity: timer.washer_timer
+                        sync_issues: ignore
+                        tap_action:
+                          action: none
+                        hold_action:
+                          action: more-info
+                        double_tap_action:
+                          action: none
+                        layout: hide_name
+                        modifications:
+                          - elapsed: 40%
+                            bar_foreground: orange
+                          - elapsed: 80%
+                            bar_foreground: red
+              - type: custom:stack-in-card
+                mode: horizontal
+                cards:
+                  - type: custom:button-card
+                    entity: timer.washer_timer
+                    name: []
+                    show_label: true
+                    aspect_ratio: 2.7/1
+                    styles:
+                      card:
+                        - '--mdc-ripple-color': purple
+                        - '--mdc-ripple-press-opacity': 0.5
+                    state:
+                      - value: active
+                        label: Running
+                        icon: mdi:play
+                        styles:
+                          icon:
+                            - color: green
+                      - value: paused
+                        label: Paused
+                        icon: mdi:pause
+                        styles:
+                          icon:
+                            - color: yellow
+                      - value: idle
+                        label: Start
+                        icon: mdi:play
+                    tap_action:
+                      action: call-service
+                      service: button.press
+                      service_data:
+                        entity_id: button.washer_start
+                    hold_action:
+                      action: more-info
+                      entity: timer.washer_timer
+                  - type: custom:button-card
+                    entity: timer.washer_timer
+                    name: []
+                    icon: mdi:cancel
+                    label: Cancel
+                    show_label: true
+                    aspect_ratio: 2.7/1
+                    styles:
+                      card:
+                        - '--mdc-ripple-color': purple
+                        - '--mdc-ripple-press-opacity': 0.5
+                    state:
+                      - value: active
+                        styles:
+                          icon:
+                            - color: green
+                      - value: paused
+                        styles:
+                          icon:
+                            - color: yellow
+                      - value: idle
+                    tap_action:
+                      action: call-service
+                      service: button.press
+                      service_data:
+                        entity_id: button.washer_cancel
+                    hold_action:
+                      action: more-info
+                      entity: timer.washer_timer
+      - type: grid
+        cards:
+          - type: heading
+            heading: Dryer Controls
+            heading_style: title
+            icon: mdi:tumble-dryer
+          - type: custom:stack-in-card
+            cards:
+              - type: entities
+                entities:
+                  - entity: input_number.dryer_cycle_length
+                    name: Cycle Length
+                  - entity: input_datetime.dryer_finished
+                    name: Finished At
+                  - entity: input_boolean.dryer_finished
+                    name: Cycle Finished
+                    secondary_info: Turn off after collecting laundry
+                  - type: custom:timer-bar-card
+                    filter: true
+                    show_empty: The dryer is not currently running
+                    entities:
+                      - entity: timer.dryer_timer
+                        sync_issues: ignore
+                        tap_action:
+                          action: none
+                        hold_action:
+                          action: more-info
+                        double_tap_action:
+                          action: none
+                        layout: hide_name
+                        modifications:
+                          - elapsed: 40%
+                            bar_foreground: orange
+                          - elapsed: 80%
+                            bar_foreground: red
+              - type: custom:stack-in-card
+                mode: horizontal
+                cards:
+                  - type: custom:button-card
+                    entity: timer.dryer_timer
+                    name: []
+                    show_label: true
+                    aspect_ratio: 2.7/1
+                    styles:
+                      card:
+                        - '--mdc-ripple-color': purple
+                        - '--mdc-ripple-press-opacity': 0.5
+                    state:
+                      - value: active
+                        label: Running
+                        icon: mdi:play
+                        styles:
+                          icon:
+                            - color: green
+                      - value: paused
+                        label: Paused
+                        icon: mdi:pause
+                        styles:
+                          icon:
+                            - color: yellow
+                      - value: idle
+                        label: Start
+                        icon: mdi:play
+                    tap_action:
+                      action: call-service
+                      service: button.press
+                      service_data:
+                        entity_id: button.dryer_start
+                    hold_action:
+                      action: more-info
+                      entity: timer.dryer_timer
+                  - type: custom:button-card
+                    entity: timer.dryer_timer
+                    name: []
+                    icon: mdi:cancel
+                    label: Cancel
+                    show_label: true
+                    aspect_ratio: 2.7/1
+                    styles:
+                      card:
+                        - '--mdc-ripple-color': purple
+                        - '--mdc-ripple-press-opacity': 0.5
+                    state:
+                      - value: active
+                        styles:
+                          icon:
+                            - color: green
+                      - value: paused
+                        styles:
+                          icon:
+                            - color: yellow
+                      - value: idle
+                    tap_action:
+                      action: call-service
+                      service: button.press
+                      service_data:
+                        entity_id: button.dryer_cancel
+                    hold_action:
+                      action: more-info
+                      entity: timer.dryer_timer

mobile_dashboard.yaml

@@ -25,17 +25,10 @@ streamline_templates:
           action: none
         hold_action:
           action: more-info
-      styles: |-
-        .is-unavailable {
-          opacity: 0.5 !important;
-        }
-        .bubble-button-background {
-          opacity: 1 !important;
-          background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--bubble-main-background-color)'} !important;
-          transition: background-color 1s !important;
-        }
       show_state: false
       columns: '[[columns]]'
+      modules:
+        - main_button_state_red
   main_button_name:
     default:
       - name: ''
@@ -94,30 +87,6 @@ streamline_templates:
         tap_action:
           action: navigate
           navigation_path: '[[navigation_path]]'
-      styles_javascript: |
-        const occupancy = states['[[occupancy_entity]]'].state;
-        const hot = states['[[hot_entity]]'].state;
-        const cold = states['[[cold_entity]]'].state;
-        return `
-          .is-unavailable {
-            opacity: 0.5 !important;
-          }
-          .bubble-button-background {
-            opacity: 1 !important;
-            background-color: ${
-              occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
-            } !important;
-            transition: background-color 1s !important;
-          }
-          .bubble-sub-button {
-            background: transparent
-          }
-          .bubble-sub-button-1 {
-            background-color: ${
-              hot === 'on' ? 'var(--error-color)' : cold === 'on' ? 'var(--purple-color)' : occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
-            } !important;
-          }
-        `;
       sub_button:
         - entity: '[[temp_entity]]'
           name: Temp
@@ -137,11 +106,16 @@ streamline_templates:
       modules:
         - default
         - temperature_colouring
+        - main_button_floors
       temperature_colouring:
         temperature_sensor: '[[temp_entity]]'
         elements:
           sub_buttons:
             - 1
+      main_button_floors:
+        occupancy_entity: '[[occupancy_entity]]'
+        hot_entity: '[[hot_entity]]'
+        cold_entity: '[[cold_entity]]'
   main_button_outdoors:
     defaults:
       name: ''
@@ -173,28 +147,6 @@ streamline_templates:
         tap_action:
           action: navigate
           navigation_path: '[[navigation_path]]'
-      styles_javascript: |
-        const occupancy = states['[[occupancy_entity]]'].state;
-        return `
-          .is-unavailable {
-            opacity: 0.5 !important;
-          }
-          .bubble-button-background {
-            opacity: 1 !important;
-            background-color: ${
-              occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
-            } !important;
-            transition: background-color 1s !important;
-          }
-          .bubble-sub-button {
-            background: transparent
-          }
-          .bubble-sub-button-1 {
-            background-color: ${
-              occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
-            } !important;
-          }
-        `;
       sub_button:
         - entity: '[[temp_entity]]'
           name: Temp
@@ -214,11 +166,14 @@ streamline_templates:
       modules:
         - default
         - temperature_colouring
+        - main_button_outdoors
       temperature_colouring:
         temperature_sensor: '[[temp_entity]]'
         elements:
           sub_buttons:
             - 1
+      main_button_outdoors:
+        occupancy_entity: '[[occupancy_entity]]'
   floors_separator:
     defaults:
       - name: ''
@@ -259,15 +214,9 @@ streamline_templates:
           action: none
         hold_action:
           action: none
-      styles: |-
+      modules:
-        .is-unavailable {
+        - default
-          opacity: 0.5 !important;
+        - popup_security_button
-        }
-        .bubble-button-background {
-          opacity: 1 !important;
-          background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
-          transition: background-color 1s !important;
-        }
   popup_accent_color_button:
     defaults:
       - name: ''
@@ -289,14 +238,14 @@ streamline_templates:
           action: none
         hold_action:
           action: none
-      styles: |-
+      modules:
-        .bubble-button-background {
+        - default
-          opacity: 1 !important;
+        - popup_accent_color_button
-          background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
-        }
   popup_temperature_button:
     defaults:
       - name: ''
+      - hot_entity: ''
+      - cold_entity: ''
     card:
       type: custom:bubble-card
       card_type: button
@@ -304,15 +253,12 @@ streamline_templates:
       entity: '[[entity]]'
       name: '[[name]]'
       show_attribute: false
-      styles: |
+      modules:
-        .is-unavailable {
+        - default
-          opacity: 0.5 !important;
+        - popup_temperature_button
-        }
+      popup_temperature_button:
-        .bubble-button-background {
+        hot_entity: '[[hot_entity]]'
-          opacity: 1 !important;
+        cold_entity: '[[cold_entity]]'
-          background-color: ${hass.states['[[hot_entity]]'].state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
-          transition: background-color 1s !important;
-        }
   popup_timer_card:
     defaults:
       name: ''
@@ -1272,6 +1218,8 @@ views:
                       action: toggle
                     icon: mdi:palette
                 styles: ''
+                modules:
+                  - default
               - type: custom:bubble-card
                 card_type: separator
                 name: Lights
@@ -1454,6 +1402,9 @@ views:
                     button_action:
                       double_tap_action:
                         action: none
+                    button_type: switch
+                    modules:
+                      - default
                   - type: custom:bubble-card
                     card_type: button
                     button_type: switch
@@ -1485,8 +1436,26 @@ views:
                     button_action:
                       double_tap_action:
                         action: none
+                    button_type: switch
+                    modules:
+                      - default
                   - type: custom:bubble-card
-                    card_type: empty-column
+                    card_type: button
+                    name: Recliner Mode
+                    show_state: true
+                    tap_action:
+                      action: toggle
+                    double_tap_action:
+                      action: none
+                    hold_action:
+                      action: more-info
+                    button_action:
+                      double_tap_action:
+                        action: none
+                    button_type: switch
+                    modules:
+                      - default
+                    entity: input_boolean.recliner_mode
               - type: custom:bubble-card
                 card_type: separator
                 name: Status
@@ -1521,8 +1490,8 @@ views:
                   - type: custom:streamline-card
                     template: popup_accent_color_button
                     variables:
-                      - name: Motion
+                      name: Motion
-                      - entity: binary_sensor.basement_studio_motion
+                      entity: binary_sensor.basement_studio_motion
                   - type: custom:streamline-card
                     template: popup_accent_color_button
                     variables:
@@ -4101,6 +4070,22 @@ views:
           - condition: state
             entity: input_boolean.emma_sleeping
             state: 'on'
+      - type: custom:mushroom-template-badge
+        icon: mdi:wrench-clock
+        entity: input_boolean.server_maintenance
+        color: var(--warning-color)
+        label: Server Maintenance
+        content: Interruptions Possible
+        tap_action:
+          action: none
+        hold_action:
+          action: none
+        double_tap_action:
+          action: none
+        visibility:
+          - condition: state
+            entity: input_boolean.server_maintenance
+            state: 'on'
     header:
       card:
         type: markdown