From f763ad064d10b44ca66e8939d14029c2e6493678 Mon Sep 17 00:00:00 2001
From: Aiirondev <iron.ai.dev@gmail.com>
Date: Sat, 6 Jun 2026 22:46:50 +0200
Subject: [PATCH] Changes from the deprecated qrcode scanning tool, to a more
 modern option in the library

---
 Web/templates/library.html    |  87 ++++++++++++++------
 Web/templates/main.html       | 144 ++++++++++++++++++++++++----------
 Web/templates/main_admin.html | 128 ++++++++++++++----------------
 3 files changed, 221 insertions(+), 138 deletions(-)

diff --git a/Web/templates/library.html b/Web/templates/library.html
index 94e7bc7..8deb8f6 100644
--- a/Web/templates/library.html
+++ b/Web/templates/library.html
@@ -205,8 +205,7 @@
         </form>
     </div>
 </div>
-
-<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script>
 // View mode persistence
 const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
@@ -632,43 +631,79 @@ document.getElementById('favoriteToggle').addEventListener('click', function() {
 });
 
 // Scanner toggle
-let scanner = null;
+l// Scanner state tracking
+let isScanning = false; 
+
 document.getElementById('scannerBtn').addEventListener('click', function(e) {
     e.stopPropagation();
     const container = document.getElementById('qrContainer');
     const isOpen = container.style.display !== 'none';
+    const btn = this;
     
     if (isOpen) {
+        // Close the scanner
         container.style.display = 'none';
-        if (scanner) scanner.clear();
-        this.classList.remove('open');
-        this.setAttribute('aria-expanded', 'false');
-    } else {
-        container.style.display = 'block';
-        this.classList.add('open');
-        this.setAttribute('aria-expanded', 'true');
+        Quagga.stop();
+        isScanning = false;
         
-        if (!scanner) {
-            scanner = new Html5Qrcode('qr-reader');
-            scanner.start(
-                { facingMode: "environment" },
-                { fps: 10, qrbox: 250 },
-                onScanSuccess,
-                onScanError
-            );
-        }
+        btn.classList.remove('open');
+        btn.setAttribute('aria-expanded', 'false');
+    } else {
+        // Open the scanner
+        container.style.display = 'block';
+        btn.classList.add('open');
+        btn.setAttribute('aria-expanded', 'true');
+        
+        Quagga.init({
+            inputStream: {
+                name: "Live",
+                type: "LiveStream",
+                // Targets the element where the video stream will inject
+                target: document.querySelector('#qr-reader'), 
+                constraints: {
+                    width: 640,
+                    height: 480,
+                    facingMode: "environment" // Forces back camera
+                },
+            },
+            decoder: {
+                // Optimized for 1D barcodes (e.g., student IDs, member cards)
+                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
+            } 
+        }, function(err) {
+            if (err) {
+                console.error("Initialization error:", err);
+                alert("Kamera konnte nicht gestartet werden.");
+                return;
+            }
+            Quagga.start();
+            isScanning = true;
+        });
     }
 });
 
-function onScanSuccess(decodedText, decodedResult) {
-    const studentId = decodedText.trim();
+// Single Quagga event listener for successful scans
+Quagga.onDetected(function(data) {
+    const decodedText = data.codeResult.code;
+    const studentId = String(decodedText || '').trim();
+    
+    // Stop scanning immediately to prevent multiple triggers
+    Quagga.stop();
+    isScanning = false;
+    
+    // Reset UI states to closed
+    const container = document.getElementById('qrContainer');
+    const btn = document.getElementById('scannerBtn');
+    if (container) container.style.display = 'none';
+    if (btn) {
+        btn.classList.remove('open');
+        btn.setAttribute('aria-expanded', 'false');
+    }
+    
+    // Route the scanned data to your input
     document.getElementById('studentIdInput').value = studentId;
     alert('Ausweis gescannt: ' + studentId);
-}
-
-function onScanError(error) {
-    // Silently ignore scan errors
-}
+});
 </script>
 
 <style>
diff --git a/Web/templates/main.html b/Web/templates/main.html
index 35b15b0..9697cf0 100755
--- a/Web/templates/main.html
+++ b/Web/templates/main.html
@@ -525,8 +525,7 @@
     
     window.isDebug = false; // Set to true only for development environment
 </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>
     // Global state
     const highlightItemId = (window.serverVars && window.serverVars.highlightItemId && window.serverVars.highlightItemId !== 'null')
