122 lines
4.4 KiB
PHP
122 lines
4.4 KiB
PHP
<?php
|
|
use Steuerkram\View;
|
|
use Steuerkram\Models\EventLog;
|
|
$h = fn($v) => View::h($v);
|
|
|
|
$aktiverKanal = $filter['channel'] ?? '';
|
|
$aktivesLevel = $filter['level'] ?? '';
|
|
|
|
$levelLabels = [
|
|
EventLog::LEVEL_ERROR => 'Nur Fehler',
|
|
EventLog::LEVEL_WARNING => 'Nur Warnungen',
|
|
EventLog::LEVEL_INFO => 'Nur Infos',
|
|
];
|
|
?>
|
|
<style>
|
|
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
|
|
.switch input { opacity: 0; width: 0; height: 0; }
|
|
.switch .switch-track {
|
|
position: absolute; inset: 0; cursor: pointer;
|
|
background: var(--color-muted, #94a3b8); border-radius: 999px;
|
|
transition: background .15s ease;
|
|
}
|
|
.switch .switch-track::before {
|
|
content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
|
|
background: #fff; border-radius: 50%; transition: transform .15s ease;
|
|
}
|
|
.switch input:checked + .switch-track { background: var(--color-success); }
|
|
.switch input:checked + .switch-track::before { transform: translateX(18px); }
|
|
</style>
|
|
|
|
<div class="card">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.75rem 1rem;border-bottom:1px solid var(--color-border)">
|
|
<form method="get" action="/ereignisse" id="events-filter" style="display:flex;align-items:center;gap:.5rem;flex-wrap:wrap">
|
|
<select name="channel" onchange="this.form.submit()">
|
|
<option value="">Alle Bereiche</option>
|
|
<?php foreach ($channels as $c): ?>
|
|
<option value="<?= $h($c) ?>"<?= $c === $aktiverKanal ? ' selected' : '' ?>><?= $h($c) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
<select name="level" onchange="this.form.submit()">
|
|
<option value="">Alle Schweregrade</option>
|
|
<?php foreach ($levelLabels as $value => $label): ?>
|
|
<option value="<?= $h($value) ?>"<?= $value === $aktivesLevel ? ' selected' : '' ?>><?= $h($label) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
<?php if ($aktiverKanal !== '' || $aktivesLevel !== ''): ?>
|
|
<a href="/ereignisse" class="btn btn-secondary btn-sm">Filter zurücksetzen</a>
|
|
<?php endif; ?>
|
|
</form>
|
|
<div style="display:flex;align-items:center;gap:.75rem">
|
|
<span id="events-count" class="text-muted text-sm"><?= count($events) ?> Einträge (neueste zuerst)</span>
|
|
<label class="switch" title="Automatische Aktualisierung">
|
|
<input type="checkbox" id="events-autoreload-toggle">
|
|
<span class="switch-track"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="events-body">
|
|
<?= $eventsHtml ?>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
var STORAGE_KEY = 'ereignisse-autoreload';
|
|
var POLL_MS = 60000;
|
|
var toggle = document.getElementById('events-autoreload-toggle');
|
|
var body = document.getElementById('events-body');
|
|
var count = document.getElementById('events-count');
|
|
var timer = null;
|
|
var lastHtml = body.innerHTML;
|
|
var dataUrl = '/ereignisse/data' + window.location.search;
|
|
|
|
function isEnabled() {
|
|
return localStorage.getItem(STORAGE_KEY) !== 'off';
|
|
}
|
|
|
|
function renderToggle() {
|
|
toggle.checked = isEnabled();
|
|
}
|
|
|
|
function poll() {
|
|
fetch(dataUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
|
|
.then(function (res) { return res.json(); })
|
|
.then(function (data) {
|
|
if (data.html !== lastHtml) {
|
|
lastHtml = data.html;
|
|
body.innerHTML = data.html;
|
|
}
|
|
count.textContent = data.count + ' Einträge (neueste zuerst)';
|
|
})
|
|
.catch(function () { /* nächster Versuch beim nächsten Intervall */ });
|
|
}
|
|
|
|
function start() {
|
|
stop();
|
|
timer = setInterval(poll, POLL_MS);
|
|
}
|
|
|
|
function stop() {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
}
|
|
|
|
toggle.addEventListener('change', function () {
|
|
localStorage.setItem(STORAGE_KEY, toggle.checked ? 'on' : 'off');
|
|
if (isEnabled()) {
|
|
poll();
|
|
start();
|
|
} else {
|
|
stop();
|
|
}
|
|
});
|
|
|
|
renderToggle();
|
|
if (isEnabled()) {
|
|
start();
|
|
}
|
|
})();
|
|
</script>
|