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

software/src/pages/OrdersPage.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  Orders
-</template>

software/src/pages/basketPage/index.vue

@@ -12,10 +12,10 @@ const basketStore = useBasketStore()
         <v-card :title="$t('menu.basket')" prepend-icon="mdi-cart">
           <v-card-subtitle v-if="basketStore.itemsInBasket.length > 0">
             <div v-if="basketStore.itemsInBasket.length == 1">
-              {{ basketStore.itemsInBasket.length }} {{ $t('product') }}
+              {{ basketStore.itemsInBasket.length }} {{ $t('product.product') }}
             </div>
             <div v-else>
-              {{ basketStore.itemsInBasket.length }} {{ $t('products') }}
+              {{ basketStore.itemsInBasket.length }} {{ $t('product.products') }}
             </div>
           </v-card-subtitle>
 

software/src/pages/basketPage/productsTable.vue

@@ -15,11 +15,11 @@ function removeFromBasket(basketItem: BasketItemModel) {
     <thead>
       <tr>
         <th></th>
-        <th>{{ $t('category') }}</th>
-        <th>{{ $t('brand') }}</th>
-        <th>{{ $t('products') }}</th>
+        <th>{{ $t('product.category') }}</th>
+        <th>{{ $t('product.brand') }}</th>
+        <th>{{ $t('product.products') }}</th>
         <th class="text-center">{{ $t('quantity') }}</th>
-        <th class="text-right">{{ $t('productPrice') }}</th>
+        <th class="text-right">{{ $t('product.productPrice') }}</th>
         <th class="text-right">{{ $t('totalPrice') }}</th>
       </tr>
     </thead>

software/src/pages/loginPage/loginForm.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import BannerModel from '@/data/models/bannerModel';
 import { useUserStore } from '@/data/stores/userStore';
 import axios from 'axios';
@@ -17,18 +18,14 @@ function startLogin() {
   })
   .then(res => {
     if (res.status == 200) {
-      banner.value.message = "Logged in!"
-      banner.value.color = "green"
-      banner.value.icon = "mdi-check"
+      banner.value.bannerState = BannerStateEnum.LOGINSUCCESSFUL
       banner.value.show = true
 
       userStore.userAccountId = res.data.userAccountId
     }
   })
   .catch(res => {
-    banner.value.message = "Wrong Username or Password!"
-    banner.value.color = "red"
-    banner.value.icon = "mdi-alert-circle"
+    banner.value.bannerState = BannerStateEnum.WRONGLOGIN
     banner.value.show = true
   })
 }
