no message

Energy_Pie/module.html

@@ -1,6 +1,7 @@
 <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">
@@ -12,13 +13,16 @@
       </select>
     </label>
 
-    <label style="display:flex;gap:6px;align-items:center;">
+    <!-- Datum: sichtbares Textfeld + unsichtbares echtes Date-Input -->
+    <label style="display:flex;gap:6px;align-items:center; position:relative;">
       <span>Datum</span>
-      <input id="date" type="date" />
-    </label>
 
-    <!-- Label rechts neben Date-Picker -->
+      <input id="dateText" type="text" readonly
-    <div id="dateLabel" style="font-weight:900;opacity:.95;min-width:92px;"></div>
+             style="width:110px; padding:2px 6px; font-weight:900; opacity:.95; cursor:pointer;" />
+
+      <input id="date" type="date"
+             style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" />
+    </label>
 
     <button id="prev"  type="button">◀</button>
     <button id="today" type="button">Heute</button>
@@ -37,20 +41,15 @@
               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 */
   #wrap{
     position:relative;
     overflow:hidden;
@@ -74,12 +73,8 @@
     z-index:0;
   }
 
-  #wrap > *{
+  #wrap > *{ position:relative; z-index:1; }
-    position:relative;
-    z-index:1;
-  }
 
-  /* Zeitraum-Zeile (Spanne) */
   #period {
     font-size: 15px;
     font-weight: 600;
@@ -87,7 +82,6 @@
     opacity: 0.95;
   }
 
-  /* Werte-Zeile */
   #hint {
     margin-top: 6px;
     font-size: 15px;
@@ -102,16 +96,11 @@
   }
   #hint .kv b { font-weight: 900; }
 
-  /* App/kleine Breite: Werte untereinander */
   @media (max-width: 720px) {
-    #hint .kv {
+    #hint .kv { display:block; margin:4px 0; }
-      display: block;
-      margin: 4px 0;
-    }
   }
 </style>
 
-<!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist -->
 <script>
   window.__EnergyPieQueue = window.__EnergyPieQueue || [];
   window.__EnergyPieReady = false;
@@ -128,8 +117,8 @@
 <script>
 (function () {
   const elRange    = document.getElementById('range');
-  const elDate     = document.getElementById('date');
+  const elDate     = document.getElementById('date');       // echtes Date-Input (unsichtbar)
-  const elDateLbl  = document.getElementById('dateLabel');
+  const elDateText = document.getElementById('dateText');   // sichtbares Textfeld
   const elPrev     = document.getElementById('prev');
   const elToday    = document.getElementById('today');
   const elNext     = document.getElementById('next');
@@ -141,27 +130,16 @@
 
   elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
 
-  function toNum(x) {
+  function toNum(x) { const n = Number(x); return Number.isFinite(n) ? n : 0; }
-    const n = Number(x);
+  function clamp01(x) { return (!Number.isFinite(x)) ? 0 : (x<0?0:(x>1?1:x)); }
-    return Number.isFinite(n) ? n : 0;
+
-  }
-  function clamp01(x) {
-    if (!Number.isFinite(x)) return 0;
-    if (x < 0) return 0;
-    if (x > 1) return 1;
-    return x;
-  }
   function escapeHtml(s) {
     return String(s)
-      .replaceAll('&','&amp;')
+      .replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
-      .replaceAll('<','&lt;')
+      .replaceAll('"','&quot;').replaceAll("'",'&#039;');
-      .replaceAll('>','&gt;')
-      .replaceAll('"','&quot;')
-      .replaceAll("'",'&#039;');
   }
 
   function fmtDayLabelFromYmd(ymd) {
-    // ymd: YYYY-MM-DD -> DD.MM.YYYY
     if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return '';
     const [y,m,d] = ymd.split('-');
     return `${d}.${m}.${y}`;
@@ -171,7 +149,6 @@
     return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
   }
 
-  // ISO Woche + ISO Jahr
   function getISOWeekYear(date) {
     const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
     d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
@@ -195,19 +172,16 @@
   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();
-      if (ra) {
+      if (ra) { try { ra(ident, value); } catch (e) { showErr(e); } return true; }
-        try { ra(ident, value); } catch (e) { showErr(e); }
-        return true;
-      }
       return false;
     };
     if (tryCall()) return;
@@ -218,66 +192,54 @@
       if (tryCall() || tries >= 150) clearInterval(timer);
     }, 120);
   }
+
   function safeRefreshSoon() {
     setTimeout(() => safeRequestAction('Refresh', 1), 150);
   }
 
