From be43fe8a0abde633054b7180a4f3137c2dc6de72 Mon Sep 17 00:00:00 2001
From: Francisco Penedo Alvarez <fran@franpenedo.com>
Date: Mon, 23 Mar 2026 01:27:10 +0100
Subject: [PATCH] Add barcode scanning

---
 src/hxbooks/templates/base.html.j2            |   1 +
 .../templates/components/import_modal.html.j2 | 307 ++++++++++++++++--
 2 files changed, 288 insertions(+), 20 deletions(-)

diff --git a/src/hxbooks/templates/base.html.j2 b/src/hxbooks/templates/base.html.j2
index f216305..149fce8 100644
--- a/src/hxbooks/templates/base.html.j2
+++ b/src/hxbooks/templates/base.html.j2
@@ -24,6 +24,7 @@
     type="text/css" />
 
   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.min.js"></script>
 
 
   <script>
diff --git a/src/hxbooks/templates/components/import_modal.html.j2 b/src/hxbooks/templates/components/import_modal.html.j2
index 8ae505c..ca8a9fe 100644
--- a/src/hxbooks/templates/components/import_modal.html.j2
+++ b/src/hxbooks/templates/components/import_modal.html.j2
@@ -8,35 +8,302 @@
       </div>
       <form action="/import" method="POST">
         <div class="modal-body">
+          <!-- Mode Toggle -->
           <div class="mb-3">
+            <div class="btn-group w-100" role="group">
+              <input type="radio" class="btn-check" name="input-mode" id="manual-mode" checked>
+              <label class="btn btn-outline-primary" for="manual-mode">Manual Entry</label>
+
+              <input type="radio" class="btn-check" name="input-mode" id="scan-mode">
+              <label class="btn btn-outline-primary" for="scan-mode">Scan Barcode</label>
+            </div>
+          </div>
+
+          <!-- Manual Entry -->
+          <div id="manual-entry" class="mb-3">
             <label for="isbn" class="form-label">ISBN</label>
-            <input type="text" class="form-control" id="isbn" name="isbn" 
-                   placeholder="Enter ISBN-10 or ISBN-13" 
-                   pattern="[0-9X\-]{10,17}"
-                   title="Enter a valid ISBN (10 or 13 digits, may contain hyphens)"
-                   required>
+            <input type="text" class="form-control" id="isbn" name="isbn" placeholder="Enter ISBN-10 or ISBN-13"
+              pattern="[0-9X\-]{10,17}" title="Enter a valid ISBN (10 or 13 digits, may contain hyphens)" required>
             <div class="form-text">
               Enter the ISBN (International Standard Book Number) to automatically fetch book details from Google Books.
             </div>
           </div>
-          {% if session.get('viewing_as_user') %}
-          <div class="mb-3">
-            <div class="form-check">
-              <input class="form-check-input" type="checkbox" id="set-owner" name="set_owner" checked>
-              <label class="form-check-label" for="set-owner">
-                Set {{ session.get('viewing_as_user').title() }} as owner
-              </label>
+
+          <!-- Barcode Scanner -->
+          <div id="scanner-section" class="mb-3" style="display: none;">
+            <div class="mb-3">
+              <label for="camera-select" class="form-label">Camera</label>
+              <select id="camera-select" class="form-select form-select-sm">
+                <option value="">Loading cameras...</option>
+              </select>
+            </div>
+
+            <div class="text-center">
+              <div id="interactive" class="viewport"
+                style="position: relative; width: 100%; max-width: 320px; height: 240px; margin: 0 auto; border: 1px solid #dee2e6; border-radius: 0.375rem; overflow: hidden;">
+              </div>
+              <div class="mt-2">
+                <button type="button" id="start-scan-btn" class="btn btn-success btn-sm">Start Scanning</button>
+                <button type="button" id="stop-scan-btn" class="btn btn-danger btn-sm" style="display: none;">Stop
+                  Scanning</button>
+              </div>
+              <div id="scan-status" class="text-muted small mt-2"></div>
             </div>
           </div>
