This commit introduces a comprehensive update to the admin dashboard, adding real-time statistics for users, printers, and jobs. Key features include: - Live updates for user counts, printer statuses, and job statistics. - A new loading overlay for better user experience during data fetching. - Enhanced error handling and notifications for system health checks. - Introduction of a modal for displaying detailed system status and metrics. These improvements aim to provide administrators with immediate insights into system performance and operational status, enhancing overall usability and monitoring capabilities.
MYP Druckerverwaltungssystem
Manage Your Printer - Mercedes-Benz Werk 040 Berlin Vollständige 3D-Drucker Verwaltungsplattform mit Smart-Plug-Technologie
🎯 System-Übersicht
MYP (Manage Your Printer) ist ein System zur zentralen Verwaltung und Steuerung von 3D-Druckern mittels Smart-Plug-Technologie. Es digitalisiert den Reservierungsprozess für mehrere 3D-Drucker und ermögligt eine automatisierte Schaltung der Drucker über WLAN-Steckdosen (TP-Link Tapo P110).
🔑 Kernfunktionen
Benutzer- und Rechteverwaltung
- Registrierung, Login und Rollenkonzept (Admin/Benutzer)
- Administrierende können Drucker und Nutzer verwalten
- Standard-Benutzer können Reservierungen anlegen und Druckjobs verwalten
Drucker- und Auftragsmanagement
- Zentrales Reservierungssystem für Zeitfenster-Buchungen
- Automatische Drucker-Schaltung: Einschalten zum Reservierungsstart, Ausschalten nach Ende
- Herstellerunabhängig: Keine direkte Kommunikation mit 3D-Druckern - ausschließlich Stromsteuerung über Smart-Plug-Steckdosen
- Einfache Integration: Keine Eingriffe in die Druckerhardware erforderlich
Statistikerfassung
- Protokollierung von Nutzungszeiten und abgeschlossenen Druckaufträgen
- Auswertungen (z.B. Gesamtdruckzeit pro Zeitraum)
- Analytics-Dashboard für Effizienzanalysen
Offline-Fähigkeit & Kiosk-Modus
- Autonomer Betrieb ohne Internetzugang nach Installation
- Raspberry Pi Kiosk-Modus: Vollbild-Dashboard vor Ort
- Touch-Interface für aktuelle Druckerbelegungen und Systemstatus
📋 Projektarchitektur
Dieses Repository enthält zwei sich ergänzende Projektarbeiten für die IHK-Abschlussprüfung:
🏗️ Backend-System (Till Tomczak) - KERN-INFRASTRUKTUR
- Entwickler: Till Tomczak
- Fachrichtung: Fachinformatiker für digitale Vernetzung
- Technologie: Flask-basiertes Backend in Python mit SQLite-Datenbank
- Verantwortung: Hardware-Integration, REST-APIs und cyber-physische Vernetzung
📊 Frontend-System (Torben Haack) - BENUTZEROBERFLÄCHE & ANALYTICS - LEGACY
- Entwickler: Torben Haack
- Fachrichtung: Fachinformatiker für Daten- und Prozessanalyse
- Technologie: Next.js-basierte Webanwendung mit erweiterten Analytics (Legacy-Version)
- Verantwortung: Moderne Web-UI, Datenvisualisierung und Benutzerfreundlichkeit
🏗️ Technische Architektur
Cyber-Physische Lösung
┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ Frontend-Server │◄──►│ Backend-Server │◄──►│ Raspberry Pi │
│ (Port 3000) │ │ (Port 443/5000) │ │ (Smart-Plugs) │
│ Torben Haack │ │ Till Tomczak │ │ Till Tomczak │
│ │ │ │ │ │
│ • Next.js App │ │ • Flask REST-API │ │ • TP-Link Tapo P110 │
│ • Analytics UI │ │ • SQLite Database │ │ • Hardware Control │
│ • PWA-Features │ │ • Smart-Plug API │ │ • Kiosk Interface │
│ • HTTPS Client │ │ • HTTPS Server │ │ • Offline Operation │
│ • Export Functions │ │ • Session Management│ │ • Touch Interface │
└─────────────────────┘ └─────────────────────┘ └─────────────────────┘
Kommunikations-Architektur
- RESTful API: Backend kommuniziert mit Frontend und externen Diensten
- HTTPS-Verschlüsselung: Selbstsignierte Zertifikate für sichere Übertragung
- Progressive Web App (PWA): Offline-Funktionalität im Browser
- Smart-Plug-Integration: Lokale WLAN-Steuerung ohne Cloud-Abhängigkeit
🚀 Schnellstart
Backend-System (Hardware & APIs)
# Backend-Server automatisch installieren (Till Tomczaks System)
cd backend
sudo ./setup.sh # Konsolidiertes Setup-Skript
# Oder manuell für Development
python app.py
Frontend-System (Web-Interface) - NEU: Automatische Installation
# Frontend-Server automatisch installieren (Torben Haacks System)
cd frontend
sudo ./setup.sh # Konsolidiertes Setup-Skript mit Mercedes SSL
# Oder manuell für Development
pnpm install
pnpm db # Datenbank einrichten
pnpm dev # Development-Server
Vollständiges System
# Backend (API-Server)
cd backend && sudo ./setup.sh
# Frontend (Web-Interface mit HTTPS)
cd frontend && sudo ./setup.sh
🌐 Systemzugriff
Produktions-URLs (Nach Setup-Skript Installation)
- Frontend (HTTPS):
https://m040tbaraspi001.de040.corpintra.net
(Torben Haacks Frontend) - Frontend (Lokal):
https://localhost
(Fallback-Zugang) - API-Backend:
https://192.168.0.105:443/api
(Till Tomczaks APIs) - Kiosk-Modus:
https://192.168.0.105:443
(Lokales Touch-Interface)
Development-URLs
- Frontend (Dev):
http://localhost:3000
(Development-Server) - Backend (Dev):
http://localhost:5000
(Development-API)
Standard-Anmeldedaten
- Benutzername:
admin
- Passwort:
744563017196A
SSL-Zertifikate (Mercedes)
Nach der automatischen Installation sind selbstsignierte Mercedes-Zertifikate verfügbar:
- Domain:
m040tbaraspi001.de040.corpintra.net
- Organisation: Mercedes-Benz AG
- Abteilung: IT-Abteilung
- Standort: Stuttgart, Baden-Württemberg
- Gültigkeit: 365 Tage
📁 Projektstruktur & Integration
Projektarbeit-MYP/
├── backend/ # 🏗️ KERN-INFRASTRUKTUR (Till Tomczak)
│ ├── app.py # Flask REST-API Server
│ ├── models.py # SQLite-Datenbank & Business Logic
│ ├── utils/ # Smart-Plug Integration (TP-Link Tapo P110)
│ ├── templates/ # Kiosk-Mode Web-Interface
│ ├── static/ # PWA-Assets für Offline-Betrieb
│ └── systemd/ # Raspberry Pi Service-Integration
├──
├── LEGACY-torben_frontend/ # 📊 WEB-INTERFACE (Torben Haack) - LEGACY
│ ├── src/app/ # Next.js Haupt-Anwendung
│ ├── src/components/ # React UI-Komponenten
│ ├── src/lib/api/ # Backend-REST-API-Integration
│ └── src/lib/analytics/ # Statistik-Algorithmen
├──
├── IHK_Projektdokumentation/ # 📋 IHK-Abschlussprüfung
│ ├── Till_Tomczak-IHK_Dokumentation.pdf
│ ├── Till_Tomczak-IHK_Dokumentation.docx
│ ├── Torben_Haack-Dokumentation.pdf
│ ├── IHK-genehmigter_Projektantrag.pdf
│ ├── Handnotizen_IHK-Dokumentation.md
│ └── MYP_Projektdokumentation_Final.docx
├──
├── dokumentation/ # 📚 Projekt-Dokumentation
│ ├── berichtshefte/ # Ausbildungsberichtshefte
│ │ ├── Berichtsheft_Till_Tomczak_Mai_Juni_2025.md
│ │ ├── Berichtsheft_Till_Tomczak_Mai_Juni_2025_Realistisch.txt
│ │ └── Berichtsheft_Till_Tomczak_Mai_Juni_2025/ # Screenshots
│ └── kalender/ # Terminplanung
│ └── Kalender von Tomczak Till (040).ics
├──
├── tests/ # 🧪 Test-Dateien
│ └── test_tapo_route.py # Smart-Plug Tests
├──
├── docs/ # 📚 Technische Dokumentation
└── README.md # Diese Datei
🎯 Funktions-Aufgabenteilung
Backend-Verantwortlichkeiten (Till Tomczak)
- ✅ Smart-Plug-Steuerung: TP-Link Tapo P110 WLAN-Steckdosen
- ✅ Automatische Drucker-Schaltung: Zeitgesteuerte Ein-/Ausschaltung
- ✅ REST-API-Bereitstellung: Vollständige API für alle Drucker-Operationen
- ✅ Cyber-physische Vernetzung: IT-System ↔ Hardware-Integration
- ✅ SQLite-Datenbank: Benutzer, Drucker, Jobs, Statistiken
- ✅ HTTPS-Server: Selbstsignierte Zertifikate und Session-Management
- ✅ Raspberry Pi Integration: Systemd-Services und Kiosk-Modus
- ✅ Offline-Fähigkeit: Autonomer Betrieb ohne Internet
Frontend-Verantwortlichkeiten (Torben Haack)
- ✅ Moderne Web-UI: React-basierte Benutzeroberfläche
- ✅ Progressive Web App: Offline-Funktionalität im Browser
- ✅ Advanced Analytics: Interaktive Charts und Datenvisualisierung
- ✅ Reporting-System: PDF/Excel-Export und automatisierte Berichte
- ✅ Responsive Design: Optimiert für Desktop, Tablet und Mobile
- ✅ Backend-API-Integration: Nahtlose REST-API-Anbindung
- ✅ Statistik-Auswertungen: Nutzungsanalysen und Trend-Analysen
- ✅ Benutzerfreundlichkeit: Intuitive Workflows für alle Stakeholder
🔗 API-Integration & Kommunikation
Backend-REST-Endpunkte (Till Tomczak)
// Drucker-Management
GET /api/printers // Alle Drucker abrufen
POST /api/printers // Neuen Drucker hinzufügen
PUT /api/printers/{id} // Drucker aktualisieren
DELETE /api/printers/{id} // Drucker löschen
// Reservierungs-Management
GET /api/jobs // Alle Reservierungen abrufen
POST /api/jobs // Neue Reservierung erstellen
PUT /api/jobs/{id}/finish // Reservierung beenden
DELETE /api/jobs/{id} // Reservierung abbrechen
// Smart-Plug-Steuerung (TP-Link Tapo P110)
POST /api/plugs/{id}/on // Drucker einschalten
POST /api/plugs/{id}/off // Drucker ausschalten
GET /api/plugs/{id}/status // Plug-Status abfragen
// Statistiken & Analytics
GET /api/stats // Nutzungsstatistiken
GET /api/reports // Report-Daten für Analytics
Frontend-Integration (Torben Haack)
// Backend-API Client - Konfiguriert für separaten Server
export class MYPApiClient {
constructor(baseURL: string = 'https://192.168.0.105:443/api') {
this.baseURL = baseURL;
}
async getPrinters() {
return fetch(`${this.baseURL}/printers`).then(r => r.json());
}
async getJobs() {
return fetch(`${this.baseURL}/jobs`).then(r => r.json());
}
async getStats() {
return fetch(`${this.baseURL}/stats`).then(r => r.json());
}
}
// API-Konfiguration mit Fallback-URLs
export const API_BASE_URL = {
primary: 'https://192.168.0.105:443',
fallbacks: [
'https://192.168.0.105',
'https://raspberrypi'
]
};
🖥️ Deployment-Szenarien
Szenario 1: Automatische Produktions-Installation (Neu - Empfohlen)
# Backend-Server (Raspberry Pi oder Linux-Server)
cd backend
sudo ./setup.sh # Automatische Installation mit Kiosk-Modus
# Frontend-Server (separater Server oder gleicher Server)
cd frontend
sudo ./setup.sh # Automatische Installation mit HTTPS auf Port 443
Szenario 2: Separate Server (Manuell)
# Backend-Server (z.B. Raspberry Pi oder Linux-Server)
cd backend
sudo systemctl start myp-https.service
# Frontend-Server (z.B. Node.js-Server oder Cloud-Deployment)
cd frontend
npm run build && npm start
Szenario 3: Docker-Deployment
# docker-compose.yml
services:
backend:
build: ./backend
ports: ["5000:5000", "443:443"]
frontend:
build: ./frontend
ports: ["80:80", "443:443"]
environment:
- NEXT_PUBLIC_API_URL=http://backend:5000/api
Szenario 4: Raspberry Pi Kiosk (Lokal)
# Vollständige Kiosk-Installation (Backend + Frontend)
cd backend && sudo ./setup.sh # Backend mit Kiosk-Interface
cd frontend && sudo ./setup.sh # Frontend mit HTTPS-Server
🔧 Konfiguration & Environment
Backend-Konfiguration (.env)
# Flask-Server Einstellungen
FLASK_HOST=0.0.0.0
FLASK_PORT=5000
SSL_ENABLED=true
DATABASE_URL=sqlite:///myp.db
# Smart-Plug Konfiguration (TP-Link Tapo P110)
TAPO_USERNAME=your-tapo-email
TAPO_PASSWORD=your-tapo-password
# Kiosk-Modus
KIOSK_MODE=true
OFFLINE_MODE=true
Frontend-Konfiguration (.env.local)
# Frontend-Server Einstellungen - HTTPS mit Mercedes SSL
NEXT_PUBLIC_API_URL=https://192.168.0.105:443
DATABASE_URL=file:./db/frontend.db
# SSL-Zertifikat Handling für selbstsignierte Zertifikate
NODE_TLS_REJECT_UNAUTHORIZED=0
# Analytics-Features
ENABLE_ADVANCED_ANALYTICS=true
CHART_REFRESH_INTERVAL=30000
# Production HTTPS (Nach Setup-Skript)
HTTPS_ENABLED=true
SSL_CERT_PATH=/etc/ssl/certs/myp/frontend.crt
SSL_KEY_PATH=/etc/ssl/certs/myp/frontend.key
📊 Features im Überblick
Backend-Features (Till Tomczak) - Cyber-Physische Integration
- TP-Link Tapo P110 Integration: Lokale WLAN-Steckdosen-Steuerung
- Automatische Zeitsteuerung: Drucker Ein-/Ausschaltung nach Reservierung
- Herstellerunabhängigkeit: Keine direkten Drucker-Eingriffe erforderlich
- Flask REST-APIs: Vollständige CRUD-Operationen
- SQLite-Datenbank: Lokale Datenpersistenz ohne externe Abhängigkeiten
- HTTPS-Verschlüsselung: Selbstsignierte Zertifikate
- Offline-Betrieb: Vollständig autonomer Betrieb ohne Internet
- Raspberry Pi Kiosk: Touch-optimiertes Dashboard vor Ort
Frontend-Features (Torben Haack) - Moderne Web-Oberfläche
- Progressive Web App: Offline-Funktionalität im Browser
- React 18 + Next.js 14: Moderne, performante Web-Technologien
- Analytics-Dashboard: Recharts-Visualisierungen für Nutzungsstatistiken
- Responsive Design: Optimiert für alle Endgeräte (Desktop/Tablet/Mobile)
- Real-time Updates: Live-Synchronisation mit Backend-APIs
- Export-Funktionen: PDF/Excel-Reports für Management-Analysen
- Benutzerfreundlich: Intuitive Workflows für alle Stakeholder
🛠️ Entwicklung
Backend-Entwicklung (Till Tomczak)
cd backend
python -m venv venv
source venv/bin/activate # Linux/Mac
pip install -r requirements.txt
python app.py --debug
Frontend-Entwicklung (Torben Haack)
Automatische Installation (Empfohlen)
cd frontend
sudo ./setup.sh # Interaktives Setup-Menü
Manuelle Entwicklung
cd frontend
pnpm install
pnpm db:migrate
pnpm dev
Frontend-Setup-Skript Features
Das neue frontend/setup.sh
bietet:
- Vollständige Installation: Docker, SSL-Zertifikate, Caddy Reverse Proxy
- Mercedes SSL-Zertifikate: Selbstsignierte Zertifikate für
m040tbaraspi001.de040.corpintra.net
- Automatischer HTTPS-Server: Verfügbar auf Port 443 (nicht 3000)
- Systemd-Integration: Automatischer Start beim Boot
- Interaktives Menü:
- Vollständige Frontend-Installation
- SSL-Zertifikate neu generieren
- Service-Status prüfen
- Beenden
Integration testen
# Backend-APIs testen
curl http://localhost:5000/api/printers
# Frontend mit HTTPS (nach Setup-Skript)
curl -k https://m040tbaraspi001.de040.corpintra.net/health
curl -k https://localhost/health
📚 Dokumentation
Backend-Dokumentation (Till Tomczak)
backend/README.md
- Hardware-Setup & API-Dokumentationbackend/docs/
- Raspberry Pi Konfiguration & Smart-Plug-Integration
Frontend-Dokumentation (Torben Haack)
frontend/README.md
- UI-Entwicklung & Analyticsfrontend/docs/
- Component-Library & PWA-Features
Gemeinsame Dokumentation
docs/myp_documentation.md
- Vollständige Projektdokumentationdocs/DEPLOYMENT.md
- Production-Deployment-Guide
🤝 Projektphilosophie
Cyber-Physische Vernetzung
MYP stellt eine cyber-physische Lösung dar, die IT-System (Reservierungsplattform) und Hardware (Smart-Plugs und Drucker) eng vernetzt. Das System überbrückt die digitale und physische Welt durch intelligente Automatisierung.
Komplementäre Expertisen
- Till Tomczak: Spezialist für Hardware-Integration und cyber-physische Vernetzung
- Torben Haack: Spezialist für Frontend-Entwicklung und Datenanalyse
Gemeinsame Ziele
- Digitalisierung: Modernisierung des Reservierungsprozesses
- Automatisierung: Zeitgesteuerte Hardware-Steuerung ohne manuelle Eingriffe
- Benutzerfreundlichkeit: Intuitive Bedienung für alle Stakeholder
- Effizienz: Optimierte Ressourcennutzung und Energieeinsparung
👥 Entwicklerteam
Till Tomczak - Backend-Infrastruktur & Hardware-Integration
- Cyber-Physische Systeme: Smart-Plug-Integration und Hardware-Steuerung
- System-Architektur: Flask-APIs und SQLite-Datenbank-Design
- DevOps: Raspberry Pi Services und Produktions-Deployment
- Offline-Systeme: Autonomer Betrieb ohne Internet-Abhängigkeiten
Torben Haack - Frontend-Entwicklung & Analytics
- Progressive Web Apps: Moderne Browser-Technologien und Offline-Features
- User Interface: React-Komponenten und responsive Design
- Datenvisualisierung: Charts, Dashboards und Analytics
- API-Integration: Nahtlose Backend-Anbindung und Real-time Updates
📄 Lizenz
Dieses Projekt wurde für den internen Gebrauch bei Mercedes-Benz entwickelt.
Backend-System: Till Tomczak (Cyber-Physische Vernetzung & Hardware-Integration) Frontend-System: Torben Haack (Progressive Web App & Analytics) Architektur: Microservices mit REST-API-Integration Technologie: Flask + SQLite (Backend) + Next.js + React (Frontend) Hardware: Raspberry Pi + TP-Link Tapo P110 Smart-Plugs Entwickelt für: Mercedes-Benz Werk 040 Berlin MYP