From 13ff15a0d9b62676090581a6e5368439d7934ba7 Mon Sep 17 00:00:00 2001
From: "belevo\\mh" <mh@belevo.ch>
Date: Thu, 18 Dec 2025 09:21:12 +0100
Subject: [PATCH] no message

---
 Energy_Pie/module.html | 265 ++++++++++++++++++++++-------------------
 1 file changed, 141 insertions(+), 124 deletions(-)

diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 63ee989..4d2c0fd 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -1,4 +1,3 @@
-
 <div id="wrap" 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;">
@@ -12,16 +11,21 @@
         <option value="total">Gesamt</option>
       </select>
     </label>
+
     <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>
+
     <button id="prev"  type="button">◀</button>
     <button id="today" type="button">Heute</button>
     <button id="next"  type="button">▶</button>
   </div>
+
   <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>
+
   <div id="grid"
        style="margin-top:14px;
               display:grid;
@@ -30,81 +34,79 @@
               width:100%;
               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 in Donut-Farben */
+
+  /* Statischer "Fluid" Hintergrund */
   #wrap{
     position:relative;
     overflow:hidden;
     min-height:100vh;
-    /* Grundton, damit es nicht "lochig" wirkt */
     background: rgba(18, 18, 22, 1);
   }
-  /* Nur EIN Layer, statisch */
-    #wrap::before{
+  #wrap::before{
     content:"";
     position:absolute;
     inset:-35%;
     background:
-        radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.42), transparent 60%),
-        radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.38), transparent 62%),
-        radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.26), transparent 64%),
-        radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.22), transparent 66%),
-        radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
-    filter: blur(18px);   /* weniger blur = mehr sichtbar */
+      radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.42), transparent 60%),
+      radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.38), transparent 62%),
+      radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.26), transparent 64%),
+      radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.22), transparent 66%),
+      radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
+    filter: blur(18px);
     opacity: 1;
     pointer-events:none;
     z-index:0;
-    }
-  /* Content über dem Background */
+  }
   #wrap > *{
     position:relative;
     z-index:1;
   }
-    #period {
-    font-size: 15px;      /* größer */
-    font-weight: 600;     /* dicker */
+
+  #period {
+    font-size: 15px;
+    font-weight: 600;
     letter-spacing: 0.2px;
     opacity: 0.95;
-    }
-    /* Werte-Zeile (Produktion / Verbrauch / …) */
-    #hint {
+  }
+
+  #hint {
     margin-top: 6px;
-    font-size: 15px;      /* größer */
-    font-weight: 700;     /* noch etwas dicker */
+    font-size: 15px;
+    font-weight: 700;
     letter-spacing: 0.3px;
     opacity: 1;
-    }
-    #hint .kv {
+  }
+  #hint .kv {
     display: inline-block;
     margin-right: 14px;
     white-space: nowrap;
-    }
-    #hint .kv b {
+  }
+  #hint .kv b {
     font-weight: 800;
-    }
-    /* App/kleine Breite: untereinander */
-    @media (max-width: 720px) {
-    #hint .kv {
-        display: block;
-        margin: 4px 0;
-        }
-    }
+  }
 
+  @media (max-width: 720px) {
+    #hint .kv {
+      display: block;
+      margin: 4px 0;
+    }
+  }
 </style>
 
-<!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist -->
+<!-- Puffer-Handler (Symcon kann handleMessage sehr früh callen) -->
 <script>
   window.__EnergyPieQueue = window.__EnergyPieQueue || [];
   window.__EnergyPieReady = false;
+
   window.handleMessage = function (data) {
     window.__EnergyPieQueue.push(data);
     if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") {
@@ -113,10 +115,12 @@
     }
   };
 </script>
+
 <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');
@@ -125,9 +129,9 @@
   const elGrid   = document.getElementById('grid');
   const elDbg    = document.getElementById('dbg');
   const elErr    = document.getElementById('err');
-  // Start nicht "leer"
+
   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;
@@ -146,41 +150,23 @@
       .replaceAll('"','&quot;')
       .replaceAll("'",'&#039;');
   }
