belevo\mh
80 lines
2.6 KiB
HTML
80 lines
2.6 KiB
HTML
<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 style="margin-top:12px;">
|
||
<pre id="out"
|
||
style="white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
|
||
font-size:12px;line-height:1.35;opacity:0.95;margin:0;">
|
||
Warte auf Daten…
|
||
</pre>
|
||
</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 elOut = document.getElementById('out');
|
||
|
||
// sofort bei Range-Änderung
|
||
elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
|
||
|
||
// sofort bei Datum-Änderung (input+change) mit kurzem 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 -> Tile
|
||
window.handleMessage = function (data) {
|
||
// manchmal kommt JSON als String
|
||
if (typeof data === 'string') {
|
||
try { data = JSON.parse(data); } catch(e) {}
|
||
}
|
||
if (!data) return;
|
||
|
||
// UI-Controls synchronisieren
|
||
if (data.range) elRange.value = data.range;
|
||
if (data.date) elDate.value = data.date;
|
||
|
||
// total: Datum deaktivieren
|
||
elDate.disabled = (data.range === 'total');
|
||
|
||
// Ausgabe (JSON)
|
||
elOut.textContent = JSON.stringify(data, null, 2);
|
||
};
|
||
|
||
// initial anstoßen
|
||
setTimeout(() => requestAction('Refresh', 1), 200);
|
||
</script>
|