feat(dashboard): header user dropdown (Syncfusion) + proper logout; docs: clarify architecture; build: add splitbuttons; bump alpha.10

Dashboard

Add top-right user dropdown using Syncfusion DropDownButton: shows username + role; menu entries “Profil” and “Abmelden”.
Replace custom dropdown logic with Syncfusion component; position at header’s right edge.
Update /logout page to call backend logout and redirect to /login (reliable user switching).
Build/Config

Add @syncfusion/ej2-react-splitbuttons and @syncfusion/ej2-splitbuttons dependencies.
Update Vite optimizeDeps.include to pre-bundle splitbuttons and avoid import-analysis errors.
Docs

README: Rework Architecture Overview with clearer data flow:
Listener consumes MQTT (discovery/heartbeats) and updates API.
Scheduler reads from API and publishes events via MQTT to clients.
Clients send via MQTT and receive via MQTT.
Worker receives commands directly from API and reports results back (no MQTT).
Explicit note: MariaDB is accessed exclusively by the API Server; Dashboard never talks to DB directly.
README: Add SplitButtons to “Syncfusion Components Used”; add troubleshooting steps for @syncfusion/ej2-react-splitbuttons import issues (optimizeDeps + volume reset).
Copilot instructions: Document header user menu and splitbuttons technical notes (deps, optimizeDeps, dev-container node_modules volume).
Program info

Bump to 2025.1.0-alpha.10 with changelog:
UI: Header user menu (DropDownButton with username/role; Profil/Abmelden).
Frontend: Syncfusion SplitButtons integration + Vite pre-bundling config.
Fix: Added README guidance for splitbuttons import errors.
No breaking changes.
This commit is contained in:
RobbStarkAustria
2025-10-15 16:33:35 +00:00
parent 8676370fe2
commit a7df3c2708
35 changed files with 2217 additions and 59 deletions

View File

@@ -11,32 +11,39 @@ A comprehensive multi-service digital signage solution for educational instituti
## 🏗️ Architecture Overview
```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Dashboard API Server Listener │
(React/Vite) │◄──►│ (Flask) │◄──►│ (MQTT Client)
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ ▼
┌─────────────────┐
│ MariaDB
│ (Database)
└─────────────────┘
│ │
└────────────────────┬───────────────────────────┘
┌─────────────────┐
│ MQTT Broker │
│ (Mosquitto)
└─────────────────┘
┌────────────────────┼────────────────────┐
┌─────────────────┐─────────────────┐ ┌─────────────────
Scheduler │ │ Worker │ │ Infoscreen │
│ (Events) │ (Conversions) Clients │
└─────────────────┘ └─────────────────┘ └─────────────────┘
┌───────────────┐ ┌──────────────────────────┐ ┌───────────────┐
│ Dashboard │◄──────►│ API Server ◄──────►│ Worker │
│ (React/Vite) │ │ (Flask) │ │ (Conversions)
└───────────────┘ └──────────────────────────┘ └───────────────┘
┌───────────────
│ MariaDB
│ (Database)
└───────────────
│ direct commands/results
Reads events ▲ Interacts with API ▲
│ ┌────┘
┌───────────────┐ │ │ ┌───────────────┐
│ Scheduler │──┘ └──│ Listener
│ (Events) │ │ (MQTT Client) │
└───────────────┘ └───────────────┘
│ Publishes events ▲ Consumes discovery/heartbeats
│ and forwards to API
┌─────────────────┐◄─────────────────────────────────────────────────────────────────┘
MQTT Broker │────────────────────────────────────────────────────────► Clients
│ (Mosquitto) │ Sends events to clients (send discovery/heartbeats)
└─────────────────┘
```
Data flow summary:
- Listener: consumes discovery and heartbeat messages from the MQTT Broker and updates the API Server (client registration/heartbeats).
- Scheduler: reads events from the API Server and publishes active content to the MQTT Broker (retained topics per group) for clients.
- Clients: send discovery/heartbeat via the MQTT Broker (handled by the Listener) and receive content from the Scheduler via MQTT.
- Worker: receives conversion commands directly from the API Server and reports results/status back to the API (no MQTT involved).
- MariaDB: is accessed exclusively by the API Server. The Dashboard never talks to the database directly; it only communicates with the API.
## 🌟 Key Features
@@ -145,6 +152,7 @@ For detailed deployment instructions, see:
- **Styling**: Centralized Syncfusion Material 3 CSS imports in `dashboard/src/main.tsx`
- **Features**: Responsive design, real-time updates, file management
- **Port**: 5173 (dev), served via Nginx (prod)
- **Data access**: No direct database connection; communicates with the API Server only via HTTP.
### 🔧 **API Server** (`server/`)
- **Technology**: Flask + SQLAlchemy + Alembic
@@ -299,6 +307,7 @@ mosquitto_sub -h localhost -t "infoscreen/+/heartbeat" -v
- **Notifications**: Toast messages and alerts
- **Pager**: Used on Programinfo changelog for pagination
- **Cards (layouts)**: Programinfo sections styled with Syncfusion card classes
- **SplitButtons**: Header user menu (top-right) using Syncfusion DropDownButton to show current user and role, with actions “Profil” and “Abmelden”.
### Pages Overview
- **Dashboard**: System overview and statistics
@@ -402,6 +411,21 @@ docker exec -it infoscreen-db mysqladmin ping
```
**MQTT communication issues**
**Vite import-analysis errors (Syncfusion splitbuttons)**
```bash
# Symptom
[plugin:vite:import-analysis] Failed to resolve import "@syncfusion/ej2-react-splitbuttons"
# Fix
# 1) Ensure dependencies are added in dashboard/package.json:
# - @syncfusion/ej2-react-splitbuttons, @syncfusion/ej2-splitbuttons
# 2) In dashboard/vite.config.ts, add to optimizeDeps.include:
# '@syncfusion/ej2-react-splitbuttons', '@syncfusion/ej2-splitbuttons'
# 3) If dashboard uses a named node_modules volume, recreate it so npm ci runs inside the container:
docker compose rm -sf dashboard
docker volume rm <project>_dashboard-node-modules <project>_dashboard-vite-cache || true
docker compose up -d --build dashboard
```
```bash
# Test MQTT broker
mosquitto_pub -h localhost -t test -m "hello"