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,6 +24,7 @@ const props = defineProps({
 const cameraStore = useCameraStore()
 const processRegistrationStore = useProcessRegistrationStore()
 const processCheckInStore = useProcessCheckInStore()
+const processDeviceStore = useProcessDeviceStore()
 
 const route = useRoute()
 const stationId = route.params.stationId
@@ -37,6 +39,9 @@ async function processQR() {
   if (props.qrType === 'checkIn') {
     await processCheckInStore.checkInAttendeeScannerToRoom(stationId, scannerType)
   }
+  if (props.qrType === 'device') {
+    await processDeviceStore.authDevice(cameraStore.qrCodeValue)
+  }
   cameraStore.paused = false
 }
 </script>

src/components/Eventyay/EventyayEvents.vue

@@ -0,0 +1,62 @@
+<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'
+const loadingStore = useLoadingStore()
+
+const apiToken = ref('')
+const organiser = ref('')
+const url = ref('')
+const eventyayEventStore = useEventyayEventStore()
+const selectedEvent = ref(null)
+
+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) {
+    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,20 @@ const userStore = useUserStore()
 
 const email = ref('')
 const password = ref('')
+const server = ref('')
 const showError = ref(false)
+const showServerError = ref(false)
 
 // router
 const router = useRouter()
 
 async function submitLogin() {
+  console.log(server.value)
+  if (server.value === '' || server.value === 'Select a Server') {
+    showServerError.value = true
+    return
+  }
+  showServerError.value = false
   loadingStore.contentLoading()
   showError.value = false
 
@@ -42,6 +50,18 @@ async function submitLogin() {
   loadingStore.contentLoaded()
 }
 
+function registerDevice() {
+  console.log(server.value)
+  if (server.value === '' || server.value === 'Select a Server') {
+    showServerError.value = true
+    return
+  }
+  showServerError.value = false
+  router.push({
+    name: 'device'
+  })
+}
+
 onMounted(() => {
   if (authStore.isAuthenticated) {
     router.push({
@@ -88,6 +108,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 +130,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">Please select a server first</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,8 @@
 import AuthTemplate from '@/AuthTemplate.vue'
 import CheckInCamera from '@/components/CheckIn/CheckInCamera.vue'
 import CheckInStats from '@/components/CheckIn/CheckInStats.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 +22,16 @@ const router = createRouter({
       name: 'userAuth',
       component: UserAuth
     },
+    {
+      path: '/device',
+      name: 'device',
+      component: Device
+    },
+    {
+      path: '/eventyayevents',
+      name: 'eventyayevents',
+      component: EventyayEvents
+    },
     {
       path: '/panel',
       name: 'auth',

src/stores/eventyayEvent.js

@@ -0,0 +1,33 @@
+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 = true
+    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
+    } catch (err) {
+      error.value = err.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    events,
+    loading,
+    error,
+    fetchEvents
+  }
+})

src/stores/processDevice.js

@@ -0,0 +1,96 @@
+import { useCameraStore } from '@/stores/camera'
+import { mande } from 'mande'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+export const useProcessDeviceStore = defineStore('processDevice', () => {
+  const cameraStore = useCameraStore()
+  const router = useRouter()
+  const message = ref('')
+  const showSuccess = ref(false)
+  const showError = ref(false)
+
+  function $reset() {
+    message.value = ''
+    showSuccess.value = false
+    showError.value = false
+  }
+
+  const response = computed(() => {
+    let classType = ''
+    if (showSuccess.value) {
+      classType = 'text-success'
+    }
+    if (showError.value) {
+      classType = 'text-danger'
+    }
+    return {
+      message: message.value,
+      class: classType
+    }
+  })
+
+  function showErrorMsg() {
+    showSuccess.value = false
+    showError.value = true
+  }
+
+  function showSuccessMsg() {
+    showSuccess.value = true
+    showError.value = false
+  }
+
+  async function authDevice(val) {
+    try {
+      const qrData = JSON.parse(val)
+      console.log(qrData)
+      if (qrData.handshake_version > 1) {
+        message.value = 'Unsupported handshake version'
+        showErrorMsg()
+        return
+      } else {
+        console.log('Handshake version is 1')
+      }
+
+      const payload = {
+        token: qrData.token,
+        hardware_brand: 'Test',
+        hardware_model: 'test',
+        os_name: 'Test',
+        os_version: '2.3.6',
+        software_brand: 'check-in',
+        software_version: 'x.x'
+      }
+      let url = qrData.url
+      if (url.includes('localhost')) {
+        url = `${url}:8000` // Add your desired port number here
+      }
+      console.log(url)
+      const api = mande(url, { headers: { 'Content-Type': 'application/json' } })
+      const response = await api.post('/api/v1/device/initialize', payload)
+      console.log(response)
+      if (response) {
+        const data = response
+        console.log(data.api_token)
+        localStorage.setItem('api_token', data.api_token)
+        localStorage.setItem('organizer', data.organizer)
+        localStorage.setItem('url', url)
+        router.push({ name: 'eventyayevents' })
+        showSuccessMsg()
+      } else {
+        console.log('Something happend')
+        showErrorMsg()
+      }
+    } catch (error) {
+      console.log(error)
+      console.log('Error in catch')
+      showErrorMsg()
+    }
+  }
+
+  return {
+    response,
+    $reset,
+    authDevice
+  }
+})