@@ -535,51 +534,114 @@
     let codeSearchTerm = '';
     let descSearchIds = null; // Set of matching IDs or null when disabled
 
-    // QR scanner toggle setup
-    document.addEventListener('DOMContentLoaded', function() {
-        const scanButton = document.getElementById('scanButton');
+    // Keep track of the scanner state globally/outer scope
+    let isScanning = false; 
+    let activeScannerCallback = null; // Tracks which function currently owns the scanner output
+
+    function startScanner(targetCallback) {
         const qrReader = document.getElementById('qr-reader');
-        let html5QrcodeScanner = null;
+        const statusText = document.getElementById('status');
 
-        if (!scanButton || !qrReader) return;
+        // Store the custom action that should happen when a barcode is found
+        activeScannerCallback = targetCallback;
 
-        const setScannerUi = (isOpen) => {
-            scanButton.classList.toggle('is-active', isOpen);
-            scanButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-            scanButton.textContent = isOpen ? 'Scanner schliessen' : 'Barcode scannen';
-        };
+        // Show the container
+        if (qrReader) qrReader.style.display = 'block';
+        if (statusText) statusText.innerText = "Initializing camera...";
 
-        scanButton.addEventListener('click', function() {
-            if (qrReader.style.display !== 'block') {
-                qrReader.style.display = 'block';
-                
-                html5QrcodeScanner = new Html5QrcodeScanner(
-                    'qr-reader', { fps: 10, qrbox: 250 }
-                );
-                
-                html5QrcodeScanner.render((decodedText) => {
-                    html5QrcodeScanner.clear();
-                    qrReader.style.display = 'none';
-                    
-                    // Put scanned code into the search box and trigger search
-                    const searchInput = document.getElementById('code-search');
-                    if (searchInput) {
-                        searchInput.value = decodedText;
-                        searchByCode();
-                    }
-
-                    setScannerUi(false);
-                });
-
-                setScannerUi(true);
-            } else {
-                if (html5QrcodeScanner) {
-                    html5QrcodeScanner.clear();
-                }
-                qrReader.style.display = 'none';
-                setScannerUi(false);
+        Quagga.init({
+            inputStream: {
+                name: "Live",
+                type: "LiveStream",
+                // Make sure this targets your correct HTML container element 
+                target: document.querySelector('#scanner-container'), 
+                constraints: {
+                    width: 640,
+                    height: 480,
+                    facingMode: "environment" // Force rear camera
+                },
+            },
+            decoder: {
+                // Your required formats mapped to Quagga2 reader strings
+                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
+            } 
+        }, function(err) {
+            if (err) {
+                console.error("Initialization error:", err);
+                if (statusText) statusText.innerText = "Camera Error";
+                return;
             }
+
+            Quagga.start();
+            isScanning = true;
+
+            // If we are using the main search button, manage its UI state
+            if (!targetCallback) {
+                setScannerUi(true);
+            }
+
+            if (statusText) statusText.innerText = "Scanning...";
         });
+    }
+
+    function stopScanner() {
+        Quagga.stop();
+        isScanning = false;
+        activeScannerCallback = null; // Reset the callback routing
+
+        const qrReader = document.getElementById('qr-reader');
+        if (qrReader) qrReader.style.display = 'none';
+
+        setScannerUi(false);
+    }
+
+    function setScannerUi(isOpen) {
+        const scanBtn = document.getElementById('scanButton');
+        if (!scanBtn) return;
+
+        scanBtn.classList.toggle('is-active', isOpen);
+        scanBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        scanBtn.textContent = isOpen ? 'Scanner schliessen' : 'Barcode scannen';
+    }
+
+    // Unified global reader callback
+    Quagga.onDetected(function(data) {
+        const barcode = String(data.codeResult.code || '').trim();
+        console.log("Barcode detected:", barcode);
+
+        // Keep a local reference to the active callback before shutting down the engine
+        const currentCallback = activeScannerCallback;
+
+        // Critical: Stop scanning immediately to prevent multiple triggers
+        stopScanner();
+
+        // Route data based on who opened the scanner
+        if (typeof currentCallback === "function") {
+            // Send data directly to the specific edit field's logic
+            currentCallback(barcode);
+        } else {
+            // Fallback Default: Main search box logic
+            const resultText = document.getElementById('barcode-result');
+            if (resultText) resultText.innerText = barcode;
+
+            const searchInput = document.getElementById('code-search');
+            if (searchInput) {
+                searchInput.value = barcode;
+                if (typeof searchByCode === "function") {
+                    searchByCode();
+                }
+            }
+        }
+    });
+
+    // Event Listener for the main standalone search button
+    document.getElementById('scanButton')?.addEventListener('click', function() {
+        if (!isScanning) {
+            // Pass null so it defaults to filling the standard search box
+            startScanner(null); 
+        } else {
+            stopScanner();
+        }
     });
 
     // Return preferred primary and fallback image URLs based on extension
diff --git a/Web/templates/main_admin.html b/Web/templates/main_admin.html
index e0b19dd..0849903 100755
--- a/Web/templates/main_admin.html
+++ b/Web/templates/main_admin.html
@@ -2436,7 +2436,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div class="qr-container">
             <button id="scanButton" class="scan-button" aria-controls="qr-reader" aria-expanded="false">Barcode scannen</button>
             <div id="qr-reader" style="display: none;">
-                <h3>Status: <span id="status">Ready</span></h3>
+                <h3>Status: <span id="status">Bereit</span></h3>
                 <div id="scanner-container"></div>
             </div>
         </div>
@@ -2733,7 +2733,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
     window.isDebug = false; // Set to true only for development environment
 </script>
 <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
-<script src="/static/js/scanner.js"></script>
 <script>
     // Function to check if a file is a video
     function isVideoFile(filename) {
@@ -2771,14 +2770,18 @@ document.addEventListener('DOMContentLoaded', ()=>{
         // No-op in production
         return;
     }
-    
+
     // Keep track of the scanner state globally/outer scope
     let isScanning = false; 
+    let activeScannerCallback = null; // Tracks which function currently owns the scanner output
 
-    function startScanner() {
+    function startScanner(targetCallback) {
         const qrReader = document.getElementById('qr-reader');
         const statusText = document.getElementById('status');
 
+        // Store the custom action that should happen when a barcode is found
+        activeScannerCallback = targetCallback;
+
         // Show the container
         if (qrReader) qrReader.style.display = 'block';
         if (statusText) statusText.innerText = "Initializing camera...";
@@ -2808,7 +2811,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
             Quagga.start();
             isScanning = true;
-            setScannerUi(true);
+
+            // If we are using the main search button, manage its UI state
+            if (!targetCallback) {
+                setScannerUi(true);
+            }
+
             if (statusText) statusText.innerText = "Scanning...";
         });
     }
@@ -2816,6 +2824,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     function stopScanner() {
         Quagga.stop();
         isScanning = false;
+        activeScannerCallback = null; // Reset the callback routing
 
         const qrReader = document.getElementById('qr-reader');
         if (qrReader) qrReader.style.display = 'none';
@@ -2832,37 +2841,46 @@ document.addEventListener('DOMContentLoaded', ()=>{
         scanBtn.textContent = isOpen ? 'Scanner schliessen' : 'Barcode scannen';
     }
 
-    // 4. Quagga event listener for successful scans
+    // Unified global reader callback
     Quagga.onDetected(function(data) {
-        const barcode = data.codeResult.code;
+        const barcode = String(data.codeResult.code || '').trim();
         console.log("Barcode detected:", barcode);
 
+        // Keep a local reference to the active callback before shutting down the engine
+        const currentCallback = activeScannerCallback;
+
         // Critical: Stop scanning immediately to prevent multiple triggers
         stopScanner();
 
-        // Update your results display if you have them
-        const resultText = document.getElementById('barcode-result');
-        if (resultText) resultText.innerText = barcode;
+        // Route data based on who opened the scanner
+        if (typeof currentCallback === "function") {
+            // Send data directly to the specific edit field's logic
+            currentCallback(barcode);
+        } else {
+            // Fallback Default: Main search box logic
+            const resultText = document.getElementById('barcode-result');
+            if (resultText) resultText.innerText = barcode;
 
-        // Put the scanned code in the search box
-        const searchInput = document.getElementById('code-search');
-        if (searchInput) {
-            searchInput.value = barcode;
-            // Trigger your automatic search
-            if (typeof searchByCode === "function") {
-                searchByCode();
+            const searchInput = document.getElementById('code-search');
+            if (searchInput) {
+                searchInput.value = barcode;
+                if (typeof searchByCode === "function") {
+                    searchByCode();
+                }
             }
         }
     });
 
-    // 5. Wire up your Toggle Button click event
-    document.getElementById('scanButton').addEventListener('click', function() {
+    // Event Listener for the main standalone search button
+    document.getElementById('scanButton')?.addEventListener('click', function() {
         if (!isScanning) {
-            startScanner();
+            // Pass null so it defaults to filling the standard search box
+            startScanner(null); 
         } else {
             stopScanner();
         }
     });
+
     function scanIntoEditCode() {
         const qrReader = document.getElementById('qr-reader');
         const editCodeInput = document.getElementById('edit-code4');
@@ -2871,37 +2889,21 @@ document.addEventListener('DOMContentLoaded', ()=>{
             return;
         }
 
-        if (qrReader.style.display !== 'none') {
-            if (hybridScanner) {
-                hybridScanner.stop();
-                hybridScanner = null;
-            }
-            qrReader.style.display = 'none';
+        // Toggle close if it's already running
+        if (isScanning && qrReader.style.display !== 'none') {
+            stopScanner();
             scanEditBtn.textContent = 'Barcode scannen';
             return;
         }
 
-        qrReader.style.display = 'block';
         scanEditBtn.textContent = 'Scanner schließen';
-        hybridScanner = new HybridScanner({
-            videoId: 'qr-reader-video',
-            canvasId: 'qr-reader-canvas',
-            formats: ['CODE_128', 'CODE_39', 'QR_CODE'],
-            fps: 10,
-            facingMode: 'environment',
-            onSuccess: function(decodedText) {
-                hybridScanner.stop();
-                qrReader.style.display = 'none';
-                editCodeInput.value = String(decodedText || '').trim();
-                validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
-                scanEditBtn.textContent = 'Barcode scannen';
-            },
-            onError: function(error) {
-                console.error('Scanner error:', error);
-            }
+
+        // Start scanner with custom logic mapping to the Code input field
+        startScanner(function(decodedText) {
+            editCodeInput.value = decodedText;
+            validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
+            scanEditBtn.textContent = 'Barcode scannen';
         });
-        
-        hybridScanner.start();
     }
 
     function scanIntoEditIsbn() {
@@ -2912,39 +2914,23 @@ document.addEventListener('DOMContentLoaded', ()=>{
             return;
         }
 
-        if (qrReader.style.display !== 'none') {
-            if (hybridScanner) {
-                hybridScanner.stop();
-                hybridScanner = null;
-            }
-            qrReader.style.display = 'none';
+        // Toggle close if it's already running
+        if (isScanning && qrReader.style.display !== 'none') {
+            stopScanner();
             scanIsbnBtn.textContent = 'ISBN scannen';
             return;
         }
 
-        qrReader.style.display = 'block';
         scanIsbnBtn.textContent = 'Scanner schließen';
-        hybridScanner = new HybridScanner({
-            videoId: 'qr-reader-video',
-            canvasId: 'qr-reader-canvas',
-            formats: ['ISBN', 'EAN_13', 'EAN_8', 'QR_CODE'],
-            fps: 10,
-            facingMode: 'environment',
-            onSuccess: function(decodedText) {
-                hybridScanner.stop();
-                qrReader.style.display = 'none';
-                editIsbnInput.value = String(decodedText || '').trim();
-                scanIsbnBtn.textContent = 'ISBN scannen';
-                if (typeof fetchBookInfo === 'function') {
-                    fetchBookInfo('edit');
-                }
-            },
-            onError: function(error) {
-                console.error('Scanner error:', error);
+
+        // Start scanner with custom logic mapping to the ISBN input field
+        startScanner(function(decodedText) {
+            editIsbnInput.value = decodedText;
+            scanIsbnBtn.textContent = 'ISBN scannen';
+            if (typeof fetchBookInfo === 'function') {
+                fetchBookInfo('edit');
             }
         });
-        
-        hybridScanner.start();
     }
 
     function rebuildFilter3Options() {