@@ -39,23 +36,25 @@ function startLogin() {
     <v-container>
       <v-row>
         <v-col>
-          <v-text-field :label="$t('username')" prepend-icon="mdi-account" clearable v-model="username"/>
+          <v-text-field :label="$t('account.username')" prepend-icon="mdi-account" clearable v-model="username"/>
         </v-col>
       </v-row>
 
       <v-row>
         <v-col>
-          <v-text-field :label="$t('password')" prepend-icon="mdi-key" type="password" clearable v-model="password" />
+          <v-text-field :label="$t('account.password')" prepend-icon="mdi-key" type="password" 
+            clearable v-model="password" />
         </v-col>
       </v-row>
     </v-container>
 
     <v-card-actions>
       <v-btn variant="outlined" @click="showRegisterCard = true" color="primary" prepend-icon="mdi-plus">
-        {{ $t('noAccountRegister') }}
+        {{ $t('account.noAccountRegister') }}
       </v-btn>
       <v-spacer />
-      <v-btn variant="outlined" append-icon="mdi-arrow-right" color="primary" @click="startLogin">{{ $t('login') }}</v-btn>
+      <v-btn variant="outlined" append-icon="mdi-arrow-right" color="primary"
+        @click="startLogin">{{ $t('menu.login') }}</v-btn>
     </v-card-actions>
 
   </v-card>

software/src/pages/loginPage/registerForm.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import { AccountModel } from '@/data/models/accountModel';
 import BannerModel from '@/data/models/bannerModel';
 import axios from 'axios';
@@ -13,18 +14,14 @@ function registerUser() {
     .then(res => {
       console.log(res)
       if (res.status == 200) {
-        banner.value.message = "Created!"
-        banner.value.color = "green"
-        banner.value.icon = "mdi-check"
+        banner.value.bannerState = BannerStateEnum.LOGINSUCCESSFUL
         banner.value.show = true
       }
     })
     .catch((error) => {
       console.log(error)
       if (error.status == 400) {
-        banner.value.color = "red"
-        banner.value.icon = "mdi-alert-circle"
-        banner.value.message = error.response.data.error
+        banner.value.bannerState = BannerStateEnum.WRONGLOGIN
         banner.value.show = true
       }
     })
@@ -32,12 +29,12 @@ function registerUser() {
 </script>
 
 <template>
-  <v-card :title="$t('register')">
+  <v-card :title="$t('account.register')">
     <v-container>
       <v-row>
         <v-col>
           <v-text-field
-            :label="$t('username')"
+            :label="$t('account.username')"
             prepend-icon="mdi-account"
             v-model="newUser.username"
             clearable
@@ -46,7 +43,7 @@ function registerUser() {
 
         <v-col>
           <v-text-field
-            :label="$t('password')"
+            :label="$t('account.password')"
             prepend-icon="mdi-key"
             type="password"
             v-model="newUser.password"
@@ -100,9 +97,15 @@ function registerUser() {
     </v-container>
 
     <template #actions>
-      <v-btn prepend-icon="mdi-arrow-left" color="primary" variant="outlined" @click="showRegisterCard = false">{{ $t('backToLogin') }}</v-btn>
+      <v-btn prepend-icon="mdi-arrow-left" color="primary" variant="outlined" 
+        @click="showRegisterCard = false">
+          {{ $t('backToLogin') }}
+        </v-btn>
       <v-spacer />
-      <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined" @click="registerUser">{{ $t('register') }}</v-btn>
+      <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined" 
+        @click="registerUser">
+          {{ $t('register') }}
+        </v-btn>
     </template>
   </v-card>
 </template>

software/src/pages/ordersPage/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useUserStore } from '@/data/stores/userStore';
+import axios from 'axios';
+import { ref } from 'vue';
+
+const userStore = useUserStore()
+const orders = ref([])
+
+axios.get("http://127.0.0.1:3000/orders", { 
+  params: {
+    accountId: userStore.userAccountId
+  }
+})
+  .then(res => {
+    orders.value = res.data
+  })
+</script>
+
+<template>
+  <v-container>
+    <v-row v-for="order in orders">
+      <v-col>
+        <v-card
+          :title="'Bestellung vom ' + order.createdAt"
+          :subtitle="$t('totalPrice') + ': ' + order.totalPrice + ' €'"
+        >
+          <v-table>
+            <thead>
+              <tr>
+                <th>{{ $t('quantity') }}</th>
+                <th>{{ $t('product.brand') }}</th>
+                <th>{{ $t('product.productName') }}</th>
+                <th>{{ $t('product.productPrice') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="orderItem in order.orderItem">
+                <td>{{ orderItem.quantity }}x</td>
+                <td>{{ orderItem.product.brand }}</td>
+                <td>{{ orderItem.product.name }}</td>
+                <td>{{ orderItem.product.price }} €</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

software/src/pages/preferencesPage/systemSetup.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import BannerModel from '@/data/models/bannerModel';
 import axios from 'axios';
 
@@ -8,6 +9,7 @@ function resetDb() {
   axios.get("http://127.0.0.1:3000/api/resetdatabase")
     .then(res => {
       if (res.status == 200) {
+        alertBanner.value.bannerState = BannerStateEnum.DATABASERESETSUCCESSFUL
         alertBanner.value.show = true
       }
     })

software/src/pages/productsPage/filterBar.vue

@@ -28,10 +28,10 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole
   <v-card>
     <v-card-title>
       <div v-if="numberOfItems == 1">
-        {{ numberOfItems }} {{ $t('product') }}
+        {{ numberOfItems }} {{ $t('product.product') }}
       </div>
       <div v-else>
-        {{ numberOfItems }} {{ $t('products') }}
+        {{ numberOfItems }} {{ $t('product.products') }}
       </div>
     </v-card-title>
     <v-container class="pb-0">