📝 "Refactor backend files

backend/static/js/admin-dashboard.js

@@ -265,19 +265,65 @@ async function loadStats() {
         const response = await fetch('/api/stats');
         const data = await response.json();
         
-        // Update dashboard counters
-        document.getElementById('total-users-count').textContent = data.total_users || 0;
-        document.getElementById('total-printers-count').textContent = data.total_printers || 0;
-        document.getElementById('active-jobs-count').textContent = data.active_jobs || 0;
+        // Update dashboard counters mit robusten ID-Checks
+        const userCountEl = document.getElementById('live-users-count');
+        if (userCountEl) {
+            userCountEl.textContent = data.total_users || 0;
+        }
+        
+        const printerCountEl = document.getElementById('live-printers-count');
+        if (printerCountEl) {
+            printerCountEl.textContent = data.total_printers || 0;
+        }
+        
+        const activeJobsEl = document.getElementById('live-jobs-active');
+        if (activeJobsEl) {
+            activeJobsEl.textContent = data.active_jobs || 0;
+        }
         
         // Update scheduler status
         updateSchedulerStatusIndicator(data.scheduler_status || false);
+        
+        // Update additional stats if elements exist
+        const onlinePrintersEl = document.getElementById('live-printers-online');
+        if (onlinePrintersEl) {
+            onlinePrintersEl.textContent = `${data.online_printers || 0} online`;
+        }
+        
+        const queuedJobsEl = document.getElementById('live-jobs-queued');
+        if (queuedJobsEl) {
+            queuedJobsEl.textContent = `${data.queued_jobs || 0} in Warteschlange`;
+        }
+        
+        const successRateEl = document.getElementById('live-success-rate');
+        if (successRateEl) {
+            successRateEl.textContent = `${data.success_rate || 0}%`;
+        }
+        
+        // Update progress bars if they exist
+        updateProgressBar('users-progress', data.total_users, 10);
+        updateProgressBar('printers-progress', data.online_printers, data.total_printers);
+        updateProgressBar('jobs-progress', data.active_jobs, 10);
+        updateProgressBar('success-progress', data.success_rate, 100);
+        
+        console.log('✅ Dashboard-Statistiken erfolgreich aktualisiert:', data);
     } catch (error) {
         console.error('Error loading stats:', error);
         showToast('Fehler beim Laden der Statistiken', 'error');
     }
 }
 
