Added Items and Dashboard

app/javascript/controllers/scanner_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwire/stimulus"
+
+export default class extends Controller {
+  static targets = [ "input", "preview", "modal" ]
+
+  connect() {
+    this.html5QrCode = null
+  }
+
+  // Öffnet das Modal und startet den Kamera-Stream
+  startCamera(event) {
+    event.preventDefault()
+    
+    // Modal anzeigen
+    this.modalTarget.classList.remove("hidden")
+
+    // Neue Instanz auf dem Preview-Div mit der ID des Elements erzeugen
+    this.html5QrCode = new Html5Qrcode(this.previewTarget.id)
+
+    // FPS-Rate und Scan-Rahmen (250x250px) festlegen
+    const config = { fps: 10, qrbox: { width: 250, height: 250 } }
+
+    this.html5QrCode.start(
+      { facingMode: "environment" }, // Erzwingt die rückseitige Hauptkamera bei Handys
+      config,
+      (decodedText, decodedResult) => {
+        // SUCCESS: Code erkannt!
+        this.inputTarget.value = decodedText // Trägt die ID (z.B. 10024) ins Textfeld ein
+        this.stopCamera()                     // Stoppt die Kamera und schließt das Fenster
+      },
+      (errorMessage) => {
+        // Kontinuierlicher Scan-Loop (Fehler ignorieren, wenn kein QR-Code im Bild ist)
+      }
+    ).catch((err) => {
+      console.error("Kamera-Zugriff verweigert oder blockiert:", err)
+    })
+  }
+
+  // Schließt das Modal und beendet den Stream sauber
+  stopCamera() {
+    if (this.html5QrCode && this.html5QrCode.isScanning) {
+      this.html5QrCode.stop().then(() => {
+        this.modalTarget.classList.add("hidden")
+      }).catch((err) => console.error("Fehler beim Beenden des Streams:", err))
+    } else {
+      this.modalTarget.classList.add("hidden")
+    }
+  }
+}