@7365admin1/layer-common 1.10.7 → 1.10.8

package/components/EntryPassInformation.vue

@@ -63,9 +63,9 @@
           <InputLabel title="Select Cards" />
           <v-select
             v-model="selectedCards"
-            :items="cards"
+            :items="cardItems"
             :loading="cardsLoading"
-            item-title="name"
+            item-title="cardNumber"
             item-value="_id"
             density="comfortable"
             multiple
@@ -73,6 +73,7 @@
             closable-chips
             hide-details
             placeholder="Select cards..."
+            return-object
           >
             <template #item="{ props: itemProps, item }">
               <v-list-item v-bind="itemProps">
@@ -98,13 +99,14 @@
         <v-row no-gutters class="ga-3 mt-3">
           <v-col>
             <v-btn
+              :color="isBarcodeScanningActive ? 'success' : 'primary'"
               variant="outlined"
-              color="primary"
               block
               prepend-icon="mdi-barcode-scan"
-              @click="emit('scan:barcode')"
+              @click="toggleBarcodeScanning"
             >
-              Scan Via BarCode
+              <v-icon v-if="isBarcodeScanningActive" start>mdi-check-circle</v-icon>
+              {{ isBarcodeScanningActive ? 'Scanning...' : 'Scan Via BarCode' }}
             </v-btn>
           </v-col>
           <v-col>
@@ -113,15 +115,73 @@
               color="primary"
               block
               prepend-icon="mdi-camera"
-              @click="emit('scan:camera')"
+              @click="openCameraDialog"
             >
               Scan with Camera
             </v-btn>
           </v-col>
         </v-row>
+
+        <v-alert
+          v-if="isBarcodeScanningActive"
+          type="info"
+          variant="tonal"
+          density="compact"
+          class="mt-3 text-center"
+        >
+          <v-icon class="mr-2 animate-pulse">mdi-radar</v-icon>
+          Ready to scan NFC cards. Please scan a card with your barcode scanner.
+        </v-alert>
       </template>
     </template>
     <v-divider class="mt-6" />
+
+    <!-- Hidden canvas used for frame-by-frame barcode detection -->
+    <canvas ref="canvasRef" style="display: none" />
+
+    <!-- Camera scanner dialog -->
+    <v-dialog
+      v-model="showCameraDialog"
+      width="700"
+      max-width="700"
+      persistent
+      transition="dialog-bottom-transition"
+      @after-enter="startCamera"
+      @after-leave="stopCamera"
+    >
+      <v-container class="d-flex justify-center" style="max-height: 90vh">
+        <v-card elevation="2" class="d-flex flex-column align-center pa-2 w-100">
+          <v-toolbar color="transparent">
+            <v-card-title class="text-h5">Scan Card</v-card-title>
+            <v-spacer />
+            <v-btn icon="mdi-close" color="grey-darken-1" @click="closeCameraDialog" />
+          </v-toolbar>
+
+          <div class="position-relative w-100" style="aspect-ratio: 4/3; background: #000">
+            <video
+              ref="videoRef"
+              autoplay
+              playsinline
+              muted
+              class="w-100 h-100"
+              style="object-fit: cover"
+            />
+            <!-- scan overlay -->
+            <div class="scan-overlay">
+              <div class="scan-box" />
+            </div>
+          </div>
+
+          <div v-if="cameraError" class="pa-3 text-center text-error text-caption">
+            {{ cameraError }}
+          </div>
+
+          <v-card-actions class="justify-center">
+            <v-btn icon="mdi-camera-switch" color="primary" @click="switchCamera" />
+          </v-card-actions>
+        </v-card>
+      </v-container>
+    </v-dialog>
   </div>
 </template>
 
@@ -144,26 +204,18 @@ const props = defineProps({
     default: null,
   },
   cards: {
-    type: Array as PropType<string[]>,
+    type: Array as PropType<any[]>,
     default: () => [],
   },
 });
 
-const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards", "scan:barcode", "scan:camera"]);
+const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards"]);
 
 const { getAll: getAllCards } = useCard();
 
