feat: Erweiterung der Druckerstatusüberprüfung durch Implementierung einer Steckdosenabfrage für Drucker. Verbesserung der Benutzeroberfläche mit optimierten Dark Mode-Elementen und neuen Statusanzeigen für Drucker. Anpassungen in den Templates zur Unterstützung dynamischer Statusinformationen und zur Verbesserung der Benutzererfahrung. Aktualisierung der CSS-Styles für ein ansprechenderes Design und bessere Benutzerinteraktion.

2025-05-29 09:46:16 +02:00
parent e9071c7b57
commit d81149229a
13 changed files with 2138 additions and 1233 deletions
--- a/backend/app/templates/jobs.html
+++ b/backend/app/templates/jobs.html
@@ -35,14 +35,23 @@
                        <option value="">Drucker auswählen...</option>
                        <!-- Wird durch JavaScript gefüllt -->
                    </select>
+                    <div id="printer-status-info" class="mt-2 text-center">
+                        <!-- Status-Info wird dynamisch gefüllt -->
+                    </div>
                    <div id="printer-status-warning" class="mt-2 hidden">
-                        <div class="flex items-center p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg">
-                            <svg class="w-5 h-5 text-orange-500 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                            </svg>
-                            <div class="text-sm">
-                                <p class="font-medium text-orange-800 dark:text-orange-200">Offline-Drucker ausgewählt</p>
-                                <p class="text-orange-700 dark:text-orange-300">Der Job wird erstellt, startet aber erst, wenn der Drucker online geht.</p>
+                        <div class="flex items-center p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-400 dark:border-red-700 rounded-lg shadow-sm">
+                            <div class="flex-shrink-0 w-10 h-10 mr-3 flex items-center justify-center rounded-full bg-red-100 dark:bg-red-800">
+                                <svg class="w-6 h-6 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                                </svg>
+                            </div>
+                            <div>
+                                <p class="text-lg font-bold text-red-800 dark:text-red-200">ACHTUNG: Offline-Drucker ausgewählt!</p>
+                                <p class="text-sm text-red-700 dark:text-red-300 mt-1">
+                                    Dieser Drucker ist derzeit <span class="font-bold">NICHT VERFÜGBAR</span>. 
+                                    Der Job wird in der Warteschlange gespeichert und erst gestartet, 
+                                    wenn der Drucker wieder online ist.
+                                </p>
                            </div>
                        </div>
                    </div>
