Add functionality to use check-in app for QR code scanning with eventyay

hs

@@ -0,0 +1 @@
+sak:3670

src/components/Common/QRCamera.vue

@@ -4,6 +4,7 @@ import QRCamera from '@/components/Utilities/QRCamera.vue'
 import { useCameraStore } from '@/stores/camera'
 import { useProcessRegistrationStore } from '@/stores/processRegistration'
 import { useProcessCheckInStore } from '@/stores/processCheckIn'
+import { useProcessDeviceStore } from '@/stores/processDevice'
 
 const props = defineProps({
   qrType: {
@@ -23,12 +24,14 @@ const props = defineProps({
 const cameraStore = useCameraStore()
 const processRegistrationStore = useProcessRegistrationStore()
 const processCheckInStore = useProcessCheckInStore()
+const processDeviceStore = useProcessDeviceStore()
 
 const route = useRoute()
 const stationId = route.params.stationId
 const scannerType = route.params.scannerType
 
 async function processQR() {
+  console.log('Processing QR')
   cameraStore.paused = true
   if (props.qrType === 'registration') {
     await processRegistrationStore.registerAttendeeScanner(stationId)
@@ -37,6 +40,13 @@ async function processQR() {
   if (props.qrType === 'checkIn') {
     await processCheckInStore.checkInAttendeeScannerToRoom(stationId, scannerType)
   }
+  if (props.qrType === 'device') {
+    await processDeviceStore.authDevice(cameraStore.qrCodeValue)
+  }
+  if (props.qrType === 'eventyaycheckin') {
+    console.log(cameraStore.qrCodeValue)
+    console.log('Check-in')
+  }
   cameraStore.paused = false
 }
 </script>

src/components/Eventyay/EventyayEventCheckIn.vue

@@ -0,0 +1,14 @@
+<script setup>
+import QRCamera from '@/components/Common/QRCamera.vue'
+import { useLoadingStore } from '@/stores/loading'
+const loadingStore = useLoadingStore()
+loadingStore.contentLoaded()
+</script>
+
+<template>
+  <div
+    class="-mt-16 grid h-screen w-full grid-cols-1 place-items-center items-center justify-center align-middle"
+  >
+    <QRCamera :qr-type="'eventyaycheckin'" :scan-type="'Check-In'" />
+  </div>
+</template>

src/components/Eventyay/EventyayEvents.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { useLoadingStore } from '@/stores/loading'
+import { ref, onMounted, watchEffect } from 'vue'
+import { useEventyayEventStore } from '@/stores/eventyayEvent'
+import StandardButton from '@/components/Common/StandardButton.vue'
+import { useRouter } from 'vue-router'
+const loadingStore = useLoadingStore()
+
+const apiToken = ref('')
+const organiser = ref('')
+const url = ref('')
+const eventyayEventStore = useEventyayEventStore()
+const selectedEvent = ref(null)
+const router = useRouter()
+const { events, loading, error, fetchEvents } = eventyayEventStore
+
+watchEffect(() => {
+  apiToken.value = localStorage.getItem('api_token')
+  organiser.value = localStorage.getItem('organizer')
+  url.value = localStorage.getItem('url')
+
+  if (apiToken.value && organiser.value && url.value) {
+    fetchEvents(url.value, apiToken.value, organiser.value)
+    loadingStore.contentLoaded()
+  }
+})
+
+const submitForm = () => {
+  if (selectedEvent.value) {
+    localStorage.setItem('selectedEvent', selectedEvent.value)
+    router.push({ name: 'eventyaycheckin' })
+    console.log('Selected event:', selectedEvent.value)
+  } else {
+    console.error('Please select an event.')
+  }
+}
+</script>
+<template>
+  <div class="-mt-16 flex h-screen flex-col justify-center">
+    <div v-if="loading">Loading events...</div>
+    <div v-if="error" class="text-danger">{{ error }}</div>
+    <form v-if="events.length" @submit.prevent="submitForm">
+      <div v-for="event in events" :key="event.slug" class="mb-2">
+        <label>
+          <input type="radio" :value="event.slug" v-model="selectedEvent" />
+          {{ event.name.en }}
+        </label>
+      </div>
+      <div>
+        <StandardButton
+          :type="'submit'"
+          :text="'Select Event'"
+          class="btn-primary mt-6 w-full justify-center"
+        />
+      </div>
+    </form>
+    <div v-if="!loading && !events.length && !error">
+      No events available
+      <StandardButton
+        :text="'Refresh'"
+        class="btn-primary mt-6 w-full justify-center"
+        @click="fetchEvents(url.value, apiToken.value, organiser.value)"
+      />
+    </div>
+  </div>
+</template>

src/components/LoginForm.vue

@@ -13,12 +13,25 @@ const userStore = useUserStore()
 
 const email = ref('')
 const password = ref('')
+const server = ref('')
 const showError = ref(false)
-
+const showServerError = ref(false)
+const errmessage = ref('')
 // router
 const router = useRouter()
 
 async function submitLogin() {
+  console.log(server.value)
+  if (server.value === '' || server.value === 'Select a Server') {
+    showServerError.value = true
+    return
+  }
+  if (server.value === 'Eventyay') {
+    errmessage.value = 'Please Register a Device for Eventyay'
+    showServerError.value = true
+    return
+  }
+  showServerError.value = false
   loadingStore.contentLoading()
   showError.value = false
 
@@ -42,6 +55,24 @@ async function submitLogin() {
   loadingStore.contentLoaded()
 }
 
+function registerDevice() {
+  console.log(server.value)
+  if (server.value === '' || server.value === 'Select a Server') {
+    errmessage.value = 'Please select a server first'
+    showServerError.value = true
+    return
+  }
+  if (server.value === 'Open-Event') {
+    errmessage.value = 'Please Login with credentials for Open-Event'
+    showServerError.value = true
+    return
+  }
+  showServerError.value = false
+  router.push({
+    name: 'device'
+  })
+}
+
 onMounted(() => {
   if (authStore.isAuthenticated) {
     router.push({
@@ -88,6 +119,15 @@ onMounted(() => {
           </div>
         </div>
 
+        <div>
+          <label for="select">Select a Server</label>
+          <select id="select" v-model="server" class="mt-2 block w-full">
+            <option>Open-Event</option>
+            <option>Eventyay</option>
+            <option>Testing</option>
+          </select>
+        </div>
+
         <div>
           <StandardButton
             :type="'submit'"
@@ -101,13 +141,24 @@ onMounted(() => {
         </div>
       </form>
 
-      <p class="mt-10 text-center text-sm">
+      <p class="mt-5 text-center text-sm">
         <span>Forgot password?</span>
         {{ ' ' }}
         <a href="https://eventyay.com/reset-password" class="font-medium leading-6 text-primary"
           >Click here to reset password</a
         >
       </p>
+      <StandardButton
+        :type="'button'"
+        :text="'Register-Device'"
+        :disabled="false"
+        class="btn-primary mt-6 w-full justify-center"
+        @click="registerDevice"
+      >
+      </StandardButton>
+      <div v-if="showServerError" class="mt-5">
+        <p class="text-center text-sm text-danger">{{ errmessage }}</p>
+      </div>
     </div>
   </div>
 </template>

src/components/Registration/Device/Device.vue

@@ -0,0 +1,32 @@
+<script setup>
+import QRCamera from '@/components/Common/QRCamera.vue'
+import { useLoadingStore } from '@/stores/loading'
+import StandardButton from '@/components/Common/StandardButton.vue'
+import { useProcessDeviceStore } from '@/stores/processDevice'
+const loadingStore = useLoadingStore()
+loadingStore.contentLoaded()
+
+const processDeviceStore = useProcessDeviceStore()
+
+async function registerDevice() {
+  const auth_token = document.getElementById('auth_token').value
+  const payload = { handshake_version: 1, url: 'http://localhost', token: auth_token }
+  await processDeviceStore.authDevice(JSON.stringify(payload))
+}
+</script>
+
+<template>
+  <div
+    class="-mt-16 grid h-screen w-full grid-cols-1 place-items-center items-center justify-center align-middle"
+  >
+    <QRCamera :qr-type="'device'" :scan-type="'Device Registration'" />
+    <div>
+      <input type="text" id="auth_token" placeholder="Device Key" class="input" />
+      <StandardButton
+        :text="'Register Device'"
+        class="btn-primary mt-6 w-full justify-center"
+        @click="registerDevice()"
+      />
+    </div>
+  </div>
+</template>

src/router/index.js

@@ -1,6 +1,9 @@
 import AuthTemplate from '@/AuthTemplate.vue'
 import CheckInCamera from '@/components/CheckIn/CheckInCamera.vue'
 import CheckInStats from '@/components/CheckIn/CheckInStats.vue'
+import EventyayEventCheckIn from '@/components/Eventyay/EventyayEventCheckIn.vue'
+import EventyayEvents from '@/components/Eventyay/EventyayEvents.vue'
+import Device from '@/components/Registration/Device/Device.vue'
 import RegistrationKiosk from '@/components/Registration/Kiosk/KioskOverview.vue'
 import RegistrationStats from '@/components/Registration/Station/RegistrationStats.vue'
 import RegistrationStation from '@/components/Registration/Station/StationOverview.vue'
@@ -20,6 +23,21 @@ const router = createRouter({
       name: 'userAuth',
       component: UserAuth
     },
+    {
+      path: '/device',
+      name: 'device',
+      component: Device
+    },
+    {
+      path: '/eventyayevents',
+      name: 'eventyayevents',
+      component: EventyayEvents
+    },
+    {
+      path: '/eventyaycheckin',
+      name: 'eventyaycheckin',
+      component: EventyayEventCheckIn
+    },
     {
       path: '/panel',
       name: 'auth',

src/stores/api.js

@@ -6,7 +6,7 @@ export const useApiStore = defineStore('api', () => {
     import.meta.env.MODE === 'production'
       ? import.meta.env.VITE_PROD_API_URL
       : import.meta.env.VITE_TEST_API_URL
-      
+
   let instance = mande(apiUrl)
 
   function setToken() {

src/stores/eventyayEvent.js

@@ -0,0 +1,34 @@
+import { mande } from 'mande'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useEventyayEventStore = defineStore('eventyayEvent', () => {
+  const events = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  async function fetchEvents(url, apiToken, organizer) {
+    loading.value = false
+    error.value = null
+
+    try {
+      const api = mande(url, { headers: { Authorization: `Device ${apiToken}` } })
+      console.log(`/api/v1/organizers/${organizer}/events/`)
+      const response = await api.get(`/api/v1/organizers/${organizer}/events/`)
+      console.log('Hello', response)
+      events.value = response.results
+      loading.value = true
+    } catch (err) {
+      error.value = err.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    events,
+    loading,
+    error,
+    fetchEvents
+  }
+})