feat: background device status check every 240s instead of on page load

- Add online, leds, version, last_check columns to wled_devices table
- Background job checks all WLED devices every 4 minutes
- Initial check on startup
- Devices page reads status from DB (instant page load)
- 'Alle jetzt pruefen' button triggers manual check

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-23 23:03:12 +02:00
co-authored by Claude Opus 4.6
parent a7efb12d5c
commit e88ab3ab08
4 changed files with 88 additions and 63 deletions
+24 -51
View File
@@ -4,9 +4,16 @@
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="mb-0">WLED-Geraete</h4>
<button class="btn btn-sm btn-outline-secondary" onclick="checkAllDevices()">
<i class="bi bi-arrow-clockwise"></i> Alle pruefen
</button>
<div>
<form method="post" action="/api/devices/check-all" class="d-inline">
<button type="submit" class="btn btn-sm btn-outline-secondary">
<i class="bi bi-arrow-clockwise"></i> Alle jetzt pruefen
</button>
</form>
{% if last_check %}
<small class="text-muted ms-2">Letzte Pruefung: {{ last_check }}</small>
{% endif %}
</div>
</div>
<div class="row g-4">
@@ -30,20 +37,24 @@
{% for device in devices %}
<tr>
<td>
<span class="status-dot" id="status-{{ device.id }}"
style="background: #999;" title="Nicht geprueft"></span>
{% if device.last_check %}
{% if device.online %}
<span class="status-dot" style="background: #28a745;" title="Online"></span>
{% else %}
<span class="status-dot" style="background: #dc3545;" title="Offline"></span>
{% endif %}
{% else %}
<span class="status-dot" style="background: #999;" title="Noch nicht geprueft"></span>
{% endif %}
</td>
<td>
<code>{{ device.hostname }}</code>
</td>
<td>{{ device.name }}</td>
<td><span id="leds-{{ device.id }}" class="text-muted">-</span></td>
<td><span id="version-{{ device.id }}" class="text-muted">-</span></td>
<td>{{ device.leds if device.leds else '-' }}</td>
<td>{{ device.version if device.version else '-' }}</td>
<td>{{ device.segment_count }}</td>
<td>
<button class="btn btn-sm btn-outline-secondary" onclick="checkDevice({{ device.id }})" title="Status pruefen">
<i class="bi bi-wifi"></i>
</button>
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
data-bs-target="#edit-{{ device.id }}">
<i class="bi bi-pencil"></i>
@@ -106,6 +117,9 @@
</div>
</div>
</div>
<div class="mt-2 text-muted">
<small>{{ devices|length }} Geraete | Status wird alle 4 Minuten automatisch geprueft</small>
</div>
</div>
<div class="col-lg-4">
@@ -139,44 +153,3 @@
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
const deviceIds = [{% for d in devices %}{{ d.id }}{% if not loop.last %},{% endif %}{% endfor %}];
function checkDevice(id) {
const dot = document.getElementById('status-' + id);
const leds = document.getElementById('leds-' + id);
const ver = document.getElementById('version-' + id);
dot.style.background = '#ffc107';
dot.title = 'Pruefe...';
fetch('/api/devices/' + id + '/status')
.then(r => r.json())
.then(data => {
if (data.online) {
dot.style.background = '#28a745';
dot.title = 'Online';
leds.textContent = data.leds || '-';
ver.textContent = data.version || '-';
} else {
dot.style.background = '#dc3545';
dot.title = 'Offline';
leds.textContent = '-';
ver.textContent = '-';
}
})
.catch(() => {
dot.style.background = '#dc3545';
dot.title = 'Fehler';
});
}
function checkAllDevices() {
deviceIds.forEach(id => checkDevice(id));
}
// Auto-check on page load
checkAllDevices();
</script>
{% endblock %}