Initial commit: Quality App v2 - FG Scan Module with Reports

2026-01-25 22:25:18 +02:00
commit 3c5a273a89
66 changed files with 15368 additions and 0 deletions
--- a/app/static/js/theme.js
+++ b/app/static/js/theme.js
@@ -0,0 +1,94 @@
+/**
+ * Theme Toggle - Light/Dark Mode
+ * Persists user preference in localStorage
+ */
+
+class ThemeToggle {
+    constructor() {
+        this.STORAGE_KEY = 'quality-app-theme';
+        this.DARK_THEME = 'dark';
+        this.LIGHT_THEME = 'light';
+        this.init();
+    }
+
+    init() {
+        // Load saved theme or default to light
+        const savedTheme = localStorage.getItem(this.STORAGE_KEY) || this.LIGHT_THEME;
+        this.setTheme(savedTheme);
+        
+        // Setup toggle button listener
+        this.setupToggleButton();
+        
+        console.log('Theme initialized:', savedTheme);
+    }
+
+    setTheme(theme) {
+        const isDark = theme === this.DARK_THEME;
+        
+        if (isDark) {
+            document.body.setAttribute('data-theme', 'dark');
+            document.documentElement.setAttribute('data-theme', 'dark');
+            localStorage.setItem(this.STORAGE_KEY, this.DARK_THEME);
+            console.log('Dark theme set');
+        } else {
+            document.body.setAttribute('data-theme', 'light');
+            document.documentElement.setAttribute('data-theme', 'light');
+            localStorage.setItem(this.STORAGE_KEY, this.LIGHT_THEME);
+            console.log('Light theme set');
+        }
+        
+        // Update toggle button icon
+        this.updateToggleIcon(isDark);
+    }
+
+    getCurrentTheme() {
+        return document.body.getAttribute('data-theme') || this.LIGHT_THEME;
+    }
+
+    toggleTheme() {
+        const currentTheme = this.getCurrentTheme();
+        const newTheme = currentTheme === this.DARK_THEME ? this.LIGHT_THEME : this.DARK_THEME;
+        console.log('Toggling from', currentTheme, 'to', newTheme);
+        this.setTheme(newTheme);
+    }
+
+    setupToggleButton() {
+        const toggleBtn = document.getElementById('themeToggleBtn');
+        if (toggleBtn) {
+            toggleBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.toggleTheme();
+            });
+            console.log('Theme toggle button setup complete');
+        } else {
+            console.error('Theme toggle button not found');
+        }
+    }
+
+    updateToggleIcon(isDark) {
+        const toggleBtn = document.getElementById('themeToggleBtn');
+        if (toggleBtn) {
+            const icon = toggleBtn.querySelector('i');
+            if (icon) {
+                if (isDark) {
+                    icon.classList.remove('fa-moon');
+                    icon.classList.add('fa-sun');
+                    toggleBtn.setAttribute('title', 'Switch to Light Mode');
+                } else {
+                    icon.classList.remove('fa-sun');
+                    icon.classList.add('fa-moon');
+                    toggleBtn.setAttribute('title', 'Switch to Dark Mode');
+                }
+            }
+        }
+    }
+}
+
+// Initialize theme toggle when DOM is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        new ThemeToggle();
+    });
+} else {
+    new ThemeToggle();
+}