upload barcode implementation

Web/templates/library_table.html

@@ -466,10 +466,6 @@
     </div>
     <div id="filterPanel" class="library-filter-panel">
         <div class="filter-row">
-            <div class="filter-item">
-                <label for="filterAuthor">Autor/Künstler:</label>
-                <input type="text" id="filterAuthor" placeholder="z.B. Goethe">
-            </div>
             <div class="filter-item">
                 <label for="filterISBN">ISBN:</label>
                 <input type="text" id="filterISBN" placeholder="z.B. 978-3...">
@@ -549,15 +545,17 @@
     </div>
 </div>
 
+<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script>
-    // State
+    // =========================================================================
+    // 1. GLOBAL STATE DEFINITIONS
+    // =========================================================================
     let libraryItems = [];
     let filteredItems = [];
     let visibleItems = [];
     let currentSearchTerm = '';
     let activeFilters = {
-        author: '',
         isbn: '',
         type: '',
         status: ''
@@ -573,13 +571,20 @@
     const RENDER_BATCH_COUNT = 120;
     let renderedCount = INITIAL_RENDER_COUNT;
     let filterPanelOpen = false;
+    
+    // Scanner Related State Variables
     let scannerInstance = null;
-    let scannerRunning = false;
+    let scannerRunning = false; 
+    let activeScannerCallback = null; 
     let activeStudentCardId = '';
     let lastScanValue = '';
     let lastScanAt = 0;
+    
     const canEditLibraryItems = (document.getElementById('libraryTableContainer')?.dataset.canEdit === '1');
 
+    // =========================================================================
+    // 2. DATA LOADING & FILTERING ENGINE
+    // =========================================================================
     async function fetchLibraryPage(offset, limit) {
         const response = await fetch(`/api/library_items?offset=${offset}&limit=${limit}`);
         if (!response.ok) {
@@ -588,7 +593,6 @@
         return response.json();
     }
 
-    // Load items progressively: first page immediately, rest in background
     async function loadLibraryItems() {
         if (pagingState.loading) return;
         pagingState.loading = true;
@@ -627,7 +631,6 @@
                 pagingState.total = page.total || pagingState.total;
                 pagingState.hasMore = Boolean(page.has_more);
 
-                // Keep the current view reactive while avoiding a full rerender burst.
                 applyFiltersAndSearch(false);
 
                 if ('requestIdleCallback' in window) {
@@ -643,18 +646,16 @@
     }
 
     function filterItems(items) {
-        const author = activeFilters.author;
         const isbn = activeFilters.isbn;
         const type = activeFilters.type;
         const status = activeFilters.status;
 
         return items.filter(item => {
-            const authorMatch = !author || (item.Autor || item.Author || '').toLowerCase().includes(author);
             const isbnMatch = !isbn || (item.ISBN || item.Code_4 || item.Code4 || '').toLowerCase().includes(isbn);
             const typeMatch = !type || (item.ItemType || 'book') === type;
             const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
             const statusMatch = !status || statusKey === status;
-            return authorMatch && isbnMatch && typeMatch && statusMatch;
+            return isbnMatch && typeMatch && statusMatch;
         });
     }
 
@@ -662,7 +663,6 @@
         if (!currentSearchTerm) return items;
         return items.filter(item =>
             (item.Name || '').toLowerCase().includes(currentSearchTerm) ||
-            (item.Autor || item.Author || '').toLowerCase().includes(currentSearchTerm) ||
             (item.ISBN || item.Code_4 || item.Code4 || '').toLowerCase().includes(currentSearchTerm)
         );
     }
@@ -679,7 +679,6 @@
         renderItems();
     }
 
-    // Display current view with incremental rendering
     function renderItems() {
         const tbody = document.getElementById('itemsTableBody');
         const emptyState = document.getElementById('emptyState');
@@ -697,37 +696,33 @@
         emptyState.style.display = 'none';
         const rowsToRender = visibleItems.slice(0, renderedCount);
 
-        tbody.innerHTML = rowsToRender.map(item => `
-            ${(() => {
-                const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
-                const statusClass = statusKey === 'damaged' ? 'status-damaged' : (statusKey === 'borrowed' ? 'status-borrowed' : 'status-available');
-                const statusText = statusKey === 'damaged' ? 'Defekt/Zerstört' : (statusKey === 'borrowed' ? 'Ausgeliehen' : 'Verfügbar');
-                const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
-                const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
-                return `
-            <tr>
-                <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
-                <td>${escapeHtml(item.Autor || item.Author || '-')}</td>
-                <td>${escapeHtml(item.ISBN || item.Code_4 || item.Code4 || '-')}</td>
-                <td>${getItemTypeLabel(item.ItemType || 'book')}</td>
-                <td style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
-                <td>
-                    <span class="table-status ${statusClass}">
-                        ${statusText}
-                    </span>
-                </td>
-                <td class="table-actions">
-                    <button class="button" onclick="showItemDetail('${item._id}')">Details</button>
-                    <button class="button" style="background: #28a745; color: white;" onclick="borrowItem('${item._id}')" ${actionDisabled}>
-                        ${actionLabel}
-                    </button>
-                    ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
-                    ${canEditLibraryItems ? `<button class="button" style="background:#dc2626;color:#fff; margin-left:6px;" onclick="confirmDeleteLibraryItem('${item._id}')">Löschen</button>` : ''}
-                </td>
-            </tr>
-                `;
-            })()}
-        `).join('');
+        tbody.innerHTML = rowsToRender.map(item => {
+            const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
+            const statusClass = statusKey === 'damaged' ? 'status-damaged' : (statusKey === 'borrowed' ? 'status-borrowed' : 'status-available');
+            const statusText = statusKey === 'damaged' ? 'Defekt/Zerstört' : (statusKey === 'borrowed' ? 'Ausgeliehen' : 'Verfügbar');
+            const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
+            const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
+            return `
+        <tr>
+            <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
+            <td>${escapeHtml(item.ISBN || item.Code_4 || item.Code4 || '-')}</td>
+            <td>${getItemTypeLabel(item.ItemType || 'book')}</td>
+            <td style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
+            <td>
+                <span class="table-status ${statusClass}">
+                    ${statusText}
+                </span>
+            </td>
+            <td class="table-actions">
+                <button class="button" onclick="showItemDetail('${item._id}')">Details</button>
+                <button class="button" style="background: #28a745; color: white;" onclick="borrowItem('${item._id}')" ${actionDisabled}>
+                    ${actionLabel}
+                </button>
+                ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
+                ${canEditLibraryItems ? `<button class="button" style="background:#dc2626;color:#fff; margin-left:6px;" onclick="confirmDeleteLibraryItem('${item._id}')">Löschen</button>` : ''}
+            </td>
+        </tr>`;
+        }).join('');
 
         const canLoadMoreRows = renderedCount < visibleItems.length;
         if (canLoadMoreRows) {
@@ -742,13 +737,6 @@
         }
     }
 
-    // Confirm and call library item delete endpoint
-    function confirmDeleteLibraryItem(itemId) {
-        if (!itemId) return;
-        if (!confirm('Dieses Bibliotheksmedium revisionssicher löschen? Diese Aktion deaktiviert alle zugehörigen Exemplare und archiviert Medien.')) return;
-        deleteLibraryItem(itemId);
-    }
-
     async function deleteLibraryItem(itemId) {
         if (!itemId) return;
         document.body.style.cursor = 'wait';
@@ -772,7 +760,6 @@
                 }
                 loadLibraryItems();
             } else {
-                // Server redirected to HTML (flash messages). Reload to show state.
                 location.reload();
             }
         } catch (e) {
@@ -783,92 +770,21 @@
         }
     }
 
