From d3cf41c4084782f5eaed630611a5d35c4b532e6e Mon Sep 17 00:00:00 2001
From: Qin Guan <qinguan20040914@gmail.com>
Date: Mon, 23 Oct 2023 00:59:05 +0800
Subject: [PATCH] wip: qr code scanner

---
 components/app/services/event/page.vue    | 16 ++++++-
 components/app/services/event/scanner.vue | 57 +++++++++++++++++++++++
 package.json                              |  1 +
 pages/app/[...slug].vue                   |  2 +-
 pnpm-lock.yaml                            |  7 +++
 5 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 components/app/services/event/scanner.vue

diff --git a/components/app/services/event/page.vue b/components/app/services/event/page.vue
index cc579f1..afaba78 100644
--- a/components/app/services/event/page.vue
+++ b/components/app/services/event/page.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { f7BlockTitle, f7Card, f7Chip, f7Link, f7List, f7ListItem, f7NavRight, f7NavTitle, f7Navbar, f7Page, f7PageContent, f7Searchbar, f7SkeletonBlock, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton } from 'framework7-vue'
+import { f7BlockTitle, f7Button, f7Card, f7Chip, f7Link, f7List, f7ListItem, f7NavRight, f7NavTitle, f7Navbar, f7Page, f7PageContent, f7Searchbar, f7Sheet, f7SkeletonBlock, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton } from 'framework7-vue'
 
 import type { VirtualList } from 'framework7/types'
 import type { UnwrapRef } from 'vue'
@@ -11,6 +11,10 @@ const props = defineProps<{
   id: string // Passed by f7router in URL param
 }>()
 
+const state = ref({
+  scannerOpened: false,
+})
+
 const { $dayjs } = useNuxtApp()
 
 const db = useDatabase()
@@ -107,6 +111,16 @@ function renderExternal(_: unknown, data: VirtualList.VirtualListRenderData) {
         </template>
       </f7Card>
 
+      <f7List inset>
+        <f7Button tonal large @click="state.scannerOpened = !state.scannerOpened">
+          Open scanner
+        </f7Button>
+      </f7List>
+
+      <div v-if="state.scannerOpened">
+        <AppServicesEventScanner />
+      </div>
+
       <f7BlockTitle>Attendees</f7BlockTitle>
 
       <f7List
diff --git a/components/app/services/event/scanner.vue b/components/app/services/event/scanner.vue
new file mode 100644
index 0000000..5fde859
--- /dev/null
+++ b/components/app/services/event/scanner.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Html5QrcodeScanner } from 'html5-qrcode'
+
+const state = ref({
+  error: '',
+})
+
+function onScanSuccess(decodedText, decodedResult) {
+  // Handle on success condition with the decoded text or result.
+  console.log(`Scan result: ${decodedText}`, decodedResult)
+}
+
+onMounted(() => {
+  const html5QrcodeScanner = new Html5QrcodeScanner(
+    'reader',
+    { fps: 10, qrbox: 300 },
+    false,
+  )
+
+  html5QrcodeScanner.render(onScanSuccess, (err) => {
+    if (err)
+      state.value.error = err
+  })
+
+  document.querySelectorAll('#html5-qrcode-button-camera-permission').forEach((elm) => {
+    console.log(elm)
+    elm.className += ' button'
+  })
+
+  return async () => {
+    await html5QrcodeScanner.clear()
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center">
+    <div id="reader" class="w-[90%]" style="border: none;" />
+    <div v-if="state.error">
+      {{ state.error }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(#html5-qrcode-button-camera-stop) {
+  display: none !important;
+}
+
+:deep(#reader div:first-child img:nth-child(2)) {
+  display: none !important; /* Hide info button */
+}
+
+#reader {
+  border: none !important;
+}
+</style>
diff --git a/package.json b/package.json
index 2bf2df5..8471b05 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "framework7": "^8.3.0",
     "framework7-icons": "^5.0.5",
     "framework7-vue": "^8.3.0",
+    "html5-qrcode": "^2.3.8",
     "jose": "^4.15.4",
     "lint-staged": "^15.0.2",
     "material-icons": "^1.13.12",
diff --git a/pages/app/[...slug].vue b/pages/app/[...slug].vue
index 2a80481..070b06a 100644
--- a/pages/app/[...slug].vue
+++ b/pages/app/[...slug].vue
@@ -11,7 +11,7 @@ import Framework7Vue from 'framework7-vue/bundle'
 import { f7App, f7Link, f7Toolbar, f7View, f7Views } from 'framework7-vue'
 
 import { useIsCurrentUserLoaded } from 'vuefire'
-import { AppHomePage, AppServicesEventPage } from '#components'
+import { AppHomePage, AppServicesEventPage, AppServicesEventScannerPage } from '#components'
 
 Framework7.use(Framework7Vue)
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f84856..0c0866a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,6 +86,9 @@ devDependencies:
   framework7-vue:
     specifier: ^8.3.0
     version: 8.3.0
+  html5-qrcode:
+    specifier: ^2.3.8
+    version: 2.3.8
   jose:
     specifier: ^4.15.4
     version: 4.15.4
@@ -8021,6 +8024,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /html5-qrcode@2.3.8:
+    resolution: {integrity: sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==}
+    dev: true
+
   /http-assert@1.5.0:
     resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
     engines: {node: '>= 0.8'}