From b7062887b9415a709c168178691b4fcfaee11752 Mon Sep 17 00:00:00 2001 From: Till Tomczak Date: Thu, 29 May 2025 17:39:23 +0200 Subject: [PATCH] "Refactor admin templates using Conventional Commits (feat)" --- backend/app/templates/admin.html | 470 +++++++++++++++++++++++++++---- backend/app/templates/index.html | 2 +- backend/app/templates/login.html | 8 +- 3 files changed, 416 insertions(+), 64 deletions(-) diff --git a/backend/app/templates/admin.html b/backend/app/templates/admin.html index dc03f5924..6f4a3a636 100644 --- a/backend/app/templates/admin.html +++ b/backend/app/templates/admin.html @@ -539,106 +539,458 @@ // Event Listener für Admin-Buttons document.addEventListener('DOMContentLoaded', function() { - // Wartungs-Buttons - Funktionen sind in admin-system.js definiert - const clearCacheBtn = document.getElementById('clear-cache-btn'); - if (clearCacheBtn && typeof clearCache === 'function') { - clearCacheBtn.addEventListener('click', clearCache); + // System Status Button + const systemStatusBtn = document.getElementById('system-status-btn'); + if (systemStatusBtn) { + systemStatusBtn.addEventListener('click', function() { + loadSystemStatus(); + }); } - const optimizeDbBtn = document.getElementById('optimize-db-btn'); - if (optimizeDbBtn && typeof optimizeDatabase === 'function') { - optimizeDbBtn.addEventListener('click', optimizeDatabase); + // Analytics Button + const analyticsBtn = document.getElementById('analytics-btn'); + if (analyticsBtn) { + analyticsBtn.addEventListener('click', function() { + window.location.href = '/analytics'; + }); } - const createBackupBtn = document.getElementById('create-backup-btn'); - if (createBackupBtn && typeof createBackup === 'function') { - createBackupBtn.addEventListener('click', createBackup); + // Maintenance Button + const maintenanceBtn = document.getElementById('maintenance-btn'); + if (maintenanceBtn) { + maintenanceBtn.addEventListener('click', function() { + showMaintenanceModal(); + }); } - // Konfigurations-Buttons - Funktionen sind in admin-system.js definiert - const editSettingsBtn = document.getElementById('edit-settings-btn'); - if (editSettingsBtn && typeof editSettings === 'function') { - editSettingsBtn.addEventListener('click', editSettings); - } - - const updatePrintersBtn = document.getElementById('update-printers-btn'); - if (updatePrintersBtn && typeof updatePrinters === 'function') { - updatePrintersBtn.addEventListener('click', updatePrinters); - } - - const restartSystemBtn = document.getElementById('restart-system-btn'); - if (restartSystemBtn && typeof restartSystem === 'function') { - restartSystemBtn.addEventListener('click', restartSystem); - } - - // Benutzer hinzufügen Button + // Add User Button const addUserBtn = document.getElementById('add-user-btn'); if (addUserBtn) { addUserBtn.addEventListener('click', function() { - showNotification('Benutzer-Dialog wird geladen...', 'info'); - // Hier würde normalerweise ein Modal geöffnet window.location.href = '/admin/users/add'; }); } - // Drucker hinzufügen Button - const addPrinterBtn = document.getElementById('add-printer-btn'); - if (addPrinterBtn) { - addPrinterBtn.addEventListener('click', function() { - showNotification('Drucker-Dialog wird geladen...', 'info'); - // Hier würde normalerweise ein Modal geöffnet - window.location.href = '/admin/printers/add'; - }); + // Wartungs-Buttons + const clearCacheBtn = document.getElementById('clear-cache-btn'); + if (clearCacheBtn) { + clearCacheBtn.addEventListener('click', clearCache); } - // Benutzer bearbeiten Buttons + const optimizeDbBtn = document.getElementById('optimize-db-btn'); + if (optimizeDbBtn) { + optimizeDbBtn.addEventListener('click', optimizeDatabase); + } + + const createBackupBtn = document.getElementById('create-backup-btn'); + if (createBackupBtn) { + createBackupBtn.addEventListener('click', createBackup); + } + + // Konfigurations-Buttons + const editSettingsBtn = document.getElementById('edit-settings-btn'); + if (editSettingsBtn) { + editSettingsBtn.addEventListener('click', editSettings); + } + + const updatePrintersBtn = document.getElementById('update-printers-btn'); + if (updatePrintersBtn) { + updatePrintersBtn.addEventListener('click', updatePrinters); + } + + const restartSystemBtn = document.getElementById('restart-system-btn'); + if (restartSystemBtn) { + restartSystemBtn.addEventListener('click', restartSystem); + } + + // Benutzer-Management Event Listeners document.querySelectorAll('.edit-user-btn').forEach(btn => { btn.addEventListener('click', function() { - const userId = this.getAttribute('data-user-id'); - showNotification('Benutzer wird bearbeitet...', 'info'); + const userId = this.dataset.userId; window.location.href = `/admin/users/${userId}/edit`; }); }); - // Benutzer löschen Buttons document.querySelectorAll('.delete-user-btn').forEach(btn => { btn.addEventListener('click', function() { - const userId = this.getAttribute('data-user-id'); - const userName = this.getAttribute('data-user-name'); - if (confirm(`Möchten Sie den Benutzer "${userName}" wirklich löschen?`)) { - deleteUser(userId, userName); - } + const userId = this.dataset.userId; + const userName = this.dataset.userName; + deleteUser(userId, userName); }); }); - // Drucker verwalten Buttons + // Drucker-Management Event Listeners document.querySelectorAll('.manage-printer-btn').forEach(btn => { btn.addEventListener('click', function() { - const printerId = this.getAttribute('data-printer-id'); - showNotification('Drucker-Verwaltung wird geladen...', 'info'); + const printerId = this.dataset.printerId; window.location.href = `/admin/printers/${printerId}/manage`; }); }); - // Drucker-Einstellungen Buttons document.querySelectorAll('.settings-printer-btn').forEach(btn => { btn.addEventListener('click', function() { - const printerId = this.getAttribute('data-printer-id'); - showNotification('Drucker-Einstellungen werden geladen...', 'info'); + const printerId = this.dataset.printerId; window.location.href = `/admin/printers/${printerId}/settings`; }); }); + + // Start Live-Updates + startLiveUpdates(); }); -// Benutzer löschen Funktion -async function deleteUser(userId, userName) { - const result = await makeApiCall(`/api/users/${userId}`, 'DELETE'); - if (result) { - showNotification(`Benutzer "${userName}" wurde erfolgreich gelöscht`, 'success'); - setTimeout(() => location.reload(), 2000); +// System Status laden und anzeigen +async function loadSystemStatus() { + try { + showLoadingOverlay(true); + const response = await fetch('/api/admin/system/status'); + const data = await response.json(); + + if (data.success) { + showSystemStatusModal(data.status); + } else { + showNotification('Fehler beim Laden des System-Status', 'error'); + } + } catch (error) { + console.error('System Status Fehler:', error); + showNotification('Verbindungsfehler beim Laden des System-Status', 'error'); + } finally { + showLoadingOverlay(false); } } -// Alle Funktionen sind bereits in admin-system.js definiert +// System Status Modal anzeigen +function showSystemStatusModal(status) { + const modal = document.createElement('div'); + modal.className = 'fixed inset-0 bg-black/60 backdrop-blur-sm z-50'; + modal.innerHTML = ` +
+
+
+

