Feature/improve nfc pos

apps/point-of-sale/src/App.vue

@@ -1,4 +1,9 @@
+<script setup lang="ts">
+import Toast from 'primevue/toast';
+</script>
+
 <template>
+  <Toast />
   <RouterView/>
   <img class="image-underlay" src="@/assets/splash.svg" alt="Overlay Image" />
 </template>

apps/point-of-sale/src/components/ScannersUpdateComponent.vue

@@ -1,12 +1,34 @@
 <template>
-  <div class="scanners" />
+  <div class="nfc-icon"
+       @click="() => nfcModalVisible = true">
+    <div class="pi pi-id-card text-6xl"/>
+  </div>
+  <Dialog v-model:visible="nfcModalVisible" ref="nfcModal" modal header="Link NFC"
+          :style="{ width: '30vw', class: ['container'] }"
+          @show="addListenerOnDialogueOverlay(nfcModal)"
+          :pt="{
+            header: () => ({class: ['dialog-header']}),
+            closeButton: () => ({class: ['dialog-close']})}" >
+
+    <div class="flex flex-column align-items-center">
+      <div class="scanners" id="scanners"/>
+      <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="6" fill="transparent"
+                               animationDuration="1s" :style="{ display : 'flex' }"/>
+      <b style="font-weight: bold!important;">Scan your NFC card now!</b><br>
+      <b>Note: Banking cards, ID cards and phones will not work</b><br>
+    </div>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, PropType } from "vue";
+import { PropType } from "vue";
 import { useToast } from "primevue/usetoast";
+import { Ref, ref, watch } from 'vue';
+import { addListenerOnDialogueOverlay } from "@sudosos/sudosos-frontend-common";
 
 const toast = useToast();
+const nfcModalVisible: Ref<boolean> = ref < boolean > (false);
+const nfcModal: Ref<null | any> = ref(null);
 
 const props = defineProps({
   handleNfcUpdate: {
@@ -15,6 +37,14 @@ const props = defineProps({
   }
 });
 
+watch(nfcModalVisible, (newVal) => {
+  if (newVal) {
+    document.addEventListener('keydown', onInput);
+  } else {
+    document.removeEventListener('keydown', onInput);
+  }
+});
+
 let captures: KeyboardEvent[] = [];
 
 /**
@@ -29,12 +59,20 @@ const onInput = (event: KeyboardEvent): void => {
       switch (checkCode) {
         case 'nfc':
           props.handleNfcUpdate(capturedCode.substring(3)).then(() => {
-            toast.add({ severity: 'success', summary: 'NFC code accepted',
-              detail: 'Your NFC code has been accepted.' });
+            toast.add({
+              severity: "success",
+              summary: "NFC code added!",
+              detail: "You can now login to the POS by using the scanned NFC card.",
+              life: 5000,
+            });
           }).catch((err) => {
             console.error(err);
-            toast.add({ severity: 'error', summary: 'NFC code not accepted',
-              detail: 'Your NFC code could not be accepted. Please try again.' });
+            toast.add({
+              severity: 'error',
+              summary: 'NFC code not added.',
+              detail: 'Something went wrong, please try again.',
+              life: 5000,
+            });
           });
           break;
         default:
@@ -45,16 +83,24 @@ const onInput = (event: KeyboardEvent): void => {
       captures.push(event);
   }
 };
-
-onMounted(() => {
-  document.addEventListener('keydown', onInput);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onInput);
-});
 </script>
 
 <style scoped lang="scss">
+.dialog-header {
+  background: var(--accent-color)!important;
+  color: white!important;
+}
 
+.dialog-close {
+  color: white!important;
+}
+.nfc-icon {
+  height: 100px;
+  position: fixed;
+  left: 120px;
+  font-size: 70px;
+  cursor: pointer;
+  bottom: 0;
+  color: var(--accent-color);
+}
 </style>