Symcon_Belevo_Energiemanagement_testing/Energy_Pie/module.html

<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">
        <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 Zeitpunkt</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>

  <div id="grid"
       style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
              gap:14px;max-width:880px;">
  </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>
  #wrap {
    position: relative;
    overflow: hidden;
  }

  #wrap::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
      radial-gradient(circle at 20% 20%, rgba(99,179,255,0.18), transparent 45%),
      radial-gradient(circle at 80% 30%, rgba(168,85,247,0.16), transparent 50%),
      radial-gradient(circle at 50% 80%, rgba(255,255,255,0.06), transparent 55%);
    filter: blur(18px);
    animation: auroraMove 10s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
  }

  #wrap > * {
    position: relative;
    z-index: 1;
  }

  @keyframes auroraMove {
    from { transform: translate3d(-2%, -2%, 0) scale(1.02); }
    to   { transform: translate3d( 2%,  2%, 0) scale(1.06); }
  }
</style>

<!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist -->
<script>
  window.__EnergyPieQueue = window.__EnergyPieQueue || [];
  window.__EnergyPieReady = false;

  // Symcon ruft handleMessage evtl. sehr früh auf -> wir puffern.
  window.handleMessage = function (data) {
    window.__EnergyPieQueue.push(data);

    if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") {
      const q = window.__EnergyPieQueue.splice(0);
      q.forEach(d => window.__EnergyPieConsume(d));
    }
  };
</script>

<script>
(function () {
  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');
  const elDbg    = document.getElementById('dbg');
  const elErr    = document.getElementById('err');

  // Start nicht "grau/leer"
  elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';

  // --- helpers ---
  function toNum(x) {
    const n = Number(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('<','&lt;')
      .replaceAll('>','&gt;')
      .replaceAll('"','&quot;')
      .replaceAll("'",'&#039;');
  }
  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 showErr(e) {
    const msg = (e && e.message) ? e.message : String(e);
    elErr.textContent = 'JS-Fehler: ' + msg;
  }

  // Global error trap
  window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
  window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));

  // --- requestAction robust finden (Popup hat das oft am parent) ---
  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) {
        try { ra(ident, value); } catch (e) { showErr(e); }
        return true;
      }
      return false;
    };

    if (tryCall()) return;

    // Popup/Fullscreen: manchmal kommt requestAction deutlich später -> länger retry
    let tries = 0;
    const timer = setInterval(() => {
      tries++;
      if (tryCall() || tries >= 150) clearInterval(timer); // ~18s
    }, 120);
  }

  function safeRefreshSoon() {
    setTimeout(() => safeRequestAction('Refresh', 1), 150);
  }

  // --- donut card ---
function donutCard({ title, percent, subtitle, color }) {
  const share = clamp01(percent / 100);
  const r = 56;
  const c = 2 * Math.PI * r;
  const dash = share * c;
  const gap  = c - dash;

  return `
    <div style="border:1px solid rgba(255,255,255,0.12);
                border-radius:16px;
                padding:14px;
                min-height:210px;
                display:flex;
                flex-direction:column;
                align-items:center;
                justify-content:center;
                gap:10px;">

      <!-- Titel oben -->
      <div style="font-size:14px;font-weight:700;opacity:.9;">
        ${escapeHtml(title)}
      </div>

      <!-- Donut -->
      <div style="position:relative;width:170px;height:170px;">
        <svg width="170" height="170" viewBox="0 0 170 170">
          <circle cx="85" cy="85" r="${r}"
                  fill="none"
                  stroke="rgba(255,255,255,0.10)"
                  stroke-width="18" />
          <circle cx="85" cy="85" r="${r}"
                  fill="none"
                  stroke="${color}"
                  stroke-width="18"
                  stroke-linecap="butt"
                  stroke-dasharray="${dash} ${gap}"
                  transform="rotate(-90 85 85)" />
        </svg>

        <!-- Prozent im Kreis -->
        <div style="position:absolute;
                    inset:0;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-weight:800;
                    font-size:22px;">
          ${escapeHtml(percent.toFixed(1))}%
        </div>
      </div>

      <!-- Untertitel unten -->
      <div style="font-size:12px;opacity:.65;text-align:center;">
        ${escapeHtml(subtitle)}
      </div>
    </div>
  `;
}

  function render(data) {
    const values = data?.values || {};
    const prod = toNum(values?.Produktion);
    const cons = toNum(values?.Hausverbrauch);
    const grid = toNum(values?.Netz);

    const eigen = cons - grid;
    const eigenClamped = eigen < 0 ? 0 : eigen;

    const evq    = (prod > 0) ? (eigenClamped / prod * 100) : 0;
    const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;

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

    // Hint
    if (data?.hasData === false) {
      elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
    } else {
      elHint.textContent =
        `Produktion: ${prod.toFixed(2)} kWh · Verbrauch: ${cons.toFixed(2)} kWh · Netzbezug: ${grid.toFixed(2)} kWh · Eigenverbrauch: ${eigenClamped.toFixed(2)} kWh`;
    }

    elGrid.innerHTML = [
      donutCard({
        title: 'Eigenverbrauchsquote',
        percent: clamp01(evq / 100) * 100,
        subtitle: 'Eigenverbrauch / Produktion',
        color: '#63B3FF'
      }),
      donutCard({
        title: 'Autarkiegrad',
        percent: clamp01(autark / 100) * 100,
        subtitle: 'Eigenverbrauch / Verbrauch',
        color: '#A855F7'
      })
    ].join('');

  }

  // --- cache ---
  function saveLast(data) {
    try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e) {}
  }
  function loadLast() {
    try {
      const raw = sessionStorage.getItem('EnergyPie_last');
      return raw ? JSON.parse(raw) : null;
    } catch(e) {
      return null;
    }
  }

  // 2) Consumer für gepufferte Symcon-Messages
  window.__EnergyPieConsume = function (data) {
    if (typeof data === 'string') {
      try { data = JSON.parse(data); } catch(e) {}
    }
    if (!data) return;
    saveLast(data);
    render(data);
  };

  // UI events
  elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));

  let dateTimer = null;
  function pushDateNow() {
    if (dateTimer) clearTimeout(dateTimer);
    dateTimer = setTimeout(() => safeRequestAction('SetDate', elDate.value), 80);
  }
  elDate.addEventListener('input',  pushDateNow);
  elDate.addEventListener('change', pushDateNow);

  elPrev.addEventListener('click',  () => safeRequestAction('Prev', 1));
  elToday.addEventListener('click', () => safeRequestAction('Today', 1));
  elNext.addEventListener('click',  () => safeRequestAction('Next', 1));

  // On load: cached sofort rendern
  const cached = loadLast();
  if (cached) render(cached);

  // UI ready -> Queue flushen
  window.__EnergyPieReady = true;
  if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
    const q = window.__EnergyPieQueue.splice(0);
    q.forEach(d => window.__EnergyPieConsume(d));
  }

  // Refresh on start + on fullscreen/resize/visibility changes
  safeRefreshSoon();

  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) safeRefreshSoon();
  });

  window.addEventListener('resize', () => safeRefreshSoon());
  window.addEventListener('pageshow', () => safeRefreshSoon());

})();
</script>