forked from Kispi/Core
Simon Giesel
23aad9b667
All checks were successful
continuous-integration/drone/push Build is passing
58 lines
No EOL
1.8 KiB
Vue
58 lines
No EOL
1.8 KiB
Vue
<template>
|
|
<AtomHeroText>
|
|
{{ message }}
|
|
<div
|
|
v-if="error"
|
|
class="alert alert-error mt-6 shadow-lg"
|
|
>
|
|
<XCircleIcon class="h-6 w-6" />
|
|
<span class="text-base font-normal"><b>Fehler:</b> {{ error }}</span>
|
|
</div>
|
|
</AtomHeroText>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { onKeyStroke, promiseTimeout } from '@vueuse/core';
|
|
import { AccountService } from '../../services/account.service';
|
|
import { DateService } from '../../services/date.service';
|
|
import { XCircleIcon } from '@heroicons/vue/24/outline';
|
|
import AtomHeroText from '../atoms/AtomHeroText.vue';
|
|
|
|
const DEFAULT_MESSAGE = 'Bitte Karte scannen...';
|
|
const accountId = ref<string>('');
|
|
const message = ref<string>(DEFAULT_MESSAGE);
|
|
const error = ref('');
|
|
|
|
onKeyStroke(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Enter'], async (e) => {
|
|
e.preventDefault();
|
|
error.value = '';
|
|
if(e.key === 'Enter') {
|
|
try {
|
|
const account = await AccountService.checkIn(accountId.value);
|
|
accountId.value = '';
|
|
message.value = `${account.firstName} ${account.lastName} um ${DateService.toTime(new Date(account.lastCheckIn))}`;
|
|
await promiseTimeout(5000);
|
|
message.value = DEFAULT_MESSAGE;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
} catch (e: any) {
|
|
if(e.status == 404) {
|
|
accountId.value = '';
|
|
error.value = 'Der Account wurde nicht gefunden.';
|
|
await promiseTimeout(3000);
|
|
error.value = '';
|
|
} else {
|
|
error.value = 'Ein unerwarteter Fehler ist aufgetreten. Bitte kontaktiere einen Administrator.';
|
|
// eslint-disable-next-line no-console
|
|
console.error(e);
|
|
}
|
|
}
|
|
} else {
|
|
accountId.value += e.key;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |