feat: add WLED device status check (online/offline, LEDs, version)

- Query WLED JSON API (/json/info) for device info
- Show online/offline status dot, LED count and firmware version
- Auto-check all devices on page load
- Button to manually check individual or all devices
- Fix hostname placeholder to volksheimstaette.de

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Mueller 2026-04-23 21:57:07 +02:00
parent bc96fed884
commit 1bf42250b4
3 changed files with 93 additions and 3 deletions

11
app.py
View File

@ -243,6 +243,17 @@ async def delete_device(device_id: int):
return RedirectResponse("/devices", status_code=303) return RedirectResponse("/devices", status_code=303)
@app.get("/api/devices/{device_id}/status")
async def device_status(device_id: int):
from wled_client import get_wled_info
conn = database.get_db()
dev = conn.execute("SELECT hostname FROM wled_devices WHERE id=?", (device_id,)).fetchone()
conn.close()
if not dev:
return {"online": False}
return get_wled_info(dev["hostname"])
# ── Assignments ──────────────────────────────────────────────────────────── # ── Assignments ────────────────────────────────────────────────────────────
@app.get("/assignments", response_class=HTMLResponse) @app.get("/assignments", response_class=HTMLResponse)

View File

@ -2,7 +2,12 @@
{% block title %}WLED-Geraete - Busylight{% endblock %} {% block title %}WLED-Geraete - Busylight{% endblock %}
{% block content %} {% block content %}
<h4 class="mb-4">WLED-Geraete</h4> <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>
<div class="row g-4"> <div class="row g-4">
<div class="col-lg-8"> <div class="col-lg-8">
@ -12,8 +17,11 @@
<table class="table table-hover mb-0"> <table class="table table-hover mb-0">
<thead> <thead>
<tr> <tr>
<th>Status</th>
<th>Hostname / IP</th> <th>Hostname / IP</th>
<th>Name</th> <th>Name</th>
<th>LEDs</th>
<th>Version</th>
<th>Segmente</th> <th>Segmente</th>
<th>Aktionen</th> <th>Aktionen</th>
</tr> </tr>
@ -21,12 +29,21 @@
<tbody> <tbody>
{% for device in devices %} {% for device in devices %}
<tr> <tr>
<td>
<span class="status-dot" id="status-{{ device.id }}"
style="background: #999;" title="Nicht geprueft"></span>
</td>
<td> <td>
<code>{{ device.hostname }}</code> <code>{{ device.hostname }}</code>
</td> </td>
<td>{{ device.name }}</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.segment_count }}</td> <td>{{ device.segment_count }}</td>
<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" <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
data-bs-target="#edit-{{ device.id }}"> data-bs-target="#edit-{{ device.id }}">
<i class="bi bi-pencil"></i> <i class="bi bi-pencil"></i>
@ -79,7 +96,7 @@
{% if not devices %} {% if not devices %}
<tr> <tr>
<td colspan="4" class="text-center text-muted py-4"> <td colspan="7" class="text-center text-muted py-4">
Noch keine Geraete vorhanden. Noch keine Geraete vorhanden.
</td> </td>
</tr> </tr>
@ -101,7 +118,7 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Hostname / IP</label> <label class="form-label">Hostname / IP</label>
<input type="text" name="hostname" class="form-control" <input type="text" name="hostname" class="form-control"
placeholder="doorlight0027.intra.example.de" required> placeholder="doorlight0027.intra.volksheimstaette.de" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Name (optional)</label> <label class="form-label">Name (optional)</label>
@ -122,3 +139,44 @@
</div> </div>
</div> </div>
{% endblock %} {% 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 %}

View File

@ -24,3 +24,24 @@ def call_wled(url):
except requests.exceptions.RequestException as e: except requests.exceptions.RequestException as e:
logger.warning("WLED nicht erreichbar: %s - %s", url, e) logger.warning("WLED nicht erreichbar: %s - %s", url, e)
return False, str(e) return False, str(e)
def get_wled_info(hostname):
"""Query WLED JSON API for device info. Returns dict or None."""
try:
r = requests.get(f"http://{hostname}/json/info", timeout=TIMEOUT)
if r.status_code == 200:
data = r.json()
return {
"online": True,
"name": data.get("name", ""),
"version": data.get("ver", ""),
"brand": data.get("brand", "WLED"),
"mac": data.get("mac", ""),
"ip": data.get("ip", ""),
"leds": data.get("leds", {}).get("count", 0),
"power_on": data.get("state", {}).get("on", False) if "state" not in data else None,
}
return {"online": False}
except requests.exceptions.RequestException:
return {"online": False}