🐛 Backend Database Optimization: Improved performance and stability for myp.db-shm & myp.db-wal, and updated jobs.html templates. 🎉📚💄

backend/app/templates/jobs.html

@@ -572,7 +572,7 @@
         
         <!-- Quick Action Buttons -->
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6" id="quick-actions">
-            <button onclick="showQuickReservation()" 
+            <button onclick="openQuickModal()" 
                     class="p-6 border-2 border-dashed border-mercedes-silver hover:border-mercedes-blue rounded-xl transition-colors group">
                 <div class="text-center">
                     <svg class="w-8 h-8 mx-auto mb-3 text-mercedes-silver group-hover:text-mercedes-blue transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -819,7 +819,7 @@
                     <h3 class="text-xl font-bold text-mercedes-black dark:text-white mb-2">Schnell-Reservierung</h3>
                     <p class="text-mercedes-gray dark:text-slate-400">Reservieren Sie einen Drucker für eine bestimmte Zeit</p>
                 </div>
-                <button onclick="closeQuickReservationModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
+                <button onclick="closeQuickModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
                     <svg class="w-6 h-6 text-mercedes-gray dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                     </svg>
@@ -865,7 +865,7 @@
                 </div>
                 
                 <div class="flex items-center justify-end gap-3 pt-6 border-t border-mercedes-silver">
-                    <button type="button" onclick="closeQuickReservationModal()" class="btn-secondary">
+                    <button type="button" onclick="closeQuickModal()" class="btn-secondary">
                         Abbrechen
                     </button>
                     <button type="submit" class="btn-primary">
@@ -1841,35 +1841,60 @@ class JobManager {
     }
 }
 
-// Modal Animations
+// Modal Animations - Robuste Version
 function showModal(modalId) {
+    console.log('Opening modal:', modalId);
     const modal = document.getElementById(modalId);
     const content = modal.querySelector('.mercedes-modal, .dashboard-card');
     
-    // Entferne hidden-Klasse und setze display
+    if (!modal || !content) {
+        console.error('Modal or content not found:', modalId);
+        return;
+    }
+    
+    // 1. Setze grundlegende Sichtbarkeit
     modal.classList.remove('hidden');
     modal.style.display = 'block';
+    modal.style.visibility = 'visible';
     
-    // Animation mit leichter Verzögerung für smooth transition
+    // 2. Stelle sicher, dass Modal im Ausgangszustand ist
-    setTimeout(() => {
+    content.classList.remove('scale-100', 'opacity-100');
+    content.classList.add('scale-95', 'opacity-0');
+    
+    // 3. Force repaint für smooth animation
+    modal.offsetHeight;
+    
+    // 4. Animiere zur sichtbaren Position
+    requestAnimationFrame(() => {
         content.classList.remove('scale-95', 'opacity-0');
         content.classList.add('scale-100', 'opacity-100');
-    }, 10);
+    });
+    
+    console.log('Modal opened successfully:', modalId);
 }
 
 function hideModal(modalId) {
+    console.log('Closing modal:', modalId);
     const modal = document.getElementById(modalId);
     const content = modal.querySelector('.mercedes-modal, .dashboard-card');
     
+    if (!modal || !content) {
+        console.error('Modal or content not found:', modalId);
+        return;
+    }
+    
     // Animation rückwärts
     content.classList.remove('scale-100', 'opacity-100');
     content.classList.add('scale-95', 'opacity-0');
     
-    // Nach Animation verstecken
+    // Nach Animation komplett verstecken
     setTimeout(() => {
         modal.classList.add('hidden');
         modal.style.display = 'none';
+        modal.style.visibility = 'hidden';
     }, 200);
+    
+    console.log('Modal closed successfully:', modalId);
 }
 
 // Global functions for UI interactions
@@ -1927,6 +1952,7 @@ function changePage(direction) {
 }
 
 function showQuickReservation() {
+    console.log('🔧 TEST: showQuickReservation() aufgerufen');
     showModal('quickReservationModal');
 }
 
@@ -1960,5 +1986,74 @@ let jobManager;
 document.addEventListener('DOMContentLoaded', () => {
     jobManager = new JobManager();
 });
+
+// Debug-Test-Funktionen
+function testModal() {
+    console.log('🧪 Modal-Test gestartet...');
+    const modal = document.getElementById('quickReservationModal');
+    const content = modal.querySelector('.mercedes-modal');
+    
+    console.log('Modal gefunden:', !!modal);
+    console.log('Content gefunden:', !!content);
+    console.log('Modal HTML:', modal ? modal.outerHTML.substring(0, 200) + '...' : 'NULL');
+    
+    if (modal && content) {
+        console.log('✅ Elemente gefunden - Modal wird geöffnet');
+        showModal('quickReservationModal');
+    } else {
+        console.error('❌ Modal oder Content nicht gefunden');
+    }
+}
+
+// Inline Test-Button (nur für Debugging)
+window.testModalFunction = testModal;
+
+function openQuickModal() {
+    console.log('🚀 openQuickModal() aufgerufen');
+    
+    // Direkte Modal-Öffnung ohne komplizierte Funktionen
+    const modal = document.getElementById('quickReservationModal');
+    const content = modal.querySelector('.mercedes-modal');
+    
+    console.log('Modal Element:', modal);
+    console.log('Content Element:', content);
+    
+    if (modal && content) {
+        // Schritt 1: Modal sichtbar machen
+        modal.classList.remove('hidden');
+        modal.style.display = 'block';
+        
+        // Schritt 2: Animation starten (mit setTimeout für Browser-Repaint)
+        setTimeout(() => {
+            content.classList.remove('scale-95', 'opacity-0');
+            content.classList.add('scale-100', 'opacity-100');
+            console.log('✅ Modal Animation gestartet');
+        }, 100);
+        
+        console.log('✅ Modal sollte jetzt sichtbar sein');
+    } else {
+        console.error('❌ Modal oder Content nicht gefunden');
+    }
+}
+
+function closeQuickModal() {
+    console.log('🔒 closeQuickModal() aufgerufen');
+    
+    const modal = document.getElementById('quickReservationModal');
+    const content = modal.querySelector('.mercedes-modal');
+    
+    if (modal && content) {
+        // Animation rückwärts
+        content.classList.remove('scale-100', 'opacity-100');
+        content.classList.add('scale-95', 'opacity-0');
+        
+        // Nach Animation verstecken
+        setTimeout(() => {
+            modal.classList.add('hidden');
+            modal.style.display = 'none';
+            console.log('✅ Modal geschlossen');
+        }, 200);
+    }
+}
 </script>
 {% endblock %}