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

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

diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 5caca6a..bc3405b 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -1,7 +1,6 @@
 <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;">
-
     <label style="display:flex;gap:6px;align-items:center;">
       <span>Zeitraum</span>
       <select id="range">
@@ -13,22 +12,36 @@
       </select>
     </label>
 
-    <!-- Datum: sichtbares Textfeld + versteckte Picker -->
-    <label style="display:flex;gap:6px;align-items:center; position:relative;">
+    <!-- Datum: sichtbares Feld + unsichtbare Picker als Overlay -->
+    <label id="dateWrap" style="display:flex;gap:6px;align-items:center; position:relative;">
       <span>Datum</span>
 
       <!-- Sichtbar -->
       <input id="dateText" type="text" readonly
-             style="width:170px; padding:4px 8px; font-weight:900; font-size:14px;
-                    opacity:.95; cursor:pointer;" />
+             style="width:210px; padding:4px 10px; font-weight:900; font-size:14px;
+                    opacity:.95; cursor:pointer; border:1px solid rgba(255,255,255,.25);
+                    border-radius:6px; background:rgba(0,0,0,.18); color:#fff;" />
 
-      <!-- Unsichtbar: Tag -->
-      <input id="date" type="date"
-             style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" />
+      <!-- Overlay Picker (transparent, exakt über dateText) -->
+      <input id="date"  type="date" aria-label="Datum"
+             style="position:absolute; left:52px; top:0; height:100%;
+                    width:210px; opacity:0; cursor:pointer; display:none;" />
 
-      <!-- Unsichtbar: Woche -->
-      <input id="week" type="week"
-             style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" />
+      <input id="week"  type="week" aria-label="Woche"
+             style="position:absolute; left:52px; top:0; height:100%;
+                    width:210px; opacity:0; cursor:pointer; display:none;" />
+
+      <input id="month" type="month" aria-label="Monat"
+             style="position:absolute; left:52px; top:0; height:100%;
+                    width:210px; opacity:0; cursor:pointer; display:none;" />
+
+      <!-- Jahr: nativer Picker existiert nicht -> Select -->
+      <select id="yearSel"
+              style="position:absolute; left:52px; top:0; height:100%;
+                     width:210px; font-weight:900; display:none;
+                     border:1px solid rgba(255,255,255,.25);
+                     border-radius:6px; background:rgba(0,0,0,.35); color:#fff;">
+      </select>
     </label>
 
     <button id="prev"  type="button">◀</button>
@@ -48,40 +61,71 @@
               max-width:none;">
   </div>
 
-  <div id="dbg" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
-  <div id="err" style="margin-top:6px;font-size:12px;opacity:0.9;color:#ffb4b4;"></div>
+  <div id="err" style="margin-top:8px;font-size:12px;opacity:0.95;color:#ffb4b4;"></div>
 </div>
 
 <style>
-  @media (max-width: 720px) { #grid { grid-template-columns: 1fr !important; } }
+  @media (max-width: 720px) {
+    #grid { grid-template-columns: 1fr !important; }
+  }
 
+  /* Hintergrund */
   #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:.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; } }
+  /* Zeitraum-Spanne */
+  #period{
+    font-size:15px;
+    font-weight:600;
+    letter-spacing:.2px;
+    opacity:.95;
+  }
+
+  /* Werte */
+  #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>
 
+<!-- 1) Puffer-Handler -->
 <script>
   window.__EnergyPieQueue = window.__EnergyPieQueue || [];
   window.__EnergyPieReady = false;
