no message

Energy_Pie/module.html

@@ -1,20 +1,77 @@
 <div style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
-  <div 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;">
-    Warte auf Daten…
+
+  <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="month">Monat</option>
+        <option value="total">Gesamt</option>
+      </select>
+    </label>
+
+    <label style="display:flex;gap:6px;align-items:center;">
+      <span>Datum</span>
+      <input id="date" type="date" />
+    </label>
+
+    <button id="prev"  type="button">◀</button>
+    <button id="today" type="button">Heute</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>
 </div>
 
 <script>
+  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 elOut   = document.getElementById('out');
+
+  // sofort bei Range-Änderung
+  elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
+
+  // sofort bei Datum-Änderung (input+change) mit kurzem debounce
+  let dateTimer = null;
+  function pushDateNow() {
+    if (dateTimer) clearTimeout(dateTimer);
+    dateTimer = setTimeout(() => requestAction('SetDate', elDate.value), 80);
+  }
+  elDate.addEventListener('input',  pushDateNow);
+  elDate.addEventListener('change', pushDateNow);
+
+  // Navigation
+  elPrev.addEventListener('click',  () => requestAction('Prev', 1));
+  elToday.addEventListener('click', () => requestAction('Today', 1));
+  elNext.addEventListener('click',  () => requestAction('Next', 1));
+
+  // Symcon -> Tile
   window.handleMessage = function (data) {
-    // Symcon liefert manchmal JSON als String -> sauber parsen
+    // manchmal kommt JSON als String
     if (typeof data === 'string') {
       try { data = JSON.parse(data); } catch(e) {}
     }
+    if (!data) return;
 
-    document.getElementById('out').textContent =
-      JSON.stringify(data, null, 2);
+    // UI-Controls synchronisieren
+    if (data.range) elRange.value = data.range;
+    if (data.date)  elDate.value  = data.date;
+
+    // total: Datum deaktivieren
+    elDate.disabled = (data.range === 'total');
+
+    // Ausgabe (JSON)
+    elOut.textContent = JSON.stringify(data, null, 2);
   };
 
   // initial anstoßen