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/static/js/ui-components.js
+++ b/backend/app/static/js/ui-components.js
@@ -18,7 +18,8 @@
        constructor() {
            // DOM-Elemente
            this.darkModeToggle = document.getElementById('darkModeToggle');
-            this.darkModeIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('svg') : null;
+            this.sunIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('.sun-icon') : null;
+            this.moonIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('.moon-icon') : null;
            this.html = document.documentElement;
            
            // Local Storage Key
@@ -51,6 +52,10 @@
                this.updateDarkModeIcon(true);
                this.darkModeToggle.setAttribute('aria-pressed', 'true');
                this.darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
+                if (this.sunIcon && this.moonIcon) {
+                    this.sunIcon.classList.add('hidden');
+                    this.moonIcon.classList.remove('hidden');
+                }
            } else {
                this.html.classList.remove('dark');
                this.html.setAttribute('data-theme', 'light');
@@ -58,6 +63,10 @@
                this.updateDarkModeIcon(false);
                this.darkModeToggle.setAttribute('aria-pressed', 'false');
                this.darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
+                if (this.sunIcon && this.moonIcon) {
+                    this.sunIcon.classList.remove('hidden');
+                    this.moonIcon.classList.add('hidden');
+                }
            }
            
            // Einstellung im Local Storage speichern
@@ -74,7 +83,7 @@
                detail: { isDark: enable }
            }));
            