+
   window.handleMessage = function (data) {
     window.__EnergyPieQueue.push(data);
     if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") {
@@ -93,45 +137,39 @@
 
 <script>
 (function () {
-  const elRange    = document.getElementById('range');
-  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 elErr      = document.getElementById('err');
+  const elRange   = document.getElementById('range');
+  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 elDateText = document.getElementById('dateText');
+  const elDate     = document.getElementById('date');
+  const elWeek     = document.getElementById('week');
+  const elMonth    = document.getElementById('month');
+  const elYearSel  = document.getElementById('yearSel');
 
   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) {
+  function toYmd(d){ return `${d.getFullYear()}-${pad2(d.getMonth()+1)}-${pad2(d.getDate())}`; }
+  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;');
+      .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('-');
-    return `${d}.${m}.${y}`;
-  }
-
-  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 (aus Datum)
+  // ISO Woche/Jahr
   function getISOWeekYear(date) {
     const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
     d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
@@ -141,43 +179,41 @@
     return { week: weekNo, year: isoYear };
   }
 
-  // ISO Woche -> Montag (YYYY-Www -> YYYY-MM-DD)
-  function isoWeekToMondayYmd(isoWeekStr) {
-    // isoWeekStr: "2025-W01"
+  // YYYY-Www -> Montag YYYY-MM-DD
+  function isoWeekToMondayYmd(isoWeekStr){
     const m = /^(\d{4})-W(\d{2})$/.exec(isoWeekStr || '');
     if (!m) return '';
-    const year = parseInt(m[1], 10);
-    const week = parseInt(m[2], 10);
+    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 jan4 = new Date(Date.UTC(year,0,4));
+    const jan4Dow = jan4.getUTCDay() || 7;
     const mondayWeek1 = new Date(jan4);
     mondayWeek1.setUTCDate(jan4.getUTCDate() - (jan4Dow - 1));
 
     const monday = new Date(mondayWeek1);
-    monday.setUTCDate(mondayWeek1.getUTCDate() + (week - 1) * 7);
+    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) {
+  function showErr(e){
     const msg = (e && e.message) ? e.message : String(e);
     elErr.textContent = 'JS-Fehler: ' + msg;
   }
   window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
   window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
 
-  function getRequestAction() {
+  // requestAction robust
+  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) {
+  function safeRequestAction(ident, value){
     const tryCall = () => {
       const ra = getRequestAction();
-      if (ra) { try { ra(ident, value); } catch (e) { showErr(e); } return true; }
+      if (ra) { try { ra(ident, value); } catch(e){ showErr(e); } return true; }
       return false;
     };
     if (tryCall()) return;
@@ -188,88 +224,72 @@
       if (tryCall() || tries >= 150) clearInterval(timer);
     }, 120);
   }
-  function safeRefreshSoon() { setTimeout(() => safeRequestAction('Refresh', 1), 150); }
+  function safeRefreshSoon(){ setTimeout(() => safeRequestAction('Refresh', 1), 150); }
 
-  // Sicht-Label setzen (Textfeld)
-  function setDateText(range, ymd) {
-    if (!ymd) { elDateText.value = ''; return; }
-    const d = new Date(ymd + 'T00:00:00');
+  // aktiven Picker anzeigen
+  function setActivePicker(range){
+    elDate.style.display  = 'none';
+    elWeek.style.display  = 'none';
+    elMonth.style.display = 'none';
+    elYearSel.style.display = 'none';
 
-    if (range === 'total') { elDateText.value = 'Gesamt'; return; }
-    if (range === 'day')   { elDateText.value = fmtDayLabelFromYmd(ymd); return; }
-    if (range === 'week')  { const iso = getISOWeekYear(d); elDateText.value = `Woche ${iso.week}: ${iso.year}`; return; }
-    if (range === 'month') { elDateText.value = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`; return; }
-    if (range === 'year')  { elDateText.value = String(d.getFullYear()); return; }
-
-    elDateText.value = '';
+    if (range === 'total') return;
+    if (range === 'day')   elDate.style.display  = 'block';
+    if (range === 'week')  elWeek.style.display  = 'block';
+    if (range === 'month') elMonth.style.display = 'block';
+    if (range === 'year')  elYearSel.style.display = 'block';
   }
 
-  // Bei Monat/Jahr snappen wir intern weiter auf 1. bzw 01.01.
-  function snapDateByRange(range, ymd) {
-    if (!ymd) return ymd;
+  // dateText setzen
+  function setDateText(range, ymd){
+    if (range === 'total'){ elDateText.value = 'Gesamt'; return; }
+    if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) { elDateText.value = ''; return; }
     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;
-  }
 
-  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');
+    if (range === 'day'){
+      elDateText.value = `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
+    } else if (range === 'week'){
       const iso = getISOWeekYear(d);
-      elWeek.value = `${iso.year}-W${pad2(iso.week)}`;
+      elDateText.value = `Woche ${iso.week}: ${iso.year}`;
+    } else if (range === 'month'){
+      elDateText.value = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`;
+    } else if (range === 'year'){
+      elDateText.value = `${d.getFullYear()}`;
+    } else {
+      elDateText.value = '';
     }
-
-    setDateText(range, snapped);
-
-    if (pushToBackend && snapped) safeRequestAction('SetDate', snapped);
-    return snapped;
   }
 
-  // Klick auf sichtbares Feld -> richtigen Picker öffnen
-  elDateText.addEventListener('click', () => {
-    const r = elRange.value;
+  // Jahr-Select bauen
+  function buildYearOptions(baseYmd){
+    const base = (baseYmd && /^\d{4}-\d{2}-\d{2}$/.test(baseYmd)) ? new Date(baseYmd+'T00:00:00') : new Date();
+    const y0 = base.getFullYear();
+    const from = y0 - 15;
+    const to   = y0 + 1;
 
-    try {
-      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) {
-      // fallback
-      if (r === 'week') { elWeek.focus(); elWeek.click(); }
-      else { elDate.focus(); elDate.click(); }
+    elYearSel.innerHTML = '';
+    for (let y = to; y >= from; y--){
+      const opt = document.createElement('option');
+      opt.value = String(y);
+      opt.textContent = String(y);
+      elYearSel.appendChild(opt);
     }
-  });
-
-  // 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 }) {
+  // Zeitraum-Spanne
+  function fmtRangeSpan(range, tStart, tEnd){
+    if (!tStart || !tEnd) return '';
+    if (range === 'total') return 'Zeitraum: Gesamt';
+
+    const s = new Date(tStart * 1000);
+    const e = new Date((tEnd * 1000) - 1000); // tEnd exklusiv -> -1s
+
+    const dmy = (d) => `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
+    return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
+  }
+
+  // Donut (ohne Box/Rand)
+  function donutCard({ title, percent, subtitle, color }){
     const share = clamp01(percent / 100);
     const r = 56;
     const c = 2 * Math.PI * r;
@@ -277,36 +297,37 @@
     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="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>
     `;
   }
 
-  function fmtRangeSpan(range, tStart, tEnd) {
-    if (!tStart || !tEnd) return '';
-    const s = new Date(tStart * 1000);
-    const e = new Date((tEnd * 1000) - 1000);
-    const dmy = (d) => `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
-    if (range === 'total') return 'Zeitraum: Gesamt';
-    return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
-  }
-
-  function render(data) {
+  function render(data){
     const values = data?.values || {};
     const prod = toNum(values?.Produktion);
     const cons = toNum(values?.Hausverbrauch);
@@ -319,19 +340,49 @@
     const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
 
     if (data?.range) elRange.value = data.range;
-    if (data?.date)  elDate.value  = data.date;
 
-    elDate.disabled = (data?.range === 'total');
+    // Basisdatum (immer YYYY-MM-DD vom Backend)
+    const ymd = data?.date || '';
+    if (ymd && /^\d{4}-\d{2}-\d{2}$/.test(ymd)) elDate.value = ymd;
 
-    applySnappedDate(data?.range || 'day', data?.date || '', false);
+    // aktiven Picker setzen
+    setActivePicker(elRange.value);
 
-    if (data?.tStart && data?.tEnd) elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
-    else elPeriod.textContent = '';
+    // Jahr-Select vorbereiten
+    buildYearOptions(ymd);
 
-    if (data?.hasData === false) {
+    // Picker synchronisieren
+    if (elRange.value === 'week' && ymd){
+      const d = new Date(ymd + 'T00:00:00');
+      const iso = getISOWeekYear(d);
+      elWeek.value = `${iso.year}-W${pad2(iso.week)}`;
+    }
+    if (elRange.value === 'month' && ymd){
+      const d = new Date(ymd + 'T00:00:00');
+      elMonth.value = `${d.getFullYear()}-${pad2(d.getMonth()+1)}`;
+    }
+    if (elRange.value === 'year' && ymd){
+      const d = new Date(ymd + 'T00:00:00');
+      elYearSel.value = String(d.getFullYear());
+    }
+
+    // sichtbares Datumsfeld
+    setDateText(elRange.value, ymd);
+
+    // Zeitraum-Spanne
+    elPeriod.textContent = (data?.tStart && data?.tEnd)
+      ? fmtRangeSpan(elRange.value, data.tStart, data.tEnd)
+      : '';
+
+    // Werte / NoData
+    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 = `
@@ -343,37 +394,87 @@
     }
 
     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('');
   }
 
-  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; }
+  // cache
+  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; }
   }
 
   window.__EnergyPieConsume = function (data) {
-    if (typeof data === 'string') { try { data = JSON.parse(data); } catch(e) {} }
+    if (typeof data === 'string') { try{ data = JSON.parse(data); }catch(e){} }
     if (!data) return;
     saveLast(data);
     render(data);
   };
 
+  // ---------- UI EVENTS ----------
   elRange.addEventListener('change', () => {
     const r = elRange.value;
+    setActivePicker(r);
     safeRequestAction('SetRange', r);
-    applySnappedDate(r, elDate.value, true);
+    // kein direktes SetDate hier nötig; der Nutzer wählt danach passend (Week/Month/Year)
+  });
+
+  // Tag
+  elDate.addEventListener('change', () => {
+    const ymd = elDate.value;
+    setDateText('day', ymd);
+    safeRequestAction('SetDate', ymd);
+  });
+
+  // Woche
+  elWeek.addEventListener('change', () => {
+    const mondayYmd = isoWeekToMondayYmd(elWeek.value);
+    if (!mondayYmd) return;
+    elDate.value = mondayYmd;
+    setDateText('week', mondayYmd);
+    safeRequestAction('SetDate', mondayYmd);
+  });
+
+  // Monat
+  elMonth.addEventListener('change', () => {
+    const v = elMonth.value; // YYYY-MM
+    if (!/^\d{4}-\d{2}$/.test(v)) return;
+    const ymd = `${v}-01`;
+    elDate.value = ymd;
+    setDateText('month', ymd);
+    safeRequestAction('SetDate', ymd);
+  });
+
+  // Jahr
+  elYearSel.addEventListener('change', () => {
+    const y = elYearSel.value;
+    const ymd = `${y}-01-01`;
+    elDate.value = ymd;
+    setDateText('year', ymd);
+    safeRequestAction('SetDate', ymd);
   });
 
   elPrev.addEventListener('click',  () => safeRequestAction('Prev', 1));
   elToday.addEventListener('click', () => safeRequestAction('Today', 1));
   elNext.addEventListener('click',  () => safeRequestAction('Next', 1));
 
+  // sofort cache rendern
   const cached = loadLast();
   if (cached) render(cached);
 
+  // queue flush
   window.__EnergyPieReady = true;
   if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
     const q = window.__EnergyPieQueue.splice(0);