371 lines
11 KiB
HTML
371 lines
11 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="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;
|
||
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; }
|
||
}
|
||
|
||
/* Quantum-Waves Hintergrund */
|
||
#wrap{
|
||
position:relative;
|
||
overflow:hidden;
|
||
min-height:100vh;
|
||
}
|
||
|
||
#wrap::before{
|
||
content:"";
|
||
position:absolute;
|
||
inset:-50%;
|
||
background:
|
||
radial-gradient(circle at 20% 25%, rgba(99,179,255,.20), transparent 45%),
|
||
radial-gradient(circle at 80% 35%, rgba(168,85,247,.18), transparent 50%),
|
||
radial-gradient(circle at 55% 80%, rgba(255,255,255,.07), transparent 55%);
|
||
filter: blur(20px);
|
||
opacity:.9;
|
||
animation: qDrift 14s ease-in-out infinite alternate;
|
||
pointer-events:none;
|
||
z-index:0;
|
||
}
|
||
|
||
#wrap::after{
|
||
content:"";
|
||
position:absolute;
|
||
inset:-30%;
|
||
background:
|
||
repeating-radial-gradient(circle at 30% 40%,
|
||
rgba(255,255,255,.06) 0px,
|
||
rgba(255,255,255,0) 14px,
|
||
rgba(255,255,255,0) 28px),
|
||
repeating-linear-gradient(120deg,
|
||
rgba(168,85,247,.06) 0px,
|
||
rgba(168,85,247,0) 18px,
|
||
rgba(99,179,255,.05) 36px,
|
||
rgba(99,179,255,0) 54px);
|
||
mix-blend-mode: overlay;
|
||
opacity:.35;
|
||
animation: qWaves 10s linear infinite;
|
||
pointer-events:none;
|
||
z-index:0;
|
||
}
|
||
|
||
#wrap > *{
|
||
position:relative;
|
||
z-index:1;
|
||
}
|
||
|
||
@keyframes qDrift{
|
||
from{ transform: translate3d(-2%, -2%, 0) scale(1.02) rotate(-2deg); }
|
||
to { transform: translate3d( 2%, 2%, 0) scale(1.08) rotate( 2deg); }
|
||
}
|
||
|
||
@keyframes qWaves{
|
||
from{ transform: translate3d(0,0,0) rotate(0deg); }
|
||
to { transform: translate3d(6%, -4%, 0) rotate(360deg); }
|
||
}
|
||
</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('&','&')
|
||
.replaceAll('<','<')
|
||
.replaceAll('>','>')
|
||
.replaceAll('"','"')
|
||
.replaceAll("'",''');
|
||
}
|
||
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;
|
||
}
|
||
|
||
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;
|
||
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:260px;
|
||
width:100%;
|
||
display:flex;
|
||
flex-direction:column;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:12px;
|
||
background:rgba(0,0,0,0.08);
|
||
backdrop-filter: blur(2px);">
|
||
|
||
<div style="font-size:14px;font-weight:700;opacity:.9;">
|
||
${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="rgba(255,255,255,0.10)"
|
||
stroke-width="18" />
|
||
<circle cx="90" cy="90" r="${r}"
|
||
fill="none"
|
||
stroke="${color}"
|
||
stroke-width="18"
|
||
stroke-linecap="butt"
|
||
stroke-dasharray="${dash} ${gap}"
|
||
transform="rotate(-90 90 90)" />
|
||
</svg>
|
||
|
||
<div style="position:absolute;inset:0;display:flex;
|
||
align-items:center;justify-content:center;
|
||
font-weight:800;font-size:24px;">
|
||
${escapeHtml(percent.toFixed(1))}%
|
||
</div>
|
||
</div>
|
||
|
||
<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;
|
||
|
||
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);
|
||
const e = new Date(data.tEnd * 1000);
|
||
elPeriod.textContent = isTotal
|
||
? 'Zeitraum: Gesamt'
|
||
: `Zeitraum: ${fmtDateTime(s)} – ${fmtDateTime(e)}`;
|
||
} else {
|
||
elPeriod.textContent = '';
|
||
}
|
||
|
||
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('');
|
||
|
||
elDbg.textContent = `Letzte Daten: ${new Date().toLocaleTimeString()} · range=${data?.range ?? '-'} · date=${data?.date ?? '-'}`;
|
||
elErr.textContent = '';
|
||
}
|
||
|
||
// --- 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>
|