revert: restore original dashboard with icons and full labels

This commit is contained in:
Christian Mueller 2026-04-24 13:50:11 +02:00
parent 8a578fbe8d
commit 14b6352d7e

View File

@ -2,82 +2,99 @@
{% block title %}Dashboard - Busylight{% endblock %} {% block title %}Dashboard - Busylight{% endblock %}
{% block content %} {% block content %}
<div class="d-flex justify-content-between align-items-center mb-3"> <div class="d-flex justify-content-between align-items-center mb-4">
<h5 class="mb-0">Dashboard</h5> <h4 class="mb-0">Dashboard</h4>
<div> <div>
<form method="post" action="/api/poll" class="d-inline"> <form method="post" action="/api/poll" class="d-inline">
<button type="submit" class="btn btn-sm btn-outline-primary py-0"> <button type="submit" class="btn btn-sm btn-outline-primary">
<i class="bi bi-arrow-clockwise"></i> Abfragen <i class="bi bi-arrow-clockwise"></i> Jetzt abfragen
</button> </button>
</form> </form>
<small class="text-muted ms-2" id="last-update"></small> <span class="text-muted ms-2" id="last-update"></span>
</div> </div>
</div> </div>
{% if not authenticated %} {% if not authenticated %}
<div class="alert alert-warning py-2 mb-3"> <div class="alert alert-warning">
<small><i class="bi bi-exclamation-triangle"></i> Azure nicht verbunden. <i class="bi bi-exclamation-triangle"></i>
<a href="/settings">Einstellungen</a> pruefen.</small> Azure ist nicht verbunden. Bitte unter <a href="/settings">Einstellungen</a> konfigurieren und
<code>python app.py --auth</code> ausfuehren.
</div> </div>
{% endif %} {% endif %}
{% if devices %} {% if devices %}
<div class="row g-2"> <div class="row g-3">
{% for device in devices %} {% for device in devices %}
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2"> <div class="col-md-6 col-lg-4 col-xl-3">
<div class="card busylight-card h-100"> <div class="card busylight-card h-100">
<div class="card-body p-2"> <div class="card-header bg-white border-0 pb-0">
<div class="d-flex justify-content-between align-items-center mb-1"> <div class="d-flex justify-content-between align-items-center">
<strong class="small">{{ device.name }}</strong> <strong>{{ device.name }}</strong>
<small class="text-muted">{{ device.hostname }}</small>
</div> </div>
</div>
<div class="card-body pt-2">
{% for seg in device.segments|reverse %} {% for seg in device.segments|reverse %}
<div class="mb-2">
<small class="text-muted d-block mb-1">Segment {{ seg.index }}</small>
{% if seg.user %} {% if seg.user %}
{% if seg.aida == '-' and seg.teams == '-' %} {% if seg.aida == '-' and seg.teams == '-' %}
<div class="seg-compact" style="background: #f0f0f0; border-left: 3px solid #ccc;"> <div class="segment-bar" style="background: #f0f0f0; border-color: #ccc;">
<span class="seg-name">{{ seg.user }}</span> <span class="status-dot me-2" style="background: #ccc;"></span>
<small class="text-muted"><i class="bi bi-hourglass-split"></i></small> {{ seg.user }}
</div> </div>
<small class="text-muted"><i class="bi bi-hourglass-split"></i> Warte auf Status...</small>
{% else %} {% else %}
<div class="seg-compact" style="background: rgba({{ seg.r }}, {{ seg.g }}, {{ seg.b }}, 0.15); border-left: 3px solid rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});"> <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="seg-name">{{ seg.user }}</span> <span class="status-dot me-2" style="background: rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});"></span>
<div class="seg-badges"> {{ seg.user }}
</div>
<div class="d-flex gap-2 mt-1">
{% if seg.aida == 'anwesend' %} {% if seg.aida == 'anwesend' %}
<span class="badge-sm bg-success">Buero</span> <span class="badge bg-success"><i class="bi bi-building"></i> Anwesend</span>
{% elif seg.aida == 'abwesend' %} {% elif seg.aida == 'abwesend' %}
<span class="badge-sm bg-secondary">Weg</span> <span class="badge bg-secondary"><i class="bi bi-door-open"></i> Abwesend</span>
{% elif seg.aida == 'homeoffice' %} {% elif seg.aida == 'homeoffice' %}
<span class="badge-sm bg-warning text-dark">HO</span> <span class="badge bg-warning text-dark"><i class="bi bi-house"></i> Homeoffice</span>
{% else %}
<span class="badge bg-light text-dark">{{ seg.aida }}</span>
{% endif %} {% endif %}
{% if seg.teams != '-' %} {% if seg.teams != '-' %}
{% if 'available' in seg.teams %} {% if 'available' in seg.teams %}
<span class="badge-sm bg-success">Frei</span> <span class="badge bg-success"><i class="bi bi-microsoft-teams"></i> Verfuegbar</span>
{% elif 'busy' in seg.teams or 'inacall' in seg.teams or 'inameeting' in seg.teams %} {% elif 'busy' in seg.teams or 'inacall' in seg.teams or 'inameeting' in seg.teams %}
<span class="badge-sm bg-danger">Besetzt</span> <span class="badge bg-danger"><i class="bi bi-microsoft-teams"></i> Beschaeftigt</span>
{% elif 'donotdisturb' in seg.teams %} {% elif 'donotdisturb' in seg.teams %}
<span class="badge-sm" style="background:#8b00ff;color:#fff">DND</span> <span class="badge" style="background:#8b00ff;color:#fff"><i class="bi bi-microsoft-teams"></i> Nicht stoeren</span>
{% elif 'away' in seg.teams or 'berightback' in seg.teams %} {% elif 'away' in seg.teams or 'berightback' in seg.teams %}
<span class="badge-sm bg-warning text-dark">Weg</span> <span class="badge bg-warning text-dark"><i class="bi bi-microsoft-teams"></i> Abwesend</span>
{% elif 'offline' in seg.teams %}
<span class="badge bg-secondary"><i class="bi bi-microsoft-teams"></i> Offline</span>
{% elif 'presenting' in seg.teams %} {% elif 'presenting' in seg.teams %}
<span class="badge-sm bg-danger">Praes.</span> <span class="badge bg-danger"><i class="bi bi-microsoft-teams"></i> Praesentiert</span>
{% elif 'offline' in seg.teams or 'inactive' in seg.teams or 'offwork' in seg.teams %}
<span class="badge-sm bg-secondary">Off</span>
{% elif 'outofoffice' in seg.teams %} {% elif 'outofoffice' in seg.teams %}
<span class="badge-sm bg-secondary">OoO</span> <span class="badge bg-secondary"><i class="bi bi-microsoft-teams"></i> Nicht im Buero</span>
{% elif 'inactive' in seg.teams or 'offwork' in seg.teams %}
<span class="badge bg-secondary"><i class="bi bi-microsoft-teams"></i> Inaktiv</span>
{% else %}
<span class="badge bg-light text-dark"><i class="bi bi-microsoft-teams"></i> {{ seg.teams }}</span>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if seg.phone %} {% if seg.phone %}
<span class="badge-sm bg-danger"><i class="bi bi-telephone-fill"></i></span> <span class="badge bg-danger"><i class="bi bi-telephone-fill"></i> Telefoniert</span>
{% else %}
<span class="badge bg-light text-dark"><i class="bi bi-telephone"></i> Frei</span>
{% endif %} {% endif %}
</div> </div>
</div>
{% endif %} {% endif %}
{% else %} {% else %}
<div class="seg-compact seg-empty"> <div class="segment-bar empty">
<small class="text-muted">-- leer --</small> <i class="bi bi-dash-circle me-2"></i> Nicht zugeordnet
</div> </div>
{% endif %} {% endif %}
</div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@ -95,6 +112,7 @@
{% block scripts %} {% block scripts %}
<script> <script>
// Auto-refresh every 10 seconds
setTimeout(() => location.reload(), 10000); setTimeout(() => location.reload(), 10000);
document.getElementById('last-update').textContent = document.getElementById('last-update').textContent =
'Aktualisiert: ' + new Date().toLocaleTimeString('de-DE'); 'Aktualisiert: ' + new Date().toLocaleTimeString('de-DE');