-            console.log('Dark Mode set to:', enable);
+            console.log(`${enable ? '🌙' : '☀️'} Design umgeschaltet auf: ${enable ? 'Dark Mode' : 'Light Mode'}`);
        }
        
        /**
@@ -82,18 +91,17 @@
         * @param {boolean} isDark - Ob Dark Mode aktiv ist
         */
        updateDarkModeIcon(isDark) {
-            if (!this.darkModeIcon) return;
+            if (!this.darkModeToggle) return;
            
-            if (isDark) {
-                // Sonne anzeigen (für Wechsel zum Light Mode)
-                this.darkModeIcon.innerHTML = `
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                `;
-            } else {
-                // Mond anzeigen (für Wechsel zum Dark Mode)
-                this.darkModeIcon.innerHTML = `
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                `;
+            // Stellen sicher, dass die Icons korrekt angezeigt werden
+            if (this.sunIcon && this.moonIcon) {
+                if (isDark) {
+                    this.sunIcon.classList.add('hidden');
+                    this.moonIcon.classList.remove('hidden');
+                } else {
+                    this.sunIcon.classList.remove('hidden');
+                    this.moonIcon.classList.add('hidden');
+                }
            }
        }
        
@@ -102,15 +110,15 @@
         */
        init() {
            if (!this.darkModeToggle) {
-                console.error('Dark Mode Toggle Button nicht gefunden!');
+                console.error('⚠️ Dark Mode Toggle Button nicht gefunden! UI-Komponente nicht verfügbar.');
                return;
            }
            
-            console.log('Dark Mode Manager initialisiert');
+            console.log('🚀 Dark Mode Manager erfolgreich initialisiert');
            
            // Event Listener für den Dark Mode Toggle Button
            this.darkModeToggle.addEventListener('click', () => {
-                console.log('Dark Mode Toggle geklickt');
+                console.log('👆 Dark Mode Toggle Button angeklickt');
                const newDarkModeState = !this.isDarkMode();
                this.setDarkMode(newDarkModeState);
            });
@@ -118,7 +126,7 @@
            // Alternative Event-Listener für Buttons mit data-action
            document.addEventListener('click', (e) => {
                if (e.target.closest('[data-action="toggle-dark-mode"]')) {
-                    console.log('Dark Mode Toggle über data-action geklickt');
+                    console.log('👆 Dark Mode Toggle über data-action aktiviert');
                    const newDarkModeState = !this.isDarkMode();
                    this.setDarkMode(newDarkModeState);
                }
@@ -144,11 +152,111 @@
            
            // Initialisierung: Aktuellen Status setzen
            const isDark = this.isDarkMode();
-            console.log('Initial Dark Mode Status:', isDark);
+            console.log(`🔍 Initialer Dark Mode Status: ${isDark ? '🌙 aktiviert' : '☀️ deaktiviert'}`);
            this.setDarkMode(isDark);
        }
    }
    
+    /**
+     * Mobile Menu Manager
+     */
+    class MobileMenuManager {
+        constructor() {
+            this.mobileMenuToggle = document.getElementById('mobileMenuToggle');
+            this.mobileMenu = document.getElementById('mobileMenu');
+            this.isOpen = false;
+            
+            this.init();
+        }
+        
+        init() {
+            if (!this.mobileMenuToggle || !this.mobileMenu) {
+                console.log('ℹ️ Mobile Menu Komponenten nicht gefunden - Feature deaktiviert');
+                return;
+            }
+            
+            console.log('📱 Mobile Menu Manager erfolgreich initialisiert');
+            
+            // Event Listener für den Mobile Menu Toggle Button
+            this.mobileMenuToggle.addEventListener('click', () => {
+                this.toggleMenu();
+            });
+            
+            // Event Listener für Klicks außerhalb des Menüs
+            document.addEventListener('click', (e) => {
+                if (this.isOpen && !this.mobileMenuToggle.contains(e.target) && !this.mobileMenu.contains(e.target)) {
+                    this.closeMenu();
+                }
+            });
+            
+            // Event Listener für das Schließen bei Klick auf einen Menüpunkt
+            this.mobileMenu.querySelectorAll('a').forEach(link => {
+                link.addEventListener('click', () => {
+                    this.closeMenu();
+                });
+            });
+            
+            // Beim Scrollen das Menü schließen
+            window.addEventListener('scroll', () => {
+                if (this.isOpen && window.scrollY > 50) {
+                    this.closeMenu();
+                }
+            });
+        }
+        
+        toggleMenu() {
+            if (this.isOpen) {
+                this.closeMenu();
+            } else {
+                this.openMenu();
+            }
+        }
+        
+        openMenu() {
+            if (!this.mobileMenu || this.isOpen) return;
+            
+            this.mobileMenu.classList.remove('hidden');
+            this.isOpen = true;
+            this.mobileMenuToggle.setAttribute('aria-expanded', 'true');
+            
+            // Icon ändern
+            const menuIcon = this.mobileMenuToggle.querySelector('svg');
+            if (menuIcon) {
+                menuIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>';
+            }
+            
+            // Animation - kleine Verzögerung für sanfte Animation
+            setTimeout(() => {
+                this.mobileMenu.classList.add('open');
+            }, 10);
+            
+            // Body-Scroll verhindern (optional)
+            // document.body.style.overflow = 'hidden';
+        }
+        
+        closeMenu() {
+            if (!this.mobileMenu || !this.isOpen) return;
+            
+            this.mobileMenu.classList.remove('open');
+            this.isOpen = false;
+            this.mobileMenuToggle.setAttribute('aria-expanded', 'false');
+            
+            // Icon zurücksetzen
+            const menuIcon = this.mobileMenuToggle.querySelector('svg');
+            if (menuIcon) {
+                menuIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>';
+            }
+            
+            // Nach der Animation ausblenden
+            setTimeout(() => {
+                this.mobileMenu.classList.add('hidden');
+            }, 300);
+            
+            // Body-Scroll wiederherstellen
+            // document.body.style.overflow = '';
+        }
+    }
+    
    /**
     * User Dropdown Manager
     */
@@ -992,6 +1100,9 @@
        // Dark Mode Manager
        window.MYP.UI.darkMode = new DarkModeManager();
        
+        // Mobile Menu Manager
+        window.MYP.UI.mobileMenu = new MobileMenuManager();
+        
        // User Dropdown Manager
        window.MYP.UI.userDropdown = new UserDropdownManager();
        
@@ -1025,7 +1136,7 @@
            }
        });
        
-        console.log('MYP UI Components initialized successfully');
+        console.log('✅ MYP UI Components erfolgreich initialisiert - Benutzeroberfläche bereit');
    });

    // Globale Variable für Toast-Funktion