no message
This commit is contained in:
@@ -1,133 +1,12 @@
|
|||||||
<div style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
|
|
||||||
<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>
|
<script>
|
||||||
const elRange = document.getElementById('range');
|
// WICHTIG: global definieren
|
||||||
const elDate = document.getElementById('date');
|
window.handleMessage = function (data) {
|
||||||
const elPrev = document.getElementById('prev');
|
document.body.insertAdjacentHTML(
|
||||||
const elToday = document.getElementById('today');
|
'beforeend',
|
||||||
const elNext = document.getElementById('next');
|
`<pre style="margin-top:10px;">HANDLEMESSAGE:\n${JSON.stringify(data, null, 2)}</pre>`
|
||||||
const elValues = document.getElementById('values');
|
);
|
||||||
const elPeriod = document.getElementById('period');
|
};
|
||||||
const elDebug = document.getElementById('debug');
|
|
||||||
|
|
||||||
// Range ändern -> sofort rechnen
|
// Beim Laden sofort Test anfordern
|
||||||
elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
|
setTimeout(() => requestAction('Refresh', 1), 300);
|
||||||
|
|
||||||
// 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));
|
|
||||||
|
|
||||||
// Symcon pusht Daten hier rein (UpdateVisualizationValue -> handleMessage)
|
|
||||||
function handleMessage(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 = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Werte-Box
|
|
||||||
if (data.values) {
|
|
||||||
renderValues(data.values);
|
|
||||||
} else {
|
|
||||||
renderValues({});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.debug) {
|
|
||||||
const p = data.debug.prod, f = data.debug.feed, g = data.debug.grid;
|
|
||||||
elDebug.textContent =
|
|
||||||
`Logs: Prod(count=${p?.count ?? 0}) Feed(count=${f?.count ?? 0}) Grid(count=${g?.count ?? 0})`;
|
|
||||||
} else {
|
|
||||||
elDebug.textContent = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Nur diese vier Werte anzeigen (fixe Reihenfolge)
|
|
||||||
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, damit sofort etwas angezeigt wird
|
|
||||||
setTimeout(() => requestAction('Refresh', 1), 200);
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -95,6 +95,13 @@ class Energy_Pie extends IPSModule
|
|||||||
*/
|
*/
|
||||||
private function RecalculateAndPush(): void
|
private function RecalculateAndPush(): void
|
||||||
{
|
{
|
||||||
|
$this->UpdateVisualizationValue(json_encode([
|
||||||
|
'test' => 'kommt an',
|
||||||
|
'time' => date('H:i:s')
|
||||||
|
]));
|
||||||
|
return;
|
||||||
|
|
||||||
|
|
||||||
$range = $this->ReadAttributeString(self::ATTR_RANGE);
|
$range = $this->ReadAttributeString(self::ATTR_RANGE);
|
||||||
$date = $this->ReadAttributeString(self::ATTR_DATE);
|
$date = $this->ReadAttributeString(self::ATTR_DATE);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user