christian/busylight_modular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
2026-04-23 21:57:07 +02:00
co-authored by Claude Opus 4.6
parent bc96fed884
commit 1bf42250b4
3 changed files with 93 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/devices.html
+61 -3
View File
@@ -2,7 +2,12 @@
{% block title %}WLED-Geraete - Busylight{% endblock %}
{% 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="col-lg-8">
@@ -12,8 +17,11 @@
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Status</th>
<th>Hostname / IP</th>
<th>Name</th>
<th>LEDs</th>
<th>Version</th>
<th>Segmente</th>
<th>Aktionen</th>
</tr>
@@ -21,12 +29,21 @@
<tbody>
{% for device in devices %}
<tr>
<td>
<span class="status-dot" id="status-{{ device.id }}"
style="background: #999;" title="Nicht geprueft"></span>
</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.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>
@@ -79,7 +96,7 @@
{% if not devices %}
<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.
</td>
</tr>
@@ -101,7 +118,7 @@
<div class="mb-3">
<label class="form-label">Hostname / IP</label>
<input type="text" name="hostname" class="form-control"
placeholder="doorlight0027.intra.example.de" required>
placeholder="doorlight0027.intra.volksheimstaette.de" required>
</div>
<div class="mb-3">
<label class="form-label">Name (optional)</label>
@@ -122,3 +139,44 @@
</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 %}