ppfeiffer/MeshDD-Bot
1
0
Fork 0
Code Issues 7 Pull requests Actions Packages Projects Releases Wiki Activity
MeshDD-Bot/docs/dashboard-improvements.md
ppfeiffer 6499d90921 docs: Dashboard-Verbesserungen Übersicht (v0.6.2 - v0.6.7) 
Dokumentation aller implementierten Dashboard-Features:
Prio 1-7 + Tabler-Theme, offene Punkte

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-17 22:48:18 +01:00

5.4 KiB
Raw Permalink Blame History

Dashboard-Verbesserungen – Übersicht (v0.6.2 – v0.6.7)

Alle Änderungen wurden in der Session vom 2026-02-17 durchgeführt.

Prio 1 – Shared app.js Modul (v0.6.2)

Problem: ~360 doppelte Zeilen identischer Boilerplate-Code in allen 6 JS-Dateien (applyTheme, updateNavbar, updateSidebar, escapeHtml, Sidebar-HTML).

Lösung: static/js/app.js als gemeinsames Modul:

  • initPage({ onAuth }) – Auth-Check, Navbar, Sidebar, Theme, Toggle in einem Aufruf
  • applyTheme(theme) – setzt data-bs-theme, Icon, LocalStorage + dispatcht themechange CustomEvent
  • escapeHtml(str) – XSS-sichere HTML-Escape-Funktion
  • Sidebar wird dynamisch per innerHTML injiziert; aktiver Link über window.location.pathname

Dateien: static/js/app.js (neu), alle 5 Seiten-JS-Dateien bereinigt

Prio 2 – WebSocket Auth-Fix (v0.6.2)

Problem: initial_messages und new_message WS-Events wurden an alle Clients gesendet, auch nicht eingeloggte.

Lösung: meshbot/webserver.py:

  • WebSocketManager bekommt auth_clients: set zusätzlich zu clients
  • broadcast_auth() sendet nur an authentifizierte Clients
  • _ws_handler: eingeloggte User werden zu auth_clients hinzugefügt; initial_messages nur für diese
  • Bot nutzt broadcast_auth("new_message", ...) statt broadcast

Prio 3 – Bot-Uptime & Meshtastic-Status (v0.6.4)

Problem: Uptime nur per ?uptime-Kommando abrufbar; kein Indikator ob Bot mit Meshtastic verbunden.

Lösung:

  • meshbot/bot.py: _connected-Flag, pubsub-Subscription auf meshtastic.connection.lost, get_uptime(), _broadcast_bot_status()
  • meshbot/webserver.py: _api_stats liefert uptime + bot_connected; WS sendet bot_status-Event
  • Dashboard: 4. Info-Box "Uptime", zweiter Status-Dot #meshDot / #meshText in der Navbar

Prio 4 – Dark Mode Kartentiles (v0.6.5)

Problem: OpenStreetMap-Kacheln sind immer hell – passt nicht zum Dark Theme.

Lösung:

  • app.js:applyTheme() dispatcht themechange CustomEvent auf document
  • map.js: getTileLayer(theme) liefert CartoDB Dark Matter (dark) oder OSM (light); setMapTheme() tauscht Layer live
  • dashboard.js: Node-Detail-Modal-Karte reagiert ebenfalls auf themechange

Dark-Tile-URL: https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png

Prio 5 – Charts (v0.6.5)

Bibliothek: Chart.js 4.4.4 (CDN in index.html)

3 neue Charts im Dashboard:

Chart Typ Datenquelle
Kanal-Anfragen Doughnut stats.channel_breakdown (WS)
Hop-Verteilung Balken nodes-Objekt (client-seitig)
Hardware Top 5 Horizontalbalken nodes-Objekt (client-seitig)

Besonderheiten:

  • Charts reagieren via themechange-Event auf Dark/Light-Wechsel (Chart.defaults.color)
  • initCharts() beim Seitenstart, updateChannelChart() bei stats_update, updateNodeCharts() bei renderNodes()

Prio 6 – Nodes-Tabelle Interaktivität (v0.6.5)

Neue Features in dashboard.js + index.html:

  • Suchfeld #nodeSearch: filtert long_name, short_name, hw_model, node_id
  • Online-Filter #btnOnlineOnly: zeigt nur Nodes mit last_seen < 15 min
  • Sortierung: Klick auf <th data-sort="..."> sortiert auf-/absteigend, Icon-Feedback per bi-sort-down / bi-sort-up
  • Standardsortierung: last_seen absteigend

Prio 7 – Nachrichten Kanalfilter (v0.6.6)

Neue Features in dashboard.js + index.html:

  • Filter-Buttons im Nachrichten-Card-Header: „Alle" + ein Button pro Kanal
  • Buttons werden aus dem channels-Objekt dynamisch befüllt (nach Kanalindex sortiert)
  • Jedes .msg-item erhält data-channel-Attribut
  • applyMsgFilter() setzt/entfernt d-none auf Basis des aktiven Filters
  • Neue Nachrichten werden sofort gefiltert; initial_messages werden nach dem Laden gefiltert
  • bar.onclick statt addEventListener verhindert Listener-Akkumulation bei Channel-Updates

Extra – Tabler 1.4.0 Admin-Theme (v0.6.7)

Motivation: Eleganteres, professionelleres Erscheinungsbild.

Änderungen:

  • Bootstrap CSS/JS in allen 6 HTML-Dateien ersetzt durch @tabler/core@1.4.0 (bündelt Bootstrap intern)
  • <body class="antialiased"> auf allen Seiten für subpixel-glattes Inter-Font-Rendering
  • static/css/style.css komplett überarbeitet:
Bereich Vorher Nachher
Font System-Font Inter (via Tabler automatisch)
Sidebar-Links Linker Rand-Indikator Rounded Highlight (Tabler-Stil)
Cards Kein Schatten Subtiler Box-Shadow
Info-Boxen Statisch Hover-Animation (translateY + Shadow)
Status-Dot Einfacher Glow Pulsierender Keyframe-Ring
Navbar Nur Border Shadow + Tabler-Variablen
Navbar-Höhe 46 px 48 px
Sidebar-Breite 200 px 210 px

Tabler CSS-Variablen (--tblr-*) mit Bootstrap-Fallback (var(--tblr-x, var(--bs-x))) für maximale Kompatibilität.

Noch offen

# Feature Aufwand
Prio 8 /api/stats/history – Backend + Zeitverlauf-Liniendiagramm (Nachrichten/Stunde) mittel
Klein Favicon auf allen Seiten sehr klein
Klein Nachrichten >24h: Datum statt nur Uhrzeit sehr klein
Klein Channel-Breakdown Fallback-Text wenn leer sehr klein
Klein CLAUDE.md Versionsfeld aktualisieren sehr klein
Klein Scheduler: „Nächster Lauf"-Zeitstempel mittel