busylight_modular/templates/dashboard.html
Christian Mueller 5267baf0b4 feat: rewrite busylight as FastAPI web application with SQLite
Replace the standalone Python script + config.cfg with a full web
application featuring:
- FastAPI backend with REST API
- SQLite database (config, state, activity log separated)
- Bootstrap 5 web interface for configuration
- Pages: Dashboard, Users, Devices, Assignments, Color Rules, Settings, Log
- APScheduler background polling for Teams presence + AIDA status
- systemd service file for Linux deployment
- Migration script to import existing config.cfg data

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-23 20:46:33 +02:00

75 lines
2.8 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 %}
<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>
{% 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 %}