From 6cb64b47fa3719cf1eb1af8f4831b9b32dca4f41 Mon Sep 17 00:00:00 2001
From: "belevo\\mh" <mh@belevo.ch>
Date: Thu, 18 Dec 2025 09:48:45 +0100
Subject: [PATCH] no message

---
 Energy_Pie/module.html | 149 ++++++++++++++++++++++-------------------
 1 file changed, 81 insertions(+), 68 deletions(-)

diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 4d2c0fd..61d91a3 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -15,9 +15,11 @@
     <label style="display:flex;gap:6px;align-items:center;">
       <span>Datum</span>
       <input id="date" type="date" />
-      <span id="dateLabel" style="font-weight:800; opacity:.95; margin-left:6px;"></span>
     </label>
 
+    <!-- Label rechts vom Date-Picker -->
+    <div id="dateLabel" style="font-weight:800;opacity:.95;min-width:96px;"></div>
+
     <button id="prev"  type="button">◀</button>
     <button id="today" type="button">Heute</button>
     <button id="next"  type="button">▶</button>
@@ -71,44 +73,43 @@
     z-index:1;
   }
 
-  #period {
+  #period{
     font-size: 15px;
-    font-weight: 600;
+    font-weight: 700;
     letter-spacing: 0.2px;
     opacity: 0.95;
   }
 
-  #hint {
+  #hint{
     margin-top: 6px;
     font-size: 15px;
-    font-weight: 700;
+    font-weight: 800;
     letter-spacing: 0.3px;
     opacity: 1;
   }
-  #hint .kv {
-    display: inline-block;
-    margin-right: 14px;
-    white-space: nowrap;
-  }
-  #hint .kv b {
-    font-weight: 800;
+  #hint .kv{
+    display:inline-block;
+    margin-right:14px;
+    white-space:nowrap;
   }
+  #hint .kv b{ font-weight:900; }
 
   @media (max-width: 720px) {
-    #hint .kv {
-      display: block;
+    #hint .kv{
+      display:block;
       margin: 4px 0;
     }
   }
 </style>
 
