no message

Energy_Pie/module.html

@@ -1,5 +1,4 @@
 <div style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
-
   <!-- Controls -->
   <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
     <label style="display:flex;gap:6px;align-items:center;">
@@ -25,14 +24,17 @@
   <div id="period" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
   <div id="hint" style="margin-top:6px;font-size:12px;opacity:0.8;"></div>
 
-  <!-- 2 Donuts -->
   <div id="grid"
        style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
               gap:14px;max-width:880px;">
   </div>
+
+  <!-- Fehler/Status sichtbar machen (damit es nicht einfach "leer" ist) -->
+  <div id="err" style="margin-top:10px;font-size:12px;opacity:0.8;color:#ffb4b4;"></div>
 </div>
 
 <script>
+(function () {
   const elRange  = document.getElementById('range');
   const elDate   = document.getElementById('date');
   const elPrev   = document.getElementById('prev');
@@ -41,22 +43,27 @@
   const elPeriod = document.getElementById('period');
   const elHint   = document.getElementById('hint');
   const elGrid   = document.getElementById('grid');
+  const elErr    = document.getElementById('err');
 
-  // Trigger sofort bei Änderung
+  // --- helpers ---
-  elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
+  function toNum(x) {
-
+    const n = Number(x);
-  let dateTimer = null;
+    return Number.isFinite(n) ? n : 0;
-  function pushDateNow() {
+  }
-    if (dateTimer) clearTimeout(dateTimer);
+  function clamp01(x) {
-    dateTimer = setTimeout(() => requestAction('SetDate', elDate.value), 80);
+    if (!Number.isFinite(x)) return 0;
+    if (x < 0) return 0;
+    if (x > 1) return 1;
+    return x;
+  }
+  function escapeHtml(s) {
+    return String(s)
+      .replaceAll('&','&amp;')
+      .replaceAll('<','&lt;')
+      .replaceAll('>','&gt;')
+      .replaceAll('"','&quot;')
+      .replaceAll("'",'&#039;');
   }
-  elDate.addEventListener('input',  pushDateNow);
-  elDate.addEventListener('change', pushDateNow);
-
-  elPrev.addEventListener('click',  () => requestAction('Prev', 1));
-  elToday.addEventListener('click', () => requestAction('Today', 1));
-  elNext.addEventListener('click',  () => requestAction('Next', 1));
-
   function fmtDateTime(d) {
     const yyyy = d.getFullYear();
     const mm = String(d.getMonth() + 1).padStart(2,'0');
@@ -66,31 +73,42 @@
     return `${dd}.${mm}.${yyyy} ${hh}:${mi}`;
   }
 
-  function escapeHtml(s) {
+  // --- make requestAction safe (wait until available) ---
-    return String(s)
+  function safeRequestAction(ident, value) {
-      .replaceAll('&','&amp;')
+    const tryCall = () => {
-      .replaceAll('<','&lt;')
+      if (typeof requestAction === 'function') {
-      .replaceAll('>','&gt;')
+        try { requestAction(ident, value); } catch (e) { showErr(e); }
-      .replaceAll('"','&quot;')
+        return true;
-      .replaceAll("'",'&#039;');
+      }
+      return false;
+    };
+
+    if (tryCall()) return;
+
+    // retry a few times (fullscreen reload timing)
+    let tries = 0;
+    const timer = setInterval(() => {
+      tries++;
+      if (tryCall() || tries >= 25) clearInterval(timer);
+    }, 120);
   }
 
-  function toNum(x) {
+  function safeRefreshSoon() {
-    const n = Number(x);
+    setTimeout(() => safeRequestAction('Refresh', 1), 150);
-    return Number.isFinite(n) ? n : 0;
   }
 
-  function clamp01(x) {
+  function showErr(e) {
-    if (!Number.isFinite(x)) return 0;
+    const msg = (e && e.message) ? e.message : String(e);
-    if (x < 0) return 0;
+    elErr.textContent = 'JS-Fehler: ' + msg;
-    if (x > 1) return 1;
-    return x;
   }
 
+  // Global error trap (damit wir sehen, wenn’s crasht)
+  window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
+  window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
+
+  // --- donut card ---
   function donutCard({ title, percent, subtitle, color }) {
-    // percent: 0..100
     const share = clamp01(percent / 100);
-
     const r = 56;
     const c = 2 * Math.PI * r;
     const dash = share * c;
@@ -101,10 +119,8 @@
                   display:flex;align-items:center;justify-content:center;min-height:210px;">
         <div style="position:relative;width:170px;height:170px;">
           <svg width="170" height="170" viewBox="0 0 170 170" style="display:block;">
-            <!-- track -->
             <circle cx="85" cy="85" r="${r}"
                     fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="18" />
-            <!-- arc -->
             <circle cx="85" cy="85" r="${r}"
                     fill="none" stroke="${color}" stroke-width="18"
                     stroke-linecap="butt"
@@ -129,7 +145,8 @@
     `;
   }
 
-  function render(values, meta) {
+  function render(data) {
+    const values = data?.values || {};
     const prod = toNum(values?.Produktion);
     const cons = toNum(values?.Hausverbrauch); // Verbrauch
     const grid = toNum(values?.Netz);          // Netzbezug
@@ -140,8 +157,26 @@
     const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
     const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
 
-    // Hinweise
+    // Controls sync
-    if (meta?.hasData === false) {
+    if (data?.range) elRange.value = data.range;
+    if (data?.date)  elDate.value  = data.date;
+
+    const isTotal = (data?.range === 'total');
+    elDate.disabled = isTotal;
+
+    // Zeitraum-Text
+    if (data?.tStart && data?.tEnd) {
+      const s = new Date(data.tStart * 1000);
+      const e = new Date(data.tEnd   * 1000);
+      elPeriod.textContent = isTotal
+        ? 'Zeitraum: Gesamt'
+        : `Zeitraum: ${fmtDateTime(s)} – ${fmtDateTime(e)}`;
+    } else {
+      elPeriod.textContent = '';
+    }
+
+    // Hint
+    if (data?.hasData === false) {
       elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
     } else {
       elHint.textContent =
@@ -153,63 +188,77 @@
         title: 'EVQ',
         percent: clamp01(evq / 100) * 100,
         subtitle: 'Eigenverb. / Produktion',
-        color: '#63B3FF'   // blau
+        color: '#63B3FF'
       }),
       donutCard({
         title: 'Autarkiegrad',
         percent: clamp01(autark / 100) * 100,
-        subtitle: 'Eigenverb / Verbrauch',
+        subtitle: 'Eigenverb. / Verbrauch',
-        color: '#A855F7'   // lila
+        color: '#A855F7'
       })
     ].join('');
+
+    elErr.textContent = ''; // clear errors if render succeeded
+  }
+
+  // --- cache last payload so fullscreen reload still shows something immediately ---
+  function saveLast(data) {
+    try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e) {}
+  }
+  function loadLast() {
+    try {
+      const raw = sessionStorage.getItem('EnergyPie_last');
+      return raw ? JSON.parse(raw) : null;
+    } catch(e) {
+      return null;
+    }
   }
 
   // Symcon -> Tile
   window.handleMessage = function (data) {
-    // Symcon liefert manchmal JSON als String
     if (typeof data === 'string') {
       try { data = JSON.parse(data); } catch(e) {}
     }
     if (!data) return;
-
+    saveLast(data);
-    // Controls sync
+    render(data);
-    if (data.range) elRange.value = data.range;
-    if (data.date)  elDate.value  = data.date;
-
-    // total: Datum deaktivieren
-    const isTotal = (data.range === 'total');
-    elDate.disabled = isTotal;
-
-    // Zeitraum-Text
-    if (data.tStart && data.tEnd) {
-      const s = new Date(data.tStart * 1000);
-      const e = new Date(data.tEnd   * 1000);
-      elPeriod.textContent = isTotal
-        ? 'Zeitraum: Gesamt'
-        : `Zeitraum: ${fmtDateTime(s)} – ${fmtDateTime(e)}`;
-    } else {
-      elPeriod.textContent = '';
-    }
-
-    render(data.values || {}, { hasData: data.hasData });
   };
 
-function requestRefreshSoon() {
+  // UI events (safe)
-  setTimeout(() => requestAction('Refresh', 1), 150);
+  elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));
+
+  let dateTimer = null;
+  function pushDateNow() {
+    if (dateTimer) clearTimeout(dateTimer);
+    dateTimer = setTimeout(() => safeRequestAction('SetDate', elDate.value), 80);
   }
+  elDate.addEventListener('input',  pushDateNow);
+  elDate.addEventListener('change', pushDateNow);
 
-// 1) beim Start
+  elPrev.addEventListener('click',  () => safeRequestAction('Prev', 1));
-requestRefreshSoon();
+  elToday.addEventListener('click', () => safeRequestAction('Today', 1));
+  elNext.addEventListener('click',  () => safeRequestAction('Next', 1));
+
+  // On load: render cached immediately, then refresh when ready
+  const cached = loadLast();
+  if (cached) render(cached);
+
+  // Refresh on start + on fullscreen/resize/visibility changes
+  safeRefreshSoon();
 
-// 2) wenn das Tile neu sichtbar wird (z.B. nach Maximieren)
   document.addEventListener('visibilitychange', () => {
-  if (!document.hidden) requestRefreshSoon();
+    if (!document.hidden) safeRefreshSoon();
   });
 
-// 3) bei Größenänderung (Maximieren/Responsive)
-let rsTimer = null;
   window.addEventListener('resize', () => {
-  clearTimeout(rsTimer);
+    // some Symcon fullscreen transitions trigger resize + reload timing
-  rsTimer = setTimeout(() => requestAction('Refresh', 1), 200);
+    safeRefreshSoon();
   });
+
+  // pageshow covers some "recreated webview" cases
+  window.addEventListener('pageshow', () => {
+    safeRefreshSoon();
+  });
+
+})();
 </script>