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:
72
README.md
72
README.md
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user