From f2bc72988bc77a50981663ab55754c2955c0edc0 Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Thu, 29 May 2025 19:07:26 +0200
Subject: [PATCH] "Refactor admin and printer templates using Conventional
 Commits (feat)"

---
 backend/app/templates/admin.html    |   1 +
 backend/app/templates/printers.html | 200 ++++++++++++++++++++++++----
 2 files changed, 178 insertions(+), 23 deletions(-)

diff --git a/backend/app/templates/admin.html b/backend/app/templates/admin.html
index a7179e75..cd4a48ae 100644
--- a/backend/app/templates/admin.html
+++ b/backend/app/templates/admin.html
@@ -9,6 +9,7 @@
 <script src="{{ url_for('static', filename='js/admin.js') }}" defer></script>
 <script src="{{ url_for('static', filename='js/admin-system.js') }}" defer></script>
 <script src="{{ url_for('static', filename='js/admin-live.js') }}" defer></script>
+<script src="{{ url_for('static', filename='js/admin-dashboard.js') }}" defer></script>
 
 <!-- Loading Overlay -->
 <div id="loading-overlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center hidden">
diff --git a/backend/app/templates/printers.html b/backend/app/templates/printers.html
index 124a3182..7e1228fb 100644
--- a/backend/app/templates/printers.html
+++ b/backend/app/templates/printers.html
@@ -1269,26 +1269,55 @@ class PrinterManager {
         });
     }
     
