Add scanner utility, modal, and stock scan page implementation

2026-05-01 23:32:13 +02:00
parent 50e147b079
commit 47434db5b5
15 changed files with 1952 additions and 353 deletions
@@ -0,0 +1,65 @@
+export function renderScannerModal({
+  title = 'Scan barcode',
+  subtitle = 'Point your camera at the barcode.',
+  optionsMarkup = '',
+  manualCodeModel = 'scannerManualCode',
+  manualSubmitAction = 'processScannerManualCode()',
+  manualPlaceholder = 'Scan with hardware reader or paste code',
+  manualHelp = 'Manual entry works with keyboard-style barcode scanners.',
+  manualButtonLabel = 'Run',
+  manualDisabledExpression = 'scannerState.isLoading',
+}) {
+  return `
+      <div
+        class="scanner-modal-backdrop"
+        x-show="scannerState.isOpen"
+        @click.self="closeScanner()"
+        @keydown.escape.window="closeScanner()"
+      >
+        <div class="scanner-modal card border-0 shadow-lg">
+          <div class="card-body p-3 p-md-4">
+            <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
+              <div>
+                <h2 class="h5 mb-1">${title}</h2>
+                <p class="text-body-secondary small mb-0">${subtitle}</p>
+              </div>
+              <button class="btn btn-sm btn-outline-secondary" type="button" @click="closeScanner()">Close</button>
+            </div>
+
+            ${optionsMarkup}
+
+            <form class="mb-3" @submit.prevent="${manualSubmitAction}">
+              <label class="form-label">Manual scan code</label>
+              <div class="input-group">
+                <input
+                  class="form-control"
+                  type="text"
+                  x-model="${manualCodeModel}"
+                  placeholder="${manualPlaceholder}"
+                  autocomplete="off"
+                />
+                <button class="btn btn-outline-primary" type="submit" :disabled="${manualDisabledExpression}">
+                  ${manualButtonLabel}
+                </button>
+              </div>
+              <div class="form-text">${manualHelp}</div>
+            </form>
+
+            <div class="scanner-video-shell mb-3">
+              <video class="scanner-video" x-ref="scannerVideo" autoplay muted playsinline></video>
+            </div>
+
+            <div class="d-flex flex-wrap align-items-center gap-2">
+              <div class="small text-body-secondary" x-show="scannerState.isLoading">Starting camera...</div>
+              <div class="small text-success" x-show="scannerState.lastDetectedCode" x-text="'Detected: ' + scannerState.lastDetectedCode"></div>
+              <button class="btn btn-outline-secondary btn-sm" type="button" @click="startScanner()" :disabled="scannerState.isLoading">Retry</button>
+            </div>
+
+            <template x-if="scannerState.error">
+              <div class="alert alert-warning py-2 mt-3 mb-0" x-text="scannerState.error"></div>
+            </template>
+          </div>
+        </div>
+      </div>
+  `;
+}