Changes from the deprecated qrcode scanning tool, to a more modern option in the library

2026-06-06 22:46:50 +02:00
parent bc94ffdc18
commit f763ad064d
3 changed files with 221 additions and 138 deletions
@@ -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>
@@ -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
@@ -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() {