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:
belevo\mh
2025-12-18 10:13:07 +01:00
parent 09f1c52f87
commit 05f4b8b32d
1 changed files with 54 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Energy_Pie/module.html
+54 -107
View File
@@ -1,6 +1,7 @@
<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">
@@ -12,13 +13,16 @@
</select>
</label>
<label style="display:flex;gap:6px;align-items:center;">
<!-- Datum: sichtbares Textfeld + unsichtbares echtes Date-Input -->
<label style="display:flex;gap:6px;align-items:center; position:relative;">
<span>Datum</span>
<input id="date" type="date" />
</label>
<!-- Label rechts neben Date-Picker -->
<div id="dateLabel" style="font-weight:900;opacity:.95;min-width:92px;"></div>
<input id="dateText" type="text" readonly
style="width:110px; padding:2px 6px; font-weight:900; opacity:.95; cursor:pointer;" />
<input id="date" type="date"
style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" />
</label>
<button id="prev" type="button">◀</button>
<button id="today" type="button">Heute</button>
@@ -37,20 +41,15 @@
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 in Donut-Farben */
#wrap{
position:relative;
overflow:hidden;
@@ -74,12 +73,8 @@
z-index:0;
}
#wrap > *{
position:relative;
z-index:1;
}
#wrap > *{ position:relative; z-index:1; }
/* Zeitraum-Zeile (Spanne) */
#period {
font-size: 15px;
font-weight: 600;
@@ -87,7 +82,6 @@
opacity: 0.95;
}
/* Werte-Zeile */
#hint {
margin-top: 6px;
font-size: 15px;
@@ -102,16 +96,11 @@
}
#hint .kv b { font-weight: 900; }
/* App/kleine Breite: Werte untereinander */
@media (max-width: 720px) {
#hint .kv {
display: block;
margin: 4px 0;
}
#hint .kv { display:block; margin:4px 0; }
}
</style>
<!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist -->
<script>
window.__EnergyPieQueue = window.__EnergyPieQueue || [];
window.__EnergyPieReady = false;
@@ -128,8 +117,8 @@
<script>
(function () {
const elRange = document.getElementById('range');
const elDate = document.getElementById('date');
const elDateLbl = document.getElementById('dateLabel');
const elDate = document.getElementById('date'); // echtes Date-Input (unsichtbar)
const elDateText = document.getElementById('dateText'); // sichtbares Textfeld
const elPrev = document.getElementById('prev');
const elToday = document.getElementById('today');
const elNext = document.getElementById('next');
@@ -141,27 +130,16 @@
elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
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 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('&','&amp;')
.replaceAll('<','&lt;')
.replaceAll('>','&gt;')
.replaceAll('"','&quot;')
.replaceAll("'",'&#039;');
.replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
.replaceAll('"','&quot;').replaceAll("'",'&#039;');
}
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}`;
@@ -171,7 +149,6 @@
return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
}
// ISO Woche + ISO Jahr
function getISOWeekYear(date) {
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
@@ -195,19 +172,16 @@
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;
}
if (ra) { try { ra(ident, value); } catch (e) { showErr(e); } return true; }
return false;
};
if (tryCall()) return;
@@ -218,66 +192,54 @@
if (tryCall() || tries >= 150) clearInterval(timer);
}, 120);
}
function safeRefreshSoon() {
setTimeout(() => safeRequestAction('Refresh', 1), 150);
}
// Date-Label rechts vom Date-Picker
function setDateLabel(range, ymd) {
if (!ymd) { elDateLbl.textContent = ''; return; }
// Datum-Text abhängig vom Range
function setDateText(range, ymd) {
if (!ymd) { elDateText.value = ''; return; }
const d = new Date(ymd + 'T00:00:00');
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 = '';
if (range === 'total') { elDateText.value = 'Gesamt'; return; }
if (range === 'day') { elDateText.value = fmtDayLabelFromYmd(ymd); return; }
if (range === 'week') { const iso = getISOWeekYear(d); elDateText.value = `Woche ${iso.week}: ${iso.year}`; return; }
if (range === 'month') { elDateText.value = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`; return; }
if (range === 'year') { elDateText.value = String(d.getFullYear()); return; }
elDateText.value = '';
}
// Snappt Datum passend zum Range (Monat->1., Jahr->01.01.)
// Snap: Monat -> 1. des Monats, 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)
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) {
const snapped = snapDateByRange(range, ymd);
if (snapped && elDate.value !== snapped) elDate.value = snapped;
setDateLabel(range, snapped);
setDateText(range, snapped);
if (pushToBackend && snapped) safeRequestAction('SetDate', snapped);
return snapped;
}
// Klick auf Textfeld öffnet Date-Picker
elDateText.addEventListener('click', () => {
try {
if (typeof elDate.showPicker === 'function') elDate.showPicker();
else { elDate.focus(); elDate.click(); }
} catch(e) {
elDate.focus();
elDate.click();
}
});
// Donut
function donutCard({ title, percent, subtitle, color }) {
const share = clamp01(percent / 100);
@@ -326,8 +288,6 @@
}
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);
@@ -354,20 +314,15 @@
if (data?.range) elRange.value = data.range;
if (data?.date) elDate.value = data.date;
const isTotal = (data?.range === 'total');
elDate.disabled = isTotal;
elDate.disabled = (data?.range === 'total');
// WICHTIG: Picker/Label immer "snapped" passend zum Range anzeigen
// Label/Picker immer passend zum Range "snappen"
applySnappedDate(data?.range || 'day', data?.date || '', false);
// Zeitraum-Spanne
if (data?.tStart && data?.tEnd) {
elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
} else {
elPeriod.textContent = '';
}
// Zeitraum: immer als Spanne (wie du willst)
if (data?.tStart && data?.tEnd) elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
else elPeriod.textContent = '';
// Werte / NoData
if (data?.hasData === false) {
elHint.innerHTML = `
<span style="font-weight:900; font-size:16px;">
@@ -414,22 +369,16 @@
}
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;
saveLast(data);
render(data);
};
// --- UI events ---
// events
elRange.addEventListener('change', () => {
const r = elRange.value;
// Range setzen
safeRequestAction('SetRange', r);
// Datum passend snappen + ans Backend schicken
applySnappedDate(r, elDate.value, true);
});
@@ -437,7 +386,6 @@
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => {
// Datum snappen + ans Backend schicken
applySnappedDate(elRange.value, elDate.value, true);
}, 80);
}
@@ -448,11 +396,10 @@
elToday.addEventListener('click', () => safeRequestAction('Today', 1));
elNext.addEventListener('click', () => safeRequestAction('Next', 1));
// cached sofort rendern
// initial
const cached = loadLast();
if (cached) render(cached);
// queue flush
window.__EnergyPieReady = true;
if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
const q = window.__EnergyPieQueue.splice(0);