+    handleModelChange(event) {
+        const customDiv = document.getElementById('customModelDiv');
+        if (event.target.value === 'Custom') {
+            customDiv.classList.remove('hidden');
+        } else {
+            customDiv.classList.add('hidden');
+        }
+    }
+    
+    handleFormSubmit(event) {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        this.submitPrinterForm(formData);
+    }
+    
+    refreshPrinters() {
+        console.log('Drucker werden aktualisiert...');
+        this.loadPrinters();
+    }
+    
     async loadPrinters() {
-    try {
+        try {
             this.showLoadingState();
             
-        const response = await fetch('/api/printers');
-        const data = await response.json();
-        
-        if (data.success) {
+            const response = await fetch('/api/printers');
+            const data = await response.json();
+            
+            // Korrigierte Überprüfung - API sendet direkt das printers Array
+            if (response.ok && data.printers) {
                 allPrinters = data.printers || [];
+                console.log(`${allPrinters.length} Drucker erfolgreich geladen:`, allPrinters);
                 this.applyFilters();
                 this.updateStatistics();
                 this.populateFilterDropdowns();
                 this.updateLastUpdateTime();
-        } else {
-                this.showError('Fehler beim Laden der Drucker: ' + data.message);
-        }
-    } catch (error) {
-        console.error('Error loading printers:', error);
-            this.showError('Fehler beim Laden der Drucker');
-    } finally {
+            } else {
+                console.error('Fehler beim Laden der Drucker:', data);
+                this.showError('Fehler beim Laden der Drucker: ' + (data.error || data.message || 'Unbekannter Fehler'));
+                // Auch bei Fehlern leere Liste anzeigen
+                allPrinters = [];
+                this.applyFilters();
+            }
+        } catch (error) {
+            console.error('Error loading printers:', error);
+            this.showError('Netzwerkfehler beim Laden der Drucker: ' + error.message);
+            // Bei Netzwerkfehlern auch leere Liste anzeigen
+            allPrinters = [];
+            this.applyFilters();
+        } finally {
             this.hideLoadingState();
         }
     }
@@ -1768,23 +1797,126 @@ class PrinterManager {
     closeAllModals() {
         const modals = ['printerModal', 'printerDetailsModal'];
         modals.forEach(modalId => {
-            const modal = document.getElementById(modalId);
-            if (modal && !modal.classList.contains('hidden')) {
-                this.closeModal(modalId);
-            }
+            this.closeModal(modalId);
         });
     }
     
     closeModal(modalId) {
         const modal = document.getElementById(modalId);
-        const content = modal.querySelector('.mercedes-modal, .dashboard-card');
+        if (modal) {
+            modal.classList.add('hidden');
+        }
+    }
     
-        content.classList.remove('scale-100', 'opacity-100');
-        content.classList.add('scale-95', 'opacity-0');
-    setTimeout(() => {
-        modal.classList.add('hidden');
-    }, 200);
-}
+    // Modal-Funktionen
+    openAddPrinterModal() {
+        console.log('Drucker hinzufügen Modal wird geöffnet');
+        this.resetPrinterForm();
+        document.getElementById('printerModalTitle').textContent = 'Drucker hinzufügen';
+        document.getElementById('deletePrinterBtn').style.display = 'none';
+        this.showModal('printerModal');
+    }
+    
+    editPrinter(printerId) {
+        console.log('Drucker bearbeiten:', printerId);
+        const printer = allPrinters.find(p => p.id == printerId);
+        if (printer) {
+            this.populatePrinterForm(printer);
+            document.getElementById('printerModalTitle').textContent = 'Drucker bearbeiten';
+            document.getElementById('deletePrinterBtn').style.display = 'block';
+            this.showModal('printerModal');
+        }
+    }
+    
+    showModal(modalId) {
+        const modal = document.getElementById(modalId);
+        const content = modal.querySelector('.mercedes-modal');
+        
+        modal.classList.remove('hidden');
+        
+        // Animation
+        setTimeout(() => {
+            content.classList.remove('scale-95', 'opacity-0');
+            content.classList.add('scale-100', 'opacity-100');
+        }, 10);
+    }
+    
+    resetPrinterForm() {
+        document.getElementById('printerForm').reset();
+        document.getElementById('printerId').value = '';
+        document.getElementById('customModelDiv').classList.add('hidden');
+        document.getElementById('connectionTest').classList.add('hidden');
+    }
+    
+    populatePrinterForm(printer) {
+        document.getElementById('printerId').value = printer.id;
+        document.getElementById('printerName').value = printer.name || '';
+        document.getElementById('printerModel').value = printer.model || '';
+        document.getElementById('printerLocation').value = printer.location || '';
+        document.getElementById('printerIP').value = printer.ip_address || printer.plug_ip || '';
+        
+        // Zeige Connection Test für bestehende Drucker
+        document.getElementById('connectionTest').classList.remove('hidden');
+    }
+    
+    async submitPrinterForm(formData) {
+        try {
+            const printerId = document.getElementById('printerId').value;
+            const isEdit = printerId !== '';
+            
+            const url = isEdit ? `/api/printers/${printerId}` : '/api/printers';
+            const method = isEdit ? 'PUT' : 'POST';
+            
+            const response = await fetch(url, {
+                method: method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': this.getCSRFToken()
+                },
+                body: JSON.stringify({
+                    name: formData.get('name'),
+                    model: formData.get('model') === 'Custom' ? formData.get('customModel') : formData.get('model'),
+                    location: formData.get('location'),
+                    plug_ip: formData.get('ip_address'),
+                    active: formData.get('active') === 'on'
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (response.ok) {
+                this.showSuccess(isEdit ? 'Drucker erfolgreich aktualisiert' : 'Drucker erfolgreich hinzugefügt');
+                this.closeModal('printerModal');
+                await this.loadPrinters(); // Drucker-Liste neu laden
+            } else {
+                this.showError('Fehler beim Speichern: ' + (result.error || result.message));
+            }
+        } catch (error) {
+            console.error('Error submitting printer form:', error);
+            this.showError('Netzwerkfehler beim Speichern des Druckers');
+        }
+    }
+    
+    getCSRFToken() {
+        return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
+    }
+    
+    // Weitere Modal-Funktionen
+    openPrinterDetails(printerId) {
+        console.log('Drucker Details öffnen für ID:', printerId);
+        const printer = allPrinters.find(p => p.id == printerId);
+        if (printer) {
+            document.getElementById('printerDetailsTitle').textContent = `${printer.name} - Details`;
+            this.loadPrinterDetails(printer);
+            this.showModal('printerDetailsModal');
+        }
+    }
+    
+    loadPrinterDetails(printer) {
+        // Hier würden die Detail-Informationen geladen werden
+        console.log('Lade Details für Drucker:', printer);
+        // TODO: Implementiere Detail-Ansicht
+    }
 }
 
 // Initialize Printer Manager
@@ -1879,5 +2011,27 @@ function closePrinterModal() {
 function closePrinterDetailsModal() {
     printerManager.closeModal('printerDetailsModal');
     }
+
+// Initialisierung beim Laden der Seite
+let printerManager;
+
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('🚀 Mercedes-Benz MYP Printer Management System wird initialisiert...');
+    printerManager = new PrinterManager();
+    
+    // Add Printer Button Event Listener
+    const addPrinterBtn = document.getElementById('add-printer-btn');
+    if (addPrinterBtn) {
+        addPrinterBtn.addEventListener('click', openAddPrinterModal);
+    }
+    
+    // Weitere Buttons im Header
+    const buttons = document.querySelectorAll('[onclick*="openAddPrinterModal"]');
+    buttons.forEach(btn => {
+        btn.addEventListener('click', openAddPrinterModal);
+    });
+    
+    console.log('✅ Printer Management System erfolgreich initialisiert');
+});
 </script>
 {% endblock %} 
\ No newline at end of file