-const nfcEnabled = computed(
-  () => props.settings?.data?.settings?.nfcPass ?? false
-);
-
-const printer = computed(
-  () => props.settings?.data?.settings?.printer ?? { vendorId: null, productId: null }
-);
-
-const hasPrinter = computed(
-  () => !!printer.value.vendorId && !!printer.value.productId
-);
+const nfcEnabled = computed(() => props.settings?.data?.settings?.nfcPass ?? false);
+const printer = computed(() => props.settings?.data?.settings?.printer ?? { vendorId: null, productId: null });
+const hasPrinter = computed(() => !!printer.value.vendorId && !!printer.value.productId);
 
 const passType = computed({
   get: () => props.modelValue,
@@ -183,11 +235,10 @@ const selectedCards = computed({
   },
 });
 
-const cardItems = ref<TCard[]>([]);
+// ─── Card fetching ────────────────────────────────────────────────
+const cardItems = ref<any[]>([]);
 const cardsLoading = ref(false);
 
-const cards = computed(() => cardItems.value);
-
 async function fetchCards() {
   cardsLoading.value = true;
   try {
@@ -198,12 +249,163 @@ async function fetchCards() {
   }
 }
 
+function addCard(card: any) {
+  const already = selectedCards.value.some((c) => c._id === card._id);
+  if (!already) selectedCards.value = [...selectedCards.value, card];
+}
+
+// ─── Barcode scanning ─────────────────────────────────────────────
+const isBarcodeScanningActive = ref(false);
+const barcodeBuffer = ref("");
+const barcodeTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+
+const toggleBarcodeScanning = () => {
+  isBarcodeScanningActive.value = !isBarcodeScanningActive.value;
+  if (!isBarcodeScanningActive.value) {
+    barcodeBuffer.value = "";
+    if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+  }
+};
+
+const validateScannedBarcode = (scannedCode: string) => {
+  const card = cardItems.value.find((c) => c.cardNumber === scannedCode);
+  if (card) addCard(card);
+  barcodeBuffer.value = "";
+};
+
+const handleBarcodeInput = (event: KeyboardEvent) => {
+  if (!isBarcodeScanningActive.value || passType.value !== "NFC") return;
+
+  if (event.key === "Enter") {
+    event.preventDefault();
+    if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+    if (barcodeBuffer.value.trim()) validateScannedBarcode(barcodeBuffer.value.trim());
+    return;
+  }
+
+  if (event.key.length === 1) {
+    barcodeBuffer.value += event.key;
+    if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+    barcodeTimeout.value = setTimeout(() => { barcodeBuffer.value = ""; }, 200);
+  }
+};
+
+// ─── Camera scanner ───────────────────────────────────────────────
+const videoRef = ref<HTMLVideoElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const showCameraDialog = ref(false);
+const cameraError = ref("");
+const cameraFacingMode = ref<"environment" | "user">("environment");
+let mediaStream: MediaStream | null = null;
+let scanIntervalId: ReturnType<typeof setInterval> | null = null;
+let barcodeDetector: any = null;
+
+const openCameraDialog = () => {
+  cameraError.value = "";
+  showCameraDialog.value = true;
+};
+
+const closeCameraDialog = () => {
+  showCameraDialog.value = false;
+};
+
+const startCamera = async () => {
+  cameraError.value = "";
+
+  if (!("BarcodeDetector" in window)) {
+    cameraError.value = "BarcodeDetector is not supported in this browser. Use Chrome or Edge.";
+    return;
+  }
+
+  try {
+    mediaStream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: cameraFacingMode.value, width: { ideal: 1280 }, height: { ideal: 720 } },
+    });
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = mediaStream;
+      await videoRef.value.play();
+    }
+
+    barcodeDetector = new (window as any).BarcodeDetector({
+      formats: ["qr_code", "code_128", "code_39", "ean_13", "ean_8"],
+    });
+
+    // Wait a tick for the video to have real frame data before scanning
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    startScanLoop();
+  } catch (err: any) {
+    cameraError.value = `Camera error: ${err.message}`;
+  }
+};
+
+const startScanLoop = () => {
+  if (scanIntervalId !== null) clearInterval(scanIntervalId);
+  scanIntervalId = setInterval(scanFrame, 300);
+};
+
+const scanFrame = async () => {
+  const video = videoRef.value;
+  const canvas = canvasRef.value;
+  if (!video || !canvas || !barcodeDetector || !showCameraDialog.value) return;
+  if (video.readyState < 2 || video.videoWidth === 0) return;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+  try {
+    const barcodes = await barcodeDetector.detect(canvas);
+    for (const barcode of barcodes) {
+      const card = cardItems.value.find((c) => c.cardNumber === barcode.rawValue);
+      if (card) {
+        addCard(card);
+        closeCameraDialog();
+        return;
+      }
+    }
+  } catch {
+    // silent — detector throws on blank frames
+  }
+};
+
+const stopCamera = () => {
+  if (scanIntervalId !== null) { clearInterval(scanIntervalId); scanIntervalId = null; }
+  if (mediaStream) { mediaStream.getTracks().forEach((t) => t.stop()); mediaStream = null; }
+  if (videoRef.value) videoRef.value.srcObject = null;
+  barcodeDetector = null;
+};
+
+const switchCamera = async () => {
+  stopCamera();
+  cameraFacingMode.value = cameraFacingMode.value === "environment" ? "user" : "environment";
+  await startCamera();
+};
+
+// ─── Watchers & lifecycle ─────────────────────────────────────────
 watch(
   () => passType.value,
   (val) => {
-    if (val === "NFC") fetchCards();
+    if (val === "NFC") {
+      fetchCards();
+      window.addEventListener("keydown", handleBarcodeInput);
+    } else {
+      isBarcodeScanningActive.value = false;
+      barcodeBuffer.value = "";
+      if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+      window.removeEventListener("keydown", handleBarcodeInput);
+    }
   }
 );
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleBarcodeInput);
+  if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+  stopCamera();
+});
 </script>
 
 <style scoped>
@@ -212,4 +414,30 @@ watch(
   top: 6px;
   right: 6px;
 }
+
+.animate-pulse {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.scan-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.scan-box {
+  width: 220px;
+  height: 220px;
+  border: 3px solid rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
+}
 </style>