From ce209804f00c5f1c3a825a1f4fbb53a73e17c1d1 Mon Sep 17 00:00:00 2001 From: Till Tomczak Date: Thu, 19 Jun 2025 22:06:33 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Feature:=20Implemented=20Real-Ti?= =?UTF-8?q?me=20Dashboard=20Updates=20and=20Enhanced=20System=20Monitoring?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- backend/static/js/admin-unified.js | 123 +-- backend/templates/admin.html | 1544 +++++++++++++++++++++++++--- 2 files changed, 1428 insertions(+), 239 deletions(-) diff --git a/backend/static/js/admin-unified.js b/backend/static/js/admin-unified.js index 3227159da..e7f08010f 100644 --- a/backend/static/js/admin-unified.js +++ b/backend/static/js/admin-unified.js @@ -332,8 +332,12 @@ class AdminDashboard { try { const url = `${this.apiBaseUrl}/api/stats`; const response = await fetch(url); - const data = await this.validateApiResponse(response, 'Live-Statistiken'); + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + const data = await response.json(); this.updateStatsDisplay(data); this.retryCount = 0; @@ -343,8 +347,6 @@ class AdminDashboard { if (this.retryCount <= this.maxRetries) { setTimeout(() => this.loadLiveStats(), 5000); - } else { - this.showNotification('Live-Statistiken konnten nicht geladen werden', 'error'); } } } @@ -622,7 +624,12 @@ class AdminDashboard { async loadUserData(userId) { try { const response = await fetch(`${this.apiBaseUrl}/api/admin/users/${userId}`); - const data = await this.validateApiResponse(response, 'Benutzerdaten laden'); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + const data = await response.json(); if (data.success) { const user = data.user; @@ -642,7 +649,7 @@ class AdminDashboard { } } catch (error) { console.error('Fehler beim Laden der Benutzerdaten:', error); - this.showNotification(`❌ Fehler beim Laden der Benutzerdaten: ${error.message}`, 'error'); + this.showNotification('❌ Fehler beim Laden der Benutzerdaten', 'error'); } } @@ -673,7 +680,7 @@ class AdminDashboard { body: JSON.stringify(userData) }); - const data = await this.validateApiResponse(response, 'Benutzer erstellen'); + const data = await response.json(); if (data.success) { this.showNotification('✅ Benutzer erfolgreich erstellt!', 'success'); @@ -888,101 +895,20 @@ class AdminDashboard { } // Error-Management - /** - * Zentrale API-Response-Validierung mit umfassendem Error-Handling - * @param {Response} response - Fetch Response-Objekt - * @param {string} context - Kontext der API-Anfrage für bessere Fehlermeldungen - * @returns {Promise} - Validierte JSON-Daten - * @throws {Error} - Bei Validierungsfehlern - */ - async validateApiResponse(response, context = 'API-Anfrage') { - try { - // 1. HTTP Status Code prüfen - if (!response.ok) { - // Spezielle Behandlung für bekannte Fehler-Codes - switch (response.status) { - case 401: - throw new Error(`Authentifizierung fehlgeschlagen (${context})`); - case 403: - throw new Error(`Zugriff verweigert (${context})`); - case 404: - throw new Error(`Ressource nicht gefunden (${context})`); - case 429: - throw new Error(`Zu viele Anfragen (${context})`); - case 500: - throw new Error(`Serverfehler (${context})`); - case 503: - throw new Error(`Service nicht verfügbar (${context})`); - default: - throw new Error(`HTTP ${response.status}: ${response.statusText} (${context})`); - } - } - - // 2. Content-Type prüfen (muss application/json enthalten) - const contentType = response.headers.get('content-type'); - if (!contentType || !contentType.includes('application/json')) { - // Versuche Response-Text zu lesen für bessere Fehlermeldung - const responseText = await response.text(); - - // Prüfe auf HTML-Fehlerseiten (typisch für 404/500 Seiten) - if (responseText.includes('') || responseText.includes(' - + + - + + + + {% endblock %} {% block content %} - +
- +
+ +
+
+
+ Live +
+
+ +
+
+ + +
+
+
+
@@ -63,30 +83,30 @@ document.addEventListener('DOMContentLoaded', function() {

- Verwaltung des 3D-Drucker-Systems für die Technische Berufsausbildung Werk Marienfelde + Verwaltung des Steckdosen-Steuerungssystems für die Technische Berufsausbildung Werk Marienfelde

- +
- + + +
@@ -94,64 +114,114 @@ document.addEventListener('DOMContentLoaded', function() {
- +
- -
-
-
- - - + +
+
+
+
+
+ + + +
+
+
{{ stats.total_users or 0 }}
+
Registrierte Benutzer
+
-
-
{{ stats['total_users'] or 0 }}
-
Registrierte Benutzer
+
+
+ Live-Daten +
+
+
- -
-
-
- - - + +
+
+
+
+
+ + + +
+
+
{{ stats.total_printers or 0 }}
+
{{ stats.online_printers or 0 }} online
+
-
-
{{ stats['total_printers'] or 0 }}
-
{{ stats['online_printers'] or 0 }} online
+
+
+ Echtzeit-Status +
+
Verfügbare Drucker
+
+
- -
-
-
- - - + +
+
+
+
+
+ + + +
+
+
{{ stats.active_jobs or 0 }}
+
{{ stats.queued_jobs or 0 }} in Warteschlange
+
-
-
{{ stats['active_jobs'] or 0 }}
-
{{ stats['total_jobs'] or 0 }} gesamt
+
+
+ Live-Aufträge +
+
Aktive Druckaufträge
+
+
- -
-
-
- - - + +
+
+
+
+
+ + + +
+
+
{{ stats.success_rate or 0 }}%
+
+ + + + + Stabil + +
+
-
-
{{ stats['online_printers'] or 0 }}
-
Stabil
+
+
+ Live-Erfolgsrate +
+
Erfolgreiche Druckaufträge
+
+
@@ -159,34 +229,34 @@ document.addEventListener('DOMContentLoaded', function() {
-
- + + + + + +
+
+

🗄️ Datenbank-Gesundheitsstatus

+
+
+ Gesund +
+
+
+
+
Letzte Migration
+
Lädt...
+
+
+
Schema-Integrität
+
Lädt...
+
+
+
Letzte Fehler
+
Lädt...
+
+
+
+ +
+ + {% if active_tab == 'users' %} + +
+
+

Benutzerverwaltung

+ +
+ + +
+ + + + + + + + + + + + + {% for user in users %} + + + + + + + + + {% endfor %} + +
BenutzerE-MailRolleStatusLetzte AktivitätAktionen
+
+
+
+ {{ user.username[0].upper() }} +
+
+
+
{{ user.username }}
+
{{ user.first_name }} {{ user.last_name }}
+
+
+ 		{{ user.email }} + + {{ 'Administrator' if user.is_admin else 'Benutzer' }} + + + + + {{ 'Aktiv' if user.is_active else 'Inaktiv' }} + + + {{ user.last_login | format_datetime if user.last_login else 'Nie' }} + +
+ + +
+
+
+
+ + {% elif active_tab == 'printers' %} + +
+
+

Drucker-Steckdosen-Verwaltung

+ +
+ + +
+ {% for printer in printers %} +
+
+

{{ printer.name }}

+ + + {{ printer.status.title() }} + +
+ +
+
+ Modell: + {{ printer.model }} +
+
+ Standort: + {{ printer.location }} +
+
+ Aktuelle Aufgabe: + + {% if printer.current_job %} + {{ printer.current_job.filename[:20] }}... + {% else %} + Keine + {% endif %} + +
+ + {% if printer.current_job %} +
+
+ Fortschritt: + {{ printer.current_job.progress }}% +
+
+
+
+
+ {% endif %} +
+ +
+ + + + +
+
+ {% endfor %} +
+
+ + +
+
+

Wartung

+
+ + + + +
+
+ +
+

System-Steuerung

+
+ + + + +
+
+ +
+

Konfiguration

+
+ + + +
+
+
+
+ + {% elif active_tab == 'logs' %} + +
+
+

System Logs

+
+ + + +
+
+ + +
+ +
+
+
+
+
+ + {% else %} +
-

Admin-Panel Übersicht

-

Wählen Sie einen Bereich aus, um zu beginnen.

- - -
- - - - - Benutzer hinzufügen - - - - - - Drucker hinzufügen - -
+

Willkommen im Admin Panel

+

Wählen Sie einen Tab aus, um zu beginnen.

+ {% endif %} +
+
+
+ + + - -
-
-

- - - - - System-Wartung -

- -
-
- - - -
- -
- - - -
- -
- - - -
+ +
- - ⚙️ Erweiterte Einstellungen - +
+ +
-{% endblock %} + +{% endblock %}