feat: add new better qrcode scanner

feat: add new better qrcode scanner

feat: add new better qrcode scanner

feat: add new better qrcode scanner

feat: version 2.0
- add new better qrcode scanner
- refactor the styling

feat: version 2.0
- add new better qrcode scanner
- refactor the styling

package.json

@@ -1,7 +1,7 @@
 {
   "name": "theApp",
   "private": true,
-  "version": "1.9.0",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -31,14 +31,13 @@
     "ionicons": "7.4.0",
     "mapbox-gl": "3.5.1",
     "vue": "3.4.31",
-    "vue-barcode-reader": "1.0.3",
+    "vue-qrcode-reader": "5.5.6",
     "vue-router": "4.4.0"
   },
   "devDependencies": {
     "@capacitor/cli": "6.1.0",
     "@types/mapbox-gl": "3.1.0",
     "@types/mapbox__mapbox-gl-geocoder": "4.7.7",
-    "@types/vue-barcode-reader": "0.0.3",
     "@vitejs/plugin-legacy": "5.4.1",
     "@vitejs/plugin-vue": "5.0.5",
     "@vue/eslint-config-typescript": "13.0.0",

src/components/BarcodeScanner.vue

@@ -1,48 +1,111 @@
 <template>
-  <ion-content>
-    <StreamBarcodeReader
-      @decode="(a, b, c) => onDecode(a, b, c)"
-      @loaded="() => onLoaded()"
-    ></StreamBarcodeReader>
-    <ion-item :color="text ? 'success' : 'danger'">
-      <span class="ion-margin-end">Input value:</span>
-      <span>{{ text || 'Nothing' }}</span></ion-item
+  <ion-modal
+    ref="modal"
+    :breakpoints="breakpoints"
+    :initial-breakpoint="initialBreakpoint"
+    :is-open="true"
+    :trigger="trigger"
+  >
+    <HeaderModal title="Scanner" />
+    <QrcodeStream
+      :paused="paused"
+      @detect="onDetect"
+      @error="onError"
+      @camera-on="onCameraOn"
+      @camera-off="onCameraOff"
     >
-    <ion-fab class="ion-margin-top" horizontal="end">
-      <ion-fab-button @click="toggleFlashLight">
-        <ion-icon :icon="torch ? flash : flashOutline"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-  </ion-content>
+      <div v-show="showScanConfirmation" class="scan-confirmation">
+        <ion-icon
+          :icon="checkmarkCircleOutline"
+          class="large-icon"
+          color="success"
+        ></ion-icon>
+      </div>
+    </QrcodeStream>
+  </ion-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { IonContent, IonFab, IonFabButton, IonIcon } from '@ionic/vue'
-import { StreamBarcodeReader } from 'vue-barcode-reader'
-import { flash, flashOutline } from 'ionicons/icons'
+import { QrcodeStream } from 'vue-qrcode-reader'
+import { IonIcon, IonModal, toastController } from '@ionic/vue'
+import { checkmarkCircleOutline } from 'ionicons/icons'
+import HeaderModal from '@/components/elements/HeaderModal.vue'
 
-const text = ref('')
-let id: any = null
+defineProps<{
+  breakpoints: Array<number>
+  initialBreakpoint: number
+  eventId?: number
+  securityCode?: string
+  ticketId?: number
+  title: string
+  trigger: string
+}>()
 
-const onDecode = (a: any, b: any, c: any) => {
-  console.log(a, b, c)
-  text.value = a
-  if (id) clearTimeout(id)
-  id = setTimeout(() => {
-    if (text.value === a) {
-      text.value = ''
-    }
-  }, 5000)
+const paused = ref(false)
+const result = ref('')
+const showScanConfirmation = ref(false)
+
+const onCameraOn = () => {
+  showScanConfirmation.value = false
+}
+
+const onCameraOff = () => {
+  showScanConfirmation.value = true
+}
+
+const onDetect = async (detectedCodes: any[]) => {
+  result.value = JSON.stringify(detectedCodes.map((code) => code.rawValue))
+  paused.value = true
+  await timeout(1000)
+  paused.value = false
+  await presentToast(result.value)
+}
+
+const timeout = (ms: number) => {
+  return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
-const onLoaded = () => {
-  console.log('load')
+const presentToast = async (message: string) => {
+  const toast = await toastController.create({
+    message: message,
+    duration: 2500,
+    position: 'top',
+    color: 'success'
+  })
+  await toast.present()
 }
 
-const torch = ref(false)
+const presentErrorToast = async (message: string) => {
+  const toast = await toastController.create({
+    message: message,
+    duration: 2500,
+    position: 'top',
+    color: 'danger'
+  })
+  await toast.present()
+}
 
-const toggleFlashLight = () => {
-  torch.value = !torch.value
+const onError = async (error: Error) => {
+  console.error(error)
+  await presentErrorToast(error.message)
 }
 </script>
+
+<style scoped>
+.scan-confirmation {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.large-icon {
+  font-size: 10rem;
+  color: var(--ion-color-success);
+}
+</style>

src/components/CalculateAlert.vue

@@ -4,27 +4,29 @@
       id="calc-alert"
       :color="clickCounter > 0 ? 'danger' : 'light'"
       :disabled="clickCounter < 0"
+      class="ion-padding"
       title="-"
       @click="clickCounter--"
     />
     <ButtonDefault
       :color="clickCounter >= 0 ? 'success' : 'light'"
+      class="ion-padding"
       title="+"
       @click="clickCounter++"
     />
-    <ion-badge slot="end">{{ clickCounter }}</ion-badge>
+    <ion-badge slot="end" class="ion-padding">{{ clickCounter }}</ion-badge>
   </ion-item>
   <ion-alert
     v-if="clickCounter < 1"
-    trigger="calc-alert"
+    :buttons="alertButtons"
     header="Stop clicking"
-    sub-header="Less than zero is not possible"
     message="So I add +1 again"
-    :buttons="alertButtons"
+    sub-header="Less than zero is not possible"
+    trigger="calc-alert"
   ></ion-alert>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { IonAlert, IonBadge, IonItem } from '@ionic/vue'
 import { ref, watch } from 'vue'
 import ButtonDefault from './elements/ButtonDefault.vue'

src/components/DarkMode.vue

@@ -1,6 +1,6 @@
 <template>
   <ion-content class="ion-padding" color="primary">
-    <ion-button :color="isDark ? 'warning' : 'primary'">
+    <ion-button :color="isDark ? 'warning' : 'primary'" size="large">
       <ion-icon
         slot="icon-only"
         :icon="isDark ? sunnyOutline : moonOutline"
@@ -9,7 +9,7 @@
   </ion-content>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { IonButton, IonContent, IonIcon } from '@ionic/vue'
 import { useDark } from '@vueuse/core'
 import { moonOutline, sunnyOutline } from 'ionicons/icons'

src/components/LightMode.vue

@@ -1,6 +1,6 @@
 <template>
-  <ion-content class="ion-padding" :color="isDark ? 'primary' : 'warning'">
-    <ion-button :color="isDark ? 'warning' : 'primary'">
+  <ion-content :color="isDark ? 'primary' : 'warning'" class="ion-padding">
+    <ion-button :color="isDark ? 'warning' : 'primary'" size="large">
       <ion-icon
         slot="icon-only"
         :icon="isDark ? sunnyOutline : moonOutline"
@@ -9,7 +9,7 @@
   </ion-content>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { IonButton, IonContent, IonIcon } from '@ionic/vue'
 import { useDark } from '@vueuse/core'
 import { moonOutline, sunnyOutline } from 'ionicons/icons'

src/components/MapBox.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script lang="ts" setup>
+import 'mapbox-gl/dist/mapbox-gl.css'
 import { ref } from 'vue'
 import { MapboxMap } from '@studiometa/vue-mapbox-gl'
 

src/views/Tab4Page.vue

@@ -8,13 +8,13 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
-        <CalculateAlert title="Calc&ALert" trigger="open-card-modal" />
+        <CalculateAlert />
       </ion-content>
     </ion-content>
   </ion-page>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import CalculateAlert from '@/components/CalculateAlert.vue'
 import HeaderDefault from '@/components/elements/HeaderDefault.vue'
 import {

src/views/Tab5Page.vue

@@ -8,7 +8,12 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
-        <BarcodeScanner />
+        <BarcodeScanner
+          :breakpoints="[0, 1]"
+          :initial-breakpoint="1"
+          title="Scanner"
+          trigger="open-scanner"
+        />
       </ion-content>
     </ion-content>
   </ion-page>

src/views/TabsPage.vue

@@ -30,7 +30,7 @@
           <ion-label>Calc</ion-label>
         </ion-tab-button>
 
-        <ion-tab-button href="/tabs/tab5" tab="tab5">
+        <ion-tab-button id="open-scanner" href="/tabs/tab5">
           <ion-icon :icon="qrCodeOutline" aria-hidden="true" />
           <ion-label>Scanner</ion-label>
         </ion-tab-button>