"feat: Implement test printer functionality in admin system"

backend/app/static/js/admin-system.js

@@ -40,6 +40,138 @@ async function makeApiCall(url, method = 'GET', data = null) {
     }
 }
 
+// Logs laden und anzeigen
+async function loadLogs() {
+    const logsContainer = document.getElementById('logs-container');
+    if (!logsContainer) return;
+    
+    // Lade-Animation anzeigen
+    logsContainer.innerHTML = `
+        <div class="flex justify-center items-center py-12">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 dark:border-indigo-400"></div>
+        </div>
+    `;
+    
+    try {
+        const response = await fetch('/api/logs');
+        if (!response.ok) throw new Error('Fehler beim Laden der Logs');
+        
+        const data = await response.json();
+        window.logsData = data.logs || [];
+        window.filteredLogs = [...window.logsData];
+        renderLogs();
+        updateLogStatistics();
+        scrollLogsToBottom();
+    } catch (error) {
+        console.error('Fehler beim Laden der Logs:', error);
+        logsContainer.innerHTML = `
+            <div class="text-center py-8">
+                <div class="text-red-600 dark:text-red-400 text-xl mb-2">Fehler beim Laden der Logs</div>
+                <p class="text-gray-600 dark:text-gray-400">${error.message}</p>
+                <button onclick="loadLogs()" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+                    Erneut versuchen
+                </button>
+            </div>
+        `;
+    }
+}
+
+// Logs rendern
+function renderLogs() {
+    const logsContainer = document.getElementById('logs-container');
+    if (!logsContainer || !window.filteredLogs) return;
+    
+    if (window.filteredLogs.length === 0) {
+        logsContainer.innerHTML = `
+            <div class="text-center py-8">
+                <p class="text-gray-600 dark:text-gray-400">Keine Logs gefunden</p>
+            </div>
+        `;
+        return;
+    }
+    
+    const logsHtml = window.filteredLogs.map(log => {
+        const levelColor = getLogLevelColor(log.level);
+        return `
+            <div class="bg-white/40 dark:bg-slate-700/40 rounded-lg p-4 border ${levelColor.border}">
+                <div class="flex items-start space-x-3">
+                    <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full ${levelColor.bg} ${levelColor.text}">
+                        ${log.level}
+                    </span>
+                    <div class="flex-1">
+                        <div class="flex items-center justify-between mb-1">
+                            <span class="text-sm font-medium text-slate-600 dark:text-slate-400">${log.category}</span>
+                            <span class="text-xs text-slate-500 dark:text-slate-500">${log.timestamp}</span>
+                        </div>
+                        <p class="text-sm text-slate-900 dark:text-white break-all">${log.message}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+    
+    logsContainer.innerHTML = logsHtml;
+}
+
+// Log-Level-Farben bestimmen
+function getLogLevelColor(level) {
+    const colors = {
+        'ERROR': {
+            bg: 'bg-red-100 dark:bg-red-900/30',
+            text: 'text-red-800 dark:text-red-200',
+            border: 'border-red-200 dark:border-red-700'
+        },
+        'WARNING': {
+            bg: 'bg-yellow-100 dark:bg-yellow-900/30',
+            text: 'text-yellow-800 dark:text-yellow-200',
+            border: 'border-yellow-200 dark:border-yellow-700'
+        },
+        'INFO': {
+            bg: 'bg-blue-100 dark:bg-blue-900/30',
+            text: 'text-blue-800 dark:text-blue-200',
+            border: 'border-blue-200 dark:border-blue-700'
+        },
+        'DEBUG': {
+            bg: 'bg-gray-100 dark:bg-gray-900/30',
+            text: 'text-gray-800 dark:text-gray-200',
+            border: 'border-gray-200 dark:border-gray-700'
+        }
+    };
+    
+    return colors[level.toUpperCase()] || colors['INFO'];
+}
+
+// Log-Statistiken aktualisieren
+function updateLogStatistics() {
+    if (!window.logsData) return;
+    
+    const stats = {
+        total: window.logsData.length,
+        errors: window.logsData.filter(log => log.level.toUpperCase() === 'ERROR').length,
+        warnings: window.logsData.filter(log => log.level.toUpperCase() === 'WARNING').length,
+        info: window.logsData.filter(log => log.level.toUpperCase() === 'INFO').length
+    };
+    
+    // Aktualisiere Statistik-Anzeigen falls vorhanden
+    const totalElement = document.getElementById('log-stats-total');
+    const errorsElement = document.getElementById('log-stats-errors');
+    const warningsElement = document.getElementById('log-stats-warnings');
+    const infoElement = document.getElementById('log-stats-info');
+    
+    if (totalElement) totalElement.textContent = stats.total;
+    if (errorsElement) errorsElement.textContent = stats.errors;
+    if (warningsElement) warningsElement.textContent = stats.warnings;
+    if (infoElement) infoElement.textContent = stats.info;
+}
+
+// Zum Ende der Logs scrollen
+function scrollLogsToBottom() {
+    const logsContainer = document.getElementById('logs-container');
+    if (logsContainer) {
+        logsContainer.scrollTop = logsContainer.scrollHeight;
+    }
+}
+
 // Notification anzeigen
 function showNotification(message, type = 'info') {
     // Erstelle Notification-Element falls nicht vorhanden
@@ -210,5 +342,9 @@ window.adminSystem = {
     restartSystem,
     editSettings,
     updateSystemStatus,
-    updateDatabaseStatus
+    updateDatabaseStatus,
+    loadLogs,
+    renderLogs,
+    updateLogStatistics,
+    scrollLogsToBottom
 };