Setting fo ri18n-ally, progress stepper on order page

.gitignore

@@ -18,7 +18,6 @@ coverage
 /cypress/screenshots/
 
 # Editor directories and files
-.vscode/*
 !.vscode/extensions.json
 .idea
 *.suo

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "i18n-ally.localesPaths": "software/src/locales",
+  "i18n-ally.regex.key": ".*?",
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.keysInUse": [
+    "date.long.*",
+    "yeah"
+  ],
+  "i18n-ally.includeSubfolders": true,
+  "i18n-ally.dirStructure": "auto",
+  "i18n-ally.enabledFrameworks": [
+    "vue"
+  ],
+  "i18n-ally.keystyle": "nested"
+}

software/backend/data/orders.json

@@ -3,17 +3,22 @@
     {
       "id": 0,
       "accountId": 0,
-      "totalPrice": 0
+      "totalPrice": 0,
+      "shippingProgress": 4
     },
     {
       "id": 1,
       "accountId": 3,
-      "totalPrice": 0
+      "totalPrice": 7.99,
+      "shippingProgress": 5,
+      "createdAt": "2024-09-09 12:24:24.225 +00:00"
     },
     {
       "id": 2,
       "accountId": 3,
-      "totalPrice": 0
+      "totalPrice": 44.96,
+      "shippingProgress": 2,
+      "createdAt": "2024-09-12 09:57:24.225 +00:00"
     }
   ]
 }

software/backend/models/order.model.ts

@@ -11,6 +11,9 @@ export class Order extends Model {
   @Column
   totalPrice: number
 
+  @Column
+  shippingProgress: number = 1
+
 
   // Relations
   @BelongsTo(() => Account)

software/src/locales/de.json

@@ -1,6 +1,5 @@
 {
-  "menu":
+  "menu": {
-  {
     "shopping": "Einkaufen",
     "products": "Produkte",
     "basket": "Warenkorb",
@@ -36,8 +35,14 @@
   "emptyBasketTitle": "Keine Artikel im Warenkorb",
   "emptyBasketText": "Gehe zu unseren Produkten und lege Artikel in den Warenkorb",
   "totalPrice": "Gesamtpreis",
-  "orderNow": "Jetzt bestellen",  
+  "orderNow": "Jetzt bestellen",
-  
+  "orders": {
+    "orderFrom": "Bestellung vom",
+    "ordered": "Bestellt",
+    "preparingForShipping": "Versandvorbereitung",
+    "shipped": "Versendet",
+    "delivered": "Geliefert"
+  },
   "userInfo": {
     "firstName": "Vorname",
     "lastName": "Nachname",
@@ -46,7 +51,6 @@
     "postalCode": "Postleitzahl",
     "city": "Stadt"
   },
-
   "account": {
     "username": "Username",
     "password": "Passwort",
@@ -54,11 +58,11 @@
     "register": "Account erstellen",
     "backToLogin": "Zurück zum Login"
   },
-  
   "bannerMessages": {
     "loginSuccessful": "Login erfolgreich!",
     "wrongLogin": "Falscher Username oder falsches Passwort!",
     "error": "Es ist ein Fehler aufgetreten...",
     "databaseResetSuccessful": "Datenbank erfolgreich zurück gesetzt!"
-  }
+  },
-}
+  "oclock": "Uhr"
+}

software/src/locales/en.json

@@ -36,7 +36,13 @@
   "emptyBasketText": "Go to our products and add some of them to the basket",
   "totalPrice": "Total price",
   "orderNow": "Order now",
-  
+  "orders": {
+    "orderFrom": "Order from",
+    "ordered": "Ordered",
+    "preparingForShipping": "Preparing for shipping",
+    "shipped": "Shipped",
+    "delivered": "Delivered"
+  },
   "userInfo": {
     "firstName": "First Name",
     "lastName": "Family Name",
@@ -45,7 +51,6 @@
     "postalCode": "Postal Code",
     "city": "City"
   },
-
   "account": {
     "backToLogin": "Back to Login",
     "username": "Username",
@@ -53,11 +58,11 @@
     "noAccountRegister": "Create new Account!",
     "register": "Create Account"
   },
-  
   "bannerMessages": {
     "loginSuccessful": "Login erfolgreich!",
     "wrongLogin": "Falscher Username oder falsches Passwort!",
     "error": "Some error occurred...",
     "databaseResetSuccessful": "Database reset successful!"
-  }
+  },
-}
+  "oclock": "o'clock"
+}

software/src/pages/accountPage/index.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  Account
+  Account Page
 </template>

software/src/pages/loginPage/registerForm.vue

@@ -99,12 +99,12 @@ function registerUser() {
     <template #actions>
       <v-btn prepend-icon="mdi-arrow-left" color="primary" variant="outlined" 
         @click="showRegisterCard = false">
-          {{ $t('backToLogin') }}
+          {{ $t('account.backToLogin') }}
         </v-btn>
       <v-spacer />
       <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined" 
         @click="registerUser">
-          {{ $t('register') }}
+          {{ $t('account.register') }}
         </v-btn>
     </template>
   </v-card>

software/src/pages/ordersPage/index.vue

@@ -14,6 +14,26 @@ axios.get("http://127.0.0.1:3000/orders", {
   .then(res => {
     orders.value = res.data
   })
+
+function getDotColor(order, step: number) {
+  if (order.shippingProgress == step)
+  {
+    return "orange"
+  } else if (order.shippingProgress >= step) 
+  {
+    return "green"
+  } else 
+  {
+    return "grey"
+  }
+}
+
+function formatDateTimeString(string: string) {
+  let date = new Date(string)
+
+  return date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear() + ', ' + 
+    date.getHours() + ':' + date.getMinutes()
+}
 </script>
 
 <template>
@@ -21,10 +41,28 @@ axios.get("http://127.0.0.1:3000/orders", {
     <v-row v-for="order in orders">
       <v-col>
         <v-card
-          :title="'Bestellung vom ' + order.createdAt"
+          :title="$t('orders.orderFrom') + ' ' + formatDateTimeString(order.createdAt) + ' ' + $t('oclock')"
           :subtitle="$t('totalPrice') + ': ' + order.totalPrice + ' €'"
         >
-          <v-table>
+          <v-timeline direction="horizontal" side="start">
+            <v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
+              {{ $t('orders.ordered') }}
+            </v-timeline-item>
+
+            <v-timeline-item :dot-color="getDotColor(order, 2)" icon="mdi-package-variant">
+              {{ $t('orders.preparingForShipping') }}
+            </v-timeline-item>
+
+            <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-truck-fast">
+              {{ $t('orders.shipped') }}
+            </v-timeline-item>
+
+            <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-package-check">
+              {{ $t('orders.delivered') }}
+            </v-timeline-item>
+          </v-timeline>
+
+          <v-table class="bg-surface-light">
             <thead>
               <tr>
                 <th>{{ $t('quantity') }}</th>

software/src/plugins/i18n.ts

@@ -1,6 +1,6 @@
 import { createI18n } from "vue-i18n";
-import german from './../locales/german.json'
+import german from './../locales/de.json'
-import english from './../locales/english.json'
+import english from './../locales/en.json'
 
 type MessageSchema = typeof german
 

software/src/router/routes.ts

@@ -1,4 +1,4 @@
-import AccountPage from "@/pages/AccountPage.vue";
+import AccountPage from "@/pages/accountPage/index.vue";
 import OrdersPage from "@/pages/ordersPage/index.vue";
 import PreferencesPage from "@/pages/preferencesPage/index.vue";
 import ProductsPage from "@/pages/productsPage/index.vue";