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 10:05:26 +01:00
parent 6cb64b47fa
commit 09f1c52f87
1 changed files with 144 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
Energy_Pie/module.html
View File

@@ -17,8 +17,8 @@
<input id="date" type="date" />
</label>
<!-- Label rechts vom Date-Picker -->
<div id="dateLabel" style="font-weight:800;opacity:.95;min-width:96px;"></div>
<!-- Label rechts neben Date-Picker -->
<div id="dateLabel" style="font-weight:900;opacity:.95;min-width:92px;"></div>
<button id="prev" type="button">◀</button>
<button id="today" type="button">Heute</button>
@@ -37,22 +37,27 @@
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; }
}
/* Statischer "Fluid" Hintergrund */
/* Statischer "Fluid" Hintergrund in Donut-Farben */
#wrap{
position:relative;
overflow:hidden;
min-height:100vh;
background: rgba(18, 18, 22, 1);
}
#wrap::before{
content:"";
position:absolute;
@@ -68,48 +73,51 @@
pointer-events:none;
z-index:0;
}
#wrap > *{
position:relative;
z-index:1;
}
#period{
/* Zeitraum-Zeile (Spanne) */
#period {
font-size: 15px;
font-weight: 700;
font-weight: 600;
letter-spacing: 0.2px;
opacity: 0.95;
}
#hint{
/* Werte-Zeile */
#hint {
margin-top: 6px;
font-size: 15px;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.3px;
opacity: 1;
}
#hint .kv{
display:inline-block;
margin-right:14px;
white-space:nowrap;
#hint .kv {
display: inline-block;
margin-right: 14px;
white-space: nowrap;
}
#hint .kv b{ font-weight:900; }
#hint .kv b { font-weight: 900; }
/* App/kleine Breite: Werte untereinander */
@media (max-width: 720px) {
#hint .kv{
display:block;
#hint .kv {
display: block;
margin: 4px 0;
}
}
</style>
<!-- 1) Puffer-Handler: Symcon kann handleMessage sehr früh schicken -->
<!-- 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));
@@ -119,20 +127,20 @@
<script>
(function () {
const elRange = document.getElementById('range');
const elDate = document.getElementById('date');
const elDateLabel = 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');
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 elDbg = document.getElementById('dbg');
const elErr = document.getElementById('err');
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;
@@ -151,12 +159,14 @@
.replaceAll('"','&quot;')
.replaceAll("'",'&#039;');
}
function fmtDay(d) {
const dd = String(d.getDate()).padStart(2,'0');
const mm = String(d.getMonth() + 1).padStart(2,'0');
const yyyy = d.getFullYear();
return `${dd}.${mm}.${yyyy}`;
function fmtDayLabelFromYmd(ymd) {
// ymd: YYYY-MM-DD -> DD.MM.YYYY
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] || '';
}
@@ -171,6 +181,13 @@
return { week: weekNo, year: isoYear };
}
function toYmd(d) {
const yyyy = d.getFullYear();
const mm = String(d.getMonth() + 1).padStart(2,'0');
const dd = String(d.getDate()).padStart(2,'0');
return `${yyyy}-${mm}-${dd}`;
}
function showErr(e) {
const msg = (e && e.message) ? e.message : String(e);
elErr.textContent = 'JS-Fehler: ' + msg;
@@ -193,7 +210,6 @@
}
return false;
};
if (tryCall()) return;
let tries = 0;
@@ -206,27 +222,63 @@
setTimeout(() => safeRequestAction('Refresh', 1), 150);
}
function setDateLabel(range, dateStr) {
if (!dateStr) { elDateLabel.textContent = ''; return; }
const d = new Date(dateStr + 'T00:00:00');
// Date-Label rechts vom Date-Picker
function setDateLabel(range, ymd) {
if (!ymd) { elDateLbl.textContent = ''; return; }
const d = new Date(ymd + '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);
if (range === 'total') {
elDateLbl.textContent = 'Gesamt';
return;
}
if (range === 'day') {
elDateLbl.textContent = fmtDayLabelFromYmd(ymd);
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 = String(d.getFullYear());
return;
}
elDateLbl.textContent = '';
}
// --- donut ---
// Snappt Datum passend zum Range (Monat->1., Jahr->01.01.)
function snapDateByRange(range, ymd) {
if (!ymd) return ymd;
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);
}
// week/day/total: Datum bleibt (week wird nur als Woche angezeigt)
return ymd;
}
function applySnappedDate(range, ymd, pushToBackend) {
const snapped = snapDateByRange(range, ymd);
if (snapped && elDate.value !== snapped) elDate.value = snapped;
setDateLabel(range, snapped);
if (pushToBackend && snapped) safeRequestAction('SetDate', snapped);
return snapped;
}
// Donut
function donutCard({ title, percent, subtitle, color }) {
const share = clamp01(percent / 100);
const r = 56;
@@ -261,18 +313,32 @@
<div style="position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;
font-weight:950;font-size:26px;">
font-weight:900;font-size:26px;">
${escapeHtml(percent.toFixed(1))}%
</div>
</div>
<div style="font-size:13px;font-weight:700;opacity:.8;text-align:center;">
<div style="font-size:13px;opacity:.75;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
`;
}
function fmtRangeSpan(range, tStart, tEnd) {
// Zeitraum als Spanne: DD.MM.YYYY - DD.MM.YYYY
// tEnd ist meist "exklusiv" (z.B. Monatsanfang nächster Monat), daher -1 Sekunde
if (!tStart || !tEnd) return '';
const s = new Date(tStart * 1000);
const e = new Date((tEnd * 1000) - 1000);
const pad = (n) => String(n).padStart(2,'0');
const dmy = (d) => `${pad(d.getDate())}.${pad(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 prod = toNum(values?.Produktion);
@@ -285,42 +351,29 @@
const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
// Controls sync
if (data?.range) elRange.value = data.range;
if (data?.date) elDate.value = data.date;
const isTotal = (data?.range === 'total');
elDate.disabled = isTotal;
// Datum-Label (rechts vom Picker)
setDateLabel(data?.range || 'day', data?.date || '');
// WICHTIG: Picker/Label immer "snapped" passend zum Range anzeigen
applySnappedDate(data?.range || 'day', data?.date || '', false);
// Zeitraum (Von–Bis)
// Zeitraum-Spanne
if (data?.tStart && data?.tEnd) {
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') {
elPeriod.textContent = 'Zeitraum: Gesamt';
} else if (data.range === 'day') {
elPeriod.textContent = `Zeitraum: ${fmtDay(s)}`;
} else if (data.range === 'week' || data.range === 'month' || data.range === 'year') {
elPeriod.textContent = `Zeitraum: ${fmtDay(s)} – ${fmtDay(eIncl)}`;
} else {
elPeriod.textContent = '';
}
elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
} else {
elPeriod.textContent = '';
}
// Werte / No-Data
// Werte / NoData
if (data?.hasData === false) {
elHint.innerHTML = `
<span style="font-weight:950; font-size:16px;">
<span style="font-weight:900; font-size:16px;">
${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
</span>
<span style="opacity:.85; margin-left:10px;">
<span style="opacity:.8; margin-left:10px;">
(Keine Werte für diesen Zeitraum)
</span>
`;
@@ -333,7 +386,6 @@
`;
}
// Donuts
elGrid.innerHTML = [
donutCard({
title: 'Eigenverbrauchsquote',
@@ -370,13 +422,24 @@
render(data);
};
// UI events
elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));
// --- UI events ---
elRange.addEventListener('change', () => {
const r = elRange.value;
// Range setzen
safeRequestAction('SetRange', r);
// Datum passend snappen + ans Backend schicken
applySnappedDate(r, elDate.value, true);
});
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => safeRequestAction('SetDate', elDate.value), 80);
dateTimer = setTimeout(() => {
// Datum snappen + ans Backend schicken
applySnappedDate(elRange.value, elDate.value, true);
}, 80);
}
elDate.addEventListener('input', pushDateNow);
elDate.addEventListener('change', pushDateNow);
@@ -385,22 +448,22 @@
elToday.addEventListener('click', () => safeRequestAction('Today', 1));
elNext.addEventListener('click', () => safeRequestAction('Next', 1));
// On load: cached sofort anzeigen
// cached sofort rendern
const cached = loadLast();
if (cached) render(cached);
// Queue flush
// queue flush
window.__EnergyPieReady = true;
if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
const q = window.__EnergyPieQueue.splice(0);
q.forEach(d => window.__EnergyPieConsume(d));
}
// Refresh triggers
safeRefreshSoon();
document.addEventListener('visibilitychange', () => { if (!document.hidden) safeRefreshSoon(); });
document.addEventListener('visibilitychange', () => {
if (!document.hidden) safeRefreshSoon();
});
window.addEventListener('resize', () => safeRefreshSoon());
window.addEventListener('pageshow', () => safeRefreshSoon());
})();
</script>