fix: Add Mobile View and fix error while freeze on entering new schedule

2025-11-05 17:09:37 +01:00 · 2025-11-05 17:09:37 +01:00 · 9c25956711
commit 9c25956711
parent 5001cc1147
6 changed files with 746 additions and 392 deletions
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -2,35 +2,163 @@
 <html lang="de">
 <head>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Schulzeit Erfassung</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Zeiterfassung</title>
+    
+    <!-- Bulma CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
    <style>
-        html, body {
-            height: 100%;
+        /* Custom Styles */
+        body {
+            min-height: 100vh;
+        }
+        
+        .table-container {
+            overflow-x: auto;
+        }
+        
+        /* Responsive Verbesserungen */
+        @media screen and (max-width: 768px) {
+            .level {
+                flex-direction: column;
+            }
+            
+            .level-left, .level-right {
+                width: 100%;
+            }
+            
+            .level-item {
+                justify-content: center;
+                margin-bottom: 0.5rem;
+            }
+            
+            .buttons {
+                flex-wrap: wrap;
+            }
+            
+            .button {
+                margin-bottom: 0.5rem;
+            }
+        }
+        
+        /* Loading Spinner */
+        .fa-spinner {
+            animation: fa-spin 1s infinite linear;
+        }
+        
+        @keyframes fa-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
        }
    </style>
 </head>
 <body>
-    <div id="app"></div>
+    <div id="elm"></div>
+    
    <script src="/elm.js"></script>
    <script>
-        var storedToken = localStorage.getItem('authToken');
+        // LocalStorage Helper
+        function getStoredData() {
+            try {
+                const data = localStorage.getItem('timetracking');
+                if (data) {
+                    return JSON.parse(data);
+                }
+            } catch (e) {
+                console.error('Failed to parse stored data:', e);
+            }
+            return { token: null, isAdmin: false };
+        }
        
-        var app = Elm.Main.init({
-            node: document.getElementById('app'),
-            flags: storedToken
+        function saveData(token, isAdmin) {
+            try {
+                localStorage.setItem('timetracking', JSON.stringify({
+                    token: token,
+                    isAdmin: isAdmin
+                }));
+            } catch (e) {
+                console.error('Failed to save data:', e);
+            }
+        }
+        
+        function clearData() {
+            try {
+                localStorage.removeItem('timetracking');
+            } catch (e) {
+                console.error('Failed to clear data:', e);
+            }
+        }
+        
+        // Initialisiere Elm App mit gespeicherten Daten
+        const storedData = getStoredData();
+        const app = Elm.Main.init({
+            node: document.getElementById('elm'),
+            flags: {
+                token: storedData.token,
+                isAdmin: storedData.isAdmin
+            }
        });
-
-        // Save token to localStorage
-        app.ports.saveToken.subscribe(function(token) {
-            localStorage.setItem('authToken', token);
+        
+        // Port: Token speichern
+        app.ports.saveToken.subscribe(function(data) {
+            saveData(data.token, data.isAdmin);
        });
-
-        // Remove token from localStorage
+        
+        // Port: Token entfernen
        app.ports.removeToken.subscribe(function() {
-            localStorage.removeItem('authToken');
+            clearData();
        });
+        
+        // Port: Lösch-Bestätigung
+        app.ports.confirmDelete.subscribe(function(message) {
+            const confirmed = confirm(message);
+            app.ports.confirmDeleteResponse.send(confirmed);
+        });
+        
+        // BUGFIX: Responsive Navbar Toggle
+        document.addEventListener('DOMContentLoaded', () => {
+            // Funktion für Burger-Menu
+            function setupBurgerMenu() {
+                const burgers = document.querySelectorAll('.navbar-burger');
+                
+                burgers.forEach(burger => {
+                    burger.addEventListener('click', () => {
+                        const target = burger.dataset.target;
+                        const menu = document.getElementById(target);
+                        
+                        if (menu) {
+                            burger.classList.toggle('is-active');
+                            menu.classList.toggle('is-active');
+                        }
+                    });
+                });
+            }
+            
+            // Initial setup
+            setupBurgerMenu();
+            
+            // Observer für dynamische Änderungen (wenn Elm DOM updated)
+            const observer = new MutationObserver((mutations) => {
+                setupBurgerMenu();
+            });
+            
+            observer.observe(document.getElementById('elm'), {
+                childList: true,
+                subtree: true
+            });
+        });
+        
+        // Service Worker für Offline-Fähigkeit (optional)
+        if ('serviceWorker' in navigator && window.location.protocol === 'https:') {
+            navigator.serviceWorker.register('/sw.js').catch(() => {
+                console.log('Service Worker registration failed');
+            });
+        }
    </script>
 </body>
 </html>