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

---
 Energy_Pie/module.html | 246 ++++++++++++++++++-----------------------
 1 file changed, 109 insertions(+), 137 deletions(-)

diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index cc458cb..5caca6a 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -13,15 +13,22 @@
       </select>
     </label>
 
-    <!-- Datum: sichtbares Textfeld + unsichtbares echtes Date-Input -->
+    <!-- Datum: sichtbares Textfeld + versteckte Picker -->
     <label style="display:flex;gap:6px;align-items:center; position:relative;">
       <span>Datum</span>
 
+      <!-- Sichtbar -->
       <input id="dateText" type="text" readonly
-             style="width:110px; padding:2px 6px; font-weight:900; opacity:.95; cursor:pointer;" />
+             style="width:170px; padding:4px 8px; font-weight:900; font-size:14px;
+                    opacity:.95; cursor:pointer;" />
 
+      <!-- Unsichtbar: Tag -->
       <input id="date" type="date"
              style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" />
+
+      <!-- Unsichtbar: Woche -->
+      <input id="week" type="week"
+             style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" />
     </label>
 
     <button id="prev"  type="button">◀</button>
@@ -46,65 +53,35 @@
 </div>
 
 <style>
-  @media (max-width: 720px) {
-    #grid { grid-template-columns: 1fr !important; }
-  }
+  @media (max-width: 720px) { #grid { grid-template-columns: 1fr !important; } }
 
   #wrap{
-    position:relative;
-    overflow:hidden;
-    min-height:100vh;
+    position:relative; overflow:hidden; min-height:100vh;
     background: rgba(18, 18, 22, 1);
   }
-
   #wrap::before{
-    content:"";
-    position:absolute;
-    inset:-35%;
+    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);
-    opacity: 1;
-    pointer-events:none;
-    z-index:0;
+    filter: blur(18px); opacity: 1;
+    pointer-events:none; z-index:0;
   }
-
   #wrap > *{ position:relative; z-index:1; }
 
-  #period {
-    font-size: 15px;
-    font-weight: 600;
-    letter-spacing: 0.2px;
-    opacity: 0.95;
-  }
-
-  #hint {
-    margin-top: 6px;
-    font-size: 15px;
-    font-weight: 700;
-    letter-spacing: 0.3px;
-    opacity: 1;
-  }
-  #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; margin:4px 0; }
-  }
+  #period { font-size:15px; font-weight:600; letter-spacing:.2px; opacity:.95; }
+  #hint   { margin-top:6px; font-size:15px; font-weight:700; letter-spacing:.3px; opacity:1; }
+  #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; margin:4px 0; } }
 </style>
 
 <script>
   window.__EnergyPieQueue = window.__EnergyPieQueue || [];
   window.__EnergyPieReady = false;