-  // Date-Label rechts vom Date-Picker
+  // Datum-Text abhängig vom Range
-  function setDateLabel(range, ymd) {
+  function setDateText(range, ymd) {
-    if (!ymd) { elDateLbl.textContent = ''; return; }
+    if (!ymd) { elDateText.value = ''; return; }
     const d = new Date(ymd + 'T00:00:00');
 
-    if (range === 'total') {
+    if (range === 'total') { elDateText.value = 'Gesamt'; return; }
-      elDateLbl.textContent = 'Gesamt';
+    if (range === 'day')   { elDateText.value = fmtDayLabelFromYmd(ymd); return; }
-      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 === 'day') {
+    if (range === 'year')  { elDateText.value = String(d.getFullYear()); return; }
-      elDateLbl.textContent = fmtDayLabelFromYmd(ymd);
+
-      return;
+    elDateText.value = '';
-    }
-    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 = '';
   }
 
-  // Snappt Datum passend zum Range (Monat->1., Jahr->01.01.)
+  // Snap: Monat -> 1. des Monats, Jahr -> 01.01.
   function snapDateByRange(range, ymd) {
     if (!ymd) return ymd;
     const d = new Date(ymd + 'T00:00:00');
 
-    if (range === 'month') {
+    if (range === 'month') { d.setDate(1); return toYmd(d); }
-      d.setDate(1);
+    if (range === 'year')  { d.setMonth(0, 1); return toYmd(d); }
-      return toYmd(d);
-    }
-    if (range === 'year') {
-      d.setMonth(0, 1);
-      return toYmd(d);
-    }
-    // week/day/total: Datum bleibt (week wird nur als Woche angezeigt)
     return ymd;
   }
 
   function applySnappedDate(range, ymd, pushToBackend) {
     const snapped = snapDateByRange(range, ymd);
-
     if (snapped && elDate.value !== snapped) elDate.value = snapped;
-    setDateLabel(range, snapped);
+    setDateText(range, snapped);
-
     if (pushToBackend && snapped) safeRequestAction('SetDate', snapped);
     return snapped;
   }
 
+  // Klick auf Textfeld öffnet Date-Picker
+  elDateText.addEventListener('click', () => {
+    try {
+      if (typeof elDate.showPicker === 'function') elDate.showPicker();
+      else { elDate.focus(); elDate.click(); }
+    } catch(e) {
+      elDate.focus();
+      elDate.click();
+    }
+  });
+
   // Donut
   function donutCard({ title, percent, subtitle, color }) {
     const share = clamp01(percent / 100);
@@ -326,8 +288,6 @@
   }
 
   function fmtRangeSpan(range, tStart, tEnd) {
-    // Zeitraum als Spanne: DD.MM.YYYY - DD.MM.YYYY
-    // tEnd ist meist "exklusiv" (z.B. Monatsanfang nächster Monat), daher -1 Sekunde
     if (!tStart || !tEnd) return '';
     const s = new Date(tStart * 1000);
     const e = new Date((tEnd * 1000) - 1000);
@@ -354,20 +314,15 @@
     if (data?.range) elRange.value = data.range;
     if (data?.date)  elDate.value  = data.date;
 
-    const isTotal = (data?.range === 'total');
+    elDate.disabled = (data?.range === 'total');
-    elDate.disabled = isTotal;
 
-    // WICHTIG: Picker/Label immer "snapped" passend zum Range anzeigen
+    // Label/Picker immer passend zum Range "snappen"
     applySnappedDate(data?.range || 'day', data?.date || '', false);
 
-    // Zeitraum-Spanne
+    // Zeitraum: immer als Spanne (wie du willst)
-    if (data?.tStart && data?.tEnd) {
+    if (data?.tStart && data?.tEnd) elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
-      elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
+    else elPeriod.textContent = '';
-    } else {
-      elPeriod.textContent = '';
-    }
 
-    // Werte / NoData
     if (data?.hasData === false) {
       elHint.innerHTML = `
         <span style="font-weight:900; font-size:16px;">
@@ -414,22 +369,16 @@
   }
 
   window.__EnergyPieConsume = function (data) {
-    if (typeof data === 'string') {
+    if (typeof data === 'string') { try { data = JSON.parse(data); } catch(e) {} }
-      try { data = JSON.parse(data); } catch(e) {}
-    }
     if (!data) return;
     saveLast(data);
     render(data);
   };
 
-  // --- UI events ---
+  // events
   elRange.addEventListener('change', () => {
     const r = elRange.value;
-
-    // Range setzen
     safeRequestAction('SetRange', r);
-
-    // Datum passend snappen + ans Backend schicken
     applySnappedDate(r, elDate.value, true);
   });
 
@@ -437,7 +386,6 @@
   function pushDateNow() {
     if (dateTimer) clearTimeout(dateTimer);
     dateTimer = setTimeout(() => {
-      // Datum snappen + ans Backend schicken
       applySnappedDate(elRange.value, elDate.value, true);
     }, 80);
   }
@@ -448,11 +396,10 @@
   elToday.addEventListener('click', () => safeRequestAction('Today', 1));
   elNext.addEventListener('click',  () => safeRequestAction('Next', 1));
 
-  // cached sofort rendern
+  // initial
   const cached = loadLast();
   if (cached) render(cached);
 
-  // queue flush
   window.__EnergyPieReady = true;
   if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
     const q = window.__EnergyPieQueue.splice(0);