Create OrdersPage, load orders from backend, move NavDrawer items to Component

software/src/components/alertBanner.vue

@@ -1,15 +1,61 @@
 <script setup lang="ts">
+import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import BannerModel from '@/data/models/bannerModel';
+import { getBannerMessage } from '@/scripts/contentScripts';
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
+const i18n = useI18n()
 const alertBanner = defineModel("alertBanner", { required: true, type: BannerModel })
+
+const title = ref("")
+const color = ref("")
+const icon = ref("")
+
+function refreshBanner() {
+  switch (alertBanner.value.bannerState) {
+    case BannerStateEnum.ERROR: {
+      title.value = i18n.t('bannerMessages.error'); break;
+    }
+    case BannerStateEnum.DATABASERESETSUCCESSFUL: {
+      title.value = i18n.t('bannerMessages.databaseResetSuccessful'); break;
+    }
+    case BannerStateEnum.LOGINSUCCESSFUL: {
+      title.value = i18n.t('bannerMessages.loginSuccessful'); break;
+    }
+    case BannerStateEnum.WRONGLOGIN: {
+      title.value = i18n.t('bannerMessages.wrongLogin'); break;
+    }
+  }
+
+  switch (alertBanner.value.bannerState) {
+    case BannerStateEnum.ERROR:
+    case BannerStateEnum.WRONGLOGIN:
+      color.value = "red"
+      icon.value = "mdi-alert-circle"
+      break;
+    
+    case BannerStateEnum.DATABASERESETSUCCESSFUL:
+    case BannerStateEnum.LOGINSUCCESSFUL:
+      color.value = "green"
+      icon.value = "mdi-check-circle"
+      break
+  }
+}
+
+watch(() => alertBanner.value.bannerState, () => {
+  refreshBanner()
+})
+
+refreshBanner()
 </script>
 
 <template>
   <v-expand-transition>
     <v-row v-if="alertBanner.show">
       <v-col>
-        <v-alert v-model="alertBanner.show" :color="alertBanner.color" :icon="alertBanner.icon" closable>
-          {{ alertBanner.message }}
+        <v-alert v-model="alertBanner.show" :color="color" :icon="icon" closable>
+          {{ title }}
         </v-alert>
       </v-col>
     </v-row>

software/src/components/navigationItems.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useUserStore } from '@/data/stores/userStore';
 import { useBasketStore } from '@/data/stores/basketStore';
-import vuetify from '@/plugins/vuetify';
 
 const userStore = useUserStore()
 const basketStore = useBasketStore()
@@ -10,6 +9,8 @@ const navRail = defineModel("navRail", { type: Boolean })
 
 <template>
   <v-list>
+    <!-- Shopping Section -->
+
     <v-list-subheader>
       <div v-if="!navRail">{{ $t('menu.shopping') }}</div>
       <div v-else></div>
@@ -25,17 +26,32 @@ const navRail = defineModel("navRail", { type: Boolean })
 
     <v-divider />
 
+
+    <!-- Account Section -->
+
     <v-list-subheader>
       <div v-if="!navRail">{{ $t('menu.account') }}</div>
       <div v-else></div>
     </v-list-subheader>
-    <v-list-item v-if="userStore.userAccountId == -1" :title="$t('menu.login')" prepend-icon="mdi-login" to="/login" link />
-    <v-list-item v-else :title="$t('logout')" prepend-icon="mdi-logout" @click="userStore.userAccountId = -1" link />
 
-    <v-list-item v-if="userStore.userAccountId != -1" :title="$t('menu.account')" prepend-icon="mdi-account" to="/account" link />
-    <v-list-item v-if="userStore.userAccountId != -1" :title="$t('menu.orders')" prepend-icon="mdi-cart-check" to="/orders" link />
+    <v-expand-transition>
+      <div v-if="userStore.userAccountId == -1">
+        <v-list-item v-if="userStore.userAccountId == -1" :title="$t('menu.login')" prepend-icon="mdi-login" to="/login" link />
+      </div>
+    </v-expand-transition>
+
+    <v-expand-transition>
+      <div v-if="userStore.userAccountId != -1">
+        <v-list-item :title="$t('menu.logout')" prepend-icon="mdi-logout" @click="userStore.userAccountId = -1" link />
+        <v-list-item :title="$t('menu.account')" prepend-icon="mdi-account" to="/account" link />
+        <v-list-item :title="$t('menu.orders')" prepend-icon="mdi-cart-check" to="/orders" link />
+      </div>
+    </v-expand-transition>
 
     <v-divider />
+
+
+    <!-- System and help section -->
     
     <v-list-subheader>
       <div v-if="!navRail">{{ $t('menu.systemAndHelp') }}</div>