no message
This commit is contained in:
belevo\mh
@@ -1,141 +1,3 @@
|
||||
<div style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
|
||||
<div style="margin-bottom:8px;padding:6px 10px;
|
||||
border:1px solid #888;border-radius:8px;
|
||||
background:rgba(255,255,255,0.05);">
|
||||
HTML-Version: <b>DEBUG-1</b>
|
||||
</div>
|
||||
<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 (Mo–So)</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">Heute</button>
|
||||
<button id="next" type="button">▶</button>
|
||||
</div>
|
||||
|
||||
<div id="period" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
|
||||
|
||||
<div style="margin-top:10px;display:flex;flex-direction:column;gap:8px;max-width:520px;">
|
||||
<div style="font-weight:600;">Werte</div>
|
||||
<div id="values" style="display:flex;flex-direction:column;gap:6px;"></div>
|
||||
<div id="debug" style="margin-top:8px;font-size:12px;opacity:0.65;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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 elValues = document.getElementById('values');
|
||||
const elPeriod = document.getElementById('period');
|
||||
const elDebug = document.getElementById('debug');
|
||||
|
||||
// Range ändern -> sofort rechnen
|
||||
elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
|
||||
|
||||
// Datum ändern -> sofort rechnen (input + change, mit kleinem debounce)
|
||||
let dateTimer = null;
|
||||
function pushDateNow() {
|
||||
if (dateTimer) clearTimeout(dateTimer);
|
||||
dateTimer = setTimeout(() => requestAction('SetDate', elDate.value), 80);
|
||||
}
|
||||
elDate.addEventListener('input', pushDateNow);
|
||||
elDate.addEventListener('change', pushDateNow);
|
||||
|
||||
// Navigation
|
||||
elPrev.addEventListener('click', () => requestAction('Prev', 1));
|
||||
elToday.addEventListener('click', () => requestAction('Today', 1));
|
||||
elNext.addEventListener('click', () => requestAction('Next', 1));
|
||||
|
||||
// WICHTIG: global, damit Symcon es sicher findet
|
||||
window.handleMessage = function (data) {
|
||||
if (!data) return;
|
||||
|
||||
if (data.range) elRange.value = data.range;
|
||||
if (data.date) elDate.value = data.date;
|
||||
|
||||
const isTotal = (data.range === 'total');
|
||||
elDate.disabled = isTotal;
|
||||
|
||||
// Zeitraum-Text
|
||||
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 = '';
|
||||
}
|
||||
|
||||
// Nur die 4 gewünschten Werte anzeigen (fixe Reihenfolge)
|
||||
renderValues(data.values || {});
|
||||
|
||||
if (data.debug) {
|
||||
const p = data.debug.prod || {};
|
||||
const f = data.debug.feed || {};
|
||||
const g = data.debug.grid || {};
|
||||
elDebug.textContent =
|
||||
`Prod(var=${p.varId}, arch=${p.archiveId}, count=${p.count}) | ` +
|
||||
`Feed(var=${f.varId}, arch=${f.archiveId}, count=${f.count}) | ` +
|
||||
`Grid(var=${g.varId}, arch=${g.archiveId}, count=${g.count})`;
|
||||
} else {
|
||||
elDebug.textContent = '';
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
function renderValues(values) {
|
||||
const order = ['Produktion', 'Einspeisung', 'Netz', 'Hausverbrauch'];
|
||||
|
||||
elValues.innerHTML = order.map((k) => {
|
||||
const v = values?.[k];
|
||||
const val = (+v || 0);
|
||||
return `
|
||||
<div style="display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid rgba(255,255,255,0.15);border-radius:10px;">
|
||||
<div>${escapeHtml(k)}</div>
|
||||
<div style="white-space:nowrap;font-variant-numeric:tabular-nums;">${val.toFixed(2)} kWh</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
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 escapeHtml(s) {
|
||||
return String(s)
|
||||
.replaceAll('&','&')
|
||||
.replaceAll('<','<')
|
||||
.replaceAll('>','>')
|
||||
.replaceAll('"','"')
|
||||
.replaceAll("'",''');
|
||||
}
|
||||
|
||||
// Beim Laden direkt einmal Werte anfordern
|
||||
setTimeout(() => requestAction('Refresh', 1), 200);
|
||||
</script>
|
||||
<div style="padding:20px;font-size:24px;color:red;">
|
||||
ICH BIN DIE RICHTIGE MODULE.HTML
|
||||
</div>
|
||||
Reference in New Issue
Block a user