"feat: Update admin and printer templates with new design"

backend/app/templates/admin.html

@@ -442,7 +442,7 @@
                                         {% if job.status == 'queued' %}
                                         <button class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300 transition-colors">
                                             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m2-10h.01M5 20h14a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m2-10h.01M5 20h14a2 2 0 002-2V7a2 2 0 00-2-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2zM9 9h6v6H9V9z"/>
                                             </svg>
                                         </button>
                                         {% endif %}
@@ -486,15 +486,15 @@
                         <div class="space-y-2">
                             <div class="flex justify-between text-sm">
                                 <span class="text-slate-600 dark:text-slate-400">Uptime:</span>
-                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.uptime }}</span>
+                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.uptime if system_info.uptime else 'Unbekannt' }}</span>
                             </div>
                             <div class="flex justify-between text-sm">
                                 <span class="text-slate-600 dark:text-slate-400">CPU:</span>
-                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.cpu_usage }}%</span>
+                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.cpu_usage if system_info.cpu_usage else 0 }}%</span>
                             </div>
                             <div class="flex justify-between text-sm">
                                 <span class="text-slate-600 dark:text-slate-400">RAM:</span>
-                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.memory_usage }}%</span>
+                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.memory_usage if system_info.memory_usage else 0 }}%</span>
                             </div>
                         </div>
                     </div>
@@ -510,11 +510,11 @@
                         <div class="space-y-2">
                             <div class="flex justify-between text-sm">
                                 <span class="text-slate-600 dark:text-slate-400">Größe:</span>
-                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.db_size }}</span>
+                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.db_size if system_info.db_size else 'Unbekannt' }}</span>
                             </div>
                             <div class="flex justify-between text-sm">
                                 <span class="text-slate-600 dark:text-slate-400">Verbindungen:</span>
-                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.db_connections }}</span>
+                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.db_connections if system_info.db_connections else 'Unbekannt' }}</span>
                             </div>
                         </div>
                     </div>
@@ -530,11 +530,11 @@
                         <div class="space-y-2">
                             <div class="flex justify-between text-sm">
                                 <span class="text-slate-600 dark:text-slate-400">Jobs:</span>
-                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.scheduler_jobs }}</span>
+                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.scheduler_jobs if system_info.scheduler_jobs else 0 }}</span>
                             </div>
                             <div class="flex justify-between text-sm">
                                 <span class="text-slate-600 dark:text-slate-400">Nächster Job:</span>
-                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.next_job }}</span>
+                                <span class="text-slate-900 dark:text-white font-medium">{{ system_info.next_job if system_info.next_job else 'Keine geplanten Jobs' }}</span>
                             </div>
                         </div>
                     </div>
@@ -545,13 +545,13 @@
                     <div class="bg-white/60 dark:bg-slate-700/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-600 p-6 shadow-lg">
                         <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Wartung</h3>
                         <div class="space-y-3">
-                            <button class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium">
+                            <button onclick="clearCache()" class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium">
                                 Cache leeren
                             </button>
-                            <button class="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors text-sm font-medium">
+                            <button onclick="optimizeDatabase()" class="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors text-sm font-medium">
                                 Datenbank optimieren
                             </button>
-                            <button class="w-full px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors text-sm font-medium">
+                            <button onclick="createBackup()" class="w-full px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors text-sm font-medium">
                                 Backup erstellen
                             </button>
                         </div>
@@ -560,13 +560,13 @@
                     <div class="bg-white/60 dark:bg-slate-700/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-600 p-6 shadow-lg">
                         <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Konfiguration</h3>
                         <div class="space-y-3">
-                            <button class="w-full px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors text-sm font-medium">
+                            <button onclick="editSettings()" class="w-full px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors text-sm font-medium">
                                 Einstellungen bearbeiten
                             </button>
-                            <button class="w-full px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors text-sm font-medium">
+                            <button onclick="updatePrinters()" class="w-full px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors text-sm font-medium">
                                 Drucker aktualisieren
                             </button>
-                            <button class="w-full px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-sm font-medium">
+                            <button onclick="restartSystem()" class="w-full px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-sm font-medium">
                                 System neustarten
                             </button>
                         </div>
@@ -651,28 +651,158 @@
 </div>
 
 <script>
