From 09f1c52f872485fd9f989fda5144ef7aeba2c5d8 Mon Sep 17 00:00:00 2001
From: "belevo\\mh" <mh@belevo.ch>
Date: Thu, 18 Dec 2025 10:05:26 +0100
Subject: [PATCH] no message

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

diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 61d91a3..144e9c5 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -17,8 +17,8 @@
       <input id="date" type="date" />
     </label>
 
-    <!-- Label rechts vom Date-Picker -->
-    <div id="dateLabel" style="font-weight:800;opacity:.95;min-width:96px;"></div>
+    <!-- Label rechts neben Date-Picker -->
+    <div id="dateLabel" style="font-weight:900;opacity:.95;min-width:92px;"></div>
 
     <button id="prev"  type="button">◀</button>
     <button id="today" type="button">Heute</button>
@@ -37,22 +37,27 @@
               max-width:none;">
   </div>
 
+  <!-- Debug/Status -->
   <div id="dbg" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
+
+  <!-- Fehler -->
   <div id="err" style="margin-top:6px;font-size:12px;opacity:0.9;color:#ffb4b4;"></div>
 </div>
 
 <style>
+  /* Responsive: bei schmalen Screens 1 Spalte */
   @media (max-width: 720px) {
     #grid { grid-template-columns: 1fr !important; }
   }
 
-  /* Statischer "Fluid" Hintergrund */
+  /* Statischer "Fluid" Hintergrund in Donut-Farben */
   #wrap{
     position:relative;
     overflow:hidden;
     min-height:100vh;
     background: rgba(18, 18, 22, 1);
   }
+
   #wrap::before{
     content:"";
     position:absolute;
@@ -68,48 +73,51 @@
     pointer-events:none;
     z-index:0;
   }
+
   #wrap > *{
     position:relative;
     z-index:1;
   }
 
-  #period{
+  /* Zeitraum-Zeile (Spanne) */
+  #period {
     font-size: 15px;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: 0.2px;
     opacity: 0.95;
   }
 
-  #hint{
+  /* Werte-Zeile */
+  #hint {
     margin-top: 6px;
     font-size: 15px;
-    font-weight: 800;
+    font-weight: 700;
     letter-spacing: 0.3px;
     opacity: 1;
   }
-  #hint .kv{
-    display:inline-block;
-    margin-right:14px;
-    white-space:nowrap;
+  #hint .kv {
+    display: inline-block;
+    margin-right: 14px;
+    white-space: nowrap;
   }
-  #hint .kv b{ font-weight:900; }
+  #hint .kv b { font-weight: 900; }
 
+  /* App/kleine Breite: Werte untereinander */
   @media (max-width: 720px) {
-    #hint .kv{
-      display:block;
+    #hint .kv {
+      display: block;
       margin: 4px 0;
     }
   }
 </style>
 
-<!-- 1) Puffer-Handler: Symcon kann handleMessage sehr früh schicken -->
+<!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist -->
 <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));
@@ -119,20 +127,20 @@
 
 <script>
 (function () {
-  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 elErr       = document.getElementById('err');
+  const elRange    = document.getElementById('range');
+  const elDate     = document.getElementById('date');
+  const elDateLbl  = 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');
 
   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;
@@ -151,12 +159,14 @@
       .replaceAll('"','&quot;')
       .replaceAll("'",'&#039;');
   }
-  function fmtDay(d) {
-    const dd = String(d.getDate()).padStart(2,'0');
-    const mm = String(d.getMonth() + 1).padStart(2,'0');
-    const yyyy = d.getFullYear();
-    return `${dd}.${mm}.${yyyy}`;
+
+  function fmtDayLabelFromYmd(ymd) {
+    // ymd: YYYY-MM-DD -> DD.MM.YYYY
+    if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return '';
+    const [y,m,d] = ymd.split('-');
+    return `${d}.${m}.${y}`;
   }
+
   function monthNameDe(m) {
     return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
   }
@@ -171,6 +181,13 @@
     return { week: weekNo, year: isoYear };
   }
 
+  function toYmd(d) {
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2,'0');
+    const dd = String(d.getDate()).padStart(2,'0');
+    return `${yyyy}-${mm}-${dd}`;
+  }
+
   function showErr(e) {
     const msg = (e && e.message) ? e.message : String(e);
     elErr.textContent = 'JS-Fehler: ' + msg;
@@ -193,7 +210,6 @@
       }
       return false;
     };
-
     if (tryCall()) return;
 
     let tries = 0;
@@ -206,27 +222,63 @@
     setTimeout(() => safeRequestAction('Refresh', 1), 150);
   }
 
