Symcon_Belevo_Energiemanagement_testing/Energy_Pie/module.html

<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</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">Letzter Eintrag</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>

  <!-- 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>

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

  // Datum sofort (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));

  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) {
    // Symcon liefert manchmal JSON als String
    if (typeof data === 'string') {
      try { data = JSON.parse(data); } catch(e) {}
    }
    if (!data) return;

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

    // total: Datum deaktivieren
    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 = '';
    }

    // Charts
    render(data.values || {}, { hasData: data.hasData });
  };

  // initial anstoßen
  setTimeout(() => requestAction('Refresh', 1), 200);
</script>