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="year">Jahr</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 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;
              width:100%;
              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;
    min-height:100vh;
    /* Grundton, damit es nicht "lochig" wirkt */
    background: rgba(18, 18, 22, 1);
  }
  /* Nur EIN Layer, statisch */
    #wrap::before{
    content:"";
    position:absolute;
    inset:-35%;
    background:
        radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.42), transparent 60%),
        radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.38), transparent 62%),
        radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.26), transparent 64%),
        radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.22), transparent 66%),
        radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
    filter: blur(18px);   /* weniger blur = mehr sichtbar */
    opacity: 1;
    pointer-events:none;
    z-index:0;
    }
  /* Content über dem Background */
  #wrap > *{
    position:relative;
    z-index:1;
  }
    #period {
    font-size: 15px;      /* größer */
    font-weight: 600;     /* dicker */
    letter-spacing: 0.2px;
    opacity: 0.95;
    }
    /* Werte-Zeile (Produktion / Verbrauch / …) */
    #hint {
    margin-top: 6px;
    font-size: 15px;      /* größer */
    font-weight: 700;     /* noch etwas dicker */
    letter-spacing: 0.3px;
    opacity: 1;
    }
    #hint .kv {
    display: inline-block;
    margin-right: 14px;
    white-space: nowrap;
    }
    #hint .kv b {
    font-weight: 800;
    }
    /* App/kleine Breite: untereinander */
    @media (max-width: 720px) {
    #hint .kv {
        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;
  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 "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 fmtDay(d) {
    const dd = String(d.getDate()).padStart(2,'0');
    const mm = String(d.getMonth() + 1).padStart(2,'0');
    const yyyy = d.getFullYear();
    return `${dd}.${mm}.${yyyy}`;
    }

    function monthNameDe(m) {
    return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
    }

    // ISO Woche + ISO Jahr (wichtig: ISO-Jahr kann am Jahresrand abweichen)
    function getISOWeekYear(date) {
    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    // Donnerstag bestimmt ISO-Jahr
    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
    const isoYear = d.getUTCFullYear();
    const yearStart = new Date(Date.UTC(isoYear, 0, 1));
    const weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
    return { week: weekNo, year: isoYear };
    }





  function showErr(e) {
    const msg = (e && e.message) ? e.message : String(e);
    elErr.textContent = 'JS-Fehler: ' + msg;
  }
  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) {
        try { ra(ident, value); } catch (e) { showErr(e); }
        return true;
      }
      return false;
    };
    if (tryCall()) return;
    let tries = 0;
    const timer = setInterval(() => {
      tries++;
      if (tryCall() || tries >= 150) clearInterval(timer);
    }, 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;
  let dash = share * c;
    // Schutz gegen Rundungs-Artefakte bei 99.9..100%
   if (dash > c - 0.01) dash = c;
return `
  <div style="padding:18px 10px;
              width:100%;
              display:flex;
              flex-direction:column;
              align-items:center;
              justify-content:center;
              gap:12px;">
    <div style="font-size:15px;font-weight:800;opacity:.95;">
      ${escapeHtml(title)}
    </div>
    <div style="position:relative;width:180px;height:180px;">
      <svg width="180" height="180" viewBox="0 0 180 180">
        <!-- Anteilsegment -->
        <circle cx="90" cy="90" r="${r}"
                fill="none"
                stroke="${color}"
                stroke-width="18"
                stroke-linecap="butt"
                stroke-dasharray="${dash} ${c}"
                transform="rotate(-90 90 90)"
                style="filter: drop-shadow(0 0 12px ${color});" />
      </svg>
      <div style="position:absolute;inset:0;display:flex;
                  align-items:center;justify-content:center;
                  font-weight:900;font-size:26px;">
        ${escapeHtml(percent.toFixed(1))}%
      </div>
    </div>
    <div style="font-size:13px;opacity:.75;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;
    if (data?.range) elRange.value = data.range;
    if (data?.date)  elDate.value  = data.date;
    const isTotal = (data?.range === 'total');
    elDate.disabled = isTotal;

    if (data?.tStart && data?.tEnd) {
    const s = new Date(data.tStart * 1000);

    if (data.range === 'total') {
        elPeriod.textContent = 'Zeitraum: Gesamt';
    } else if (data.range === 'day') {
        elPeriod.textContent = `Zeitraum: ${fmtDay(s)}`;
    } else if (data.range === 'month') {
        elPeriod.textContent = `Zeitraum: ${monthNameDe(s.getMonth())} ${s.getFullYear()}`;
    } else if (data.range === 'week') {
        const iso = getISOWeekYear(s);
        elPeriod.textContent = `Zeitraum: Woche ${iso.week} ${iso.year}`;
    } else if (data.range === 'year') {
        elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`;
    } else {
        elPeriod.textContent = '';
    }
    } else {
    elPeriod.textContent = '';
    }


    if (data?.hasData === false) {
    elHint.innerHTML = `
        <span style="font-weight:900; font-size:16px;">
        ${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
        </span>
        <span style="opacity:.8; margin-left:10px;">
        (Keine Werte für diesen Zeitraum)
        </span>
    `;
    } else {
    elHint.innerHTML = `
        <span class="kv"><b>Produktion:</b> ${escapeHtml(prod.toFixed(2))} kWh</span>
        <span class="kv"><b>Verbrauch:</b> ${escapeHtml(cons.toFixed(2))} kWh</span>
        <span class="kv"><b>Netzbezug:</b> ${escapeHtml(grid.toFixed(2))} kWh</span>
        <span class="kv"><b>Eigenverbrauch:</b> ${escapeHtml(eigenClamped.toFixed(2))} kWh</span>
    `;
    }


    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;
    }
  }
  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));
  const cached = loadLast();
  if (cached) render(cached);
  window.__EnergyPieReady = true;
  if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
    const q = window.__EnergyPieQueue.splice(0);
    q.forEach(d => window.__EnergyPieConsume(d));
  }
  safeRefreshSoon();
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) safeRefreshSoon();
  });
  window.addEventListener('resize', () => safeRefreshSoon());
  window.addEventListener('pageshow', () => safeRefreshSoon());
})();
</script>