From bbb8ee8bfe79a70d71dcf19cfe00e4687cf30d6d Mon Sep 17 00:00:00 2001
From: "belevo\\mh" <mh@belevo.ch>
Date: Thu, 18 Dec 2025 11:04:33 +0100
Subject: [PATCH] no message

---
 Energy_Pie/module.html | 386 +++++++++++------------------------------
 1 file changed, 106 insertions(+), 280 deletions(-)

diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 9ea6472..53e7c2a 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -1,4 +1,5 @@
 <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;">
@@ -17,341 +18,166 @@
       <input id="date" type="date" />
     </label>
 
-    <!-- Label rechts neben Date-Picker -->
-    <div id="dateLabel" style="font-weight:900;opacity:.95;min-width:140px;"></div>
-
-    <button id="prev"  type="button">◀</button>
+    <button id="prev" type="button">◀</button>
     <button id="today" type="button">Heute</button>
-    <button id="next"  type="button">▶</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="period" style="margin-top:10px;font-size:15px;font-weight:600;"></div>
+  <div id="hint"   style="margin-top:6px;font-size:15px;font-weight:700;"></div>
 
   <div id="grid"
        style="margin-top:14px;
               display:grid;
               grid-template-columns:repeat(2,minmax(0,1fr));
-              gap:14px;
-              width:100%;
-              max-width:none;">
+              gap:14px;">
   </div>
 
-  <div id="err" style="margin-top:8px;font-size:12px;opacity:0.95;color:#ffb4b4;"></div>
+  <div id="err" style="margin-top:8px;color:#ffb4b4;font-size:13px;"></div>
 </div>
 
 <style>
-  @media (max-width: 720px) {
-    #grid { grid-template-columns: 1fr !important; }
+  @media (max-width:720px){
+    #grid{grid-template-columns:1fr}
   }
 
-  /* Hintergrund */
   #wrap{
     position:relative;
     overflow:hidden;
     min-height:100vh;
-    background: rgba(18, 18, 22, 1);
+    background:#121216;
   }
+
   #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);
-    opacity: 1;
+      radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,.42), transparent 60%),
+      radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,.38), transparent 62%),
+      radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,.26), transparent 64%);
+    filter:blur(18px);
     pointer-events:none;