-          {% endif %}
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="submit" class="btn btn-primary">
-            <i class="bi bi-cloud-download me-1"></i> Import Book
-          </button>
+        {% if session.get('viewing_as_user') %}
+        <div class="mb-3">
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" id="set-owner" name="set_owner" checked>
+            <label class="form-check-label" for="set-owner">
+              Set {{ session.get('viewing_as_user').title() }} as owner
+            </label>
+          </div>
         </div>
-      </form>
+        {% endif %}
     </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+      <button type="submit" class="btn btn-primary">
+        <i class="bi bi-cloud-download me-1"></i> Import Book
+      </button>
+    </div>
+    </form>
   </div>
-</div>
\ No newline at end of file
+</div>
+</div>
+
+<style>
+  /* QuaggaJS viewport styling - overlay video and canvas */
+  #interactive.viewport video,
+  #interactive.viewport canvas {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+  }
+
+  #interactive.viewport canvas {
+    pointer-events: none;
+    /* Allow interactions with video underneath */
+  }
+</style>
+
+<script>
+  // Simplified Barcode Scanner based on QuaggaJS example
+  (function () {
+    var isScanning = false;
+    var currentDeviceId = null;
+
+    var manualMode = document.getElementById('manual-mode');
+    var scanMode = document.getElementById('scan-mode');
+    var manualEntry = document.getElementById('manual-entry');
+    var scannerSection = document.getElementById('scanner-section');
+    var cameraSelect = document.getElementById('camera-select');
+    var startBtn = document.getElementById('start-scan-btn');
+    var stopBtn = document.getElementById('stop-scan-btn');
+    var status = document.getElementById('scan-status');
+    var isbnInput = document.getElementById('isbn');
+
+    // QuaggaJS state - simplified from example
+    var state = {
+      inputStream: {
+        type: "LiveStream",
+        //target: document.querySelector('#scanner-canvas'),
+        constraints: {
+          width: { min: 320 },
+          height: { min: 240 },
+          facingMode: "environment"
+        },
+      },
+      locator: {
+        patchSize: "x-large",
+        halfSample: true
+      },
+      frequency: 10,
+      decoder: {
+        readers: ["ean_reader"]
+      },
+      locate: true
+    };
+
+    // Initialize camera list when scanner section is shown
+    function initCameras() {
+      console.log('Initializing camera list...');
+      if (!navigator.mediaDevices?.getUserMedia) {
+        status.textContent = 'Camera not supported on this browser';
+        return;
+      }
+
+      Quagga.CameraAccess.enumerateVideoDevices()
+        .then(function (devices) {
+          var currentDeviceId = cameraSelect.value;
+          cameraSelect.innerHTML = '';
+          if (devices.length === 0) {
+            cameraSelect.innerHTML = '<option>No cameras found</option>';
+            return;
+          }
+
+          devices.forEach(function (device) {
+            var option = document.createElement('option');
+            option.value = device.deviceId || device.id;
+            var label = device.label || ('Camera ' + (cameraSelect.children.length + 1));
+            option.textContent = label.length > 30 ? label.substr(0, 30) + '...' : label;
+            cameraSelect.appendChild(option);
+          });
+
+          // Default to current or back camera if available
+          if (currentDeviceId) {
+            cameraSelect.value = currentDeviceId;
+          } else {
+            var backCamera = devices.find(d => d.label.toLowerCase().includes('back'));
+            if (backCamera) {
+              cameraSelect.value = backCamera.deviceId || backCamera.id;
+            }
+          }
+        })
+        .catch(function (err) {
+          console.error('Camera enumeration failed:', err);
+          cameraSelect.innerHTML = '<option>Camera access failed</option>';
+        });
+    }
+
+    function startScanning() {
+      if (isScanning) return;
+
+      var selectedDeviceId = cameraSelect.value;
+      //if (!selectedDeviceId) {
+      //  status.textContent = 'Please select a camera';
+      //  return;
+      //}
+
+      status.textContent = 'Starting camera...';
+
+      // Update constraints with selected camera
+      if (selectedDeviceId) {
+        state.inputStream.constraints.deviceId = { exact: selectedDeviceId };
+      }
+      console.log('Starting Quagga with state:', state);
+
+      Quagga.init(state, function (err) {
+        if (err) {
+          console.error('Quagga init error:', err);
+          status.textContent = 'Failed to start camera. Try a different camera.';
+          return;
+        }
+
+        isScanning = true;
+        startBtn.style.display = 'none';
+        stopBtn.style.display = 'inline-block';
+        status.textContent = 'Point camera at barcode...';
+
+        initCameras();
+        Quagga.start();
+      });
+    }
+
+    function stopScanning() {
+      if (!isScanning) return;
+
+      isScanning = false;
+      startBtn.style.display = 'inline-block';
+      stopBtn.style.display = 'none';
+      status.textContent = '';
+
+      try {
+        Quagga.stop();
+      } catch (e) {
+        console.warn('Error stopping Quagga:', e);
+      }
+    }
+
+    // Mode switching
+    function switchToManual() {
+      manualEntry.style.display = 'block';
+      scannerSection.style.display = 'none';
+      stopScanning();
+    }
+
+    function switchToScanner() {
+      manualEntry.style.display = 'none';
+      scannerSection.style.display = 'block';
+      //if (cameraSelect.children.length === 1 && cameraSelect.children[0].textContent === 'Loading cameras...') {
+      //  initCameras();
+      //}
+    }
+
+    // Event listeners
+    manualMode.addEventListener('change', switchToManual);
+    scanMode.addEventListener('change', switchToScanner);
+    startBtn.addEventListener('click', startScanning);
+    stopBtn.addEventListener('click', stopScanning);
+
+    // Camera selection change - restart scanning if active
+    cameraSelect.addEventListener('change', function () {
+      if (isScanning) {
+        stopScanning();
+        setTimeout(startScanning, 250);
+      }
+    });
+
+    // Barcode detection - simplified from example
+    Quagga.onDetected(function (result) {
+      var code = result.codeResult.code;
+      console.log('Barcode detected:', code);
+
+      // Simple ISBN validation
+      if (code && /^[0-9X]{10,13}$/.test(code)) {
+        isbnInput.value = code;
+        status.textContent = 'ISBN detected: ' + code;
+        stopScanning();
+
+        // Switch back to manual mode
+        manualMode.checked = true;
+        switchToManual();
+      }
+    });
+
+    var processedCount = 0;
+    Quagga.onProcessed(function (result) {
+      processedCount++;
+      //console.log('onProcessed #' + processedCount + ':', result ? {
+      //  hasBox: !!result.box,
+      //  boxLength: result.box ? result.box.length : 0,
+      //  hasBoxes: !!result.boxes,
+      //  boxesLength: result.boxes ? result.boxes.length : 0,
+      //  codeResult: !!result.codeResult
+      //} : 'null result');
+      var drawingCtx = Quagga.canvas.ctx.overlay,
+        drawingCanvas = Quagga.canvas.dom.overlay;
+
+      if (result) {
+        if (result.boxes) {
+          drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
+          result.boxes.filter(function (box) {
+            return box !== result.box;
+          }).forEach(function (box) {
+            Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "orange", lineWidth: 2 });
+          });
+        }
+
+        if (result.box) {
+          Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
+        }
+
+        if (result.codeResult && result.codeResult.code) {
+          Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
+        }
+      }
+    });
+
+    // Clean up on modal close
+    document.getElementById('import-modal').addEventListener('hidden.bs.modal', function () {
+      stopScanning();
+      manualMode.checked = true;
+      switchToManual();
+      isbnInput.value = '';
+    });
+  })();
+</script>
\ No newline at end of file