From 91a328058f62ea678b1c65ff558f48592a84253d Mon Sep 17 00:00:00 2001
From: Tony Stork <tm24fan8@gmail.com>
Date: Mon, 7 Jul 2025 21:58:15 -0400
Subject: [PATCH] Use new popup timer bubble card module

---
 mobile_dashboard.yaml | 96 ++-----------------------------------------
 1 file changed, 3 insertions(+), 93 deletions(-)

diff --git a/mobile_dashboard.yaml b/mobile_dashboard.yaml
index 45c5d7d..0322f0e 100644
--- a/mobile_dashboard.yaml
+++ b/mobile_dashboard.yaml
@@ -310,99 +310,9 @@ streamline_templates:
               perform_action: timer.finish
               target:
                 entity_id: '[[entity]]'
-        styles: |
-          :host{
-            --circle-color: var(--bubble-accent-color, var(--accent-color));
-            --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");
-            }
-          })()}
+        modules:
+          - default
+          - popup_timer_card
 views:
   - title: Home
     path: home