-    z-index:0;
-  }
-  #wrap > *{ position:relative; z-index:1; }
-
-  /* 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; }
+  #wrap>*{position:relative;z-index:1}
 
-  @media (max-width: 720px){
-    #hint .kv{ display:block; margin:4px 0; }
-  }
+  #hint .kv{margin-right:14px;white-space:nowrap}
+  #hint .kv b{font-weight:900}
 </style>
 
-<!-- 1) Puffer-Handler -->
 <script>
-  window.__EnergyPieQueue = window.__EnergyPieQueue || [];
-  window.__EnergyPieReady = false;
+(function(){
 
-  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));
-    }
-  };
-</script>
-
-<script>
-(function () {
-  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 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 monthNameDe(m){
-    return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
-  }
-
-  // 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));
-    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 };
-  }
+  const elRange  = document.getElementById('range');
+  const elDate   = document.getElementById('date');
+  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');
 
   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));
-
-  // 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){
-    const tryCall = () => {
-      const ra = getRequestAction();
-      if (ra) { try { ra(ident, value); } catch(e){ showErr(e); } return true; }
-      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); }
-
-  // Label rechts vom Datum (immer aus dem gewählten Tag berechnet)
-  function setDateLabel(range, ymd){
-    if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) { elDateLbl.textContent = ''; return; }
-    const d = new Date(ymd + 'T00:00:00');
-
-    if (range === 'total') { elDateLbl.textContent = 'Gesamt'; return; }
-    if (range === 'day')   { elDateLbl.textContent = `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`; 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 = '';
+    elErr.textContent = e?.message || e;
   }
 
-  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);
-
-    const dmy = (d) => `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
-    return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
+  function ra(){
+    return window.requestAction || window.parent?.requestAction || null;
   }
 
-  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;
+  function send(id,val){
+    const f = ra();
+    if(f) try{f(id,val)}catch(e){showErr(e)}
+  }
 
-    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>
+  function fmt(d){
+    const p=n=>String(n).padStart(2,'0');
+    return `${p(d.getDate())}.${p(d.getMonth()+1)}.${d.getFullYear()}`;
+  }
 
-        <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>
+  function monthName(m){
+    return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m];
+  }
 
-        <div style="font-size:13px;opacity:.75;text-align:center;">
-          ${escapeHtml(subtitle)}
-        </div>
-      </div>
-    `;
+  function isoWeek(d){
+    d=new Date(Date.UTC(d.getFullYear(),d.getMonth(),d.getDate()));
+    d.setUTCDate(d.getUTCDate()+4-(d.getUTCDay()||7));
+    const y=d.getUTCFullYear();
+    const s=new Date(Date.UTC(y,0,1));
+    return Math.ceil((((d-s)/86400000)+1)/7)+" "+y;
   }
 
   function render(data){
-    const values = data?.values || {};
-    const prod = toNum(values?.Produktion);
-    const cons = toNum(values?.Hausverbrauch);
-    const grid = toNum(values?.Netz);
+    if(!data)return;
 
-    const eigen = cons - grid;
-    const eigenClamped = eigen < 0 ? 0 : eigen;
+    elRange.value = data.range || 'day';
+    elDate.value  = data.date  || '';
 
-    const evq    = (prod > 0) ? (eigenClamped / prod * 100) : 0;
-    const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
+    elDate.disabled = data.range==='total';
 
-    if (data?.range) elRange.value = data.range;
-    if (data?.date)  elDate.value  = data.date;
+    if(data.tStart && data.tEnd){
+      const s=new Date(data.tStart*1000);
+      const e=new Date(data.tEnd*1000-1000);
 
-    elDate.disabled = (data?.range === 'total');
-
-    // Datum-Label (Tag bleibt im Picker!)
-    setDateLabel(elRange.value, elDate.value);
-
-    // 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>
-      `;
-    } else {
-      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>
-      `;
+      if(data.range==='day')
+        elPeriod.textContent=`Zeitraum: ${fmt(s)}`;
+      else if(data.range==='week')
+        elPeriod.textContent=`Zeitraum: Woche ${isoWeek(s)}`;
+      else if(data.range==='month')
+        elPeriod.textContent=`Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`;
+      else if(data.range==='year')
+        elPeriod.textContent=`Zeitraum: ${s.getFullYear()}`;
+      else
+        elPeriod.textContent='Zeitraum: Gesamt';
     }
 
-    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'
-      })
-    ].join('');
+    if(data.hasData===false){
+      elHint.innerHTML=`<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
+      elGrid.innerHTML='';
+      return;
+    }
+
+    const v=data.values||{};
+    elHint.innerHTML=`
+      <span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2)||0} kWh</span>
+      <span class="kv"><b>Verbrauch:</b> ${v.Hausverbrauch?.toFixed(2)||0} kWh</span>
+      <span class="kv"><b>Netzbezug:</b> ${v.Netz?.toFixed(2)||0} kWh</span>
+    `;
+
+    const donut=(t,p,c)=>`
+      <div style="text-align:center">
+        <div style="font-weight:900">${t}</div>
+        <svg width="160" height="160">
+          <circle cx="80" cy="80" r="56" stroke="${c}" stroke-width="18"
+            fill="none"
+            stroke-dasharray="${p/100*351} 351"
+            transform="rotate(-90 80 80)"/>
+        </svg>
+        <div style="font-size:24px;font-weight:900">${p.toFixed(1)}%</div>
+      </div>`;
+
+    const prod=v.Produktion||0;
+    const cons=v.Hausverbrauch||0;
+    const grid=v.Netz||0;
+    const eigen=Math.max(cons-grid,0);
+
+    elGrid.innerHTML=
+      donut('Eigenverbrauchsquote',prod?eigen/prod*100:0,'#63B3FF')+
+      donut('Autarkiegrad',cons?eigen/cons*100:0,'#A855F7');
   }
 
-  // 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 (!data) return;
-    saveLast(data);
-    render(data);
+  window.handleMessage = d=>{
+    try{if(typeof d==='string')d=JSON.parse(d)}catch{}
+    render(d);
   };
 
-  // UI events
-  elRange.addEventListener('change', () => {
-    safeRequestAction('SetRange', elRange.value);
-    // Label sofort updaten (Backend kommt dann eh gleich nach)
-    setDateLabel(elRange.value, elDate.value);
-  });
+  elRange.onchange = ()=>send('SetRange',elRange.value);
+  elDate.onchange  = ()=>send('SetDate',elDate.value);
+  elPrev.onclick   = ()=>send('Prev',1);
+  elNext.onclick   = ()=>send('Next',1);
+  elToday.onclick  = ()=>send('Today',1);
 
-  let dateTimer = null;
-  function pushDateNow(){
-    if (dateTimer) clearTimeout(dateTimer);
-    dateTimer = setTimeout(() => {
-      setDateLabel(elRange.value, elDate.value);
-      safeRequestAction('SetDate', elDate.value);
-    }, 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));
-
-  // 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);
-    q.forEach(d => window.__EnergyPieConsume(d));
-  }
-
-  safeRefreshSoon();
-  document.addEventListener('visibilitychange', () => { if (!document.hidden) safeRefreshSoon(); });
-  window.addEventListener('resize', () => safeRefreshSoon());
-  window.addEventListener('pageshow', () => safeRefreshSoon());
 })();
 </script>