490 lines
16 KiB
HTML
490 lines
16 KiB
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>
|
|
|
|
<!-- Datum: sichtbares Feld + unsichtbare Picker als Overlay -->
|
|
<label id="dateWrap" style="display:flex;gap:6px;align-items:center; position:relative;">
|
|
<span>Datum</span>
|
|
|
|
<!-- Sichtbar -->
|
|
<input id="dateText" type="text" readonly
|
|
style="width:210px; padding:4px 10px; font-weight:900; font-size:14px;
|
|
opacity:.95; cursor:pointer; border:1px solid rgba(255,255,255,.25);
|
|
border-radius:6px; background:rgba(0,0,0,.18); color:#fff;" />
|
|
|
|
<!-- Overlay Picker (transparent, exakt über dateText) -->
|
|
<input id="date" type="date" aria-label="Datum"
|
|
style="position:absolute; left:52px; top:0; height:100%;
|
|
width:210px; opacity:0; cursor:pointer; display:none;" />
|
|
|
|
<input id="week" type="week" aria-label="Woche"
|
|
style="position:absolute; left:52px; top:0; height:100%;
|
|
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>
|
|
|
|
<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 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');
|
|
|
|
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>';
|
|
|
|
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 clamp01(x){ return (!Number.isFinite(x)) ? 0 : (x<0?0:(x>1?1:x)); }
|
|
function escapeHtml(s){
|
|
return String(s)
|
|
.replaceAll('&','&').replaceAll('<','<').replaceAll('>','>')
|
|
.replaceAll('"','"').replaceAll("'","'");
|
|
}
|
|
|
|
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 };
|
|
}
|
|
|
|
// YYYY-Www -> Montag YYYY-MM-DD
|
|
function isoWeekToMondayYmd(isoWeekStr){
|
|
const m = /^(\d{4})-W(\d{2})$/.exec(isoWeekStr || '');
|
|
if (!m) return '';
|
|
const year = parseInt(m[1],10);
|
|
const week = parseInt(m[2],10);
|
|
|
|
const jan4 = new Date(Date.UTC(year,0,4));
|
|
const jan4Dow = jan4.getUTCDay() || 7;
|
|
const mondayWeek1 = new Date(jan4);
|
|
mondayWeek1.setUTCDate(jan4.getUTCDate() - (jan4Dow - 1));
|
|
|
|
const monday = new Date(mondayWeek1);
|
|
monday.setUTCDate(mondayWeek1.getUTCDate() + (week-1)*7);
|
|
|
|
return `${monday.getUTCFullYear()}-${pad2(monday.getUTCMonth()+1)}-${pad2(monday.getUTCDate())}`;
|
|
}
|
|
|
|
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); }
|
|
|
|
// aktiven Picker anzeigen
|
|
function setActivePicker(range){
|
|
elDate.style.display = 'none';
|
|
elWeek.style.display = 'none';
|
|
elMonth.style.display = 'none';
|
|
elYearSel.style.display = 'none';
|
|
|
|
if (range === 'total') return;
|
|
if (range === 'day') elDate.style.display = 'block';
|
|
if (range === 'week') elWeek.style.display = 'block';
|
|
if (range === 'month') elMonth.style.display = 'block';
|
|
if (range === 'year') elYearSel.style.display = 'block';
|
|
}
|
|
|
|
// dateText setzen
|
|
function setDateText(range, 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');
|
|
|
|
if (range === 'day'){
|
|
elDateText.value = `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
|
|
} else if (range === 'week'){
|
|
const iso = getISOWeekYear(d);
|
|
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 = '';
|
|
}
|
|
}
|
|
|
|
// Jahr-Select bauen
|
|
function buildYearOptions(baseYmd){
|
|
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;
|
|
|
|
elYearSel.innerHTML = '';
|
|
for (let y = to; y >= from; y--){
|
|
const opt = document.createElement('option');
|
|
opt.value = String(y);
|
|
opt.textContent = String(y);
|
|
elYearSel.appendChild(opt);
|
|
}
|
|
}
|
|
|
|
// 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 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;
|
|
|
|
// Basisdatum (immer YYYY-MM-DD vom Backend)
|
|
const ymd = data?.date || '';
|
|
if (ymd && /^\d{4}-\d{2}-\d{2}$/.test(ymd)) elDate.value = ymd;
|
|
|
|
// aktiven Picker setzen
|
|
setActivePicker(elRange.value);
|
|
|
|
// Jahr-Select vorbereiten
|
|
buildYearOptions(ymd);
|
|
|
|
// 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 = `
|
|
<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', () => {
|
|
const r = elRange.value;
|
|
setActivePicker(r);
|
|
safeRequestAction('SetRange', r);
|
|
// 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));
|
|
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>
|