-  function fmtDateTime(d) {
-    const yyyy = d.getFullYear();
-    const mm = String(d.getMonth() + 1).padStart(2,'0');
-    const dd = String(d.getDate()).padStart(2,'0');
-    const hh = String(d.getHours()).padStart(2,'0');
-    const mi = String(d.getMinutes()).padStart(2,'0');
-    return `${dd}.${mm}.${yyyy} ${hh}:${mi}`;
-  }
-
-
-    function fmtDay(d) {
+  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 monthNameDe(m) {
+  }
+  function monthNameDe(m) {
     return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
-    }
-
-    // ISO Woche + ISO Jahr (wichtig: ISO-Jahr kann am Jahresrand abweichen)
-    function getISOWeekYear(date) {
+  }
+  function getISOWeekYear(date) {
     const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
-    // Donnerstag bestimmt ISO-Jahr
     d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
     const isoYear = d.getUTCFullYear();
     const yearStart = new Date(Date.UTC(isoYear, 0, 1));
     const weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
     return { week: weekNo, year: isoYear };
-    }
-
-
-
-
+  }
 
   function showErr(e) {
     const msg = (e && e.message) ? e.message : String(e);
@@ -188,12 +174,13 @@
   }
   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();
@@ -204,113 +191,137 @@
       return false;
     };
     if (tryCall()) return;
+
     let tries = 0;
     const timer = setInterval(() => {
       tries++;
       if (tryCall() || tries >= 150) clearInterval(timer);
     }, 120);
   }
+
   function safeRefreshSoon() {
     setTimeout(() => safeRequestAction('Refresh', 1), 150);
   }