-
   window.handleMessage = function (data) {
     window.__EnergyPieQueue.push(data);
     if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") {
@@ -117,28 +94,33 @@
 <script>
 (function () {
   const elRange    = document.getElementById('range');
-  const elDate     = document.getElementById('date');       // echtes Date-Input (unsichtbar)
-  const elDateText = document.getElementById('dateText');   // sichtbares Textfeld
+  const elDate     = document.getElementById('date');      // type=date
+  const elWeek     = document.getElementById('week');      // type=week
+  const elDateText = document.getElementById('dateText');  // sichtbar
   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>';
 
+  const pad2 = (n) => String(n).padStart(2,'0');
+
   function toNum(x) { const n = Number(x); return Number.isFinite(n) ? n : 0; }
   function clamp01(x) { return (!Number.isFinite(x)) ? 0 : (x<0?0:(x>1?1:x)); }
-
   function escapeHtml(s) {
     return String(s)
       .replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
       .replaceAll('"','&quot;').replaceAll("'",'&#039;');
   }
 
+  function toYmd(d) {
+    return `${d.getFullYear()}-${pad2(d.getMonth()+1)}-${pad2(d.getDate())}`;
+  }
+
   function fmtDayLabelFromYmd(ymd) {
     if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return '';
     const [y,m,d] = ymd.split('-');
@@ -149,6 +131,7 @@
     return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
   }
 
+  // ISO Woche + ISO Jahr (aus Datum)
   function getISOWeekYear(date) {
     const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
     d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
@@ -158,11 +141,25 @@
     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}`;
+  // ISO Woche -> Montag (YYYY-Www -> YYYY-MM-DD)
+  function isoWeekToMondayYmd(isoWeekStr) {
+    // isoWeekStr: "2025-W01"
+    const m = /^(\d{4})-W(\d{2})$/.exec(isoWeekStr || '');
+    if (!m) return '';
+    const year = parseInt(m[1], 10);
+    const week = parseInt(m[2], 10);
+
+    // ISO: Woche 1 enthält den 4. Januar
+    const jan4 = new Date(Date.UTC(year, 0, 4));
+    const jan4Dow = jan4.getUTCDay() || 7; // 1..7
+    const mondayWeek1 = new Date(jan4);
+    mondayWeek1.setUTCDate(jan4.getUTCDate() - (jan4Dow - 1));
+
+    const monday = new Date(mondayWeek1);
+    monday.setUTCDate(mondayWeek1.getUTCDate() + (week - 1) * 7);
+
+    // zurück in lokale YYYY-MM-DD (passt für dein Backend)
+    return `${monday.getUTCFullYear()}-${pad2(monday.getUTCMonth()+1)}-${pad2(monday.getUTCDate())}`;
   }
 
   function showErr(e) {
@@ -177,7 +174,6 @@
     if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction;
     return null;
   }
-
   function safeRequestAction(ident, value) {
     const tryCall = () => {
       const ra = getRequestAction();
@@ -192,12 +188,9 @@
       if (tryCall() || tries >= 150) clearInterval(timer);
     }, 120);
   }
+  function safeRefreshSoon() { setTimeout(() => safeRequestAction('Refresh', 1), 150); }
 
-  function safeRefreshSoon() {
-    setTimeout(() => safeRequestAction('Refresh', 1), 150);
-  }
-
-  // Datum-Text abhängig vom Range
+  // Sicht-Label setzen (Textfeld)
   function setDateText(range, ymd) {
     if (!ymd) { elDateText.value = ''; return; }
     const d = new Date(ymd + 'T00:00:00');
@@ -211,11 +204,10 @@
     elDateText.value = '';
   }
 
-  // Snap: Monat -> 1. des Monats, Jahr -> 01.01.
+  // Bei Monat/Jahr snappen wir intern weiter auf 1. bzw 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); }
     return ymd;
@@ -224,23 +216,59 @@
   function applySnappedDate(range, ymd, pushToBackend) {
     const snapped = snapDateByRange(range, ymd);
     if (snapped && elDate.value !== snapped) elDate.value = snapped;
+
+    // week-input synchron halten
+    if (snapped) {
+      const d = new Date(snapped + 'T00:00:00');
+      const iso = getISOWeekYear(d);
+      elWeek.value = `${iso.year}-W${pad2(iso.week)}`;
+    }
+
     setDateText(range, snapped);
+
     if (pushToBackend && snapped) safeRequestAction('SetDate', snapped);
     return snapped;
   }
 
-  // Klick auf Textfeld öffnet Date-Picker
+  // Klick auf sichtbares Feld -> richtigen Picker öffnen
   elDateText.addEventListener('click', () => {
+    const r = elRange.value;
+
     try {
-      if (typeof elDate.showPicker === 'function') elDate.showPicker();
-      else { elDate.focus(); elDate.click(); }
+      if (r === 'week') {
+        if (typeof elWeek.showPicker === 'function') elWeek.showPicker();
+        else { elWeek.focus(); elWeek.click(); }
+      } else {
+        if (typeof elDate.showPicker === 'function') elDate.showPicker();
+        else { elDate.focus(); elDate.click(); }
+      }
     } catch(e) {
-      elDate.focus();
-      elDate.click();
+      // fallback
+      if (r === 'week') { elWeek.focus(); elWeek.click(); }
+      else { elDate.focus(); elDate.click(); }
     }
   });
 
-  // Donut
+  // Wenn Woche im Wochen-Picker gewählt wird -> Montag berechnen -> SetDate
+  elWeek.addEventListener('change', () => {
+    const ymd = isoWeekToMondayYmd(elWeek.value);
+    if (ymd) {
+      elDate.value = ymd;                 // intern speichern
+      applySnappedDate('week', ymd, true);// Label + Backend
+    }
+  });
+
+  // Wenn normales Datum gewählt wird
+  let dateTimer = null;
+  function pushDateNow() {
+    if (dateTimer) clearTimeout(dateTimer);
+    dateTimer = setTimeout(() => {
+      applySnappedDate(elRange.value, elDate.value, true);
+    }, 80);
+  }
+  elDate.addEventListener('input',  pushDateNow);
+  elDate.addEventListener('change', pushDateNow);
+
   function donutCard({ title, percent, subtitle, color }) {
     const share = clamp01(percent / 100);
     const r = 56;
@@ -249,40 +277,22 @@
     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:900;opacity:.95;">
-          ${escapeHtml(title)}
-        </div>
-
+      <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:900;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)"
+                    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;
+          <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 style="font-size:13px;opacity:.75;text-align:center;">${escapeHtml(subtitle)}</div>
       </div>
     `;
   }
@@ -291,10 +301,7 @@
     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()}`;
-
+    const dmy = (d) => `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
     if (range === 'total') return 'Zeitraum: Gesamt';
     return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
   }
