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>

    <!-- Label rechts neben Date-Picker -->
    <div id="dateLabel" style="font-weight:900;opacity:.95;min-width:140px;"></div>

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

  <div id="err" style="margin-top:8px;font-size:12px;opacity:0.95;color:#ffb4b4;"></div>
</div>

<style>
  @media (max-width: 720px) {
    #grid { grid-template-columns: 1fr !important; }
  }

  /* Hintergrund */
  #wrap{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    background: rgba(18, 18, 22, 1);
  }
  #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);
    opacity: 1;
    pointer-events:none;
    z-index:0;
  }
  #wrap > *{ position:relative; z-index:1; }

  /* Zeitraum-Spanne */
  #period{
    font-size:15px;
    font-weight:600;
    letter-spacing:.2px;
    opacity:.95;
  }

  /* Werte */
  #hint{
    margin-top:6px;
    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;
    opacity:1;
  }
  #hint .kv{
    display:inline-block;
    margin-right:14px;
    white-space:nowrap;
  }
  #hint .kv b{ font-weight:900; }

  @media (max-width: 720px){
    #hint .kv{ display:block; margin:4px 0; }
  }
</style>

<!-- 1) Puffer-Handler -->
<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 elDateLbl = document.getElementById('dateLabel');

  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 elErr     = document.getElementById('err');

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

  const pad2 = (n) => String(n).padStart(2,'0');
  function toNum(x){ const n = Number(x); return Number.isFinite(n) ? n : 0; }
  function clamp01(x){ return (!Number.isFinite(x)) ? 0 : (x<0?0:(x>1?1:x)); }
  function escapeHtml(s){
    return String(s)
      .replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
      .replaceAll('"','&quot;').replaceAll("'","&#039;");
  }

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

  // ISO Woche/Jahr
  function getISOWeekYear(date) {
    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    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
  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); }

  // Label rechts vom Datum (immer aus dem gewählten Tag berechnet)
function setDateLabel(range, ymd){
  // Bei Tag: kein zweites Datum anzeigen
  if (range === 'day') { 
    elDateLbl.textContent = '';
    return; 
  }

  if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) { elDateLbl.textContent = ''; return; }
  const d = new Date(ymd + 'T00:00:00');

  if (range === 'total') { elDateLbl.textContent = 'Gesamt'; return; }
  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 = KString(d.getFullYear()); return; }

  elDateLbl.textContent = String(d.getFullYear());
}

  function fmtRangeSpan(range, tStart, tEnd){
    if (!tStart || !tEnd) return '';
    if (range === 'total') return 'Zeitraum: Gesamt';

    const s = new Date(tStart * 1000);
    const e = new Date((tEnd * 1000) - 1000);

    const dmy = (d) => `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
    return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
  }

  function donutCard({ title, percent, subtitle, color }){
    const share = clamp01(percent / 100);
    const r = 56;
    const c = 2 * Math.PI * r;
    let dash = share * c;
    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:900;opacity:.95;">${escapeHtml(title)}</div>

        <div style="position:relative;width:180px;height:180px;">
          <svg width="180" height="180" viewBox="0 0 180 180">
            <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;

    elDate.disabled = (data?.range === 'total');

    // Datum-Label (Tag bleibt im Picker!)
    setDateLabel(elRange.value, elDate.value);

    // Zeitraum-Spanne
    elPeriod.textContent = (data?.tStart && data?.tEnd)
      ? fmtRangeSpan(elRange.value, data.tStart, data.tEnd)
      : '';

    // Werte / NoData
    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);
    // Label sofort updaten (Backend kommt dann eh gleich nach)
    setDateLabel(elRange.value, elDate.value);
  });

  let dateTimer = null;
  function pushDateNow(){
    if (dateTimer) clearTimeout(dateTimer);
    dateTimer = setTimeout(() => {
      setDateLabel(elRange.value, elDate.value);
      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));

  // sofort cache rendern
  const cached = loadLast();
  if (cached) render(cached);

  // queue flush
  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>