-  function setDateLabel(range, dateStr) {
-    if (!dateStr) { elDateLabel.textContent = ''; return; }
-    const d = new Date(dateStr + 'T00:00:00');
+  // Date-Label rechts vom Date-Picker
+  function setDateLabel(range, ymd) {
+    if (!ymd) { elDateLbl.textContent = ''; return; }
+    const d = new Date(ymd + '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);
+    if (range === 'total') {
+      elDateLbl.textContent = 'Gesamt';
+      return;
     }
+    if (range === 'day') {
+      elDateLbl.textContent = fmtDayLabelFromYmd(ymd);
+      return;
+    }
+    if (range === 'week') {
+      const iso = getISOWeekYear(d);
+      elDateLbl.textContent = `Woche ${iso.week}: ${iso.year}`;
+      return;
+    }
+    if (range === 'month') {
+      elDateLbl.textContent = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`;
+      return;
+    }
+    if (range === 'year') {
+      elDateLbl.textContent = String(d.getFullYear());
+      return;
+    }
+    elDateLbl.textContent = '';
   }
 
-  // --- donut ---
+  // Snappt Datum passend zum Range (Monat->1., Jahr->01.01.)
+  function snapDateByRange(range, ymd) {
+    if (!ymd) return ymd;
+    const d = new Date(ymd + 'T00:00:00');
+
+    if (range === 'month') {
+      d.setDate(1);
+      return toYmd(d);
+    }
+    if (range === 'year') {
+      d.setMonth(0, 1);
+      return toYmd(d);
+    }
+    // week/day/total: Datum bleibt (week wird nur als Woche angezeigt)
+    return ymd;
+  }
+
+  function applySnappedDate(range, ymd, pushToBackend) {
+    const snapped = snapDateByRange(range, ymd);
+
+    if (snapped && elDate.value !== snapped) elDate.value = snapped;
+    setDateLabel(range, snapped);
+
+    if (pushToBackend && snapped) safeRequestAction('SetDate', snapped);
+    return snapped;
+  }
+
+  // Donut
   function donutCard({ title, percent, subtitle, color }) {
     const share = clamp01(percent / 100);
     const r = 56;
@@ -261,18 +313,32 @@
 
           <div style="position:absolute;inset:0;display:flex;
                       align-items:center;justify-content:center;
-                      font-weight:950;font-size:26px;">
+                      font-weight:900;font-size:26px;">
             ${escapeHtml(percent.toFixed(1))}%
           </div>
         </div>
 
-        <div style="font-size:13px;font-weight:700;opacity:.8;text-align:center;">
+        <div style="font-size:13px;opacity:.75;text-align:center;">
           ${escapeHtml(subtitle)}
         </div>
       </div>
     `;
   }
 
+  function fmtRangeSpan(range, tStart, tEnd) {
+    // Zeitraum als Spanne: DD.MM.YYYY - DD.MM.YYYY
+    // tEnd ist meist "exklusiv" (z.B. Monatsanfang nächster Monat), daher -1 Sekunde
+    if (!tStart || !tEnd) return '';
+    const s = new Date(tStart * 1000);
+    const e = new Date((tEnd * 1000) - 1000);
+
+    const pad = (n) => String(n).padStart(2,'0');
+    const dmy = (d) => `${pad(d.getDate())}.${pad(d.getMonth()+1)}.${d.getFullYear()}`;
+
+    if (range === 'total') return 'Zeitraum: Gesamt';
+    return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
+  }
+
   function render(data) {
     const values = data?.values || {};
     const prod = toNum(values?.Produktion);
@@ -285,42 +351,29 @@
     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;
 
-    // Datum-Label (rechts vom Picker)
-    setDateLabel(data?.range || 'day', data?.date || '');
+    // WICHTIG: Picker/Label immer "snapped" passend zum Range anzeigen
+    applySnappedDate(data?.range || 'day', data?.date || '', false);
 
-    // Zeitraum (Von–Bis)
+    // Zeitraum-Spanne
     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 === 'week' || data.range === 'month' || data.range === 'year') {
-        elPeriod.textContent = `Zeitraum: ${fmtDay(s)} – ${fmtDay(eIncl)}`;
-      } else {
-        elPeriod.textContent = '';
-      }
+      elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
     } else {
       elPeriod.textContent = '';
     }
 
-    // Werte / No-Data
+    // Werte / NoData
     if (data?.hasData === false) {
       elHint.innerHTML = `
-        <span style="font-weight:950; font-size:16px;">
+        <span style="font-weight:900; font-size:16px;">
           ${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
         </span>
-        <span style="opacity:.85; margin-left:10px;">
+        <span style="opacity:.8; margin-left:10px;">
           (Keine Werte für diesen Zeitraum)
         </span>
       `;
@@ -333,7 +386,6 @@
       `;
     }
 
-    // Donuts
     elGrid.innerHTML = [
       donutCard({
         title: 'Eigenverbrauchsquote',
@@ -370,13 +422,24 @@
     render(data);
   };
 
-  // UI events
-  elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));
+  // --- UI events ---
+  elRange.addEventListener('change', () => {
+    const r = elRange.value;
+
+    // Range setzen
+    safeRequestAction('SetRange', r);
+
+    // Datum passend snappen + ans Backend schicken
+    applySnappedDate(r, elDate.value, true);
+  });
 
   let dateTimer = null;
   function pushDateNow() {
     if (dateTimer) clearTimeout(dateTimer);
-    dateTimer = setTimeout(() => safeRequestAction('SetDate', elDate.value), 80);
+    dateTimer = setTimeout(() => {
+      // Datum snappen + ans Backend schicken
+      applySnappedDate(elRange.value, elDate.value, true);
+    }, 80);
   }
   elDate.addEventListener('input',  pushDateNow);
   elDate.addEventListener('change', pushDateNow);
@@ -385,22 +448,22 @@
   elToday.addEventListener('click', () => safeRequestAction('Today', 1));
   elNext.addEventListener('click',  () => safeRequestAction('Next', 1));
 
-  // On load: cached sofort anzeigen
+  // cached sofort rendern
   const cached = loadLast();
   if (cached) render(cached);
 
-  // Queue flush
+  // 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>