@@ -316,21 +323,15 @@
 
     elDate.disabled = (data?.range === 'total');
 
-    // Label/Picker immer passend zum Range "snappen"
     applySnappedDate(data?.range || 'day', data?.date || '', false);
 
-    // Zeitraum: immer als Spanne (wie du willst)
     if (data?.tStart && data?.tEnd) elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
     else elPeriod.textContent = '';
 
     if (data?.hasData === false) {
       elHint.innerHTML = `
-        <span style="font-weight:900; font-size:16px;">
-          ${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
-        </span>
-        <span style="opacity:.8; margin-left:10px;">
-          (Keine Werte für diesen Zeitraum)
-        </span>
+        <span style="font-weight:900; font-size:16px;">${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}</span>
+        <span style="opacity:.8; margin-left:10px;">(Keine Werte für diesen Zeitraum)</span>
       `;
     } else {
       elHint.innerHTML = `
@@ -342,30 +343,15 @@
     }
 
     elGrid.innerHTML = [
-      donutCard({
-        title: 'Eigenverbrauchsquote',
-        percent: clamp01(evq / 100) * 100,
-        subtitle: 'Eigenverbrauch / Produktion',
-        color: '#63B3FF'
-      }),
-      donutCard({
-        title: 'Autarkiegrad',
-        percent: clamp01(autark / 100) * 100,
-        subtitle: 'Eigenverbrauch / Verbrauch',
-        color: '#A855F7'
-      })
+      donutCard({ title:'Eigenverbrauchsquote', percent: clamp01(evq/100)*100, subtitle:'Eigenverbrauch / Produktion', color:'#63B3FF' }),
+      donutCard({ title:'Autarkiegrad',         percent: clamp01(autark/100)*100, subtitle:'Eigenverbrauch / Verbrauch',  color:'#A855F7' })
     ].join('');
   }
 
-  // cache
-  function saveLast(data) {
-    try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e) {}
-  }
+  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; }
+    try { const raw = sessionStorage.getItem('EnergyPie_last'); return raw ? JSON.parse(raw) : null; }
+    catch(e){ return null; }
   }
 
   window.__EnergyPieConsume = function (data) {
@@ -375,28 +361,16 @@
     render(data);
   };
 
-  // events
   elRange.addEventListener('change', () => {
     const r = elRange.value;
     safeRequestAction('SetRange', r);
     applySnappedDate(r, elDate.value, true);
   });
 
-  let dateTimer = null;
-  function pushDateNow() {
-    if (dateTimer) clearTimeout(dateTimer);
-    dateTimer = setTimeout(() => {
-      applySnappedDate(elRange.value, elDate.value, true);
-    }, 80);
-  }
-  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));
 
-  // initial
   const cached = loadLast();
   if (cached) render(cached);
 
@@ -407,9 +381,7 @@
   }
 
   safeRefreshSoon();
-  document.addEventListener('visibilitychange', () => {
-    if (!document.hidden) safeRefreshSoon();
-  });
+  document.addEventListener('visibilitychange', () => { if (!document.hidden) safeRefreshSoon(); });
   window.addEventListener('resize', () => safeRefreshSoon());
   window.addEventListener('pageshow', () => safeRefreshSoon());
 })();