wip: qr code scanner

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

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>

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",

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)