-    // Filter toggle
-    document.getElementById('filterToggleBtn').addEventListener('click', () => {
-        filterPanelOpen = !filterPanelOpen;
-        const panel = document.getElementById('filterPanel');
-        const btn = document.getElementById('filterToggleBtn');
-        panel.classList.toggle('open');
-        btn.classList.toggle('active');
-    });
-
-    // Apply filters
-    document.getElementById('applyFilterBtn').addEventListener('click', () => {
-        activeFilters.author = document.getElementById('filterAuthor').value.toLowerCase();
-        activeFilters.isbn = document.getElementById('filterISBN').value.toLowerCase();
-        activeFilters.type = document.getElementById('filterType').value;
-        activeFilters.status = document.getElementById('filterStatus').value;
-        applyFiltersAndSearch(true);
-    });
-
-    // Clear filters
-    document.getElementById('clearFilterBtn').addEventListener('click', () => {
-        document.getElementById('filterAuthor').value = '';
-        document.getElementById('filterISBN').value = '';
-        document.getElementById('filterType').value = '';
-        document.getElementById('filterStatus').value = '';
-        activeFilters = { author: '', isbn: '', type: '', status: '' };
-        applyFiltersAndSearch(true);
-    });
-
-    // Search input
-    document.getElementById('librarySearch').addEventListener('input', (e) => {
-        currentSearchTerm = (e.target.value || '').toLowerCase();
-        applyFiltersAndSearch(true);
-    });
-
-    document.getElementById('loadMoreBtn').addEventListener('click', () => {
-        renderedCount = Math.min(renderedCount + RENDER_BATCH_COUNT, visibleItems.length);
-        renderItems();
-    });
-
-    // Helper functions
-    function getItemTypeLabel(type) {
-        const labels = { 'book': 'Buch', 'cd': 'CD', 'dvd': 'DVD', 'other': 'Sonstige' };
-        return labels[type] || type;
+    function confirmDeleteLibraryItem(itemId) {
+        if (!itemId) return;
+        if (!confirm('Dieses Bibliotheksmedium revisionssicher löschen? Diese Aktion deaktiviert alle zugehörigen Exemplare und archiviert Medien.')) return;
+        deleteLibraryItem(itemId);
     }
 
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
-    function showItemDetail(itemId) {
-        // Load and show detail modal
-        fetch(`/api/item_detail/${itemId}`)
-            .then(r => r.text())
-            .then(html => {
-                document.getElementById('detailContent').innerHTML = html;
-                document.getElementById('detailModal').style.display = 'flex';
-            })
-            .catch(err => console.error('Error loading detail:', err));
-    }
-
-    function closeDetailModal() {
-        document.getElementById('detailModal').style.display = 'none';
-    }
-
-    // Keep track of the scanner state globally/outer scope
-    let scannerRunning = false; // Maps directly to your 'isScanning' flag style
-    let activeScannerCallback = null; // Dynamically routes the scanned barcode to the caller
-    let lastScanValue = null;
-    let lastScanAt = 0;
-    let activeStudentCardId = ''; // Managed globally by your system
-    
     // =========================================================================
-    // 1. CORE SCANNER ROUTING ENGINE (QUAGGA2)
+    // 3. CORE SCANNER ROUTING ENGINE (QUAGGA2)
     // =========================================================================
-    
     function startScanner(targetCallback) {
-        if (scannerRunning) return;
-    
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
         
-        // Store the custom action that should happen when a barcode is found
         activeScannerCallback = targetCallback;
-    
+
         if (readerWrap) readerWrap.style.display = 'block';
         setScanStatus('Initializing camera...', 'warn');
     
@@ -876,12 +792,11 @@
             inputStream: {
                 name: "Live",
                 type: "LiveStream",
-                // Targets your interior relative viewport box
                 target: document.querySelector('#library-scanner-container'), 
                 constraints: {
                     width: 640,
                     height: 480,
-                    facingMode: "environment" // Force rear camera
+                    facingMode: "environment" 
                 },
             },
             decoder: {
@@ -906,7 +821,6 @@
             Quagga.start();
             scannerRunning = true;
             
-            // Update the main toggle button text if no specific edit callback is provided
             if (!targetCallback && toggleBtn) {
                 toggleBtn.textContent = 'Scanner stoppen';
             }
@@ -921,56 +835,34 @@
         const toggleBtn = document.getElementById('toggleScannerBtn');
     
         Quagga.stop();
-    
         scannerRunning = false;
-        activeScannerCallback = null; // Clear out callback routing
+        activeScannerCallback = null; 
     
         if (readerWrap) readerWrap.style.display = 'none';
         if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
         setScanStatus('Scanner gestoppt.', 'warn');
     }
     
-    // Unified global reader callback routing data based on who opened the scanner
     Quagga.onDetected(function(data) {
         if (!data || !data.codeResult || !data.codeResult.code) return;
         
         const barcode = String(data.codeResult.code || '').trim();
         console.log("Barcode detected:", barcode);
     
-        // Keep a local reference to the active callback before stopping the engine
         const currentCallback = activeScannerCallback;
-    
-        // Critical: Stop scanning immediately to prevent multiple triggers
         stopScanner();
     
-        // 1. If an explicit modal/edit function asked for the scan, route to it directly
         if (typeof currentCallback === "function") {
             currentCallback(barcode);
         } else {
-            // 2. Fallback Default: Pass it to your library dashboard's primary business processing
             handleScanSuccess(barcode);
         }
     });
-    
-    // Event Listener for the main standalone library processing scanner button
-    document.getElementById('toggleScannerBtn')?.addEventListener('click', async function() {
-        if (scannerRunning) {
-            await stopScanner();
-        } else {
-            await startScanner(null); // Passing null flags it to run default library processing
-        }
-    });
-    
-    
-    // =========================================================================
-    // 2. LIBRARY WORKFLOW AND MODAL IMPLEMENTATIONS
-    // =========================================================================
-    
+
     function handleScanSuccess(decodedText) {
         const scannedCode = normalizeScannedCode(decodedText);
         if (!scannedCode) return;
     
-        // Debounce checks
         const now = Date.now();
         if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
             return;
@@ -987,7 +879,46 @@
     
         processQuickToggleScan(scannedCode);
     }
+
+    async function processQuickToggleScan(scannedCode) {
+        if (!activeStudentCardId) {
+            setActiveStudentCard(scannedCode);
+            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
+            return;
+        }
     
+        try {
+            setScanStatus('Verarbeite Mediencode...', 'warn');
+            const response = await fetch('/api/library_scan_action', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({
+                    student_card_id: activeStudentCardId,
+                    item_code: scannedCode
+                })
+            });
+        
+            const result = await response.json();
+            if (!response.ok || !result.ok) {
+                setScanStatus(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
+                return;
+            }
+        
+            if (result.action === 'borrowed') {
+                setScanStatus(`Ausgeliehen: ${result.item_name}`, 'ok');
+            } else if (result.action === 'returned') {
+                setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
+            } else {
+                setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
+            }
+        
+            await loadLibraryItems();
+        } catch (err) {
+            console.error('Quick scan action failed:', err);
+            setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
+        }
+    }
+
     function scanIntoEditCode() {
         const scanReaderWrap = document.getElementById('scanReaderWrap');
         const editCodeInput = document.getElementById('edit-code4');
@@ -996,7 +927,6 @@
             return;
         }
     
-        // Toggle close if it's already running
         if (scannerRunning && scanReaderWrap.style.display !== 'none') {
             stopScanner();
             scanEditBtn.textContent = 'Barcode scannen';
@@ -1005,14 +935,18 @@
     
         scanEditBtn.textContent = 'Scanner schließen';
     
-        // Launch the scanner with custom callback routing to the item edit fields
         startScanner(function(decodedText) {
             editCodeInput.value = decodedText;
-            validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
+            if(typeof validateCodeField === "function") {
+                validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
+            }
             scanEditBtn.textContent = 'Barcode scannen';
         });
     }
-    
+
+    // =========================================================================
+    // 4. UI INTERACTIONS & UTILITIES
+    // =========================================================================
     function borrowItem(itemId) {
         const selectedItem = (libraryItems || []).find(item => item._id === itemId);
         if (selectedItem && selectedItem.LibraryDisplayStatus === 'damaged') {
@@ -1080,68 +1014,53 @@
         document.body.appendChild(form);
         form.submit();
     }
-    
+
     function setScanStatus(message, kind = '') {
         const el = document.getElementById('scanStatus');
         if (!el) return;
         el.textContent = message;
         el.classList.remove('ok', 'warn', 'error');
-        if (kind) {
-            el.classList.add(kind);
-        }
+        if (kind) el.classList.add(kind);
     }
     
     function setActiveStudentCard(cardId) {
         activeStudentCardId = (cardId || '').trim().toUpperCase();
         const input = document.getElementById('activeStudentCard');
-        if (input) {
-            input.value = activeStudentCardId;
-        }
+        if (input) input.value = activeStudentCardId;
     }
     
     function normalizeScannedCode(code) {
         return (code || '').trim();
     }
-    
-    async function processQuickToggleScan(scannedCode) {
-        if (!activeStudentCardId) {
-            setActiveStudentCard(scannedCode);
-            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
-            return;
-        }
-    
-        try {
-            setScanStatus('Verarbeite Mediencode...', 'warn');
-            const response = await fetch('/api/library_scan_action', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({
-                    student_card_id: activeStudentCardId,
-                    item_code: scannedCode
-                })
-            });
-        
-            const result = await response.json();
-            if (!response.ok || !result.ok) {
-                setScanStatus(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
-                return;
-            }
-        
-            if (result.action === 'borrowed') {
-                setScanStatus(`Ausgeliehen: ${result.item_name}`, 'ok');
-            } else if (result.action === 'returned') {
-                setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
-            } else {
-                setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
-            }
-        
-            await loadLibraryItems();
-        } catch (err) {
-            console.error('Quick scan action failed:', err);
-            setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
-        }
+
+    function getItemTypeLabel(type) {
+        const labels = { 'book': 'Buch', 'cd': 'CD', 'dvd': 'DVD', 'other': 'Sonstige' };
+        return labels[type] || type;
     }
-    
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function showItemDetail(itemId) {
+        fetch(`/api/item_detail/${itemId}`)
+            .then(r => r.text())
+            .then(html => {
+                document.getElementById('detailContent').innerHTML = html;
+                document.getElementById('detailModal').style.display = 'flex';
+            })
+            .catch(err => console.error('Error loading detail:', err));
+    }
+
+    function closeDetailModal() {
+        document.getElementById('detailModal').style.display = 'none';
+    }
+
+    // =========================================================================
+    // 5. EVENT LISTENERS INITIALIZATION & ON-LOAD INITIALIZER
+    // =========================================================================
     function wireScannerUi() {
         const toggleBtn = document.getElementById('toggleScannerBtn');
         const resetBtn = document.getElementById('resetCardBtn');
@@ -1169,83 +1088,48 @@
                 if (modeSelect.value === 'quick_toggle' && !activeStudentCardId) {
                     setScanStatus('Schnellmodus: zuerst Schülerausweis scannen.', 'warn');
                 } else if (modeSelect.value === 'card_only') {
-                    setScanStatus('Modus aktiv: Nur Ausweis erfassen.', 'warn');
-                } else {
-                    setScanStatus('Schnellmodus aktiv: jetzt Mediencode scannen.', 'warn');
+                    setScanStatus('Nur Ausweis-Modus aktiv.', 'warn');
                 }
             });
         }
     }
-    
-    function getLibraryItemById(itemId) {
-        return libraryItems.find(i => String(i._id) === String(itemId));
-    }
-    
-    function openEditLibraryItem(itemId) {
-        const item = getLibraryItemById(itemId);
-        if (!item) {
-            alert('Element nicht gefunden.');
-            return;
-        }
-    
-        const modal = document.getElementById('editLibraryModal');
-        document.getElementById('editLibraryItemId').value = item._id || '';
-        document.getElementById('editLibraryName').value = item.Name || '';
-        document.getElementById('editLibraryAuthor').value = item.Autor || item.Author || '';
-        document.getElementById('editLibraryDescription').value = item.Beschreibung || '';
-        document.getElementById('editLibraryLocation').value = item.Ort || '';
-        document.getElementById('editLibraryIsbn').value = item.ISBN || '';
-        document.getElementById('editLibraryCode4').value = item.Code_4 || '';
-        document.getElementById('editLibraryType').value = (item.ItemType || 'book');
-        modal.style.display = 'flex';
-    }
-    
-    function closeEditLibraryModal() {
-        const modal = document.getElementById('editLibraryModal');
-        modal.style.display = 'none';
-    }
 
-    async function submitEditLibraryItem(event) {
-        event.preventDefault();
-        const itemId = document.getElementById('editLibraryItemId').value;
-        const payload = {
-            name: document.getElementById('editLibraryName').value,
-            autor: document.getElementById('editLibraryAuthor').value,
-            beschreibung: document.getElementById('editLibraryDescription').value,
-            ort: document.getElementById('editLibraryLocation').value,
-            isbn: document.getElementById('editLibraryIsbn').value,
-            code_4: document.getElementById('editLibraryCode4').value,
-            item_type: document.getElementById('editLibraryType').value
-        };
+    // Connect standard Filters and Search inputs
+    document.getElementById('filterToggleBtn').addEventListener('click', () => {
+        filterPanelOpen = !filterPanelOpen;
+        document.getElementById('filterPanel').classList.toggle('open');
+        document.getElementById('filterToggleBtn').classList.toggle('active');
+    });
 
-        try {
-            const response = await fetch(`/api/library_item/${itemId}/update`, {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(payload)
-            });
-            const result = await response.json();
-            if (!response.ok || !result.ok) {
-                alert(result.message || 'Bearbeiten fehlgeschlagen.');
-                return;
-            }
-            closeEditLibraryModal();
-            await loadLibraryItems();
-            setScanStatus('Bibliotheksmedium aktualisiert.', 'ok');
-        } catch (err) {
-            console.error('Library edit failed:', err);
-            alert('Fehler beim Bearbeiten des Bibliotheksmediums.');
-        }
-    }
+    document.getElementById('applyFilterBtn').addEventListener('click', () => {
+        activeFilters.isbn = document.getElementById('filterISBN').value.toLowerCase();
+        activeFilters.type = document.getElementById('filterType').value;
+        activeFilters.status = document.getElementById('filterStatus').value;
+        applyFiltersAndSearch(true);
+    });
 
-    // Load on page init
+    document.getElementById('clearFilterBtn').addEventListener('click', () => {
+        document.getElementById('filterISBN').value = '';
+        document.getElementById('filterType').value = '';
+        document.getElementById('filterStatus').value = '';
+        activeFilters = { isbn: '', type: '', status: '' };
+        applyFiltersAndSearch(true);
+    });
+
+    document.getElementById('librarySearch').addEventListener('input', (e) => {
+        currentSearchTerm = (e.target.value || '').toLowerCase();
+        applyFiltersAndSearch(true);
+    });
+
+    document.getElementById('loadMoreBtn').addEventListener('click', () => {
+        renderedCount = Math.min(renderedCount + RENDER_BATCH_COUNT, visibleItems.length);
+        renderItems();
+    });
+
+    // Run when DOM structure is entirely ready
     document.addEventListener('DOMContentLoaded', () => {
-        loadLibraryItems();
-        wireScannerUi();
-        const editForm = document.getElementById('editLibraryForm');
-        if (editForm) {
-            editForm.addEventListener('submit', submitEditLibraryItem);
-        }
+        wireScannerUi();       // Setup scanner control buttons 
+        loadLibraryItems();   // Fetch your database items right away!
     });
 </script>
 
@@ -1260,10 +1144,6 @@
                     <label for="editLibraryName">Titel</label>
                     <input id="editLibraryName" required>
                 </div>
-                <div>
-                    <label for="editLibraryAuthor">Autor/Künstler</label>
-                    <input id="editLibraryAuthor">
-                </div>
                 <div>
                     <label for="editLibraryType">Medientyp</label>
                     <select id="editLibraryType">

Web/templates/upload_admin.html

@@ -970,8 +970,7 @@
         document.getElementById('csv-help-modal').style.display = 'none';
     }
 </script>
