dh/Symcon_Belevo_Energiemanagement_testing
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
mh
2025-12-18 10:41:12 +01:00
parent bb16399d7d
commit 3f86c5583a
1 changed files with 265 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Energy_Pie/module.html
+265 -164
View File
@@ -1,7 +1,6 @@
<div id="wrap" style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;"> <div id="wrap" style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
<!-- Controls --> <!-- Controls -->
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;"> <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
<label style="display:flex;gap:6px;align-items:center;"> <label style="display:flex;gap:6px;align-items:center;">
<span>Zeitraum</span> <span>Zeitraum</span>
<select id="range"> <select id="range">
@@ -13,22 +12,36 @@
</select> </select>
</label> </label>
<!-- Datum: sichtbares Textfeld + versteckte Picker --> <!-- Datum: sichtbares Feld + unsichtbare Picker als Overlay -->
<label style="display:flex;gap:6px;align-items:center; position:relative;"> <label id="dateWrap" style="display:flex;gap:6px;align-items:center; position:relative;">
<span>Datum</span> <span>Datum</span>
<!-- Sichtbar --> <!-- Sichtbar -->
<input id="dateText" type="text" readonly <input id="dateText" type="text" readonly
style="width:170px; padding:4px 8px; font-weight:900; font-size:14px; style="width:210px; padding:4px 10px; font-weight:900; font-size:14px;
opacity:.95; cursor:pointer;" /> opacity:.95; cursor:pointer; border:1px solid rgba(255,255,255,.25);
border-radius:6px; background:rgba(0,0,0,.18); color:#fff;" />
<!-- Unsichtbar: Tag --> <!-- Overlay Picker (transparent, exakt über dateText) -->
<input id="date" type="date" <input id="date" type="date" aria-label="Datum"
style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" /> style="position:absolute; left:52px; top:0; height:100%;
width:210px; opacity:0; cursor:pointer; display:none;" />
<!-- Unsichtbar: Woche --> <input id="week" type="week" aria-label="Woche"
<input id="week" type="week" style="position:absolute; left:52px; top:0; height:100%;
style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" /> width:210px; opacity:0; cursor:pointer; display:none;" />
<input id="month" type="month" aria-label="Monat"
style="position:absolute; left:52px; top:0; height:100%;
width:210px; opacity:0; cursor:pointer; display:none;" />
<!-- Jahr: nativer Picker existiert nicht -> Select -->
<select id="yearSel"
style="position:absolute; left:52px; top:0; height:100%;
width:210px; font-weight:900; display:none;
border:1px solid rgba(255,255,255,.25);
border-radius:6px; background:rgba(0,0,0,.35); color:#fff;">
</select>
</label> </label>
<button id="prev" type="button">◀</button> <button id="prev" type="button">◀</button>
@@ -48,40 +61,71 @@
max-width:none;"> max-width:none;">
</div> </div>
<div id="dbg" style="margin-top:10px;font-size:12px;opacity:0.75;"></div> <div id="err" style="margin-top:8px;font-size:12px;opacity:0.95;color:#ffb4b4;"></div>
<div id="err" style="margin-top:6px;font-size:12px;opacity:0.9;color:#ffb4b4;"></div>
</div> </div>
<style> <style>
@media (max-width: 720px) { #grid { grid-template-columns: 1fr !important; } } @media (max-width: 720px) {
#grid { grid-template-columns: 1fr !important; }
}
/* Hintergrund */
#wrap{ #wrap{
position:relative; overflow:hidden; min-height:100vh; position:relative;
overflow:hidden;
min-height:100vh;
background: rgba(18, 18, 22, 1); background: rgba(18, 18, 22, 1);
} }
#wrap::before{ #wrap::before{
content:""; position:absolute; inset:-35%; content:"";
position:absolute;
inset:-35%;
background: background:
radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.42), transparent 60%), 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(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(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(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%); radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
filter: blur(18px); opacity: 1; filter: blur(18px);
pointer-events:none; z-index:0; opacity: 1;
pointer-events:none;
z-index:0;
} }
#wrap > *{ position:relative; z-index:1; } #wrap > *{ position:relative; z-index:1; }
#period { font-size:15px; font-weight:600; letter-spacing:.2px; opacity:.95; } /* Zeitraum-Spanne */
#hint { margin-top:6px; font-size:15px; font-weight:700; letter-spacing:.3px; opacity:1; } #period{
#hint .kv { display:inline-block; margin-right:14px; white-space:nowrap; } font-size:15px;
#hint .kv b { font-weight:900; } font-weight:600;
@media (max-width: 720px) { #hint .kv { display:block; margin:4px 0; } } 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> </style>
<!-- 1) Puffer-Handler -->
<script> <script>
window.__EnergyPieQueue = window.__EnergyPieQueue || []; window.__EnergyPieQueue = window.__EnergyPieQueue || [];
window.__EnergyPieReady = false; window.__EnergyPieReady = false;
window.handleMessage = function (data) { window.handleMessage = function (data) {
window.__EnergyPieQueue.push(data); window.__EnergyPieQueue.push(data);
if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") { if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") {
@@ -93,45 +137,39 @@
<script> <script>
(function () { (function () {
const elRange = document.getElementById('range'); const elRange = document.getElementById('range');
const elDate = document.getElementById('date'); // type=date const elPrev = document.getElementById('prev');
const elWeek = document.getElementById('week'); // type=week const elToday = document.getElementById('today');
const elDateText = document.getElementById('dateText'); // sichtbar const elNext = document.getElementById('next');
const elPrev = document.getElementById('prev');
const elToday = document.getElementById('today'); const elPeriod = document.getElementById('period');
const elNext = document.getElementById('next'); const elHint = document.getElementById('hint');
const elPeriod = document.getElementById('period'); const elGrid = document.getElementById('grid');
const elHint = document.getElementById('hint'); const elErr = document.getElementById('err');
const elGrid = document.getElementById('grid');
const elErr = document.getElementById('err'); const elDateText = document.getElementById('dateText');
const elDate = document.getElementById('date');
const elWeek = document.getElementById('week');
const elMonth = document.getElementById('month');
const elYearSel = document.getElementById('yearSel');
elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>'; elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
const pad2 = (n) => String(n).padStart(2,'0'); const pad2 = (n) => String(n).padStart(2,'0');
function toYmd(d){ return `${d.getFullYear()}-${pad2(d.getMonth()+1)}-${pad2(d.getDate())}`; }
function toNum(x) { const n = Number(x); return Number.isFinite(n) ? n : 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 clamp01(x){ return (!Number.isFinite(x)) ? 0 : (x<0?0:(x>1?1:x)); }
function escapeHtml(s) { function escapeHtml(s){
return String(s) return String(s)
.replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;') .replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
.replaceAll('"','&quot;').replaceAll("'",'&#039;'); .replaceAll('"','&quot;').replaceAll("'","&#039;");
} }
function toYmd(d) { function monthNameDe(m){
return `${d.getFullYear()}-${pad2(d.getMonth()+1)}-${pad2(d.getDate())}`;
}
function fmtDayLabelFromYmd(ymd) {
if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return '';
const [y,m,d] = ymd.split('-');
return `${d}.${m}.${y}`;
}
function monthNameDe(m) {
return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || ''; return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
} }
// ISO Woche + ISO Jahr (aus Datum) // ISO Woche/Jahr
function getISOWeekYear(date) { function getISOWeekYear(date) {
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())); const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7)); d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
@@ -141,43 +179,41 @@
return { week: weekNo, year: isoYear }; return { week: weekNo, year: isoYear };
} }
// ISO Woche -> Montag (YYYY-Www -> YYYY-MM-DD) // YYYY-Www -> Montag YYYY-MM-DD
function isoWeekToMondayYmd(isoWeekStr) { function isoWeekToMondayYmd(isoWeekStr){
// isoWeekStr: "2025-W01"
const m = /^(\d{4})-W(\d{2})$/.exec(isoWeekStr || ''); const m = /^(\d{4})-W(\d{2})$/.exec(isoWeekStr || '');
if (!m) return ''; if (!m) return '';
const year = parseInt(m[1], 10); const year = parseInt(m[1],10);
const week = parseInt(m[2], 10); const week = parseInt(m[2],10);
// ISO: Woche 1 enthält den 4. Januar const jan4 = new Date(Date.UTC(year,0,4));
const jan4 = new Date(Date.UTC(year, 0, 4)); const jan4Dow = jan4.getUTCDay() || 7;
const jan4Dow = jan4.getUTCDay() || 7; // 1..7
const mondayWeek1 = new Date(jan4); const mondayWeek1 = new Date(jan4);
mondayWeek1.setUTCDate(jan4.getUTCDate() - (jan4Dow - 1)); mondayWeek1.setUTCDate(jan4.getUTCDate() - (jan4Dow - 1));
const monday = new Date(mondayWeek1); const monday = new Date(mondayWeek1);
monday.setUTCDate(mondayWeek1.getUTCDate() + (week - 1) * 7); monday.setUTCDate(mondayWeek1.getUTCDate() + (week-1)*7);
// zurück in lokale YYYY-MM-DD (passt für dein Backend)
return `${monday.getUTCFullYear()}-${pad2(monday.getUTCMonth()+1)}-${pad2(monday.getUTCDate())}`; return `${monday.getUTCFullYear()}-${pad2(monday.getUTCMonth()+1)}-${pad2(monday.getUTCDate())}`;
} }
function showErr(e) { function showErr(e){
const msg = (e && e.message) ? e.message : String(e); const msg = (e && e.message) ? e.message : String(e);
elErr.textContent = 'JS-Fehler: ' + msg; elErr.textContent = 'JS-Fehler: ' + msg;
} }
window.addEventListener('error', (ev) => showErr(ev.error || ev.message)); window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason)); window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
function getRequestAction() { // requestAction robust
function getRequestAction(){
if (typeof window.requestAction === 'function') return window.requestAction; if (typeof window.requestAction === 'function') return window.requestAction;
if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction; if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction;
return null; return null;
} }
function safeRequestAction(ident, value) { function safeRequestAction(ident, value){
const tryCall = () => { const tryCall = () => {
const ra = getRequestAction(); const ra = getRequestAction();
if (ra) { try { ra(ident, value); } catch (e) { showErr(e); } return true; } if (ra) { try { ra(ident, value); } catch(e){ showErr(e); } return true; }
return false; return false;
}; };
if (tryCall()) return; if (tryCall()) return;
@@ -188,88 +224,72 @@
if (tryCall() || tries >= 150) clearInterval(timer); if (tryCall() || tries >= 150) clearInterval(timer);
}, 120); }, 120);
} }
function safeRefreshSoon() { setTimeout(() => safeRequestAction('Refresh', 1), 150); } function safeRefreshSoon(){ setTimeout(() => safeRequestAction('Refresh', 1), 150); }
// Sicht-Label setzen (Textfeld) // aktiven Picker anzeigen
function setDateText(range, ymd) { function setActivePicker(range){
if (!ymd) { elDateText.value = ''; return; } elDate.style.display = 'none';
const d = new Date(ymd + 'T00:00:00'); elWeek.style.display = 'none';
elMonth.style.display = 'none';
elYearSel.style.display = 'none';
if (range === 'total') { elDateText.value = 'Gesamt'; return; } if (range === 'total') return;
if (range === 'day') { elDateText.value = fmtDayLabelFromYmd(ymd); return; } if (range === 'day') elDate.style.display = 'block';
if (range === 'week') { const iso = getISOWeekYear(d); elDateText.value = `Woche ${iso.week}: ${iso.year}`; return; } if (range === 'week') elWeek.style.display = 'block';
if (range === 'month') { elDateText.value = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`; return; } if (range === 'month') elMonth.style.display = 'block';
if (range === 'year') { elDateText.value = String(d.getFullYear()); return; } if (range === 'year') elYearSel.style.display = 'block';
elDateText.value = '';
} }
// Bei Monat/Jahr snappen wir intern weiter auf 1. bzw 01.01. // dateText setzen
function snapDateByRange(range, ymd) { function setDateText(range, ymd){
if (!ymd) return ymd; if (range === 'total'){ elDateText.value = 'Gesamt'; return; }
if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) { elDateText.value = ''; return; }
const d = new Date(ymd + 'T00:00:00'); const d = new Date(ymd + 'T00:00:00');
if (range === 'month') { d.setDate(1); return toYmd(d); }
if (range === 'year') { d.setMonth(0, 1); return toYmd(d); }
return ymd;
}
function applySnappedDate(range, ymd, pushToBackend) { if (range === 'day'){
const snapped = snapDateByRange(range, ymd); elDateText.value = `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
if (snapped && elDate.value !== snapped) elDate.value = snapped; } else if (range === 'week'){
// week-input synchron halten
if (snapped) {
const d = new Date(snapped + 'T00:00:00');
const iso = getISOWeekYear(d); const iso = getISOWeekYear(d);
elWeek.value = `${iso.year}-W${pad2(iso.week)}`; elDateText.value = `Woche ${iso.week}: ${iso.year}`;
} else if (range === 'month'){
elDateText.value = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`;
} else if (range === 'year'){
elDateText.value = `${d.getFullYear()}`;
} else {
elDateText.value = '';
} }
setDateText(range, snapped);
if (pushToBackend && snapped) safeRequestAction('SetDate', snapped);
return snapped;
} }
// Klick auf sichtbares Feld -> richtigen Picker öffnen // Jahr-Select bauen
elDateText.addEventListener('click', () => { function buildYearOptions(baseYmd){
const r = elRange.value; const base = (baseYmd && /^\d{4}-\d{2}-\d{2}$/.test(baseYmd)) ? new Date(baseYmd+'T00:00:00') : new Date();
const y0 = base.getFullYear();
const from = y0 - 15;
const to = y0 + 1;
try { elYearSel.innerHTML = '';
if (r === 'week') { for (let y = to; y >= from; y--){
if (typeof elWeek.showPicker === 'function') elWeek.showPicker(); const opt = document.createElement('option');
else { elWeek.focus(); elWeek.click(); } opt.value = String(y);
} else { opt.textContent = String(y);
if (typeof elDate.showPicker === 'function') elDate.showPicker(); elYearSel.appendChild(opt);
else { elDate.focus(); elDate.click(); }
}
} catch(e) {
// fallback
if (r === 'week') { elWeek.focus(); elWeek.click(); }
else { elDate.focus(); elDate.click(); }
} }
});
// Wenn Woche im Wochen-Picker gewählt wird -> Montag berechnen -> SetDate
elWeek.addEventListener('change', () => {
const ymd = isoWeekToMondayYmd(elWeek.value);
if (ymd) {
elDate.value = ymd; // intern speichern
applySnappedDate('week', ymd, true);// Label + Backend
}
});
// Wenn normales Datum gewählt wird
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => {
applySnappedDate(elRange.value, elDate.value, true);
}, 80);
} }
elDate.addEventListener('input', pushDateNow);
elDate.addEventListener('change', pushDateNow);
function donutCard({ title, percent, subtitle, color }) { // Zeitraum-Spanne
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); // tEnd exklusiv -> -1s
const dmy = (d) => `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
}
// Donut (ohne Box/Rand)
function donutCard({ title, percent, subtitle, color }){
const share = clamp01(percent / 100); const share = clamp01(percent / 100);
const r = 56; const r = 56;
const c = 2 * Math.PI * r; const c = 2 * Math.PI * r;
@@ -277,36 +297,37 @@
if (dash > c - 0.01) dash = c; if (dash > c - 0.01) dash = c;
return ` return `
<div style="padding:18px 10px;width:100%; <div style="padding:18px 10px; width:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;"> 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="font-size:15px;font-weight:900;opacity:.95;">${escapeHtml(title)}</div>
<div style="position:relative;width:180px;height:180px;"> <div style="position:relative;width:180px;height:180px;">
<svg width="180" height="180" viewBox="0 0 180 180"> <svg width="180" height="180" viewBox="0 0 180 180">
<circle cx="90" cy="90" r="${r}" <circle cx="90" cy="90" r="${r}"
fill="none" stroke="${color}" stroke-width="18" stroke-linecap="butt" fill="none"
stroke-dasharray="${dash} ${c}" transform="rotate(-90 90 90)" 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});" /> style="filter: drop-shadow(0 0 12px ${color});" />
</svg> </svg>
<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center; <div style="position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;
font-weight:900;font-size:26px;"> font-weight:900;font-size:26px;">
${escapeHtml(percent.toFixed(1))}% ${escapeHtml(percent.toFixed(1))}%
</div> </div>
</div> </div>
<div style="font-size:13px;opacity:.75;text-align:center;">${escapeHtml(subtitle)}</div>
<div style="font-size:13px;opacity:.75;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div> </div>
`; `;
} }
function fmtRangeSpan(range, tStart, tEnd) { function render(data){
if (!tStart || !tEnd) return '';
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()}`;
if (range === 'total') return 'Zeitraum: Gesamt';
return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
}
function render(data) {
const values = data?.values || {}; const values = data?.values || {};
const prod = toNum(values?.Produktion); const prod = toNum(values?.Produktion);
const cons = toNum(values?.Hausverbrauch); const cons = toNum(values?.Hausverbrauch);
@@ -319,19 +340,49 @@
const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0; const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
if (data?.range) elRange.value = data.range; if (data?.range) elRange.value = data.range;
if (data?.date) elDate.value = data.date;
elDate.disabled = (data?.range === 'total'); // Basisdatum (immer YYYY-MM-DD vom Backend)
const ymd = data?.date || '';
if (ymd && /^\d{4}-\d{2}-\d{2}$/.test(ymd)) elDate.value = ymd;
applySnappedDate(data?.range || 'day', data?.date || '', false); // aktiven Picker setzen
setActivePicker(elRange.value);
if (data?.tStart && data?.tEnd) elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd); // Jahr-Select vorbereiten
else elPeriod.textContent = ''; buildYearOptions(ymd);
if (data?.hasData === false) { // Picker synchronisieren
if (elRange.value === 'week' && ymd){
const d = new Date(ymd + 'T00:00:00');
const iso = getISOWeekYear(d);
elWeek.value = `${iso.year}-W${pad2(iso.week)}`;
}
if (elRange.value === 'month' && ymd){
const d = new Date(ymd + 'T00:00:00');
elMonth.value = `${d.getFullYear()}-${pad2(d.getMonth()+1)}`;
}
if (elRange.value === 'year' && ymd){
const d = new Date(ymd + 'T00:00:00');
elYearSel.value = String(d.getFullYear());
}
// sichtbares Datumsfeld
setDateText(elRange.value, ymd);
// Zeitraum-Spanne
elPeriod.textContent = (data?.tStart && data?.tEnd)
? fmtRangeSpan(elRange.value, data.tStart, data.tEnd)
: '';
// Werte / NoData
if (data?.hasData === false){
elHint.innerHTML = ` elHint.innerHTML = `
<span style="font-weight:900; font-size:16px;">${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}</span> <span style="font-weight:900; font-size:16px;">
<span style="opacity:.8; margin-left:10px;">(Keine Werte für diesen Zeitraum)</span> ${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
</span>
<span style="opacity:.8; margin-left:10px;">
(Keine Werte für diesen Zeitraum)
</span>
`; `;
} else { } else {
elHint.innerHTML = ` elHint.innerHTML = `
@@ -343,37 +394,87 @@
} }
elGrid.innerHTML = [ elGrid.innerHTML = [
donutCard({ title:'Eigenverbrauchsquote', percent: clamp01(evq/100)*100, subtitle:'Eigenverbrauch / Produktion', color:'#63B3FF' }), donutCard({
donutCard({ title:'Autarkiegrad', percent: clamp01(autark/100)*100, subtitle:'Eigenverbrauch / Verbrauch', color:'#A855F7' }) 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(''); ].join('');
} }
function saveLast(data) { try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e){} } // cache
function loadLast() { function saveLast(data){ try{ sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); }catch(e){} }
try { const raw = sessionStorage.getItem('EnergyPie_last'); return raw ? JSON.parse(raw) : null; } function loadLast(){
try{ const raw = sessionStorage.getItem('EnergyPie_last'); return raw ? JSON.parse(raw) : null; }
catch(e){ return null; } catch(e){ return null; }
} }
window.__EnergyPieConsume = function (data) { window.__EnergyPieConsume = function (data) {
if (typeof data === 'string') { try { data = JSON.parse(data); } catch(e) {} } if (typeof data === 'string') { try{ data = JSON.parse(data); }catch(e){} }
if (!data) return; if (!data) return;
saveLast(data); saveLast(data);
render(data); render(data);
}; };
// ---------- UI EVENTS ----------
elRange.addEventListener('change', () => { elRange.addEventListener('change', () => {
const r = elRange.value; const r = elRange.value;
setActivePicker(r);
safeRequestAction('SetRange', r); safeRequestAction('SetRange', r);
applySnappedDate(r, elDate.value, true); // kein direktes SetDate hier nötig; der Nutzer wählt danach passend (Week/Month/Year)
});
// Tag
elDate.addEventListener('change', () => {
const ymd = elDate.value;
setDateText('day', ymd);
safeRequestAction('SetDate', ymd);
});
// Woche
elWeek.addEventListener('change', () => {
const mondayYmd = isoWeekToMondayYmd(elWeek.value);
if (!mondayYmd) return;
elDate.value = mondayYmd;
setDateText('week', mondayYmd);
safeRequestAction('SetDate', mondayYmd);
});
// Monat
elMonth.addEventListener('change', () => {
const v = elMonth.value; // YYYY-MM
if (!/^\d{4}-\d{2}$/.test(v)) return;
const ymd = `${v}-01`;
elDate.value = ymd;
setDateText('month', ymd);
safeRequestAction('SetDate', ymd);
});
// Jahr
elYearSel.addEventListener('change', () => {
const y = elYearSel.value;
const ymd = `${y}-01-01`;
elDate.value = ymd;
setDateText('year', ymd);
safeRequestAction('SetDate', ymd);
}); });
elPrev.addEventListener('click', () => safeRequestAction('Prev', 1)); elPrev.addEventListener('click', () => safeRequestAction('Prev', 1));
elToday.addEventListener('click', () => safeRequestAction('Today', 1)); elToday.addEventListener('click', () => safeRequestAction('Today', 1));
elNext.addEventListener('click', () => safeRequestAction('Next', 1)); elNext.addEventListener('click', () => safeRequestAction('Next', 1));
// sofort cache rendern
const cached = loadLast(); const cached = loadLast();
if (cached) render(cached); if (cached) render(cached);
// queue flush
window.__EnergyPieReady = true; window.__EnergyPieReady = true;
if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) { if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
const q = window.__EnergyPieQueue.splice(0); const q = window.__EnergyPieQueue.splice(0);