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

no message

Browse Source
This commit is contained in:
belevo\mh
2025-12-18 09:48:45 +01:00
parent 13ff15a0d9
commit 6cb64b47fa
1 changed files with 81 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
Energy_Pie/module.html
View File

@@ -15,9 +15,11 @@
<label style="display:flex;gap:6px;align-items:center;"> <label style="display:flex;gap:6px;align-items:center;">
<span>Datum</span> <span>Datum</span>
<input id="date" type="date" /> <input id="date" type="date" />
<span id="dateLabel" style="font-weight:800; opacity:.95; margin-left:6px;"></span>
</label> </label>
<!-- Label rechts vom Date-Picker -->
<div id="dateLabel" style="font-weight:800;opacity:.95;min-width:96px;"></div>
<button id="prev" type="button">◀</button> <button id="prev" type="button">◀</button>
<button id="today" type="button">Heute</button> <button id="today" type="button">Heute</button>
<button id="next" type="button">▶</button> <button id="next" type="button">▶</button>
@@ -71,44 +73,43 @@
z-index:1; z-index:1;
} }
#period { #period{
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 700;
letter-spacing: 0.2px; letter-spacing: 0.2px;
opacity: 0.95; opacity: 0.95;
} }
#hint { #hint{
margin-top: 6px; margin-top: 6px;
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 800;
letter-spacing: 0.3px; letter-spacing: 0.3px;
opacity: 1; opacity: 1;
} }
#hint .kv { #hint .kv{
display: inline-block; display:inline-block;
margin-right: 14px; margin-right:14px;
white-space: nowrap; white-space:nowrap;
}
#hint .kv b {
font-weight: 800;
} }
#hint .kv b{ font-weight:900; }
@media (max-width: 720px) { @media (max-width: 720px) {
#hint .kv { #hint .kv{
display: block; display:block;
margin: 4px 0; margin: 4px 0;
} }
} }
</style> </style>
<!-- Puffer-Handler (Symcon kann handleMessage sehr früh callen) --> <!-- 1) Puffer-Handler: Symcon kann handleMessage sehr früh schicken -->
<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") {
const q = window.__EnergyPieQueue.splice(0); const q = window.__EnergyPieQueue.splice(0);
q.forEach(d => window.__EnergyPieConsume(d)); q.forEach(d => window.__EnergyPieConsume(d));
@@ -118,20 +119,20 @@
<script> <script>
(function () { (function () {
const elRange = document.getElementById('range'); const elRange = document.getElementById('range');
const elDate = document.getElementById('date'); const elDate = document.getElementById('date');
const elDateLabel = document.getElementById('dateLabel'); const elDateLabel = document.getElementById('dateLabel');
const elPrev = document.getElementById('prev'); const elPrev = document.getElementById('prev');
const elToday = document.getElementById('today'); const elToday = document.getElementById('today');
const elNext = document.getElementById('next'); const elNext = document.getElementById('next');
const elPeriod = document.getElementById('period'); const elPeriod = document.getElementById('period');
const elHint = document.getElementById('hint'); const elHint = document.getElementById('hint');
const elGrid = document.getElementById('grid'); const elGrid = document.getElementById('grid');
const elDbg = document.getElementById('dbg'); const elErr = document.getElementById('err');
const elErr = document.getElementById('err');
elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>'; elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
// --- helpers ---
function toNum(x) { function toNum(x) {
const n = Number(x); const n = Number(x);
return Number.isFinite(n) ? n : 0; return Number.isFinite(n) ? n : 0;
@@ -159,6 +160,8 @@
function monthNameDe(m) { 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
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));
@@ -175,12 +178,12 @@
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));
// requestAction robust finden
function getRequestAction() { 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();
@@ -190,6 +193,7 @@
} }
return false; return false;
}; };
if (tryCall()) return; if (tryCall()) return;
let tries = 0; let tries = 0;
@@ -198,11 +202,31 @@
if (tryCall() || tries >= 150) clearInterval(timer); if (tryCall() || tries >= 150) clearInterval(timer);
}, 120); }, 120);
} }
function safeRefreshSoon() { function safeRefreshSoon() {
setTimeout(() => safeRequestAction('Refresh', 1), 150); setTimeout(() => safeRequestAction('Refresh', 1), 150);
} }
function setDateLabel(range, dateStr) {
if (!dateStr) { elDateLabel.textContent = ''; return; }
const d = new Date(dateStr + 'T00:00:00');
if (range === 'day') {
elDateLabel.textContent = fmtDay(d);
} else if (range === 'month') {
elDateLabel.textContent = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`;
} else if (range === 'week') {
const iso = getISOWeekYear(d);
elDateLabel.textContent = `Woche ${iso.week}: ${iso.year}`;
} else if (range === 'year') {
elDateLabel.textContent = String(d.getFullYear());
} else if (range === 'total') {
elDateLabel.textContent = 'Gesamt';
} else {
elDateLabel.textContent = fmtDay(d);
}
}
// --- donut ---
function donutCard({ title, percent, subtitle, color }) { function donutCard({ title, percent, subtitle, color }) {
const share = clamp01(percent / 100); const share = clamp01(percent / 100);
const r = 56; const r = 56;
@@ -211,12 +235,15 @@
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;
display:flex;flex-direction:column; width:100%;
align-items:center;justify-content:center; display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;"> gap:12px;">
<div style="font-size:15px;font-weight:800;opacity:.95;"> <div style="font-size:15px;font-weight:900;opacity:.95;">
${escapeHtml(title)} ${escapeHtml(title)}
</div> </div>
@@ -234,12 +261,12 @@
<div style="position:absolute;inset:0;display:flex; <div style="position:absolute;inset:0;display:flex;
align-items:center;justify-content:center; align-items:center;justify-content:center;
font-weight:900;font-size:26px;"> font-weight:950;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;"> <div style="font-size:13px;font-weight:700;opacity:.8;text-align:center;">
${escapeHtml(subtitle)} ${escapeHtml(subtitle)}
</div> </div>
</div> </div>
@@ -258,27 +285,28 @@
const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0; const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0; const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
// Controls sync
if (data?.range) elRange.value = data.range; if (data?.range) elRange.value = data.range;
if (data?.date) elDate.value = data.date; if (data?.date) elDate.value = data.date;
const isTotal = (data?.range === 'total'); const isTotal = (data?.range === 'total');
elDate.disabled = isTotal; elDate.disabled = isTotal;
// Zeitraum (wie bei dir) // Datum-Label (rechts vom Picker)
setDateLabel(data?.range || 'day', data?.date || '');
// Zeitraum (Von–Bis)
if (data?.tStart && data?.tEnd) { if (data?.tStart && data?.tEnd) {
const s = new Date(data.tStart * 1000); const s = new Date(data.tStart * 1000);
const e = new Date(data.tEnd * 1000);
const eIncl = new Date(e.getTime() - 1000); // Ende inkl. (23:59:59)
if (data.range === 'total') { if (data.range === 'total') {
elPeriod.textContent = 'Zeitraum: Gesamt'; elPeriod.textContent = 'Zeitraum: Gesamt';
} else if (data.range === 'day') { } else if (data.range === 'day') {
elPeriod.textContent = `Zeitraum: ${fmtDay(s)}`; elPeriod.textContent = `Zeitraum: ${fmtDay(s)}`;
} else if (data.range === 'month') { } else if (data.range === 'week' || data.range === 'month' || data.range === 'year') {
elPeriod.textContent = `Zeitraum: ${monthNameDe(s.getMonth())} ${s.getFullYear()}`; elPeriod.textContent = `Zeitraum: ${fmtDay(s)} – ${fmtDay(eIncl)}`;
} 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 { } else {
elPeriod.textContent = ''; elPeriod.textContent = '';
} }
@@ -286,30 +314,13 @@
elPeriod.textContent = ''; elPeriod.textContent = '';
} }
// Datum-Label (dein Wunsch: im "Datum"-Bereich) // Werte / No-Data
elDateLabel.textContent = '';
if (data?.date) {
const d = new Date(data.date + 'T00:00:00');
if (data.range === 'week') {
const iso = getISOWeekYear(d);
elDateLabel.textContent = `Woche ${iso.week}: ${iso.year}`;
} else if (data.range === 'month') {
elDateLabel.textContent = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`;
} else if (data.range === 'year') {
elDateLabel.textContent = `${d.getFullYear()}`;
} else if (data.range === 'total') {
elDateLabel.textContent = 'Gesamt';
}
}
// Werte / Keine Daten
if (data?.hasData === false) { if (data?.hasData === false) {
elHint.innerHTML = ` elHint.innerHTML = `
<span style="font-weight:900; font-size:16px;"> <span style="font-weight:950; font-size:16px;">
${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')} ${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
</span> </span>
<span style="opacity:.8; margin-left:10px;"> <span style="opacity:.85; margin-left:10px;">
(Keine Werte für diesen Zeitraum) (Keine Werte für diesen Zeitraum)
</span> </span>
`; `;
@@ -322,6 +333,7 @@
`; `;
} }
// Donuts
elGrid.innerHTML = [ elGrid.innerHTML = [
donutCard({ donutCard({
title: 'Eigenverbrauchsquote', title: 'Eigenverbrauchsquote',
@@ -338,6 +350,7 @@
].join(''); ].join('');
} }
// cache
function saveLast(data) { function saveLast(data) {
try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e) {} try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e) {}
} }
@@ -345,9 +358,7 @@
try { try {
const raw = sessionStorage.getItem('EnergyPie_last'); const raw = sessionStorage.getItem('EnergyPie_last');
return raw ? JSON.parse(raw) : null; return raw ? JSON.parse(raw) : null;
} catch(e) { } catch(e) { return null; }
return null;
}
} }
window.__EnergyPieConsume = function (data) { window.__EnergyPieConsume = function (data) {
@@ -359,6 +370,7 @@
render(data); render(data);
}; };
// UI events
elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value)); elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));
let dateTimer = null; let dateTimer = null;
@@ -373,21 +385,22 @@
elToday.addEventListener('click', () => safeRequestAction('Today', 1)); elToday.addEventListener('click', () => safeRequestAction('Today', 1));
elNext.addEventListener('click', () => safeRequestAction('Next', 1)); elNext.addEventListener('click', () => safeRequestAction('Next', 1));
// On load: cached sofort anzeigen
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);
q.forEach(d => window.__EnergyPieConsume(d)); q.forEach(d => window.__EnergyPieConsume(d));
} }
// Refresh triggers
safeRefreshSoon(); safeRefreshSoon();
document.addEventListener('visibilitychange', () => { if (!document.hidden) safeRefreshSoon(); });
document.addEventListener('visibilitychange', () => {
if (!document.hidden) safeRefreshSoon();
});
window.addEventListener('resize', () => safeRefreshSoon()); window.addEventListener('resize', () => safeRefreshSoon());
window.addEventListener('pageshow', () => safeRefreshSoon()); window.addEventListener('pageshow', () => safeRefreshSoon());
})(); })();
</script> </script>