From 1095c74e50e42e339678d82847f36d68be417fe4 Mon Sep 17 00:00:00 2001
From: jlucaspains <jlucaspains@gmail.com>
Date: Mon, 6 Jan 2025 20:53:15 -0700
Subject: [PATCH] scan page for test

---
 package.json       |  1 +
 src/pages/scan.vue | 56 ++++++++++++++++++++++++++++++++++++++++++++++
 yarn.lock          |  7 ++++++
 3 files changed, 64 insertions(+)
 create mode 100644 src/pages/scan.vue

diff --git a/package.json b/package.json
index 9f3694b..2e4b297 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "browser-fs-access": "^0.35.0",
     "dexie": "^4.0.10",
     "fraction.js": "^5.2.1",
+    "html5-qrcode": "^2.3.8",
     "i18next": "^24.2.0",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
diff --git a/src/pages/scan.vue b/src/pages/scan.vue
new file mode 100644
index 0000000..11498c7
--- /dev/null
+++ b/src/pages/scan.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useState } from "../services/store";
+import { useTranslation } from "i18next-vue";
+import { Html5QrcodeScanner, Html5QrcodeScanType, Html5QrcodeSupportedFormats    } from "html5-qrcode";
+
+const { t } = useTranslation();
+
+const state = useState()!;
+
+let html5QrcodeScanner: Html5QrcodeScanner;
+
+onMounted(async () => {
+    state.title = t("pages.categories.title");
+    state.menuOptions = [];
+    setupScanner();
+});
+
+function setupScanner() {
+    function onScanSuccess(decodedText: string) {
+        // handle the scanned code as you like, for example:
+        console.log(`Code matched = ${decodedText}`);
+        html5QrcodeScanner.pause(true);
+    }
+
+    function onScanFailure(error: string) {
+        // handle scan failure, usually better to ignore and keep scanning.
+        // for example:
+        console.warn(`Code scan error = ${error}`);
+    }
+
+    html5QrcodeScanner = new Html5QrcodeScanner(
+        "reader",
+        {
+            fps: 10,
+            useBarCodeDetectorIfSupported: true,
+            rememberLastUsedCamera: true,
+            showTorchButtonIfSupported: true,
+            showZoomSliderIfSupported: true,
+            defaultZoomValueIfSupported: 1.5,
+            supportedScanTypes: [
+                Html5QrcodeScanType.SCAN_TYPE_CAMERA
+            ],
+            formatsToSupport: [
+                Html5QrcodeSupportedFormats.QR_CODE
+            ],
+            qrbox: {width: 250, height: 250}
+        }, false);
+    html5QrcodeScanner.render(onScanSuccess, onScanFailure);
+}
+
+</script>
+
+<template>
+    <div id="reader" width="600px"></div>
+</template>
diff --git a/yarn.lock b/yarn.lock
index 070f262..4dbefec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2276,6 +2276,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+html5-qrcode@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.3.8.tgz#0b0cdf7a9926cfd4be530e13a51db47592adfa0d"
+  integrity sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==
+
 i18next-browser-languagedetector@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.2.tgz#037ca25c26877cad778f060a9e177054d9f8eaa3"
@@ -3363,6 +3368,7 @@ sourcemap-codec@^1.4.8:
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3441,6 +3447,7 @@ stringify-object@^3.3.0:
     is-regexp "^1.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==