-  // --- donut card ---
-function donutCard({ title, percent, subtitle, color }) {
-  const share = clamp01(percent / 100);
-  const r = 56;
-  const c = 2 * Math.PI * r;
-  let dash = share * c;
-    // Schutz gegen Rundungs-Artefakte bei 99.9..100%
-   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;
-              gap:12px;">
-    <div style="font-size:15px;font-weight:800;opacity:.95;">
-      ${escapeHtml(title)}
-    </div>
-    <div style="position:relative;width:180px;height:180px;">
-      <svg width="180" height="180" viewBox="0 0 180 180">
-        <!-- Anteilsegment -->
-        <circle cx="90" cy="90" r="${r}"
-                fill="none"
-                stroke="${color}"
-                stroke-width="18"
-                stroke-linecap="butt"
-                stroke-dasharray="${dash} ${c}"
-                transform="rotate(-90 90 90)"
-                style="filter: drop-shadow(0 0 12px ${color});" />
-      </svg>
-      <div style="position:absolute;inset:0;display:flex;
+
+  function donutCard({ title, percent, subtitle, color }) {
+    const share = clamp01(percent / 100);
+    const r = 56;
+    const c = 2 * Math.PI * r;
+    let dash = share * c;
+    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;
-                  font-weight:900;font-size:26px;">
-        ${escapeHtml(percent.toFixed(1))}%
+                  gap:12px;">
+
+        <div style="font-size:15px;font-weight:800;opacity:.95;">
+          ${escapeHtml(title)}
+        </div>
+
+        <div style="position:relative;width:180px;height:180px;">
+          <svg width="180" height="180" viewBox="0 0 180 180">
+            <circle cx="90" cy="90" r="${r}"
+                    fill="none"
+                    stroke="${color}"
+                    stroke-width="18"
+                    stroke-linecap="butt"
+                    stroke-dasharray="${dash} ${c}"
+                    transform="rotate(-90 90 90)"
+                    style="filter: drop-shadow(0 0 12px ${color});" />
+          </svg>
+
+          <div style="position:absolute;inset:0;display:flex;
+                      align-items:center;justify-content:center;
+                      font-weight:900;font-size:26px;">
+            ${escapeHtml(percent.toFixed(1))}%
+          </div>
+        </div>
+
+        <div style="font-size:13px;opacity:.75;text-align:center;">
+          ${escapeHtml(subtitle)}
+        </div>
       </div>
-    </div>
-    <div style="font-size:13px;opacity:.75;text-align:center;">
-      ${escapeHtml(subtitle)}
-    </div>
-  </div>
-`;
-}
+    `;
+  }
+
   function render(data) {
     const values = data?.values || {};
     const prod = toNum(values?.Produktion);
     const cons = toNum(values?.Hausverbrauch);
     const grid = toNum(values?.Netz);
+
     const eigen = cons - grid;
     const eigenClamped = eigen < 0 ? 0 : eigen;
+
     const evq    = (prod > 0) ? (eigenClamped / prod * 100) : 0;
     const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
+
     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)
     if (data?.tStart && data?.tEnd) {
-    const s = new Date(data.tStart * 1000);
+      const s = new Date(data.tStart * 1000);
 
-    if (data.range === 'total') {
+      if (data.range === 'total') {
         elPeriod.textContent = 'Zeitraum: Gesamt';
-    } else if (data.range === 'day') {
+      } else if (data.range === 'day') {
         elPeriod.textContent = `Zeitraum: ${fmtDay(s)}`;
-    } else if (data.range === 'month') {
+      } else if (data.range === 'month') {
         elPeriod.textContent = `Zeitraum: ${monthNameDe(s.getMonth())} ${s.getFullYear()}`;
-    } else if (data.range === 'week') {
+      } else if (data.range === 'week') {
         const iso = getISOWeekYear(s);
         elPeriod.textContent = `Zeitraum: Woche ${iso.week} ${iso.year}`;
-    } else if (data.range === 'year') {
+      } else if (data.range === 'year') {
         elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`;
-    } else {
+      } else {
         elPeriod.textContent = '';
-    }
+      }
     } else {
-    elPeriod.textContent = '';
+      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
     if (data?.hasData === false) {
-    elHint.innerHTML = `
+      elHint.innerHTML = `
         <span style="font-weight:900; font-size:16px;">
-        ${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
+          ${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
         </span>
         <span style="opacity:.8; margin-left:10px;">
-        (Keine Werte für diesen Zeitraum)
+          (Keine Werte für diesen Zeitraum)
         </span>
-    `;
+      `;
     } else {
-    elHint.innerHTML = `
+      elHint.innerHTML = `
         <span class="kv"><b>Produktion:</b> ${escapeHtml(prod.toFixed(2))} kWh</span>
         <span class="kv"><b>Verbrauch:</b> ${escapeHtml(cons.toFixed(2))} kWh</span>
         <span class="kv"><b>Netzbezug:</b> ${escapeHtml(grid.toFixed(2))} kWh</span>
         <span class="kv"><b>Eigenverbrauch:</b> ${escapeHtml(eigenClamped.toFixed(2))} kWh</span>
-    `;
+      `;
     }
 
-
     elGrid.innerHTML = [
       donutCard({
         title: 'Eigenverbrauchsquote',
@@ -325,9 +336,8 @@ return `
         color: '#A855F7'
       })
     ].join('');
-
   }
-  // --- cache ---
+
   function saveLast(data) {
     try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e) {}
   }
@@ -339,6 +349,7 @@ return `
       return null;
     }
   }
+
   window.__EnergyPieConsume = function (data) {
     if (typeof data === 'string') {
       try { data = JSON.parse(data); } catch(e) {}
@@ -347,8 +358,9 @@ return `
     saveLast(data);
     render(data);
   };
-  // UI events
+
   elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));
+
   let dateTimer = null;
   function pushDateNow() {
     if (dateTimer) clearTimeout(dateTimer);
@@ -356,17 +368,22 @@ return `
   }
   elDate.addEventListener('input',  pushDateNow);
   elDate.addEventListener('change', pushDateNow);
+
   elPrev.addEventListener('click',  () => safeRequestAction('Prev', 1));
   elToday.addEventListener('click', () => safeRequestAction('Today', 1));
   elNext.addEventListener('click',  () => safeRequestAction('Next', 1));
+
   const cached = loadLast();
   if (cached) render(cached);
+
   window.__EnergyPieReady = true;
   if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
     const q = window.__EnergyPieQueue.splice(0);
     q.forEach(d => window.__EnergyPieConsume(d));
   }
+
   safeRefreshSoon();
+
   document.addEventListener('visibilitychange', () => {
     if (!document.hidden) safeRefreshSoon();
   });