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

backend/app/templates/printers.html

@@ -446,16 +446,77 @@
         }
     }
     
-    // Refresh printers
+    // Refresh printers mit Status-Check
     function refreshPrinters() {
         const grid = document.getElementById('printers-grid');
+        const refreshBtn = document.querySelector('button[onclick="refreshPrinters()"]');
+        
+        // Button deaktivieren und Loading-State anzeigen
+        if (refreshBtn) {
+            refreshBtn.disabled = true;
+            refreshBtn.innerHTML = `
+                <svg class="animate-spin h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
+                    <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" class="opacity-75"></path>
+                </svg>
+                Überprüfe Status...
+            `;
+        }
+        
+        // Loading-State im Grid anzeigen
         grid.innerHTML = `
             <div class="col-span-full text-center py-6 sm:py-12">
                 <div class="animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-indigo-600 dark:border-indigo-400 mx-auto"></div>
-                <p class="mt-3 sm:mt-4 text-sm sm:text-base text-slate-600 dark:text-slate-400">Lade Drucker...</p>
+                <p class="mt-3 sm:mt-4 text-sm sm:text-base text-slate-600 dark:text-slate-400">Überprüfe Drucker-Status...</p>
+                <p class="mt-1 text-xs text-slate-500 dark:text-slate-500">Dies kann bis zu 7 Sekunden dauern</p>
             </div>
         `;
-        loadPrinters();
+        
+        // Drucker laden mit Status-Check
+        loadPrintersWithStatusCheck().finally(() => {
+            // Button wieder aktivieren
+            if (refreshBtn) {
+                refreshBtn.disabled = false;
+                refreshBtn.innerHTML = `
+                    <svg class="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                    Aktualisieren
+                `;
+            }
+        });
+    }
+    
+    // Erweiterte Funktion zum Laden der Drucker mit Status-Check
+    async function loadPrintersWithStatusCheck() {
+        try {
+            const response = await fetch('/api/printers/status');
+            if (!response.ok) {
+                throw new Error('Fehler beim Laden der Drucker-Status');
+            }
+            const statusData = await response.json();
+            
+            // Drucker-Daten mit Status-Informationen anreichern
+            printers = statusData.map(printer => ({
+                ...printer,
+                status: printer.status === 'online' ? 'available' : 'offline'
+            }));
+            
+            renderPrinters();
+            
+            // Erfolgs-Nachricht anzeigen
+            const onlineCount = printers.filter(p => p.status === 'available').length;
+            const totalCount = printers.length;
+            
+            showStatusMessage(
+                `Status-Check abgeschlossen: ${onlineCount} von ${totalCount} Drucker online`,
+                onlineCount === totalCount ? 'success' : 'info'
+            );
+            
+        } catch (error) {
+            console.error('Error loading printer status:', error);
+            showError('Fehler beim Überprüfen der Drucker-Status');
+        }
     }
     
     // Initialize