no message

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,25 +34,23 @@
               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{
     content:"";
     position:absolute;
@@ -59,27 +61,27 @@
       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 */
+    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-size: 15px;
-    font-weight: 600;     /* dicker */
+    font-weight: 600;
     letter-spacing: 0.2px;
     opacity: 0.95;
   }
-    /* Werte-Zeile (Produktion / Verbrauch / …) */
+
   #hint {
     margin-top: 6px;
-    font-size: 15px;      /* größer */
+    font-size: 15px;
-    font-weight: 700;     /* noch etwas dicker */
+    font-weight: 700;
     letter-spacing: 0.3px;
     opacity: 1;
   }
@@ -91,20 +93,20 @@
   #hint .kv b {
     font-weight: 800;
   }
-    /* App/kleine Breite: untereinander */
+
   @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,31 +150,17 @@
       .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) {
     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) {
     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) {
     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));
@@ -178,22 +168,19 @@
     return { week: weekNo, year: isoYear };
   }
 
-
-
-
-
   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 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,37 +191,37 @@
       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;
+      <div style="padding:18px 10px;width:100%;
-              width:100%;
+                  display:flex;flex-direction:column;
-              display:flex;
+                  align-items:center;justify-content:center;
-              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}"
@@ -244,32 +231,40 @@ return `
                     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>
     `;
   }
+
   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);
 
@@ -291,7 +286,24 @@ return `
       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 = `
         <span style="font-weight:900; font-size:16px;">
@@ -310,7 +322,6 @@ return `
       `;
     }
 
-
     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();
   });