-// Admin Panel JavaScript
-document.addEventListener('DOMContentLoaded', function() {
-    // Auto-refresh für Live-Daten
-    setInterval(function() {
-        // Hier können Sie AJAX-Calls für Live-Updates hinzufügen
-        updateStats();
-    }, 30000); // Alle 30 Sekunden
+// CSRF Token für AJAX-Anfragen
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+// Hilfsfunktion für API-Aufrufe
+async function makeApiCall(url, method = 'GET', data = null) {
+    const options = {
+        method: method,
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+        }
+    };
     
-    function updateStats() {
-        // Implementierung für Live-Stats Updates
-        console.log('Updating stats...');
+    if (data) {
+        options.body = JSON.stringify(data);
     }
     
-    // Smooth Scrolling für bessere UX
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
-            document.querySelector(this.getAttribute('href')).scrollIntoView({
-                behavior: 'smooth'
+    try {
+        const response = await fetch(url, options);
+        const result = await response.json();
+        
+        if (response.ok) {
+            showNotification(result.message || 'Aktion erfolgreich ausgeführt', 'success');
+            return result;
+        } else {
+            showNotification(result.error || 'Ein Fehler ist aufgetreten', 'error');
+            return null;
+        }
+    } catch (error) {
+        showNotification('Netzwerkfehler: ' + error.message, 'error');
+        return null;
+    }
+}
+
+// Notification anzeigen
+function showNotification(message, type = 'info') {
+    // Erstelle Notification-Element falls nicht vorhanden
+    let notification = document.getElementById('admin-notification');
+    if (!notification) {
+        notification = document.createElement('div');
+        notification.id = 'admin-notification';
+        notification.className = 'fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm transition-all duration-300 transform translate-x-full';
+        document.body.appendChild(notification);
+    }
+    
+    // Setze Farbe basierend auf Typ
+    const colors = {
+        success: 'bg-green-500 text-white',
+        error: 'bg-red-500 text-white',
+        warning: 'bg-yellow-500 text-white',
+        info: 'bg-blue-500 text-white'
+    };
+    
+    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm transition-all duration-300 ${colors[type] || colors.info}`;
+    notification.textContent = message;
+    
+    // Zeige Notification
+    notification.style.transform = 'translateX(0)';
+    
+    // Verstecke nach 5 Sekunden
+    setTimeout(() => {
+        notification.style.transform = 'translateX(100%)';
+    }, 5000);
+}
+
+// Cache leeren
+async function clearCache() {
+    if (confirm('Möchten Sie wirklich den Cache leeren?')) {
+        const result = await makeApiCall('/api/admin/cache/clear', 'POST');
+        if (result) {
+            setTimeout(() => location.reload(), 2000);
+        }
+    }
+}
+
+// Datenbank optimieren
+async function optimizeDatabase() {
+    if (confirm('Möchten Sie wirklich die Datenbank optimieren? Dies kann einige Minuten dauern.')) {
+        const result = await makeApiCall('/api/admin/database/optimize', 'POST');
+        if (result) {
+            setTimeout(() => location.reload(), 2000);
+        }
+    }
+}
+
+// Backup erstellen
+async function createBackup() {
+    if (confirm('Möchten Sie wirklich ein Backup erstellen?')) {
+        const result = await makeApiCall('/api/admin/backup/create', 'POST');
+    }
+}
+
+// Drucker aktualisieren
+async function updatePrinters() {
+    if (confirm('Möchten Sie alle Drucker-Verbindungen aktualisieren?')) {
+        const result = await makeApiCall('/api/admin/printers/update', 'POST');
+        if (result) {
+            setTimeout(() => location.reload(), 2000);
+        }
+    }
+}
+
+// System neustarten
+async function restartSystem() {
+    if (confirm('WARNUNG: Möchten Sie wirklich das System neustarten? Alle aktiven Verbindungen werden getrennt.')) {
+        const result = await makeApiCall('/api/admin/system/restart', 'POST');
+        if (result) {
+            showNotification('System wird neugestartet...', 'warning');
+            setTimeout(() => {
+                window.location.href = '/';
+            }, 3000);
+        }
+    }
+}
+
+// Einstellungen bearbeiten
+function editSettings() {
+    window.location.href = '/settings';
+}
+
+// Systemstatus automatisch aktualisieren
+async function updateSystemStatus() {
+    if (window.location.search.includes('tab=system')) {
+        const result = await makeApiCall('/api/admin/system/status');
+        if (result) {
+            // Aktualisiere die Anzeige
+            const elements = {
+                'cpu_usage': result.cpu_usage + '%',
+                'memory_usage': result.memory_usage + '%',
+                'disk_usage': result.disk_usage + '%',
+                'uptime': result.uptime,
+                'db_size': result.db_size,
+                'scheduler_jobs': result.scheduler_jobs,
+                'next_job': result.next_job
+            };
+            
+            Object.keys(elements).forEach(key => {
+                const element = document.querySelector(`[data-status="${key}"]`);
+                if (element) {
+                    element.textContent = elements[key];
+                }
             });
-        });
-    });
+        }
+    }
+}
+
+// Auto-Update alle 30 Sekunden
+setInterval(updateSystemStatus, 30000);
+
+// Initial load
+document.addEventListener('DOMContentLoaded', function() {
+    updateSystemStatus();
 });
 </script>
 {% endblock %}