class Logger { static isDebugMode = false; static debug(message, data = null) { if (this.isDebugMode) { console.log(`[Debug] ${message}`, data || ''); } } static error(message, error = null) { console.error(`[Error] ${message}`, error || ''); } static initializeDebugMode() { try { const urlParams = new URLSearchParams(window.location.search); this.isDebugMode = urlParams.has('debug'); } catch (error) { console.error('Fehler beim Initialisieren des Debug-Modus:', error); this.isDebugMode = false; } } } const utils = { showLoading() { if (document.body) { document.body.classList.add('loading'); Logger.debug('Loading-Status aktiviert'); } else { Logger.error('document.body nicht verfügbar'); } }, hideLoading() { if (document.body) { document.body.classList.remove('loading'); Logger.debug('Loading-Status deaktiviert'); } else { Logger.error('document.body nicht verfügbar'); } }, safeGetElement(id) { const element = document.getElementById(id); if (!element) { Logger.error(`Element mit ID '${id}' nicht gefunden`); return null; } return element; }, async withLoading(asyncFn) { try { this.showLoading(); await asyncFn(); } finally { this.hideLoading(); } } }; class BackendManager { constructor() { this.selectedItems = new Set(); this.initializeEventListeners(); } initializeEventListeners() { // Event-Listener für Dark Mode Toggle const darkModeToggle = document.getElementById('darkModeToggle'); if (darkModeToggle) { darkModeToggle.addEventListener('click', () => this.toggleDarkMode()); } // Event-Listener für Aktualisieren-Button const refreshButton = document.querySelector(".btn-primary[onclick='refreshData()']"); if (refreshButton) { refreshButton.addEventListener("click", () => { this.refreshData(); }); } } toggleDarkMode() { document.body.classList.toggle('dark-mode'); const isDarkMode = document.body.classList.contains('dark-mode'); localStorage.setItem('darkMode', isDarkMode); // Aktualisiere das Icon const icon = document.querySelector('#darkModeToggle i'); if (isDarkMode) { icon.classList.remove('bi-moon'); icon.classList.add('bi-sun'); } else { icon.classList.remove('bi-sun'); icon.classList.add('bi-moon'); } } async updateStats() { try { const response = await fetch('/backend/stats'); if (!response.ok) { throw new Error('Network response was not ok'); } const stats = await response.json(); console.log("Stats from backend:", stats); // Aktualisiere die Statistik-Anzeige document.getElementById('totalImages').textContent = stats.total_images; document.getElementById('totalAlbums').textContent = stats.albums.total; document.getElementById('totalCategories').textContent = stats.categories.total; document.getElementById('storageUsage').textContent = `${(stats.storage_usage_mb).toFixed(2)} MB`; } catch (error) { console.error('Fehler beim Laden der Statistiken:', error); } } async refreshData() { try { await this.updateStats(); this.showToast('Erfolg', 'Daten erfolgreich aktualisiert', 'success'); } catch (error) { this.showToast('Fehler', 'Fehler beim Aktualisieren der Daten', 'danger'); } } showToast(title, message, type = 'info') { const toast = document.getElementById('toast'); const toastTitle = document.getElementById('toastTitle'); const toastMessage = document.getElementById('toastMessage'); toast.classList.remove('bg-success', 'bg-danger', 'bg-info', 'bg-warning'); toast.classList.add(`bg-${type}`); toastTitle.textContent = title; toastMessage.textContent = message; const bsToast = new bootstrap.Toast(toast); bsToast.show(); } } // Initialisierung document.addEventListener('DOMContentLoaded', () => { new BackendManager(); updateStatistics(); // Statistiken beim Laden der Seite abrufen // Dark Mode aus localStorage wiederherstellen, falls vorhanden if (localStorage.getItem('darkMode') === 'true') { document.body.classList.add('dark-mode'); const icon = document.querySelector('#darkModeToggle i'); if (icon) { icon.classList.remove('bi-moon'); icon.classList.add('bi-sun'); } } });