+/**
+ * Helper-Funktion zum sicheren Aktualisieren von Progress-Bars
+ */
+function updateProgressBar(progressId, currentValue, maxValue) {
+    const progressEl = document.getElementById(progressId);
+    if (progressEl && currentValue !== undefined && maxValue > 0) {
+        const percentage = Math.min(100, Math.max(0, (currentValue / maxValue) * 100));
+        progressEl.style.width = `${percentage}%`;
+    }
+}
+
 function updateSchedulerStatusIndicator(isRunning) {
     const statusText = document.getElementById('scheduler-status');
     const indicator = document.getElementById('scheduler-indicator');

backend/static/js/admin-panel.js

@@ -433,7 +433,10 @@ async function loadAdminStats() {
         
         // Aktualisiere die Statistik-Karten
         const statsContainer = document.getElementById('admin-stats');
-        if (!statsContainer) return;
+        if (!statsContainer) {
+            console.warn('Stats-Container nicht gefunden');
+            return;
+        }
         
         statsContainer.innerHTML = `
             <div class="stat-card">
@@ -443,7 +446,7 @@ async function loadAdminStats() {
                     </svg>
                 </div>
                 <div class="stat-title">Benutzer</div>
-                <div class="stat-value" id="total-users-count">${data.total_users || 0}</div>
+                <div class="stat-value" id="admin-total-users-count">${data.total_users || 0}</div>
                 <div class="stat-desc">Registrierte Benutzer</div>
             </div>
             
@@ -454,7 +457,7 @@ async function loadAdminStats() {
                     </svg>
                 </div>
                 <div class="stat-title">Drucker</div>
-                <div class="stat-value" id="total-printers-count">${data.total_printers || 0}</div>
+                <div class="stat-value" id="admin-total-printers-count">${data.total_printers || 0}</div>
                 <div class="stat-desc">Verbundene Drucker</div>
             </div>
             
@@ -465,7 +468,7 @@ async function loadAdminStats() {
                     </svg>
                 </div>
                 <div class="stat-title">Aktive Jobs</div>
-                <div class="stat-value" id="active-jobs-count">${data.active_jobs || 0}</div>
+                <div class="stat-value" id="admin-active-jobs-count">${data.active_jobs || 0}</div>
                 <div class="stat-desc">Laufende Druckaufträge</div>
             </div>
             
@@ -476,10 +479,12 @@ async function loadAdminStats() {
                     </svg>
                 </div>
                 <div class="stat-title">Erfolgsrate</div>
-                <div class="stat-value" id="success-rate">${data.success_rate || '0%'}</div>
+                <div class="stat-value" id="admin-success-rate">${data.success_rate || '0%'}</div>
                 <div class="stat-desc">Erfolgreiche Druckaufträge</div>
             </div>
         `;
+        
+        console.log('✅ Admin-Statistiken erfolgreich aktualisiert:', data);
     } catch (error) {
         console.error('Error loading admin stats:', error);
         showNotification('Fehler beim Laden der Admin-Statistiken', 'error');

backend/static/js/global-refresh-functions.js

@@ -3,6 +3,72 @@
  * Sammelt alle Refresh-Funktionen für verschiedene Seiten und Komponenten
  */
 
+/**
+ * Utility-Funktionen für robustes DOM-Element-Handling
+ */
+
+/**
+ * Sicheres Aktualisieren von Element-Inhalten
+ * @param {string} elementId - Die ID des Elements
+ * @param {string|number} value - Der zu setzende Wert
+ * @param {Object} options - Optionale Parameter
+ * @returns {boolean} - true wenn erfolgreich, false wenn Element nicht gefunden
+ */
+function safeUpdateElement(elementId, value, options = {}) {
+    const { 
+        fallbackValue = '-', 
+        logWarning = true, 
+        attribute = 'textContent',
+        transform = null 
+    } = options;
+    
+    const element = document.getElementById(elementId);
+    if (!element) {
+        if (logWarning) {
+            console.warn(`🔍 Element mit ID '${elementId}' nicht gefunden`);
+        }
+        return false;
+    }
+    
+    try {
+        const finalValue = value !== undefined && value !== null ? value : fallbackValue;
+        const displayValue = transform ? transform(finalValue) : finalValue;
+        
+        element[attribute] = displayValue;
+        return true;
+    } catch (error) {
+        console.error(`❌ Fehler beim Aktualisieren von Element '${elementId}':`, error);
+        return false;
+    }
+}
+
+/**
+ * Sicheres Aktualisieren mehrerer Elemente
+ * @param {Object} updates - Objekt mit elementId: value Paaren
+ * @param {Object} options - Optionale Parameter
+ */
+function safeBatchUpdate(updates, options = {}) {
+    const results = {};
+    Object.entries(updates).forEach(([elementId, value]) => {
+        results[elementId] = safeUpdateElement(elementId, value, options);
+    });
+    
+    const successful = Object.values(results).filter(Boolean).length;
+    const total = Object.keys(updates).length;
+    
+    console.log(`📊 Batch-Update: ${successful}/${total} Elemente erfolgreich aktualisiert`);
+    return results;
+}
+
+/**
+ * Prüfen ob Element existiert
+ * @param {string} elementId - Die ID des Elements
+ * @returns {boolean} - true wenn Element existiert
+ */
+function elementExists(elementId) {
+    return document.getElementById(elementId) !== null;
+}
+
 /**
  * Dashboard-Refresh-Funktion
  */
@@ -301,7 +367,10 @@ function updateDashboardStats(stats) {
  */
 function updateStatsCounter(elementId, value, animate = true) {
     const element = document.getElementById(elementId);
-    if (!element) return;
+    if (!element) {
+        console.warn(`Element mit ID '${elementId}' nicht gefunden`);
+        return;
+    }
     
     if (animate) {
         // Animierte Zählung