@@ -213,20 +222,49 @@ document.addEventListener('DOMContentLoaded', function() {
    loadPrinters();
    loadActiveJobs();
    
-    // Event-Listener für Drucker-Auswahl (Offline-Warnung)
+    // Event-Listener für Drucker-Auswahl (Status-Anzeige)
    const printerSelect = document.getElementById('printer_id');
    const statusWarning = document.getElementById('printer-status-warning');
+    const statusInfo = document.getElementById('printer-status-info');
    
-    if (printerSelect && statusWarning) {
+    if (printerSelect && statusWarning && statusInfo) {
        printerSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            
-            if (selectedOption && selectedOption.getAttribute('data-offline') === 'true') {
-                statusWarning.classList.remove('hidden');
-            } else {
+            if (!selectedOption || selectedOption.value === "") {
+                // Keine Auswahl
                statusWarning.classList.add('hidden');
+                statusInfo.innerHTML = '';
+                return;
+            }
+            
+            // Status des ausgewählten Druckers bestimmen
+            const isOffline = selectedOption.getAttribute('data-offline') === 'true';
+            const printerName = selectedOption.textContent.split('(')[0].trim().replace(/🟢|🔴/g, '').trim();
+            
+            if (isOffline) {
+                // Offline-Drucker: Deutliche Warnung anzeigen
+                statusWarning.classList.remove('hidden');
+                statusInfo.innerHTML = `
+                    <div class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 border border-red-200">
+                        <span class="w-2 h-2 mr-1 bg-red-500 rounded-full"></span>
+                        ${printerName} ist OFFLINE
+                    </div>
+                `;
+            } else {
+                // Online-Drucker: Positive Statusmeldung
+                statusWarning.classList.add('hidden');
+                statusInfo.innerHTML = `
+                    <div class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
+                        <span class="w-2 h-2 mr-1 bg-green-500 rounded-full animate-pulse"></span>
+                        ${printerName} ist ONLINE und bereit
+                    </div>
+                `;
            }
        });
+        
+        // Initial auslösen, um den Status der Vorauswahl anzuzeigen
+        printerSelect.dispatchEvent(new Event('change'));
    }
    
    // Formulare initialisieren
@@ -342,25 +380,50 @@ function populatePrinterSelect(printers, onlineOnly = false) {
        // Bei gleichem Online-Status nach Name sortieren
        return a.name.localeCompare(b.name);
    });
+
+    // Zähler für Online- und Offline-Drucker
+    let onlineCount = 0;
+    let offlineCount = 0;
    
+    // Optionsgruppen für bessere visuelle Trennung erstellen
+    const onlineGroup = document.createElement('optgroup');
+    onlineGroup.label = "── ONLINE DRUCKER ──";
+    onlineGroup.style.fontWeight = 'bold';
+    onlineGroup.style.color = '#047857'; // Dunkelgrün
+    
+    const offlineGroup = document.createElement('optgroup');
+    offlineGroup.label = "── OFFLINE DRUCKER ──";
+    offlineGroup.style.fontWeight = 'bold';
+    offlineGroup.style.color = '#b91c1c'; // Dunkelrot
+    
+    // Drucker in entsprechende Gruppen einsortieren
    sortedPrinters.forEach(printer => {
        const option = document.createElement('option');
        option.value = printer.id;
        
        // Status-Indikator bestimmen
        const isOnline = printer.status === 'available' || printer.is_online || printer.active;
-        let statusIcon, statusText;
+        let statusIcon, statusText, statusClass;
        
        if (isOnline) {
            statusIcon = '🟢';
-            statusText = 'Online';
-            option.style.color = '#059669'; // Grün für online
+            statusText = 'ONLINE';
+            statusClass = 'online';
+            option.style.backgroundColor = 'rgba(4, 120, 87, 0.1)'; // Leicht grüner Hintergrund
+            option.style.color = '#047857'; // Grün für online
+            option.style.fontWeight = '500';
+            onlineCount++;
        } else {
            statusIcon = '🔴';
-            statusText = 'Offline';
-            option.style.color = '#dc2626'; // Rot für offline
+            statusText = 'OFFLINE';
+            statusClass = 'offline';
+            option.style.backgroundColor = 'rgba(185, 28, 28, 0.05)'; // Sehr leicht roter Hintergrund
+            option.style.color = '#b91c1c'; // Rot für offline
+            option.style.fontStyle = 'italic';
+            option.style.fontWeight = '400';
            // Offline-Drucker NICHT deaktivieren, aber kennzeichnen
            option.setAttribute('data-offline', 'true');
+            offlineCount++;
        }
        
        // Letzter Check-Zeitstempel
@@ -384,18 +447,52 @@ function populatePrinterSelect(printers, onlineOnly = false) {
        // Tooltip für zusätzliche Informationen
        option.title = `Standort: ${printer.location || 'Unbekannt'}\nIP: ${printer.plug_ip || printer.ip_address || 'Unbekannt'}\nStatus: ${statusText}${lastChecked}`;
        
-        printerSelect.appendChild(option);
+        // Zu entsprechender Gruppe hinzufügen
+        if (isOnline) {
+            onlineGroup.appendChild(option);
+        } else {
+            offlineGroup.appendChild(option);
+        }
    });
    
-    // Hinweis für Offline-Drucker
-    const offlineCount = printers.filter(p => !(p.status === 'available' || p.is_online || p.active)).length;
+    // Status-Info als erste Option hinzufügen
+    const statusOption = document.createElement('option');
+    statusOption.disabled = true;
+    statusOption.className = 'status-summary';
+    statusOption.style.backgroundColor = '#f3f4f6';
+    statusOption.style.fontWeight = 'bold';
+    statusOption.style.textAlign = 'center';
+    statusOption.style.padding = '4px';
+    statusOption.style.marginBottom = '4px';
+    statusOption.style.borderBottom = '1px solid #d1d5db';
+    
+    // Deutliche Status-Zusammenfassung
+    if (onlineCount > 0) {
+        statusOption.textContent = `✅ ${onlineCount} von ${printers.length} Drucker ONLINE`;
+        statusOption.style.color = '#047857'; // Grün
+    } else {
+        statusOption.textContent = `⚠️ ACHTUNG: Alle ${printers.length} Drucker OFFLINE`;
+        statusOption.style.color = '#b91c1c'; // Rot
+    }
+    printerSelect.appendChild(statusOption);
+    
+    // Gruppen zum Select hinzufügen
+    if (onlineCount > 0) {
+        printerSelect.appendChild(onlineGroup);
+    }
+    
    if (offlineCount > 0) {
-        const infoOption = document.createElement('option');
-        infoOption.disabled = true;
-        infoOption.textContent = `--- ${offlineCount} Drucker offline (nicht verfügbar) ---`;
-        infoOption.style.fontStyle = 'italic';
-        infoOption.style.color = '#6b7280';
-        printerSelect.appendChild(infoOption);
+        printerSelect.appendChild(offlineGroup);
+    }
+    
+    // Wenn online Drucker verfügbar, den ersten online Drucker vorauswählen
+    if (onlineCount > 0 && onlineGroup.firstChild) {
+        onlineGroup.firstChild.selected = true;
+        document.getElementById('printer-status-warning').classList.add('hidden');
+    } else if (offlineCount > 0 && offlineGroup.firstChild) {
+        // Sonst den ersten offline Drucker vorauswählen und Warnung anzeigen
+        offlineGroup.firstChild.selected = true;
+        document.getElementById('printer-status-warning').classList.remove('hidden');
    }
 }

@@ -442,11 +539,22 @@ function loadPrintersWithLiveStatus() {
            
            populatePrinterSelect(printers, false);
            
-            const onlineCount = printers.filter(p => p.status === 'available' || p.is_online || p.active).length;
+            // Verwende die vom Backend bereitgestellten Werte
+            const onlineCount = data.online_count || 0;
+            const totalCount = data.count || printers.length;
+            
            if (onlineCount > 0) {
-                showNotification(`${onlineCount} von ${printers.length} Drucker online (Live-Check)`, 'success');
+                if (onlineCount === totalCount) {
+                    // Alle Drucker online
+                    showNotification(`✅ OPTIMAL: Alle ${totalCount} Drucker sind ONLINE und BEREIT`, 'success');
+                } else {
+                    // Einige Drucker online
+                    const offlineCount = totalCount - onlineCount;
+                    showNotification(`⚠️ ${onlineCount} von ${totalCount} Drucker ONLINE | ${offlineCount} Drucker OFFLINE`, 'success');
+                }
            } else {
-                showNotification(`${printers.length} Drucker gefunden, aber alle offline`, 'warning');
+                // Kein Drucker online
+                showNotification(`❌ ACHTUNG: Alle ${totalCount} Drucker sind OFFLINE - Reservierte Jobs werden in Warteschlange gespeichert`, 'error');
            }
        })
        .catch(error => {
@@ -556,23 +664,29 @@ function initNewJobForm() {
        // Prüfen, ob ein Offline-Drucker ausgewählt wurde
        const selectedOption = document.querySelector(`#printer_id option[value="${printer_id}"]`);
        if (selectedOption && selectedOption.getAttribute('data-offline') === 'true') {
-            const printerName = selectedOption.textContent.split(' (')[0].replace('🔴 ', '');
+            const printerName = selectedOption.textContent.split(' (')[0].replace(/🔴\s*/g, '').trim();
+            
+            // Deutlichere Warnung mit einem ausführlicheren Dialog
            const confirmOffline = confirm(
-                `⚠️ WARNUNG: Offline-Drucker ausgewählt!\n\n` +
-                `Der Drucker "${printerName}" ist derzeit OFFLINE.\n\n` +
-                `Wenn Sie fortfahren:\n` +
-                `• Der Job wird als "Wartend auf Drucker" markiert\n` +
-                `• Sie erhalten eine Benachrichtigung, wenn der Drucker online geht\n` +
-                `• Der Job startet automatisch, sobald der Drucker verfügbar ist\n\n` +
-                `Möchten Sie trotzdem fortfahren?`
+                `⛔ ACHTUNG: OFFLINE-DRUCKER AUSGEWÄHLT! ⛔\n` +
+                `---------------------------------------------\n\n` +
+                `Der Drucker "${printerName}" ist DERZEIT NICHT VERFÜGBAR!\n\n` +
+                `Wenn Sie trotzdem fortfahren:\n\n` +
+                `✓ Ihr Job wird in der WARTESCHLANGE gespeichert\n` +
+                `✓ Der System-Status wird regelmäßig überprüft\n` +
+                `✓ Sie erhalten eine BENACHRICHTIGUNG, sobald der Drucker online geht\n` +
+                `✓ Der Job startet AUTOMATISCH, wenn der Drucker verfügbar wird\n\n` +
+                `---------------------------------------------\n` +
+                `Möchten Sie TROTZDEM mit diesem Offline-Drucker fortfahren?`
            );
            
            if (!confirmOffline) {
-                showNotification('Job-Erstellung abgebrochen. Bitte wählen Sie einen Online-Drucker oder warten Sie, bis der gewünschte Drucker verfügbar ist.', 'info');
+                showNotification('Job-Erstellung abgebrochen - Bitte wählen Sie einen ONLINE-Drucker für sofortigen Start', 'info');
                return;
            }
            
-            showNotification(`Job für Offline-Drucker "${printerName}" wird erstellt. Sie werden benachrichtigt, wenn der Drucker online geht.`, 'warning');
+            // Spezielle Benachrichtigung für Offline-Drucker-Jobs
+            showNotification(`⏳ Job für OFFLINE-Drucker "${printerName}" wird in Warteschlange erstellt. Sie werden benachrichtigt, wenn der Drucker verfügbar wird.`, 'warning');
        }
        
        // Startzeit in ISO-Format konvertieren