-
-<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script>
     const libraryModuleEnabled = {{ 'true' if library_module_enabled else 'false' }};
 
@@ -984,12 +983,12 @@
 
     // Global variable to store fetched book data
     let currentBookData = null;
-    let code4ScannerInstance = null;
-    let code4ScannerRunning = false;
+    
+    // Quagga2 engine state management properties
+    let scannerRunning = false;
+    let activeScannerCallback = null; // Dynamically handles routing data to the active caller field
     let code4LastScanned = '';
     let code4LastScannedAt = 0;
-    let isbnScannerInstance = null;
-    let isbnScannerRunning = false;
 
     function setCode4ScanStatus(message, isError = false) {
         const statusEl = document.getElementById('code4-scan-status');
@@ -1042,56 +1041,109 @@
         statusEl.style.color = '#b00020';
     }
 
+    // Centered Quagga2 Engine Initialization Pattern
+    function runEngineInitialization(targetSelector, activeCallback, completionMsg, errorStatusSetter) {
+        if (scannerRunning) {
+            Quagga.stop();
+            scannerRunning = false;
+        }
+
+        activeScannerCallback = activeCallback;
+
+        Quagga.init({
+            inputStream: {
+                name: "Live",
+                type: "LiveStream",
+                target: document.querySelector(targetSelector), 
+                constraints: {
+                    width: 640,
+                    height: 480,
+                    facingMode: "environment" // Force rear camera lenses
+                },
+            },
+            decoder: {
+                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
+            } 
+        }, function(err) {
+            if (err) {
+                console.error("Initialization error:", err);
+                errorStatusSetter("Kamera konnte nicht gestartet werden.", true);
+                return;
+            }
+
+            Quagga.start();
+            scannerRunning = true;
+            errorStatusSetter(completionMsg, false);
+        });
+    }
+
+    function killScannerHardware() {
+        if (!scannerRunning) return;
+        Quagga.stop();
+        scannerRunning = false;
+        activeScannerCallback = null;
+    }
+
+    // Unified tracking capture listener
+    Quagga.onDetected(function(data) {
+        if (!data || !data.codeResult || !data.codeResult.code) return;
+        
+        const rawBarcode = String(data.codeResult.code || '').trim();
+        const currentTargetCallback = activeScannerCallback;
+
+        if (typeof currentTargetCallback === "function") {
+            currentTargetCallback(rawBarcode);
+        }
+    });
+
     function startCode4Scanner() {
         const scannerBox = document.getElementById('code4-scanner');
         const scanButton = document.getElementById('scan-code4-btn');
         const codeField = document.getElementById('code_4');
         if (!scannerBox || !scanButton || !codeField) return;
 
-        // Stop ISBN scanner if currently running to avoid camera conflicts.
-        if (isbnScannerRunning && isbnScannerInstance) {
-            isbnScannerInstance.clear().catch(() => {});
-            const isbnScannerBox = document.getElementById('isbn-scanner');
-            const isbnScanButton = document.getElementById('scan-isbn-btn');
+        // Automatically clean up running ISBN scanner to prevent track multi-binding
+        const isbnScannerBox = document.getElementById('isbn-scanner');
+        const isbnScanButton = document.getElementById('scan-isbn-btn');
+        if (isbnScannerBox && isbnScannerBox.style.display !== 'none') {
+            killScannerHardware();
             if (isbnScannerBox) isbnScannerBox.style.display = 'none';
             if (isbnScanButton) isbnScanButton.textContent = 'ISBN scannen';
-            isbnScannerRunning = false;
+            setIsbnScanStatus('Scanner gestoppt.');
         }
 
-        if (code4ScannerRunning && code4ScannerInstance) {
-            code4ScannerInstance.clear().catch(() => {});
+        if (scannerBox.style.display !== 'none') {
+            killScannerHardware();
             scannerBox.style.display = 'none';
             scanButton.textContent = 'Barcode scannen';
-            code4ScannerRunning = false;
             setCode4ScanStatus('Scanner gestoppt.');
             return;
         }
 
         scannerBox.style.display = 'block';
         scanButton.textContent = 'Scanner stoppen';
-        code4ScannerInstance = new Html5QrcodeScanner('code4-scanner', { 
-            fps: 10, 
-            qrbox: 250,
-            rememberLastUsedCamera: true
-        });
-        code4ScannerRunning = true;
-        setCode4ScanStatus('Scanner läuft. Der Scan wird im Basis-Codefeld übernommen.');
 
-        code4ScannerInstance.render((decodedText) => {
-            const scannedCode = String(decodedText || '').trim();
-            if (!scannedCode) return;
+        runEngineInitialization(
+            '#code4-scanner', 
+            function(decodedText) {
+                const now = Date.now();
+                if (decodedText === code4LastScanned && (now - code4LastScannedAt) < 1500) {
+                    return;
+                }
+                code4LastScanned = decodedText;
+                code4LastScannedAt = now;
 
-            const now = Date.now();
-            if (scannedCode === code4LastScanned && (now - code4LastScannedAt) < 1500) {
-                return;
-            }
-            code4LastScanned = scannedCode;
-            code4LastScannedAt = now;
+                killScannerHardware();
+                scannerBox.style.display = 'none';
+                scanButton.textContent = 'Barcode scannen';
 
-            codeField.value = scannedCode;
-            validateCodeField(codeField);
-            setCode4ScanStatus(`Code_4 gesetzt: ${scannedCode}`);
-        }, () => {});
+                codeField.value = decodedText;
+                validateCodeField(codeField);
+                setCode4ScanStatus(`Code_4 gesetzt: ${decodedText}`);
+            },
+            'Scanner läuft. Der Scan wird im Basis-Codefeld übernommen.',
+            setCode4ScanStatus
+        );
     }
 
     function startIsbnScanner() {
@@ -1104,59 +1156,49 @@
         const isbnField = document.getElementById('isbn');
         if (!scannerBox || !scanButton || !isbnField) return;
 
-        // Stop Code_4 scanner if currently running to avoid camera conflicts.
-        if (code4ScannerRunning && code4ScannerInstance) {
-            code4ScannerInstance.clear().catch(() => {});
-            const codeScannerBox = document.getElementById('code4-scanner');
-            const codeScanButton = document.getElementById('scan-code4-btn');
+        // Automatically clean up running Base Code_4 scanner to prevent track multi-binding
+        const codeScannerBox = document.getElementById('code4-scanner');
+        const codeScanButton = document.getElementById('scan-code4-btn');
+        if (codeScannerBox && codeScannerBox.style.display !== 'none') {
+            killScannerHardware();
             if (codeScannerBox) codeScannerBox.style.display = 'none';
             if (codeScanButton) codeScanButton.textContent = 'Barcode scannen';
-            code4ScannerRunning = false;
             setCode4ScanStatus('Scanner gestoppt.');
         }
 
-        if (isbnScannerRunning && isbnScannerInstance) {
-            isbnScannerInstance.clear().catch(() => {});
+        if (scannerBox.style.display !== 'none') {
+            killScannerHardware();
             scannerBox.style.display = 'none';
             scanButton.textContent = 'ISBN scannen';
-            isbnScannerRunning = false;
             setIsbnScanStatus('Scanner gestoppt.');
             return;
         }
 
         scannerBox.style.display = 'block';
         scanButton.textContent = 'Scanner stoppen';
-        isbnScannerInstance = new Html5QrcodeScanner('isbn-scanner', {
-            fps: 10,
-            qrbox: 250,
-            rememberLastUsedCamera: true
-        });
-        isbnScannerRunning = true;
-        setIsbnScanStatus('Scanner läuft. Bitte ISBN-Code erfassen.');
 
-        isbnScannerInstance.render((decodedText) => {
-            const scannedCode = String(decodedText || '').trim();
-            if (!scannedCode) return;
+        runEngineInitialization(
+            '#isbn-scanner',
+            function(decodedText) {
+                killScannerHardware();
+                scannerBox.style.display = 'none';
+                scanButton.textContent = 'ISBN scannen';
 
-            const normalizedIsbn = normalizeIsbnClient(scannedCode);
-            isbnField.value = normalizedIsbn || scannedCode;
-            updateIsbnLiveValidation();
-            if (normalizedIsbn) {
-                setIsbnScanStatus(`ISBN gesetzt: ${normalizedIsbn}`);
-            } else {
-                setIsbnScanStatus('Kein gültiges ISBN-Format erkannt, der gescannte Wert bleibt aber im Feld.', true);
-            }
+                const normalizedIsbn = normalizeIsbnClient(decodedText);
+                isbnField.value = normalizedIsbn || decodedText;
+                updateIsbnLiveValidation();
 
-            isbnScannerInstance.clear().catch(() => {});
-            scannerBox.style.display = 'none';
-            scanButton.textContent = 'ISBN scannen';
-            isbnScannerRunning = false;
-
-            if (normalizedIsbn) {
-                // Automatically load book metadata after a valid ISBN scan.
-                fetchBookInfo('upload');
-            }
-        }, () => {});
+                if (normalizedIsbn) {
+                    setIsbnScanStatus(`ISBN gesetzt: ${normalizedIsbn}`);
+                    // Automatically load book metadata after a valid ISBN scan.
+                    fetchBookInfo('upload');
+                } else {
+                    setIsbnScanStatus('Kein gültiges ISBN-Format erkannt, der gescannte Wert bleibt aber im Feld.', true);
+                }
+            },
+            'Scanner läuft. Bitte ISBN-Code erfassen.',
+            setIsbnScanStatus
+        );
     }
 
     // Load predefined filter values for dropdowns
@@ -1558,6 +1600,7 @@
         }, 10000);
     }
 
+    // Exported function for use within parent layout fields
     function validateCodeField(input, excludeId = null) {
         const code = input.value.trim();
         
@@ -1732,188 +1775,11 @@
             if (typeof duplicateData.images === 'string') {
                 try {
                     duplicateData.images = JSON.parse(duplicateData.images);
-                    console.log("Parsed images from string:", duplicateData.images);
                 } catch (e) {
-                    console.warn("Failed to parse images string, using as single item:", duplicateData.images);
-                    duplicateData.images = [duplicateData.images];
+                    console.error("Error parsing duplicate images array:", e);
                 }
             }
-            console.log(`Final duplicateData.images (${Array.isArray(duplicateData.images) ? 'array' : typeof duplicateData.images}):`, duplicateData.images);
-        }
-    }
-    
-    // Then check for sessionStorage data (takes priority)
-    const sessionData = sessionStorage.getItem('duplicateItemData');
-    if (sessionData) {
-        try {
-            duplicateData = JSON.parse(sessionData);
-            sessionStorage.removeItem('duplicateItemData'); // Clean up
-            console.log("Session storage duplicate data:", duplicateData);
-        } catch (e) {
-            console.error('Error parsing session duplicate data:', e);
-        }
-    }
-    
-    // Function to prefill form with duplicate data
-    function prefillFormWithDuplicateData() {
-        if (!duplicateData) return;
-        
-        // Fill basic fields
-        const nameField = document.getElementById('name');
-        if (nameField && duplicateData.name) nameField.value = duplicateData.name;
-        
-        const descField = document.getElementById('beschreibung');
-        if (descField && duplicateData.description) descField.value = duplicateData.description;
-        
-        const yearField = document.getElementById('anschaffungsjahr');
-        if (yearField && duplicateData.year) yearField.value = duplicateData.year;
-        
-        const costField = document.getElementById('anschaffungskosten');
-        if (costField && duplicateData.cost) costField.value = duplicateData.cost;
-        
-        // Fill location dropdown
-        const locationField = document.getElementById('ort');
-        if (locationField && duplicateData.location) {
-            // Wait for locations to load, then set value
-            setTimeout(() => {
-                locationField.value = duplicateData.location;
-            }, 100);
-        }
-        
-        // Fill filter arrays - handle up to 4 values per filter type
-        setTimeout(() => {
-            // Filter 1 (Unterrichtsfach)
-            if (duplicateData.filter1 && Array.isArray(duplicateData.filter1)) {
-                for (let j = 1; j <= Math.min(4, duplicateData.filter1.length); j++) {
-                    const filterField = document.getElementById(`filter1-${j}`);
-                    if (filterField && duplicateData.filter1[j-1]) {
-                        filterField.value = duplicateData.filter1[j-1];
-                    }
-                }
-            }
-            
-            // Filter 2 (Jahrgangsstufe)
-            if (duplicateData.filter2 && Array.isArray(duplicateData.filter2)) {
-                for (let j = 1; j <= Math.min(4, duplicateData.filter2.length); j++) {
-                    const filterField = document.getElementById(`filter2-${j}`);
-                    if (filterField && duplicateData.filter2[j-1]) {
-                        filterField.value = duplicateData.filter2[j-1];
-                    }
-                }
-            }
-            
-            // Filter 3 (Thema) - text inputs
-            if (duplicateData.filter3 && Array.isArray(duplicateData.filter3)) {
-                for (let j = 1; j <= Math.min(4, duplicateData.filter3.length); j++) {
-                    const filterField = document.getElementById(`filter3-${j}`);
-                    if (filterField && duplicateData.filter3[j-1]) {
-                        filterField.value = duplicateData.filter3[j-1];
-                    }
-                }
-            }
-        }, 200); // Wait for filter options to load
-        
-        // Handle images - add hidden inputs for duplicate images
-        if (duplicateData.images && duplicateData.images.length > 0) {
-            console.log("Duplicate images data:", duplicateData.images);
-            const form = document.querySelector('form[action*="upload_item"]');
-            if (form) {
-                // Add hidden field to indicate duplication
-                const isDuplicatingField = document.createElement('input');
-                isDuplicatingField.type = 'hidden';
-                isDuplicatingField.name = 'is_duplicating';
-                isDuplicatingField.value = 'true';
-                form.appendChild(isDuplicatingField);
-                
-                // Add each image as a duplicate image
-                const images = duplicateData.images || [];
-                console.log(`Adding ${images.length} images as hidden fields`);
-                
-                if (Array.isArray(images)) {
-                    images.forEach((imageName, index) => {
-                        if (imageName) {
-                            console.log(`Adding duplicate image ${index}: ${imageName}`);
-                            const imageField = document.createElement('input');
-                            imageField.type = 'hidden';
-                            imageField.name = 'duplicate_images';
-                            imageField.value = imageName;
-                            form.appendChild(imageField);
-                        }
-                    });
-                } else {
-                    console.warn("Images is not an array:", images);
-                    // Try to handle as single item if it's a string
-                    if (typeof images === 'string' && images) {
-                        console.log("Adding single image:", images);
-                        const imageField = document.createElement('input');
-                        imageField.type = 'hidden';
-                        imageField.name = 'duplicate_images';
-                        imageField.value = images;
-                        form.appendChild(imageField);
-                    }
-                }
-                
-                // Show image preview
-                showDuplicateImagePreview(duplicateData.images);
-            }
-        }
-    }
-    
-    // Function to show preview of duplicate images
-    function showDuplicateImagePreview(images) {
-        const previewContainer = document.getElementById('image-preview-container');
-        if (!previewContainer) return;
-        
-        console.log("showDuplicateImagePreview called with:", images);
-        
-        // Make sure images is treated as an array
-        if (!Array.isArray(images)) {
-            if (typeof images === 'string') {
-                // Try to parse if it's a JSON string
-                try {
-                    images = JSON.parse(images);
-                } catch (e) {
-                    // If parsing fails, wrap the single string in an array
-                    images = [images];
-                }
-            } else {
-                console.error("Invalid images data:", images);
-                return;
-            }
-        }
-        
-        previewContainer.innerHTML = '';
-        console.log(`Processing ${images.length} images for preview`);
-        
-        images.forEach((imageName, index) => {
-            console.log(`Processing image ${index}:`, imageName);
-            const preview = document.createElement('div');
-            preview.className = 'image-preview-item';
-            preview.innerHTML = `
-                <img src="/uploads/${imageName}" alt="Duplicate Image ${index + 1}" class="duplicate-image-preview">
-                <div class="image-controls">
-                    <span>Von Original übernommen</span>
-                    <button type="button" onclick="removeDuplicateImage('${imageName}', this)" class="remove-duplicate-image-button">Entfernen</button>
-                </div>
-            `;
-            previewContainer.appendChild(preview);
-        });
-    }
-    
-    // Function to remove a duplicate image
-    function removeDuplicateImage(imageName, button) {
-        // Remove the hidden input
-        const hiddenInputs = document.querySelectorAll('input[name="duplicate_images"]');
-        hiddenInputs.forEach(input => {
-            if (input.value === imageName) {
-                input.remove();
-            }
-        });
-        
-        // Remove the preview
-        const previewItem = button.closest('.image-preview-item');
-        if (previewItem) {
-            previewItem.remove();
+            console.log("Parsed duplicate images successfully.");
         }
     }
 </script>