Add Eventyay route Selection Page

This also has minor fixes and removal of some `console.log()` statements
and added env variable for local host testing

Author: Sak1012

.env

@@ -1,2 +1,3 @@
 VITE_TEST_API_URL=https://test-api.eventyay.com/v1
-VITE_PROD_API_URL=https://api.eventyay.com/v1
+VITE_PROD_API_URL=https://api.eventyay.com/v1
+VITE_LOCAL_PORT=8000

hs

@@ -31,7 +31,6 @@ 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)

src/components/Common/QRCamera.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { useLoadingStore } from '@/stores/loading'
+import StandardButton from '@/components/Common/StandardButton.vue'
+import { useRouter } from 'vue-router'
+
+const loadingStore = useLoadingStore()
+loadingStore.contentLoaded()
+
+const router = useRouter()
+function checkIn() {
+  router.push({ name: 'eventyayevents' })
+}
+</script>
+
+<template>
+  <div
+    class="-mt-16 grid h-screen w-full grid-cols-1 place-items-center items-center justify-center align-middle"
+  >
+    <StandardButton :text="'Lead Scanning'" class="btn-primary mt-6 w-full justify-center" />
+    <p class="text-xl">OR</p>
+    <StandardButton
+      :text="'Check-In'"
+      class="btn-primary mt-6 w-full justify-center"
+      @click="checkIn()"
+    />
+  </div>
+</template>

src/components/Eventyay/EventyayEventSelection.vue

@@ -29,7 +29,6 @@ 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.')
   }

src/components/Eventyay/EventyayEvents.vue

@@ -17,12 +17,12 @@ const server = ref('')
 const showError = ref(false)
 const showServerError = ref(false)
 const errmessage = ref('')
+const DEFAULT_SERVER_VALUE = 'Select a Server'
 // router
 const router = useRouter()
 
 async function submitLogin() {
-  console.log(server.value)
-  if (server.value === '' || server.value === 'Select a Server') {
+  if (server.value === '' || server.value === DEFAULT_SERVER_VALUE) {
     showServerError.value = true
     return
   }

src/components/LoginForm.vue

@@ -3,15 +3,21 @@ import QRCamera from '@/components/Common/QRCamera.vue'
 import { useLoadingStore } from '@/stores/loading'
 import StandardButton from '@/components/Common/StandardButton.vue'
 import { useProcessDeviceStore } from '@/stores/processDevice'
+import { ref } from 'vue'
 const loadingStore = useLoadingStore()
 loadingStore.contentLoaded()
 
 const processDeviceStore = useProcessDeviceStore()
-
+const showError = ref(false)
 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))
+  try {
+    const resp = await processDeviceStore.authDevice(JSON.stringify(payload))
+  } catch (error) {
+    showError.value = true
+    console.error('Error registering device:', error)
+  }
 }
 </script>
 
@@ -20,6 +26,9 @@ async function registerDevice() {
     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 v-if="showError">
+      <p class="text-sm text-danger">Oops! something went wrong</p>
+    </div>
     <div>
       <input type="text" id="auth_token" placeholder="Device Key" class="input" />
       <StandardButton

src/components/Registration/Device/Device.vue

@@ -3,6 +3,7 @@ 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 EventyayEventSelection from '@/components/Eventyay/EventyayEventSelection.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'
@@ -38,6 +39,11 @@ const router = createRouter({
       name: 'eventyaycheckin',
       component: EventyayEventCheckIn
     },
+    {
+      path: '/eventyayselect',
+      name: 'eventyayselect',
+      component: EventyayEventSelection
+    },
     {
       path: '/panel',
       name: 'auth',

src/router/index.js

@@ -24,7 +24,10 @@ export const useAttendeesStore = defineStore('attendees', () => {
       route += `email=${value}`
     }
     try {
-      const res = await apiStore.get(true, `events/${eventId}/attendees/search?sort=firstname&${route}`)
+      const res = await apiStore.get(
+        true,
+        `events/${eventId}/attendees/search?sort=firstname&${route}`
+      )
       attendees.value = res.attendees.map((attendee) => ({
         id: attendee.id,
         name: attendee.firstname + ' ' + attendee.lastname,

src/stores/attendees.js

@@ -8,16 +8,13 @@ export const useEventyayEventStore = defineStore('eventyayEvent', () => {
   const error = ref(null)
 
   async function fetchEvents(url, apiToken, organizer) {
-    loading.value = false
+    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
-      loading.value = true
     } catch (err) {
       error.value = err.message
     } finally {

src/stores/eventyayEvent.js

@@ -1,3 +1,4 @@
+import { useApiStore } from '@/stores/api'
 import { useCameraStore } from '@/stores/camera'
 import { mande } from 'mande'
 import { defineStore } from 'pinia'
@@ -9,7 +10,7 @@ export const useProcessDeviceStore = defineStore('processDevice', () => {
   const message = ref('')
   const showSuccess = ref(false)
   const showError = ref(false)
-
+  const apiStore = useApiStore()
   function $reset() {
     message.value = ''
     showSuccess.value = false
@@ -43,13 +44,10 @@ export const useProcessDeviceStore = defineStore('processDevice', () => {
   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 = {
@@ -62,28 +60,24 @@ export const useProcessDeviceStore = defineStore('processDevice', () => {
         software_version: 'x.x'
       }
       let url = qrData.url
+      const port = import.meta.env.VITE_LOCAL_PORT || 3000
       if (url.includes('localhost')) {
-        url = `${url}:8000` // Add your desired port number here
+        url = `${url}:${port}` // 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) {
+        apiStore.newSession(true)
         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' })
+        router.push({ name: 'eventyayselect' })
         showSuccessMsg()
       } else {
-        console.log('Something happend')
         showErrorMsg()
       }
     } catch (error) {
-      console.log(error)
-      console.log('Error in catch')
       showErrorMsg()
     }
   }