core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Major updates to backend structure and security enhancements

Browse Source 
- Removed `COMMON_ERRORS.md` file to streamline documentation.
- Added `Flask-Limiter` for rate limiting and `redis` for session management in `requirements.txt`.
- Expanded `ROADMAP.md` to include completed security features and planned enhancements for version 2.2.
- Enhanced `setup_myp.sh` for ultra-secure kiosk installation, including system hardening and security configurations.
- Updated `app.py` to integrate CSRF protection and improved logging setup.
- Refactored user model to include username and active status for better user management.
- Improved job scheduler with uptime tracking and task management features.
- Updated various templates for a more cohesive user interface and experience.
This commit is contained in:
Till Tomczak
2025-05-25 20:33:38 +02:00
parent e21104611f
commit 2d33753b94
1288 changed files with 247388 additions and 3249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
backend/app/docs/CHART_INTEGRATION.md Normal file
View File

@@ -0,0 +1,114 @@
# Chart-Integration mit ApexCharts
Dieses Dokument beschreibt die Integration von ApexCharts in die MYP-Plattform zur Visualisierung von Daten.
## Übersicht
Die MYP-Plattform nutzt [ApexCharts](https://apexcharts.com/) für die Darstellung von Diagrammen und Visualisierungen. ApexCharts ist eine moderne JavaScript-Bibliothek zur Erstellung interaktiver Diagramme mit einem einfachen API und reaktionsfähigem Design.
## Dateien und Struktur
Die Chart-Integration besteht aus folgenden Komponenten:
1. **ApexCharts-Bibliothek**: `static/js/charts/apexcharts.min.js`
2. **Konfigurationsdatei**: `static/js/charts/chart-config.js`
3. **Renderer**: `static/js/charts/chart-renderer.js`
4. **Adapter**: `static/js/charts/chart-adapter.js`
### Funktionsweise
1. Die **Chart-Konfiguration** definiert Standardstile, Farben und Optionen für alle Diagrammtypen.
2. Der **Chart-Renderer** verwaltet die Erstellung, Aktualisierung und Zerstörung von Diagrammen.
3. Der **Chart-Adapter** verbindet die bestehende `renderChart`-Funktion mit der neuen ApexCharts-Implementierung.
## Verwendung in Templates
Um ein Diagramm in einer Template-Datei anzuzeigen:
```html
<div id="mein-chart" class="h-64" data-api-endpoint="/api/pfad/zu/daten" data-chart data-chart-type="line"></div>
```
### Verfügbare Attribute:
- `data-chart`: Markiert das Element als Diagramm-Container
- `data-api-endpoint`: Der API-Endpunkt, von dem Daten geladen werden
- `data-chart-type`: Der Diagrammtyp (optional, wird sonst automatisch bestimmt)
## Unterstützte Diagrammtypen
Die folgenden Diagrammtypen werden unterstützt:
- `line`: Liniendiagramm
- `area`: Flächendiagramm
- `bar`: Balkendiagramm
- `pie`: Kreisdiagramm
- `donut`: Ringdiagramm
- `radial`: Radialdiagramm
## Datenformat
Die API-Endpunkte sollten Daten in einem der folgenden Formate zurückgeben:
### Für Kreisdiagramme (pie/donut):
```json
{
"scheduled": 12,
"active": 5,
"completed": 25,
"cancelled": 3
}
```
### Für Balkendiagramme:
```json
[
{
"printer_name": "Drucker 1",
"job_count": 25,
"print_hours": 124.5
},
{
"printer_name": "Drucker 2",
"job_count": 18,
"print_hours": 85.2
}
]
```
### Für Linien- und Flächendiagramme:
```json
[
{
"date": "2023-01-01",
"value": 42
},
{
"date": "2023-01-02",
"value": 58
}
]
```
## Theme-Unterstützung
Die Diagramme unterstützen automatisch das Light- und Dark-Mode-Theme der MYP-Plattform. Bei einem Themenwechsel werden alle aktiven Diagramme mit den passenden Farben aktualisiert.
## Anpassung
Um die Diagramme anzupassen:
1. **Farben**: Anpassungen in `MYP_CHART_COLORS` in `chart-config.js`
2. **Standardoptionen**: Änderungen in `getBaseChartOptions()` in `chart-config.js`
3. **Spezifische Diagrammtypen**: Anpassungen in den jeweiligen Funktionen (`getLineChartConfig`, `getPieChartConfig`, etc.)
## Erweiterung
Um weitere Diagrammtypen oder Funktionen hinzuzufügen:
1. Fügen Sie eine neue Konfigurationsfunktion in `chart-config.js` hinzu
2. Erweitern Sie die `createChart`-Funktion in `chart-renderer.js`, um den neuen Diagrammtyp zu unterstützen
3. Aktualisieren Sie den `chart-adapter.js`, um die Datentransformation für den neuen Diagrammtyp zu unterstützen

145
backend/app/docs/ROADMAP.md Normal file
View File

@@ -0,0 +1,145 @@
# MYP Platform - Entwicklungs-Roadmap
Dieses Dokument beschreibt die geplanten Entwicklungsschritte und zukünftigen Features für das MYP 3D-Drucker Reservierungssystem.
## Aktuelle Version: 1.1
Die aktuelle Version umfasst die Grundfunktionalitäten:
- Benutzerauthentifizierung und -verwaltung
- Druckerverwaltung
- Job-Scheduling und -Überwachung
- Smart Plug Integration
- **✅ Vollständiges UI-Komponenten-System mit Tailwind CSS**
- **✅ Template-Helper für einfache UI-Entwicklung**
- **✅ JavaScript-Utilities für interaktive Komponenten**
- **✅ Dark Mode Support**
- **✅ Responsive Design**
- **✅ Umfassende UI-Dokumentation**
## Kürzlich Abgeschlossen (Version 1.1)
### UI/UX Verbesserungen ✅
- **Template-Helper-System**: Jinja2-Helper für Buttons, Badges, Cards, Alerts, Modals, Tabellen
- **JavaScript-Utilities**: Toast-Nachrichten, Modal-Steuerung, Dropdown-Management, Loading-Anzeigen
- **Status-System**: Automatische Status-Badges für Jobs und Drucker mit deutscher Übersetzung
- **Icon-System**: Integrierte SVG-Icons für konsistente UI
- **Filter-System**: Deutsche Datumsformatierung, Dauer-Formatierung, JSON-Encoding
- **Demo-Seite**: Vollständige Demonstration aller UI-Komponenten unter `/demo`
- **Dokumentation**: Umfassende UI-Komponenten-Dokumentation (`UI_COMPONENTS.md`)
### Technische Verbesserungen ✅
- **PostCSS-Integration**: Automatische CSS-Verarbeitung mit Tailwind und Autoprefixer
- **Build-System**: NPM-Scripts für CSS-Kompilierung und Watch-Modus
- **Komponenten-Architektur**: Modulares System für wiederverwendbare UI-Elemente
- **Template-Integration**: Nahtlose Integration in Flask-Templates
## Geplante Features
### Version 1.2 (Kurzfristig)
- [ ] E-Mail-Benachrichtigungen bei Job-Status-Änderungen
- [ ] Verbesserte Fehlerbehandlung und Logging
- [ ] Nutzungsstatistiken und Berichte
- [ ] Feinere Berechtigungssteuerung
- [ ] **Erweiterte UI-Komponenten**: Datepicker, File-Upload, Progress-Bars
- [ ] **Formular-Validierung**: Client- und serverseitige Validierung mit UI-Feedback
### Version 1.3 (Mittelfristig)
- [ ] Druckerprofile mit spezifischen Eigenschaften (Druckvolumen, Materialien, etc.)
- [ ] Materialverwaltung und -tracking
- [ ] Verbessertes Dashboard mit Echtzeit-Updates
- [ ] **HTMX-Integration**: Für bessere Interaktivität ohne JavaScript-Framework
- [ ] **Drag & Drop**: Für Job-Reihenfolge und Datei-Uploads
- [ ] **Erweiterte Tabellen**: Sortierung, Filterung, Pagination
### Version 2.0 (Langfristig)
- [ ] OctoPrint Integration für direkte Druckersteuerung
- [ ] Mobile App mit Push-Benachrichtigungen
- [ ] Wartungsplanung und -tracking
- [ ] Multi-Standort-Unterstützung
- [ ] **Progressive Web App (PWA)**: Offline-Funktionalität und App-Installation
- [ ] **Erweiterte Themes**: Anpassbare Farbschemata und Layouts
## Technische Verbesserungen
### Backend
- [ ] Refactoring für verbesserte Modularität
- [ ] REST API Dokumentation mit Swagger/OpenAPI
- [ ] Verbesserte Testabdeckung
- [ ] Migration zu SQLAlchemy 2.0
- [ ] **WebSocket-Integration**: Für Echtzeit-Updates
### Frontend
- [x] ~~Optimierung der Benutzeroberfläche~~ ✅ **Abgeschlossen**
- [x] ~~UI-Komponenten-System~~ ✅ **Abgeschlossen**
- [ ] **HTMX-Integration**: Für bessere Interaktivität ohne komplexe JavaScript-Frameworks
- [ ] **Progressive Web App (PWA)**: Funktionalität für App-ähnliche Erfahrung
- [ ] **Barrierefreiheit**: Nach WCAG-Richtlinien
- [ ] **Performance-Optimierung**: Lazy Loading, Code Splitting
### CSS/Styling
- [x] ~~Tailwind CSS Integration~~ ✅ **Abgeschlossen**
- [x] ~~PostCSS Build-Pipeline~~ ✅ **Abgeschlossen**
- [x] ~~Dark Mode Support~~ ✅ **Abgeschlossen**
- [x] ~~Responsive Design~~ ✅ **Abgeschlossen**
- [ ] **CSS-Optimierung**: Purging ungenutzter Styles, Critical CSS
- [ ] **Animation-System**: Micro-Interactions und Übergänge
## Leistung und Skalierung
- [ ] Optimierung der Datenbankabfragen
- [ ] Caching-Strategie implementieren
- [ ] Asynchrone Verarbeitung für zeitintensive Aufgaben
- [ ] Docker-Container für einfache Bereitstellung
- [ ] **CDN-Integration**: Für statische Assets
- [ ] **Service Worker**: Für Offline-Funktionalität
## Sicherheit
- [ ] Security Audit durchführen
- [ ] Implementierung von CSRF-Schutz
- [ ] Rate Limiting für API-Endpunkte
- [ ] Zwei-Faktor-Authentifizierung
- [ ] **Content Security Policy (CSP)**: Schutz vor XSS-Angriffen
## Entwickler-Erfahrung
### Dokumentation ✅
- [x] ~~UI-Komponenten-Dokumentation~~ ✅ **Abgeschlossen**
- [x] ~~Tailwind CSS Setup-Guide~~ ✅ **Abgeschlossen**
- [ ] API-Dokumentation mit Swagger
- [ ] Entwickler-Handbuch
- [ ] Deployment-Guide
### Tooling
- [x] ~~PostCSS Build-System~~ ✅ **Abgeschlossen**
- [x] ~~NPM Scripts für Development~~ ✅ **Abgeschlossen**
- [ ] **Hot Reload**: Für CSS und Templates
- [ ] **Linting**: ESLint, Prettier, Flake8
- [ ] **Testing**: Unit Tests, Integration Tests, E2E Tests
## Community und Beiträge
Wir freuen uns über Beiträge und Feedback zu dieser Roadmap. Wenn Sie Vorschläge haben oder an der Entwicklung teilnehmen möchten, erstellen Sie bitte einen Issue oder Pull Request im Repository.
### Aktuelle Prioritäten für Beiträge
1. **Testing**: Unit Tests für UI-Komponenten
2. **Accessibility**: WCAG-konforme Verbesserungen
3. **Performance**: Optimierung der CSS-Größe
4. **Dokumentation**: Übersetzungen und Beispiele
## Changelog
### Version 1.1 (Dezember 2024)
- ✅ Vollständiges UI-Komponenten-System implementiert
- ✅ Template-Helper für alle gängigen UI-Elemente
- ✅ JavaScript-Utilities für interaktive Funktionen
- ✅ PostCSS Build-Pipeline mit Tailwind CSS
- ✅ Umfassende Dokumentation erstellt
- ✅ Demo-Seite für alle Komponenten
### Version 1.0 (Juni 2023)
- ✅ Grundfunktionalitäten implementiert
- ✅ Basis-UI mit Tailwind CSS
- ✅ Dark Mode Support
---
*Zuletzt aktualisiert: Dezember 2024*

211
backend/app/docs/TAILWIND_SETUP.md Normal file
View File

@@ -0,0 +1,211 @@
# Tailwind CSS Konfiguration für MYP Platform
Dieses Dokument beschreibt die aktuelle Tailwind CSS Konfiguration und Build-Prozesse für die MYP Platform.
## Struktur
Die CSS-Assets des Projekts sind wie folgt strukturiert:
```
static/
css/
input.css # Tailwind Direktiven & benutzerdefinierte Styles
components.css # Wiederverwendbare UI-Komponenten
tailwind.min.css # Kompiliertes Light-Mode CSS (minimiert)
tailwind-dark.min.css # Kompiliertes Dark-Mode CSS (minimiert)
```
## Tailwind Konfiguration
Die Konfiguration wird durch die Datei `tailwind.config.js` im Hauptverzeichnis des Projekts definiert. Diese enthält:
- Farbpalette mit Mercedes-Benz Farben
- Erweiterungen für Schriften, Schatten und Animation
- Dark-Mode-Konfiguration über die Klasse `dark`
## Build-Befehle
### Light Mode CSS (Standardtheme)
Um das Standard-Light-Mode CSS zu erstellen:
```bash
npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind.min.css --minify
```
### Dark Mode CSS
Um das Dark-Mode CSS zu erstellen:
```bash
npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind-dark.min.css --minify --dark-mode 'class'
```
## Verwendung im Projekt
Beide CSS-Dateien werden im `<head>` der Seite eingebunden:
```html
<link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/tailwind-dark.min.css') }}" rel="stylesheet">
```
## Dark Mode Funktionalität
Der Dark Mode wird durch JavaScript in `ui-components.js` gesteuert, welches:
1. Benutzereinstellungen in `localStorage` speichert
2. Systemeinstellungen beobachtet (via `prefers-color-scheme`)
3. Eine `dark`-Klasse zum `<html>`-Element hinzufügt/entfernt
4. Ein Tastaturkürzel (Strg+Shift+D) zum Umschalten bereitstellt
## Entwicklung
Bei der Entwicklung neuer Komponenten:
1. Füge Tailwind-Klassen direkt zu HTML-Elementen hinzu
2. Für wiederverwendbare Komponenten, nutze die `@apply`-Direktive in `components.css`
3. Nach Änderungen müssen beide CSS-Dateien neu gebaut werden
## Voraussetzungen
- Node.js und npm müssen installiert sein
- Python 3.11 und Flask müssen installiert sein
## Projektstruktur
Die Tailwind-Integration besteht aus folgenden Komponenten:
```
app/
├─ static/
│ ├─ css/
│ │ ├─ input.css # Quelldatei für Tailwind
│ │ ├─ tailwind-dark-consolidated.min.css # Generierte CSS-Datei
├─ templates/ # HTML-Templates mit Tailwind-Klassen
├─ package.json # NPM-Konfiguration
├─ tailwind.config.js # Tailwind-Konfiguration
├─ postcss.config.js # PostCSS-Konfiguration
```
## Einrichtung
Das Projekt verwendet Tailwind CSS für das Frontend-Styling. Die Einrichtung wurde bereits abgeschlossen und umfasst:
1. **NPM-Abhängigkeiten** in der `package.json`
2. **Tailwind-Konfiguration** in `tailwind.config.js`
3. **PostCSS-Konfiguration** in `postcss.config.js`
4. **CSS-Eingabedatei** in `static/css/input.css`
5. **Generierte CSS-Datei** in `static/css/tailwind-dark-consolidated.min.css`
## Verwendung im Entwicklungsprozess
### CSS-Generierung
Um an den Styles zu arbeiten, verwenden Sie die folgenden Befehle:
1. **Abhängigkeiten installieren** (falls noch nicht geschehen):
```bash
npm install
```
2. **CSS überwachen und automatisch neu generieren**:
```bash
npm run watch:css
```
Dieser Befehl startet einen Watcher, der Änderungen an HTML-Templates und der input.css überwacht und automatisch die CSS-Datei neu generiert.
3. **CSS für Produktion erstellen**:
```bash
npm run build:css
```
Dieser Befehl erstellt eine minifizierte CSS-Datei für den Produktionseinsatz.
### Workflow
Der empfohlene Workflow für die Arbeit mit Tailwind CSS ist:
1. Starten Sie den Watcher mit `npm run watch:css`
2. Bearbeiten Sie die Template-Dateien in `templates/` oder fügen Sie eigene Komponenten in `static/css/input.css` hinzu
3. Die Änderungen werden automatisch in die generierte CSS-Datei übernommen
4. Führen Sie den Flask-Server mit `python3.11 app.py` aus, um die Änderungen zu sehen
## Dark Mode
Die Anwendung unterstützt einen Dark Mode. In den Templates wird dies folgendermaßen implementiert:
```html
<html class="light" data-theme="light">
<!-- oder für Dark Mode: -->
<html class="dark" data-theme="dark">
```
In Tailwind-Klassen verwenden Sie das `dark:` Präfix:
```html
<div class="bg-white text-gray-800 dark:bg-gray-800 dark:text-white">
Dieser Text passt sich dem Theme an
</div>
```
## Anpassungen
### Eigene Komponenten hinzufügen
Um eigene Komponenten zu definieren, verwenden Sie das `@layer components` Konstrukt in der `static/css/input.css` Datei:
```css
@layer components {
.custom-button {
@apply bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700;
}
}
```
### Tailwind-Konfiguration anpassen
Die Tailwind-Konfiguration wird in der `tailwind.config.js` Datei vorgenommen. Hier können Sie:
- Farben anpassen
- Eigene Abstände definieren
- Schriftarten konfigurieren
- Plugins hinzufügen
- Theme-Einstellungen vornehmen
## Optimierung für Produktion
Für die Produktionsumgebung sollte die CSS-Datei optimiert werden:
```bash
npm run build:css
```
Dies erstellt eine minifizierte Version der CSS-Datei mit PurgeCSS, das ungenutzte CSS-Klassen entfernt.
## Fehlerbehebung
### Problem: CSS wird nicht aktualisiert
1. Stellen Sie sicher, dass der Watcher läuft (`npm run watch:css`)
2. Überprüfen Sie, ob Ihre Änderungen in einem Pfad sind, der in `tailwind.config.js` unter `content` definiert ist
3. Leeren Sie den Browser-Cache (`Ctrl+F5`)
### Problem: Node-Module nicht gefunden
```bash
npm install
```
### Problem: Tailwind-Befehle funktionieren nicht
Verwenden Sie `npx` vor dem Befehl:
```bash
npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind-dark-consolidated.min.css --minify
```
## Ressourcen
- [Offizielle Tailwind-Dokumentation](https://tailwindcss.com/docs)
- [Tailwind mit Flask einrichten](https://testdriven.io/blog/flask-htmx-tailwind/)
- [Dark Mode mit Tailwind CSS](https://tailwindcss.com/docs/dark-mode)

421
backend/app/docs/UI_COMPONENTS.md Normal file
View File

@@ -0,0 +1,421 @@
# UI-Komponenten Dokumentation - MYP Platform
Diese Dokumentation beschreibt alle verfügbaren UI-Komponenten und Template-Helper der MYP Platform.
## Übersicht
Die MYP Platform bietet ein umfassendes UI-Komponenten-System basierend auf:
- **Tailwind CSS** für das Styling
- **Jinja2 Template-Helper** für einfache Verwendung in Templates
- **JavaScript-Utilities** für interaktive Funktionen
## Template-Helper
### Buttons
#### `ui_button(text, type, size, classes, icon, onclick, disabled, **attrs)`
Erstellt styled Buttons mit verschiedenen Varianten.
**Parameter:**
- `text` (str): Button-Text
- `type` (str): Button-Typ - `"primary"`, `"secondary"`, `"danger"`, `"success"`
- `size` (str): Button-Größe - `"sm"`, `"md"`, `"lg"`
- `classes` (str): Zusätzliche CSS-Klassen
- `icon` (str): SVG-Icon-Code
- `onclick` (str): JavaScript-Code für onclick
- `disabled` (bool): Button deaktiviert
- `**attrs`: Zusätzliche HTML-Attribute
**Beispiele:**
```jinja2
{{ ui_button("Speichern", "primary", "md") }}
{{ ui_button("Löschen", "danger", "sm", icon=icons.trash) }}
{{ ui_button("Bearbeiten", "secondary", onclick="editItem(123)") }}
{{ ui_button("Deaktiviert", "primary", disabled=true) }}
```
### Badges
#### `ui_badge(text, type, classes)`
Erstellt kleine Label/Tags für Status-Anzeigen.
**Parameter:**
- `text` (str): Badge-Text
- `type` (str): Badge-Typ - `"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`
- `classes` (str): Zusätzliche CSS-Klassen
**Beispiele:**
```jinja2
{{ ui_badge("Neu", "blue") }}
{{ ui_badge("Aktiv", "green") }}
{{ ui_badge("Fehler", "red") }}
```
#### `ui_status_badge(status, type)`
Erstellt spezielle Status-Badges für Jobs und Drucker.
**Parameter:**
- `status` (str): Status-Wert
- `type` (str): Typ - `"job"` oder `"printer"`
**Job-Status:**
- `queued` → "In Warteschlange"
- `printing` → "Wird gedruckt"
- `completed` → "Abgeschlossen"
- `failed` → "Fehlgeschlagen"
- `cancelled` → "Abgebrochen"
- `paused` → "Pausiert"
**Drucker-Status:**
- `ready` → "Bereit"
- `busy` → "Beschäftigt"
- `error` → "Fehler"
- `offline` → "Offline"
- `maintenance` → "Wartung"
**Beispiele:**
```jinja2
{{ ui_status_badge("printing", "job") }}
{{ ui_status_badge("ready", "printer") }}
```
### Cards
#### `ui_card(title, content, footer, classes, hover)`
Erstellt Container-Karten für Inhalte.
**Parameter:**
- `title` (str): Karten-Titel
- `content` (str): Karten-Inhalt (HTML möglich)
- `footer` (str): Karten-Footer (HTML möglich)
- `classes` (str): Zusätzliche CSS-Klassen
- `hover` (bool): Hover-Effekt aktivieren
**Beispiele:**
```jinja2
{{ ui_card(
title="Drucker Status",
content="<p>Ultimaker S3 ist bereit</p>",
footer=ui_button("Details", "primary", "sm"),
hover=true
) }}
```
### Alerts
#### `ui_alert(message, type, dismissible)`
Erstellt Benachrichtigungen und Warnungen.
**Parameter:**
- `message` (str): Alert-Nachricht
- `type` (str): Alert-Typ - `"info"`, `"success"`, `"warning"`, `"error"`
- `dismissible` (bool): Schließbar machen
**Beispiele:**
```jinja2
{{ ui_alert("Job erfolgreich erstellt!", "success", dismissible=true) }}
{{ ui_alert("Warnung: Drucker offline", "warning") }}
```
### Modals
#### `ui_modal(modal_id, title, content, footer, size)`
Erstellt Modal-Dialoge.
**Parameter:**
- `modal_id` (str): Eindeutige Modal-ID
- `title` (str): Modal-Titel
- `content` (str): Modal-Inhalt (HTML möglich)
- `footer` (str): Modal-Footer (HTML möglich)
- `size` (str): Modal-Größe - `"sm"`, `"md"`, `"lg"`, `"xl"`
**Beispiele:**
```jinja2
{{ ui_modal(
"confirm-delete",
"Löschen bestätigen",
"<p>Möchten Sie diesen Job wirklich löschen?</p>",
ui_button("Abbrechen", "secondary", onclick="MYP.Modal.close('confirm-delete')") + " " + ui_button("Löschen", "danger"),
"sm"
) }}
```
### Tabellen
#### `ui_table(headers, rows, classes, striped)`
Erstellt styled Tabellen.
**Parameter:**
- `headers` (List[str]): Tabellen-Kopfzeilen
- `rows` (List[List[str]]): Tabellen-Zeilen
- `classes` (str): Zusätzliche CSS-Klassen
- `striped` (bool): Zebra-Streifen aktivieren
**Beispiele:**
```jinja2
{% set headers = ["Name", "Status", "Aktionen"] %}
{% set rows = [
["Job 1", ui_status_badge("printing", "job"), ui_button("Details", "secondary", "sm")],
["Job 2", ui_status_badge("queued", "job"), ui_button("Details", "secondary", "sm")]
] %}
{{ ui_table(headers, rows, striped=true) }}
```
## Template-Filter
### Datum & Zeit
#### `german_datetime`
Formatiert Datetime-Objekte für deutsche Anzeige.
**Beispiele:**
```jinja2
{{ job.created_at|german_datetime }} <!-- 15.03.2024 14:30 -->
{{ job.created_at|german_datetime("%d.%m.%Y") }} <!-- 15.03.2024 -->
{{ job.created_at|german_datetime("%H:%M") }} <!-- 14:30 -->
```
#### `duration`
Formatiert Dauer in Minuten zu lesbarem Format.
**Beispiele:**
```jinja2
{{ 30|duration }} <!-- 30 Min -->
{{ 90|duration }} <!-- 1 Std 30 Min -->
{{ 120|duration }} <!-- 2 Std -->
```
#### `json`
Enkodiert Python-Daten als JSON für JavaScript.
**Beispiele:**
```jinja2
<script>
const jobData = {{ job_dict|json|safe }};
</script>
```
## Globale Variablen
### Icons
Verfügbare SVG-Icons über `icons.*`:
- `icons.check` - Häkchen
- `icons.x` - X/Schließen
- `icons.plus` - Plus/Hinzufügen
- `icons.edit` - Bearbeiten
- `icons.trash` - Löschen
- `icons.printer` - Drucker
- `icons.dashboard` - Dashboard
**Beispiele:**
```jinja2
{{ ui_button("Hinzufügen", "primary", icon=icons.plus) }}
{{ ui_button("Löschen", "danger", icon=icons.trash) }}
```
### Weitere Globale Variablen
- `current_year` - Aktuelles Jahr
## JavaScript-Utilities
### Toast-Nachrichten
```javascript
// Toast anzeigen
MYP.Toast.show('Nachricht', 'success'); // success, error, warning, info
// Toast ausblenden
MYP.Toast.hide();
```
### Modal-Steuerung
```javascript
// Modal öffnen
MYP.Modal.open('modal-id');
// Modal schließen
MYP.Modal.close('modal-id');
```
### Dropdown-Steuerung
```javascript
// Dropdown umschalten
MYP.Dropdown.toggle('dropdown-id');
// Dropdown schließen
MYP.Dropdown.close('dropdown-id');
```
### Loading-Anzeige
```javascript
// Loading anzeigen
MYP.Loading.show();
// Loading ausblenden
MYP.Loading.hide();
```
### Status-Helper
```javascript
// CSS-Klassen für Status abrufen
const jobClass = MYP.Status.getJobStatusClass('printing');
const printerClass = MYP.Status.getPrinterStatusClass('ready');
// Status-Text formatieren
const jobText = MYP.Status.formatJobStatus('printing');
const printerText = MYP.Status.formatPrinterStatus('ready');
```
## CSS-Klassen
### Button-Klassen
- `.btn` - Basis-Button-Klasse
- `.btn-primary` - Primärer Button (blau)
- `.btn-secondary` - Sekundärer Button (grau)
- `.btn-danger` - Gefahr-Button (rot)
- `.btn-success` - Erfolg-Button (grün)
- `.btn-sm` - Kleiner Button
- `.btn-lg` - Großer Button
### Badge-Klassen
- `.badge` - Basis-Badge-Klasse
- `.badge-blue`, `.badge-green`, `.badge-red`, `.badge-yellow`, `.badge-purple`
### Status-Klassen
**Job-Status:**
- `.job-status` - Basis-Klasse
- `.job-queued`, `.job-printing`, `.job-completed`, `.job-failed`, `.job-cancelled`, `.job-paused`
**Drucker-Status:**
- `.printer-status` - Basis-Klasse
- `.printer-ready`, `.printer-busy`, `.printer-error`, `.printer-offline`, `.printer-maintenance`
### Card-Klassen
- `.card` - Basis-Card-Klasse
- `.card-hover` - Card mit Hover-Effekt
### Alert-Klassen
- `.alert` - Basis-Alert-Klasse
- `.alert-info`, `.alert-success`, `.alert-warning`, `.alert-error`
### Tabellen-Klassen
- `.table-container` - Tabellen-Container
- `.table-styled` - Styled Tabelle
## Verwendung in Templates
### Basis-Template erweitern
```jinja2
{% extends "base.html" %}
{% block content %}
<div class="container mx-auto px-4 py-8">
<h1 class="text-2xl font-bold mb-6">Meine Seite</h1>
<!-- UI-Komponenten verwenden -->
{{ ui_alert("Willkommen!", "info") }}
{{ ui_card(
title="Beispiel-Karte",
content="<p>Hier ist der Inhalt der Karte.</p>",
footer=ui_button("Aktion", "primary")
) }}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/ui-components.js') }}"></script>
<script>
// Eigene JavaScript-Funktionen
</script>
{% endblock %}
```
### Formulare mit UI-Komponenten
```jinja2
<form>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">Job Name</label>
<input type="text" class="w-full px-3 py-2 border rounded-md">
</div>
<div class="flex space-x-2">
{{ ui_button("Abbrechen", "secondary") }}
{{ ui_button("Speichern", "primary", icon=icons.check) }}
</div>
</div>
</form>
```
## Demo-Seite
Eine vollständige Demo aller UI-Komponenten ist verfügbar unter `/demo` (nur für angemeldete Benutzer).
## Anpassungen
### Eigene CSS-Klassen hinzufügen
```jinja2
{{ ui_button("Custom Button", "primary", classes="my-custom-class") }}
```
### Eigene HTML-Attribute
```jinja2
{{ ui_button("Button", "primary", data_id="123", aria_label="Speichern") }}
```
### Eigene Icons verwenden
```jinja2
{% set custom_icon = '<svg>...</svg>' %}
{{ ui_button("Custom", "primary", icon=custom_icon) }}
```
## Best Practices
1. **Konsistenz**: Verwenden Sie die UI-Komponenten für einheitliches Design
2. **Accessibility**: Nutzen Sie `aria_label` und andere Accessibility-Attribute
3. **Performance**: Laden Sie JavaScript-Utilities nur bei Bedarf
4. **Responsive**: Alle Komponenten sind responsive-ready
5. **Dark Mode**: Alle Komponenten unterstützen automatisch Dark/Light Mode
## Troubleshooting
### Komponenten werden nicht angezeigt
- Prüfen Sie, ob `register_template_helpers(app)` in `init_app()` aufgerufen wird
- Stellen Sie sicher, dass Tailwind CSS kompiliert wurde
### JavaScript-Funktionen nicht verfügbar
- Laden Sie `ui-components.js` in Ihrem Template
- Prüfen Sie die Browser-Konsole auf Fehler
### Styling-Probleme
- Stellen Sie sicher, dass die CSS-Datei geladen wird
- Prüfen Sie, ob Custom-CSS die Komponenten überschreibt