loading screen added

Author: yohan-oc

vue-frontend/warehouse-frontend/src/components/AppNavbar.vue

@@ -6,7 +6,7 @@
     <span class="navbar-brand">
       <img src="@/assets/logo_new.png" alt="Turing Trust Logo" height="30">
     </span>
-    <button class="logout btn btn-link text-white" @click="logout"><i class="bi bi-box-arrow-left" style="padding-right: 5px;"></i>Home</button>
+    <button class="logout btn btn-link text-white" @click="logout"><i class="bi bi-box-arrow-left" style="padding-right: 5px;"></i>Logout</button>
   </nav>
 </template>
 

vue-frontend/warehouse-frontend/src/views/ModePage.vue

@@ -41,7 +41,7 @@ export default {
 </script>
 
 <template>
-    <div class="container">
+    <div class="container" v-if="operationModes.length > 0" >
       <h4 class="section-title">Select a mode</h4>
       <p style="color: #075976;">Begin palleting or by selecting a mode below.</p>
 
@@ -60,7 +60,12 @@ export default {
         </div>
       </div>
 
-    </div>
+  </div>
+
+  <div class="loading-screen" v-if="operationModes.length === 0" >
+    <div class="spinner"></div>
+    <h4>Loading, please wait...</h4>
+  </div>
 </template>
 
 <style scoped>
@@ -96,6 +101,30 @@ export default {
   border-bottom-width: 3px;
   border-bottom-color: #04A27D;
 }
+
+/* loading screen css*/
+.loading-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid #ddd;
+  border-top: 5px solid #0b4c62;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 </style>
 
 <!--<template>-->

vue-frontend/warehouse-frontend/src/views/ParentPage.vue

@@ -33,7 +33,12 @@ export default {
           this.$router.push("/transaction");
         } else {
           playErrorSound();
-          this.errorMessage = data.message;
+          if(data.message) {
+            this.errorMessage = data.message;
+          } else {
+            this.errorMessage = "Invalid scan detected";
+          }
+
         }
       } catch (error) {
         console.error("API Error:", error);
@@ -42,6 +47,9 @@ export default {
       finally {
         this.isLoading = false;
       }
+    },
+    goBack(){
+      this.$router.push("/");
     }
   }
 };
@@ -77,7 +85,7 @@ function playSuccessSound(){
       </div>
 
       <div class="form-group">
-        <button class="btn btn-primary" @click="scanParentId" style="width: 237px; margin-right: 8px">Cancel</button>
+        <button class="btn btn-primary" @click="goBack" style="width: 237px; margin-right: 8px">Cancel</button>
         <button class="btn btn-primary" @click="scanParentId" style="width: 237px">
           <span v-if="isLoading" class="spinner-border spinner-border-sm"></span>
           <span v-else>Continue</span>