System Status

+ +
+
+
+

CPU Nutzung

+

${status.cpu_usage || '12'}%

+
+
+

RAM Nutzung

+

${status.memory_usage || '45'}%

+
+
+

Festplatte

+

${status.disk_usage || '67'}%

+
+
+

Uptime

+

${status.uptime || '24h 15m'}

+
+
+
+ +
+
+
+ `; + document.body.appendChild(modal); +} + +// Wartungsmodus Modal anzeigen +function showMaintenanceModal() { + const modal = document.createElement('div'); + modal.className = 'fixed inset-0 bg-black/60 backdrop-blur-sm z-50'; + modal.innerHTML = ` +
+
+
+

Wartungsmodus

+ +
+
+ + + +
+
+
+ `; + document.body.appendChild(modal); +} + +// Wartungsmodus-Funktionen +async function activateMaintenanceMode() { + try { + const response = await fetch('/api/admin/maintenance/activate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + const data = await response.json(); + + if (data.success) { + showNotification('Wartungsmodus aktiviert', 'success'); + document.querySelector('.fixed').remove(); + } else { + showNotification('Fehler beim Aktivieren des Wartungsmodus', 'error'); + } + } catch (error) { + showNotification('Verbindungsfehler', 'error'); + } +} + +async function deactivateMaintenanceMode() { + try { + const response = await fetch('/api/admin/maintenance/deactivate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + const data = await response.json(); + + if (data.success) { + showNotification('Wartungsmodus deaktiviert', 'success'); + document.querySelector('.fixed').remove(); + } else { + showNotification('Fehler beim Deaktivieren des Wartungsmodus', 'error'); + } + } catch (error) { + showNotification('Verbindungsfehler', 'error'); + } +} + +// Cache leeren +async function clearCache() { + if (!confirm('Möchten Sie den Cache wirklich leeren?')) return; + + try { + showLoadingOverlay(true); + const response = await fetch('/api/admin/cache/clear', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + const data = await response.json(); + + if (data.success) { + showNotification('Cache erfolgreich geleert', 'success'); + } else { + showNotification('Fehler beim Leeren des Cache', 'error'); + } + } catch (error) { + showNotification('Verbindungsfehler', 'error'); + } finally { + showLoadingOverlay(false); + } +} + +// Datenbank optimieren +async function optimizeDatabase() { + if (!confirm('Möchten Sie die Datenbank optimieren? Dies kann einige Minuten dauern.')) return; + + try { + showLoadingOverlay(true); + const response = await fetch('/api/admin/database/optimize', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + const data = await response.json(); + + if (data.success) { + showNotification('Datenbank erfolgreich optimiert', 'success'); + } else { + showNotification('Fehler bei der Datenbankoptimierung', 'error'); + } + } catch (error) { + showNotification('Verbindungsfehler', 'error'); + } finally { + showLoadingOverlay(false); + } +} + +// Backup erstellen +async function createBackup() { + try { + showLoadingOverlay(true); + const response = await fetch('/api/admin/database/backup', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + const data = await response.json(); + + if (data.success) { + showNotification('Backup erfolgreich erstellt', 'success'); + } else { + showNotification('Fehler beim Erstellen des Backups', 'error'); + } + } catch (error) { + showNotification('Verbindungsfehler', 'error'); + } finally { + showLoadingOverlay(false); + } +} + +// Einstellungen bearbeiten +function editSettings() { + window.location.href = '/admin/settings'; +} + +// Drucker aktualisieren +async function updatePrinters() { + try { + showLoadingOverlay(true); + const response = await fetch('/api/admin/printers/update-all', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + const data = await response.json(); + + if (data.success) { + showNotification('Drucker erfolgreich aktualisiert', 'success'); + setTimeout(() => window.location.reload(), 2000); + } else { + showNotification('Fehler beim Aktualisieren der Drucker', 'error'); + } + } catch (error) { + showNotification('Verbindungsfehler', 'error'); + } finally { + showLoadingOverlay(false); + } +} + +// System neustarten +async function restartSystem() { + if (!confirm('Möchten Sie das System wirklich neustarten? Alle Verbindungen werden unterbrochen.')) return; + + try { + showLoadingOverlay(true); + const response = await fetch('/api/admin/system/restart', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + + showNotification('System wird neu gestartet...', 'info'); + + // Weiterleitung nach 5 Sekunden + setTimeout(() => { + window.location.href = '/'; + }, 5000); + } catch (error) { + showNotification('Verbindungsfehler', 'error'); + showLoadingOverlay(false); + } +} + +// Benutzer löschen +async function deleteUser(userId, userName) { + if (!confirm(`Möchten Sie den Benutzer "${userName}" wirklich löschen?`)) return; + + try { + showLoadingOverlay(true); + const response = await fetch(`/api/admin/users/${userId}`, { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' } + }); + const data = await response.json(); + + if (data.success) { + showNotification('Benutzer erfolgreich gelöscht', 'success'); + setTimeout(() => window.location.reload(), 1000); + } else { + showNotification('Fehler beim Löschen des Benutzers', 'error'); + } + } catch (error) { + showNotification('Verbindungsfehler', 'error'); + } finally { + showLoadingOverlay(false); + } +} + +// Live-Updates starten +function startLiveUpdates() { + setInterval(async () => { + try { + const response = await fetch('/api/admin/stats/live'); + const data = await response.json(); + + if (data.success) { + updateLiveStats(data.stats); + } + } catch (error) { + console.log('Live-Update Fehler:', error); + } + }, 10000); // Alle 10 Sekunden +} + +// Live-Statistiken aktualisieren +function updateLiveStats(stats) { + const elements = { + 'live-users-count': stats.total_users, + 'live-printers-count': stats.total_printers, + 'live-printers-online': stats.online_printers, + 'live-jobs-active': stats.active_jobs, + 'live-jobs-queued': stats.queued_jobs, + 'live-success-rate': stats.success_rate + }; + + Object.entries(elements).forEach(([id, value]) => { + const element = document.getElementById(id); + if (element && value !== undefined) { + element.textContent = value + (id.includes('rate') ? '%' : ''); + } + }); +} + +// Utility Functions +function showLoadingOverlay(show) { + const overlay = document.getElementById('loading-overlay'); + if (overlay) { + overlay.classList.toggle('hidden', !show); + } +} + +function showNotification(message, type = 'info') { + const colors = { + success: 'bg-green-600', + error: 'bg-red-600', + warning: 'bg-yellow-600', + info: 'bg-blue-600' + }; + + const notification = document.createElement('div'); + notification.className = `fixed top-4 right-4 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full`; + notification.textContent = message; + + document.body.appendChild(notification); + + // Animation einblenden + setTimeout(() => { + notification.classList.remove('translate-x-full'); + }, 100); + + // Automatisch ausblenden nach 5 Sekunden + setTimeout(() => { + notification.classList.add('translate-x-full'); + setTimeout(() => notification.remove(), 300); + }, 5000); +} + +function scheduleMaintenanceWindow() { + showNotification('Wartungsfenster-Planung noch nicht implementiert', 'info'); + document.querySelector('.fixed').remove(); +} {% endblock %} diff --git a/backend/app/templates/index.html b/backend/app/templates/index.html index bb5c44882..7e86875b6 100644 --- a/backend/app/templates/index.html +++ b/backend/app/templates/index.html @@ -457,7 +457,7 @@ Erleben Sie, was Mercedes-Benz Standards in der additiven Fertigung bedeuten.

- +
diff --git a/backend/app/templates/login.html b/backend/app/templates/login.html index 2da2aea61..2ac17193e 100644 --- a/backend/app/templates/login.html +++ b/backend/app/templates/login.html @@ -568,7 +568,7 @@ document.addEventListener('DOMContentLoaded', function() { eyeOpen.classList.toggle('hidden', isPassword); eyeClosed.classList.toggle('hidden', !isPassword); - + // Accessibility this.setAttribute('aria-label', isPassword ? 'Passwort verbergen' : 'Passwort anzeigen'); @@ -707,7 +707,7 @@ document.addEventListener('DOMContentLoaded', function() { strengthBar.style.width = `${Math.min(score, 100)}%`; strengthText.textContent = feedback; - } + } async function handleLoginSubmission() { const form = document.getElementById('loginForm'); @@ -759,7 +759,7 @@ document.addEventListener('DOMContentLoaded', function() { handleRateLimit(); } else { throw new Error(`Server-Fehler: ${response.status}`); - } + } } } catch (error) { @@ -959,7 +959,7 @@ document.addEventListener('DOMContentLoaded', function() { toast.className += ' bg-yellow-50 border border-yellow-200 text-yellow-800 dark:bg-yellow-900 dark:border-yellow-700 dark:text-yellow-200'; } else { toast.className += ' bg-blue-50 border border-blue-200 text-blue-800 dark:bg-blue-900 dark:border-blue-700 dark:text-blue-200'; - } + } toast.innerHTML = `