Add testing view to mobile dashboard

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: ''
@@ -364,99 +310,9 @@ streamline_templates:
               perform_action: timer.finish
               target:
                 entity_id: '[[entity]]'
-        styles: |
+        modules:
-          :host{
+          - default
-            --circle-color: var(--bubble-accent-color, var(--accent-color));
+          - popup_timer_card
-            --percentage: ${(() => {
-              card.timerEntity = hass.states[entity];
-              const now = new Date();
-              const endTime = new Date(card.timerEntity.attributes.finishes_at); 
-              const runningTime = Math.round((endTime - now) / 1000);
-              const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
-              const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);
-
-              var percentage = 0;
-              if (isNaN(runningTime)) {
-                percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
-              } else {
-                percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
-              }
-              
-              if (isNaN(percentage)) {
-                return "0%";
-              } else {
-                return "" + percentage +"%";
-              }
-            })()};
-          }
-          .bubble-icon-container {
-            background: radial-gradient(
-                var(--card-background-color) 60%,
-                transparent 0%
-              ), conic-gradient(
-                var(--circle-color) var(--percentage) 0%,
-                var(--card-background-color) 0% 100%
-              ) !important;
-          }
-          .bubble-icon-container:after {
-            content: "" !important;
-            height: 100% !important;
-            width: 100% !important;
-            position: absolute !important;
-            border-radius: 50% !important;
-            background: (var(--bubble-button-icon-background-color), 0.1) !important;
-          }
-          ${(() => {
-            function UpdateState(){
-              try {
-                    let now = new Date(); 
-                    let endTime = new Date(card.timerEntity.attributes.finishes_at); 
-                    let runningTime = Math.round((endTime - now)/1000);
-                    let hours = Math.floor(runningTime / 3600);
-                    let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
-                    let remainingSeconds = runningTime % 60;
-                    
-                    card.querySelector('.bubble-state').innerText =
-                        (hours > 0 ? (hours + ":") : "") +
-                        ("0" + minutes).slice(-2) + ":" +
-                        ("0" + remainingSeconds).slice(-2);
-
-                  } catch (error) {
-                    card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
-                  }
-            };
-            
-            if (card.timer == null && card.timerEntity.state === 'active') {
-              card.timer = setInterval(()=>{UpdateState()}, 500);
-            }else if (card.timerEntity.state != 'active'){
-              clearInterval(card.timer);
-              card.timer = null;
-              if (card.timerEntity.state !='paused') {
-                  card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
-                } else if(card.timerEntity.state==='paused') {
-                  card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
-              }
-            }
-          })()}
-
-          ${(() => {
-            subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
-          })()}
-          ${(() => {
-            if (card.timerEntity.state != 'active') {
-              card.querySelector('.bubble-sub-button-2').classList.add("hidden");
-            }
-          })()}
-          ${(() => {
-            if (card.timerEntity.state === 'idle') {
-              card.querySelector('.bubble-sub-button-3').classList.add("hidden");
-            }
-          })()}
-          ${(() => {
-            if (card.timerEntity.state === 'idle') {
-              card.querySelector('.bubble-sub-button-4').classList.add("hidden");
-            }
-          })()}
 views:
   - title: Home
     path: home
@@ -5987,4 +5843,17 @@ views:
     cards: []
     badges: []
     subview: true
+  - type: sections
+    max_columns: 4
+    title: Test
+    path: test
+    icon: mdi:test-tube
+    subview: true
+    visible:
+      - user: c3909d27048140729f002aaef0391775
+    sections:
+      - type: grid
+        cards:
+          - type: heading
+            heading: New section
 title: ''