feat(webapp): add check in functionality

src/components/services/account.service.ts

@@ -39,6 +39,16 @@ export const AccountService = {
     } while(accountDocuments.total > offset);
     return accounts;
   },
+  async checkIn(accountNumber: string): Promise<IAccount> {
+    const account = await this.getAccount(accountNumber);
+    if(!account) {
+      throw new Error('Account not found');
+    }
+    const accountDocument = await database.updateDocument<IAccount & Models.Document>(ACCOUNTS_COLLECTION_ID, account.$id, {
+      lastCheckIn: Math.floor(+new Date() / 1000),
+    });
+    return accountDocument;
+  },
   async addAccount(account: IAccount): Promise<IAccount> {
     const accountDocument = await database.createDocument<IAccount & Models.Document>(ACCOUNTS_COLLECTION_ID, 'unique()', account);
     return accountDocument;

src/components/services/date.service.ts

@@ -28,4 +28,17 @@ export class DateService {
       year: 'numeric',
     });
   }
+  public static toTime(date: Date | number): string {
+    if(typeof date === 'number') {
+      date = new Date(date * 1000);
+    }
+    if(!date) {
+      return 'n/a';
+    }
+    return date.toLocaleTimeString('de-DE', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }
 }

src/components/views/BankView.vue

@@ -131,10 +131,11 @@ onKeyStroke(['e', 'g', 'a'], (e) => {
   }
 });
 
-onKeyStroke(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Enter'], async (e) => {
+onKeyStroke(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Enter'], (e) => {
   if(depositModalOpen.value || salaryModalOpen.value || withdrawModalOpen.value) {
     return;
   }
+  accountNotFound.value = false;
   e.preventDefault();
   if(e.key === 'Enter') {
     accountId.value = inputBuffer.value;

src/components/views/CheckInView.vue

@@ -1,10 +1,56 @@
 <template>
-  <AtomHeroText>John Doe um 17:39:33</AtomHeroText>
+  <AtomHeroText>
+    {{ message }}
+    <div
+      v-if="accountNotFound"
+      class="alert alert-error shadow-lg mt-6"
+    >
+      <div>
+        <XCircleIcon class="w-6 h-6" />
+        <span class="text-base font-normal">Fehler: Der Account wurde nicht gefunden.</span>
+      </div>
+    </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 AtomHeroText from '../atoms/AtomHeroText.vue';
 
+const DEFAULT_MESSAGE = 'Bitte Karte scannen...';
+const accountId = ref<string>('');
+const message = ref<string>(DEFAULT_MESSAGE);
+const accountNotFound = ref<boolean>(false);
+
+onKeyStroke(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Enter'], async (e) => {
+  e.preventDefault();
+  accountNotFound.value = false;
+  if(e.key === 'Enter') {
+    try {
+      const account = await AccountService.checkIn(accountId.value);
+      accountId.value = '';
+      message.value = `${account.firstName} ${account.lastName} um ${DateService.toTime(account.lastCheckIn)}`;
+      await promiseTimeout(5000);
+      message.value = DEFAULT_MESSAGE;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      if(error.message == 'Account not found') {
+        accountId.value = '';
+        accountNotFound.value = true;
+        await promiseTimeout(3000);
+        accountNotFound.value = false;
+      } else {
+      // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    }
+  } else {
+    accountId.value += e.key;
+  }
+});
 </script>
 
 <style lang="scss" scoped>