no message

Energy_Pie/module.html

@@ -1,11 +1,12 @@
 <div 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">
         <option value="day">Tag</option>
-        <option value="week">Woche (Mo–So)</option>
+        <option value="week">Woche</option>
         <option value="month">Monat</option>
         <option value="total">Gesamt</option>
       </select>
@@ -17,16 +18,17 @@
     </label>
 
     <button id="prev"  type="button">◀</button>
-    <button id="today" type="button">Heute</button>
+    <button id="today" type="button">Letzter Eintrag</button>
     <button id="next"  type="button">▶</button>
   </div>
 
-  <div style="margin-top:12px;">
-    <pre id="out"
-         style="white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
-                font-size:12px;line-height:1.35;opacity:0.95;margin:0;">
-Warte auf Daten…
-    </pre>
+  <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>
+
+  <!-- Donut grid -->
+  <div id="grid"
+       style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
+              gap:14px;max-width:880px;">
   </div>
 </div>
 
@@ -36,12 +38,14 @@ Warte auf Daten…
   const elPrev   = document.getElementById('prev');
   const elToday  = document.getElementById('today');
   const elNext   = document.getElementById('next');
-  const elOut   = document.getElementById('out');
+  const elPeriod = document.getElementById('period');
+  const elHint   = document.getElementById('hint');
+  const elGrid   = document.getElementById('grid');
 
   // sofort bei Range-Änderung
   elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
 
-  // sofort bei Datum-Änderung (input+change) mit kurzem debounce
+  // Datum sofort (mit kleinem debounce)
   let dateTimer = null;
   function pushDateNow() {
     if (dateTimer) clearTimeout(dateTimer);
@@ -55,23 +59,135 @@ Warte auf Daten…
   elToday.addEventListener('click', () => requestAction('Today', 1));
   elNext.addEventListener('click',  () => requestAction('Next', 1));
 
+  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 escapeHtml(s) {
+    return String(s)
+      .replaceAll('&','&amp;')
+      .replaceAll('<','&lt;')
+      .replaceAll('>','&gt;')
+      .replaceAll('"','&quot;')
+      .replaceAll("'",'&#039;');
+  }
+
+  function toNum(x) {
+    const n = Number(x);
+    return Number.isFinite(n) ? n : 0;
+  }
+
+  function formatKwh(v) {
+    return `${v.toFixed(2)} kWh`;
+  }
+
+  // Donut card (SVG)
+  function donutCard({ label, value, share, color }) {
+    // share: 0..1
+    const r = 56;
+    const c = 2 * Math.PI * r;
+    const dash = Math.max(0, Math.min(1, share)) * c;
+    const gap  = c - dash;
+
+    return `
+      <div style="border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px;
+                  display:flex;align-items:center;justify-content:center;min-height:190px;">
+        <div style="position:relative;width:160px;height:160px;">
+          <svg width="160" height="160" viewBox="0 0 160 160" style="display:block;">
+            <!-- track -->
+            <circle cx="80" cy="80" r="${r}"
+                    fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="18" />
+            <!-- arc -->
+            <circle cx="80" cy="80" r="${r}"
+                    fill="none" stroke="${color}" stroke-width="18"
+                    stroke-linecap="butt"
+                    stroke-dasharray="${dash} ${gap}"
+                    transform="rotate(-90 80 80)" />
+            <!-- inner hole look -->
+            <circle cx="80" cy="80" r="38" fill="rgba(0,0,0,0)" />
+          </svg>
+
+          <div style="position:absolute;inset:0;display:flex;flex-direction:column;
+                      align-items:center;justify-content:center;text-align:center;">
+            <div style="font-weight:700;font-size:16px;line-height:1.1;">
+              ${escapeHtml(value.toFixed(2))} kWh
+            </div>
+            <div style="margin-top:4px;font-size:13px;opacity:0.75;">
+              ${escapeHtml(label)}
+            </div>
+            <div style="margin-top:6px;font-size:12px;opacity:0.65;">
+              ${(share*100).toFixed(1)}%
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  function render(values, meta) {
+    const prod  = toNum(values?.Produktion);
+    const feed  = toNum(values?.Einspeisung);
+    const grid  = toNum(values?.Netz);
+    const house = toNum(values?.Hausverbrauch);
+
+    const order = [
+      { key: 'Produktion',    val: prod,  color: '#63B3FF' }, // blau
+      { key: 'Konsum',        val: house, color: '#A855F7' }, // lila (wie Screenshot)
+      { key: 'Einspeisung',   val: feed,  color: '#F59E0B' }, // orange
+      { key: 'Netz',          val: grid,  color: '#34D399' }  // grün
+    ];
+
+    const sum = order.reduce((a, x) => a + x.val, 0);
+
+    // Hinweis
+    if (meta?.hasData === false) {
+      elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
+    } else {
+      elHint.textContent = sum > 0 ? `Summe (zur Prozent-Berechnung): ${formatKwh(sum)}` : 'Summe: 0.00 kWh';
+    }
+
+    elGrid.innerHTML = order.map(x => donutCard({
+      label: x.key,
+      value: x.val,
+      share: sum > 0 ? (x.val / sum) : 0,
+      color: x.color
+    })).join('');
+  }
+
   // Symcon -> Tile
   window.handleMessage = function (data) {
-    // manchmal kommt JSON als String
+    // Symcon liefert manchmal JSON als String
     if (typeof data === 'string') {
       try { data = JSON.parse(data); } catch(e) {}
     }
     if (!data) return;
 
-    // UI-Controls synchronisieren
+    // Controls sync
     if (data.range) elRange.value = data.range;
     if (data.date)  elDate.value  = data.date;
 
     // total: Datum deaktivieren
-    elDate.disabled = (data.range === 'total');
+    const isTotal = (data.range === 'total');
+    elDate.disabled = isTotal;
 
-    // Ausgabe (JSON)
-    elOut.textContent = JSON.stringify(data, null, 2);
+    // Zeitraum-Text
+    if (data.tStart && data.tEnd) {
+      const s = new Date(data.tStart * 1000);
+      const e = new Date(data.tEnd   * 1000);
+      elPeriod.textContent = isTotal
+        ? 'Zeitraum: Gesamt'
+        : `Zeitraum: ${fmtDateTime(s)} – ${fmtDateTime(e)}`;
+    } else {
+      elPeriod.textContent = '';
+    }
+
+    // Charts
+    render(data.values || {}, { hasData: data.hasData });
   };
 
   // initial anstoßen