Christian Mueller
ce19dec8c1
Also improve dashboard to show 'Warte auf Status...' instead of gray bars when user is assigned but no polling result exists yet. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
83 lines
3.3 KiB
HTML
83 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Dashboard - Busylight{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4 class="mb-0">Dashboard</h4>
|
|
<div>
|
|
<form method="post" action="/api/poll" class="d-inline">
|
|
<button type="submit" class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-arrow-clockwise"></i> Jetzt abfragen
|
|
</button>
|
|
</form>
|
|
<span class="text-muted ms-2" id="last-update"></span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if not authenticated %}
|
|
<div class="alert alert-warning">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
Azure ist nicht verbunden. Bitte unter <a href="/settings">Einstellungen</a> konfigurieren und
|
|
<code>python app.py --auth</code> ausfuehren.
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if devices %}
|
|
<div class="row g-3">
|
|
{% for device in devices %}
|
|
<div class="col-md-6 col-lg-4 col-xl-3">
|
|
<div class="card busylight-card h-100">
|
|
<div class="card-header bg-white border-0 pb-0">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<strong>{{ device.name }}</strong>
|
|
<small class="text-muted">{{ device.hostname }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-2">
|
|
{% for seg in device.segments %}
|
|
<div class="mb-2">
|
|
<small class="text-muted d-block mb-1">Segment {{ seg.index }}</small>
|
|
{% if seg.user %}
|
|
{% if seg.aida == '-' %}
|
|
<div class="segment-bar" style="background: #f0f0f0; border-color: #ccc;">
|
|
<span class="status-dot me-2" style="background: #ccc;"></span>
|
|
{{ seg.user }}
|
|
</div>
|
|
<small class="text-muted"><i class="bi bi-hourglass-split"></i> Warte auf Status...</small>
|
|
{% else %}
|
|
<div class="segment-bar" style="background: rgba({{ seg.r }}, {{ seg.g }}, {{ seg.b }}, 0.3); border-color: rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});">
|
|
<span class="status-dot me-2" style="background: rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});"></span>
|
|
{{ seg.user }}
|
|
</div>
|
|
<small class="text-muted">{{ seg.aida }} / {{ seg.teams }}</small>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="segment-bar empty">
|
|
<i class="bi bi-dash-circle me-2"></i> Nicht zugeordnet
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-lightbulb display-1 text-muted"></i>
|
|
<p class="text-muted mt-3">Noch keine WLED-Geraete konfiguriert.</p>
|
|
<a href="/devices" class="btn btn-primary">Geraete hinzufuegen</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Auto-refresh every 10 seconds
|
|
setTimeout(() => location.reload(), 10000);
|
|
document.getElementById('last-update').textContent =
|
|
'Aktualisiert: ' + new Date().toLocaleTimeString('de-DE');
|
|
</script>
|
|
{% endblock %}
|