-<!-- Puffer-Handler (Symcon kann handleMessage sehr früh callen) -->
+<!-- 1) Puffer-Handler: Symcon kann handleMessage sehr früh schicken -->
 <script>
   window.__EnergyPieQueue = window.__EnergyPieQueue || [];
   window.__EnergyPieReady = false;
 
   window.handleMessage = function (data) {
     window.__EnergyPieQueue.push(data);
+
     if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") {
       const q = window.__EnergyPieQueue.splice(0);
       q.forEach(d => window.__EnergyPieConsume(d));
@@ -118,20 +119,20 @@
 
 <script>
 (function () {
-  const elRange  = document.getElementById('range');
-  const elDate   = document.getElementById('date');
+  const elRange     = document.getElementById('range');
+  const elDate      = document.getElementById('date');
   const elDateLabel = document.getElementById('dateLabel');
-  const elPrev   = document.getElementById('prev');
-  const elToday  = document.getElementById('today');
-  const elNext   = document.getElementById('next');
-  const elPeriod = document.getElementById('period');
-  const elHint   = document.getElementById('hint');
-  const elGrid   = document.getElementById('grid');
-  const elDbg    = document.getElementById('dbg');
-  const elErr    = document.getElementById('err');
+  const elPrev      = document.getElementById('prev');
+  const elToday     = document.getElementById('today');
+  const elNext      = document.getElementById('next');
+  const elPeriod    = document.getElementById('period');
+  const elHint      = document.getElementById('hint');
+  const elGrid      = document.getElementById('grid');
+  const elErr       = document.getElementById('err');
 
   elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
 
+  // --- helpers ---
   function toNum(x) {
     const n = Number(x);
     return Number.isFinite(n) ? n : 0;
@@ -159,6 +160,8 @@
   function monthNameDe(m) {
     return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
   }
+
+  // ISO Woche + ISO Jahr
   function getISOWeekYear(date) {
     const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
     d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
@@ -175,12 +178,12 @@
   window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
   window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
 
+  // requestAction robust finden
   function getRequestAction() {
     if (typeof window.requestAction === 'function') return window.requestAction;
     if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction;
     return null;
   }
-
   function safeRequestAction(ident, value) {
     const tryCall = () => {
       const ra = getRequestAction();
@@ -190,6 +193,7 @@
       }
       return false;
     };
+
     if (tryCall()) return;
 
     let tries = 0;
@@ -198,11 +202,31 @@
       if (tryCall() || tries >= 150) clearInterval(timer);
     }, 120);
   }
-
   function safeRefreshSoon() {
     setTimeout(() => safeRequestAction('Refresh', 1), 150);
   }
 
+  function setDateLabel(range, dateStr) {
+    if (!dateStr) { elDateLabel.textContent = ''; return; }
+    const d = new Date(dateStr + 'T00:00:00');
+
+    if (range === 'day') {
+      elDateLabel.textContent = fmtDay(d);
+    } else if (range === 'month') {
+      elDateLabel.textContent = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`;
+    } else if (range === 'week') {
+      const iso = getISOWeekYear(d);
+      elDateLabel.textContent = `Woche ${iso.week}: ${iso.year}`;
+    } else if (range === 'year') {
+      elDateLabel.textContent = String(d.getFullYear());
+    } else if (range === 'total') {
+      elDateLabel.textContent = 'Gesamt';
+    } else {
+      elDateLabel.textContent = fmtDay(d);
+    }
+  }
+
+  // --- donut ---
   function donutCard({ title, percent, subtitle, color }) {
     const share = clamp01(percent / 100);
     const r = 56;
@@ -211,12 +235,15 @@
     if (dash > c - 0.01) dash = c;
 
     return `
-      <div style="padding:18px 10px;width:100%;
-                  display:flex;flex-direction:column;
-                  align-items:center;justify-content:center;
+      <div style="padding:18px 10px;
+                  width:100%;
+                  display:flex;
+                  flex-direction:column;
+                  align-items:center;
+                  justify-content:center;
                   gap:12px;">
 
-        <div style="font-size:15px;font-weight:800;opacity:.95;">
+        <div style="font-size:15px;font-weight:900;opacity:.95;">
           ${escapeHtml(title)}
         </div>
 
@@ -234,12 +261,12 @@
 
           <div style="position:absolute;inset:0;display:flex;
                       align-items:center;justify-content:center;
-                      font-weight:900;font-size:26px;">
+                      font-weight:950;font-size:26px;">
             ${escapeHtml(percent.toFixed(1))}%
           </div>
         </div>
 
-        <div style="font-size:13px;opacity:.75;text-align:center;">
+        <div style="font-size:13px;font-weight:700;opacity:.8;text-align:center;">
           ${escapeHtml(subtitle)}
         </div>
       </div>
@@ -258,27 +285,28 @@
     const evq    = (prod > 0) ? (eigenClamped / prod * 100) : 0;
     const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
 
+    // Controls sync
     if (data?.range) elRange.value = data.range;
     if (data?.date)  elDate.value  = data.date;
 
     const isTotal = (data?.range === 'total');
     elDate.disabled = isTotal;
 
-    // Zeitraum (wie bei dir)
+    // Datum-Label (rechts vom Picker)
+    setDateLabel(data?.range || 'day', data?.date || '');
+
+    // Zeitraum (Von–Bis)
     if (data?.tStart && data?.tEnd) {
       const s = new Date(data.tStart * 1000);
+      const e = new Date(data.tEnd   * 1000);
+      const eIncl = new Date(e.getTime() - 1000); // Ende inkl. (23:59:59)
 
       if (data.range === 'total') {
         elPeriod.textContent = 'Zeitraum: Gesamt';
       } else if (data.range === 'day') {
         elPeriod.textContent = `Zeitraum: ${fmtDay(s)}`;
-      } else if (data.range === 'month') {
-        elPeriod.textContent = `Zeitraum: ${monthNameDe(s.getMonth())} ${s.getFullYear()}`;
-      } else if (data.range === 'week') {
-        const iso = getISOWeekYear(s);
-        elPeriod.textContent = `Zeitraum: Woche ${iso.week} ${iso.year}`;
-      } else if (data.range === 'year') {
-        elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`;
+      } else if (data.range === 'week' || data.range === 'month' || data.range === 'year') {
+        elPeriod.textContent = `Zeitraum: ${fmtDay(s)} – ${fmtDay(eIncl)}`;
       } else {
         elPeriod.textContent = '';
       }
@@ -286,30 +314,13 @@
       elPeriod.textContent = '';
     }
 
-    // Datum-Label (dein Wunsch: im "Datum"-Bereich)
-    elDateLabel.textContent = '';
-    if (data?.date) {
-      const d = new Date(data.date + 'T00:00:00');
-
-      if (data.range === 'week') {
-        const iso = getISOWeekYear(d);
-        elDateLabel.textContent = `Woche ${iso.week}: ${iso.year}`;
-      } else if (data.range === 'month') {
-        elDateLabel.textContent = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`;
-      } else if (data.range === 'year') {
-        elDateLabel.textContent = `${d.getFullYear()}`;
-      } else if (data.range === 'total') {
-        elDateLabel.textContent = 'Gesamt';
-      }
-    }
-
-    // Werte / Keine Daten
+    // Werte / No-Data
     if (data?.hasData === false) {
       elHint.innerHTML = `
-        <span style="font-weight:900; font-size:16px;">
+        <span style="font-weight:950; font-size:16px;">
           ${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
         </span>
-        <span style="opacity:.8; margin-left:10px;">
+        <span style="opacity:.85; margin-left:10px;">
           (Keine Werte für diesen Zeitraum)
         </span>
       `;
@@ -322,6 +333,7 @@
       `;
     }
 
+    // Donuts
     elGrid.innerHTML = [
       donutCard({
         title: 'Eigenverbrauchsquote',
@@ -338,6 +350,7 @@
     ].join('');
   }
 
+  // cache
   function saveLast(data) {
     try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e) {}
   }
@@ -345,9 +358,7 @@
     try {
       const raw = sessionStorage.getItem('EnergyPie_last');
       return raw ? JSON.parse(raw) : null;
-    } catch(e) {
-      return null;
-    }
+    } catch(e) { return null; }
   }
 
   window.__EnergyPieConsume = function (data) {
@@ -359,6 +370,7 @@
     render(data);
   };
 
+  // UI events
   elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));
 
   let dateTimer = null;
@@ -373,21 +385,22 @@
   elToday.addEventListener('click', () => safeRequestAction('Today', 1));
   elNext.addEventListener('click',  () => safeRequestAction('Next', 1));
 
+  // On load: cached sofort anzeigen
   const cached = loadLast();
   if (cached) render(cached);
 
+  // Queue flush
   window.__EnergyPieReady = true;
   if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
     const q = window.__EnergyPieQueue.splice(0);
     q.forEach(d => window.__EnergyPieConsume(d));
   }
 
+  // Refresh triggers
   safeRefreshSoon();
-
-  document.addEventListener('visibilitychange', () => {
-    if (!document.hidden) safeRefreshSoon();
-  });
+  document.addEventListener('visibilitychange', () => { if (!document.hidden) safeRefreshSoon(); });
   window.addEventListener('resize', () => safeRefreshSoon());
   window.addEventListener('pageshow', () => safeRefreshSoon());
+
 })();
 </script>