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:22:34 +01:00
parent 05f4b8b32d
commit bb16399d7d
1 changed files with 109 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
Energy_Pie/module.html
View File

@@ -13,15 +13,22 @@
</select>
</label>
<!-- Datum: sichtbares Textfeld + unsichtbares echtes Date-Input -->
<!-- Datum: sichtbares Textfeld + versteckte Picker -->
<label style="display:flex;gap:6px;align-items:center; position:relative;">
<span>Datum</span>
<!-- Sichtbar -->
<input id="dateText" type="text" readonly
style="width:110px; padding:2px 6px; font-weight:900; opacity:.95; cursor:pointer;" />
style="width:170px; padding:4px 8px; font-weight:900; font-size:14px;
opacity:.95; cursor:pointer;" />
<!-- Unsichtbar: Tag -->
<input id="date" type="date"
style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" />
<!-- Unsichtbar: Woche -->
<input id="week" type="week"
style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;" />
</label>
<button id="prev" type="button">◀</button>
@@ -46,65 +53,35 @@
</div>
<style>
@media (max-width: 720px) {
#grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) { #grid { grid-template-columns: 1fr !important; } }
#wrap{
position:relative;
overflow:hidden;
min-height:100vh;
position:relative; overflow:hidden; min-height:100vh;
background: rgba(18, 18, 22, 1);
}
#wrap::before{
content:"";
position:absolute;
inset:-35%;
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;
filter: blur(18px); opacity: 1;
pointer-events:none; z-index:0;
}
#wrap > *{ position:relative; z-index:1; }
#period {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.2px;
opacity: 0.95;
}
#hint {
margin-top: 6px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.3px;
opacity: 1;
}
#hint .kv {
display: inline-block;
margin-right: 14px;
white-space: nowrap;
}
#period { font-size:15px; font-weight:600; letter-spacing:.2px; opacity:.95; }
#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; }
}
@media (max-width: 720px) { #hint .kv { display:block; margin:4px 0; } }
</style>
<script>
window.__EnergyPieQueue = window.__EnergyPieQueue || [];
window.__EnergyPieReady = false;
window.handleMessage = function (data) {
window.__EnergyPieQueue.push(data);
if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") {
@@ -117,28 +94,33 @@
<script>
(function () {
const elRange = document.getElementById('range');
const elDate = document.getElementById('date'); // echtes Date-Input (unsichtbar)
const elDateText = document.getElementById('dateText'); // sichtbares Textfeld
const elDate = document.getElementById('date'); // type=date
const elWeek = document.getElementById('week'); // type=week
const elDateText = document.getElementById('dateText'); // sichtbar
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>';
const pad2 = (n) => String(n).padStart(2,'0');
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;');
}
function toYmd(d) {
return `${d.getFullYear()}-${pad2(d.getMonth()+1)}-${pad2(d.getDate())}`;
}
function fmtDayLabelFromYmd(ymd) {
if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return '';
const [y,m,d] = ymd.split('-');
@@ -149,6 +131,7 @@
return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
}
// ISO Woche + ISO Jahr (aus Datum)
function getISOWeekYear(date) {
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
@@ -158,11 +141,25 @@
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}`;
// ISO Woche -> Montag (YYYY-Www -> YYYY-MM-DD)
function isoWeekToMondayYmd(isoWeekStr) {
// isoWeekStr: "2025-W01"
const m = /^(\d{4})-W(\d{2})$/.exec(isoWeekStr || '');
if (!m) return '';
const year = parseInt(m[1], 10);
const week = parseInt(m[2], 10);
// ISO: Woche 1 enthält den 4. Januar
const jan4 = new Date(Date.UTC(year, 0, 4));
const jan4Dow = jan4.getUTCDay() || 7; // 1..7
const mondayWeek1 = new Date(jan4);
mondayWeek1.setUTCDate(jan4.getUTCDate() - (jan4Dow - 1));
const monday = new Date(mondayWeek1);
monday.setUTCDate(mondayWeek1.getUTCDate() + (week - 1) * 7);
// zurück in lokale YYYY-MM-DD (passt für dein Backend)
return `${monday.getUTCFullYear()}-${pad2(monday.getUTCMonth()+1)}-${pad2(monday.getUTCDate())}`;
}
function showErr(e) {
@@ -177,7 +174,6 @@
if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction;
return null;
}
function safeRequestAction(ident, value) {
const tryCall = () => {
const ra = getRequestAction();
@@ -192,12 +188,9 @@
if (tryCall() || tries >= 150) clearInterval(timer);
}, 120);
}
function safeRefreshSoon() { setTimeout(() => safeRequestAction('Refresh', 1), 150); }
function safeRefreshSoon() {
setTimeout(() => safeRequestAction('Refresh', 1), 150);
}
// Datum-Text abhängig vom Range
// Sicht-Label setzen (Textfeld)
function setDateText(range, ymd) {
if (!ymd) { elDateText.value = ''; return; }
const d = new Date(ymd + 'T00:00:00');
@@ -211,11 +204,10 @@
elDateText.value = '';
}
// Snap: Monat -> 1. des Monats, Jahr -> 01.01.
// Bei Monat/Jahr snappen wir intern weiter auf 1. bzw 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); }
return ymd;
@@ -224,23 +216,59 @@
function applySnappedDate(range, ymd, pushToBackend) {
const snapped = snapDateByRange(range, ymd);
if (snapped && elDate.value !== snapped) elDate.value = snapped;
// week-input synchron halten
if (snapped) {
const d = new Date(snapped + 'T00:00:00');
const iso = getISOWeekYear(d);
elWeek.value = `${iso.year}-W${pad2(iso.week)}`;
}
setDateText(range, snapped);
if (pushToBackend && snapped) safeRequestAction('SetDate', snapped);
return snapped;
}
// Klick auf Textfeld öffnet Date-Picker
// Klick auf sichtbares Feld -> richtigen Picker öffnen
elDateText.addEventListener('click', () => {
const r = elRange.value;
try {
if (r === 'week') {
if (typeof elWeek.showPicker === 'function') elWeek.showPicker();
else { elWeek.focus(); elWeek.click(); }
} else {
if (typeof elDate.showPicker === 'function') elDate.showPicker();
else { elDate.focus(); elDate.click(); }
}
} catch(e) {
elDate.focus();
elDate.click();
// fallback
if (r === 'week') { elWeek.focus(); elWeek.click(); }
else { elDate.focus(); elDate.click(); }
}
});
// Donut
// Wenn Woche im Wochen-Picker gewählt wird -> Montag berechnen -> SetDate
elWeek.addEventListener('change', () => {
const ymd = isoWeekToMondayYmd(elWeek.value);
if (ymd) {
elDate.value = ymd; // intern speichern
applySnappedDate('week', ymd, true);// Label + Backend
}
});
// Wenn normales Datum gewählt wird
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => {
applySnappedDate(elRange.value, elDate.value, true);
}, 80);
}
elDate.addEventListener('input', pushDateNow);
elDate.addEventListener('change', pushDateNow);
function donutCard({ title, percent, subtitle, color }) {
const share = clamp01(percent / 100);
const r = 56;
@@ -249,40 +277,22 @@
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="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)"
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;
<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 style="font-size:13px;opacity:.75;text-align:center;">${escapeHtml(subtitle)}</div>
</div>
`;
}
@@ -291,10 +301,7 @@
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()}`;
const dmy = (d) => `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
if (range === 'total') return 'Zeitraum: Gesamt';
return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
}
@@ -316,21 +323,15 @@
elDate.disabled = (data?.range === 'total');
// Label/Picker immer passend zum Range "snappen"
applySnappedDate(data?.range || 'day', data?.date || '', false);
// Zeitraum: immer als Spanne (wie du willst)
if (data?.tStart && data?.tEnd) elPeriod.textContent = fmtRangeSpan(data.range, data.tStart, data.tEnd);
else elPeriod.textContent = '';
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>
<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 = `
@@ -342,30 +343,15 @@
}
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'
})
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 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; }
try { const raw = sessionStorage.getItem('EnergyPie_last'); return raw ? JSON.parse(raw) : null; }
catch(e){ return null; }
}
window.__EnergyPieConsume = function (data) {
@@ -375,28 +361,16 @@
render(data);
};
// events
elRange.addEventListener('change', () => {
const r = elRange.value;
safeRequestAction('SetRange', r);
applySnappedDate(r, elDate.value, true);
});
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => {
applySnappedDate(elRange.value, elDate.value, true);
}, 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));
// initial
const cached = loadLast();
if (cached) render(cached);
@@ -407,9 +381,7 @@
}
safeRefreshSoon();
document.addEventListener('visibilitychange', () => {
if (!document.hidden) safeRefreshSoon();
});
document.addEventListener('visibilitychange', () => { if (!document.hidden) safeRefreshSoon(); });
window.addEventListener('resize', () => safeRefreshSoon());
window.addEventListener('pageshow', () => safeRefreshSoon());
})();