Symcon_Belevo_Energiemanagement_testing/Energy_Pie/module.html

<div style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
  <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 id="period" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>

  <div style="margin-top:10px;display:flex;flex-direction:column;gap:8px;max-width:520px;">
    <div style="font-weight:600;">Werte</div>
    <div id="values" style="display:flex;flex-direction:column;gap:6px;"></div>
  </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 elValues = document.getElementById('values');
  const elPeriod = document.getElementById('period');

  // Range ändern -> sofort rechnen
  elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));

  // Datum ändern -> sofort rechnen (input + change, mit kleinem 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 pusht Daten hier rein (UpdateVisualizationValue -> handleMessage)
  function handleMessage(data) {
    if (!data) return;

    if (data.range) elRange.value = data.range;
    if (data.date)  elDate.value  = data.date;

    const isTotal = (data.range === 'total');
    elDate.disabled = isTotal;

    // 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 = '';
    }

    // Werte-Box
    if (data.values) {
      renderValues(data.values);
    } else {
      renderValues({});
    }
  }

  // Nur diese vier Werte anzeigen (fixe Reihenfolge)
  function renderValues(values) {
    const order = ['Produktion', 'Einspeisung', 'Netz', 'Hausverbrauch'];

    elValues.innerHTML = order.map((k) => {
      const v = values?.[k];
      const val = (+v || 0);
      return `
        <div style="display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid rgba(255,255,255,0.15);border-radius:10px;">
          <div>${escapeHtml(k)}</div>
          <div style="white-space:nowrap;font-variant-numeric:tabular-nums;">${val.toFixed(2)} kWh</div>
        </div>
      `;
    }).join('');
  }

  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;');
  }

  // Beim Laden direkt einmal Werte anfordern, damit sofort etwas angezeigt wird
  setTimeout(() => requestAction('Refresh', 1), 200);
</script>