Extend database with more tables, rewrite API doc, improve API endpoints

software/src/pages/accountPage/accountDataCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useUserStore } from '@/data/stores/userStore';
 import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 
 const userStore = useUserStore()
 </script>
@@ -87,14 +88,13 @@ const userStore = useUserStore()
     </v-container>
 
     <template #actions>
-      <v-btn
+      <outlined-button
         @click="userStore.updateAccount()"
-        variant="outlined"
         prepend-icon="mdi-content-save"
         color="green"
       >
         Save
-      </v-btn>
+      </outlined-button>
     </template>
   </card-view>
 </template>

software/src/pages/accountPage/accountManagingCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import cardView from '@/components/cardView.vue';
 import confirmDialog from '@/components/confirmDialog.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 import { ref } from 'vue';
 
 const showConfirmDialog = ref(false)
@@ -15,14 +16,13 @@ function deleteAccount() {
     <v-container>
       <v-row>
         <v-col class="d-flex justify-center align-center">
-          <v-btn
+          <outlined-button
             prepend-icon="mdi-delete"
-            variant="outlined"
             color="red"
             @click="showConfirmDialog = true"
           >
             {{ $t("account.delete") }}
-          </v-btn>
+          </outlined-button>
         </v-col>
       </v-row>
     </v-container>

software/src/pages/basketPage/index.vue

@@ -5,6 +5,7 @@ import alertBanner from '@/components/alertBanner.vue';
 import cardView from '@/components/cardView.vue';
 import { useUserStore } from '@/data/stores/userStore';
 import orderingDialog from './orderingDialog.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 import { ref } from 'vue';
 
 const basketStore = useBasketStore()
@@ -44,7 +45,7 @@ const showOrderingDialog = ref()
           </v-card-text>
 
           <template #actions>
-            <v-btn
+            <outlined-button
               prepend-icon="mdi-basket-check"
               :disabled="basketStore.itemsInBasket.length == 0 || userStore.userAccount.id == null"
               variant="outlined"
@@ -52,7 +53,7 @@ const showOrderingDialog = ref()
               @click="showOrderingDialog = true"
             >
               {{ $t('orderNow') }}
-            </v-btn>
+            </outlined-button>
           </template>
         </card-view>
       </v-col>

software/src/pages/basketPage/orderingDialog.vue

@@ -1,9 +1,25 @@
 <script setup lang="ts">
 import actionDialog from '@/components/actionDialog.vue';
+import { useBasketStore } from '@/data/stores/basketStore';
+import outlinedButton from '@/components/outlinedButton.vue';
+
+const basketStore = useBasketStore()
+
+function doOrder() {
+  basketStore.takeOrder()
+}
 </script>
 
 <template>
   <action-dialog
     :title="$t('ordering.ordering')"
-  />
+  >
+    <template #actions>
+      <outlined-button
+        @click="doOrder"
+      >
+        {{ $t('ordering.takeOrder') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
 </template>

software/src/pages/loginPage/loginForm.vue

@@ -2,6 +2,7 @@
 import { useUserStore } from '@/data/stores/userStore';
 import { ref } from 'vue';
 import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 
 const userStore = useUserStore()
 const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
@@ -31,13 +32,19 @@ function startLogin() {
     </v-container>
 
     <template #actions>
-      <v-btn variant="outlined" @click="showRegisterCard = true" color="primary" prepend-icon="mdi-plus">
+      <outlined-button 
+        @click="showRegisterCard = true"
+        prepend-icon="mdi-plus"
+      >
         {{ $t('account.noAccountRegister') }}
-      </v-btn>
-      <v-spacer />
-      <v-btn variant="outlined" append-icon="mdi-arrow-right" color="primary"
-        @click="startLogin">{{ $t('menu.login') }}</v-btn>
-    </template>
+      </outlined-button>
 
+      <outlined-button
+        append-icon="mdi-arrow-right"
+        @click="startLogin"
+      >
+        {{ $t('menu.login') }}
+      </outlined-button>
+    </template>
   </card-view>
 </template>

software/src/pages/loginPage/registerForm.vue

@@ -3,6 +3,7 @@ import { AccountModel } from '@/data/models/accountModel';
 import { useUserStore } from '@/data/stores/userStore';
 import { ref } from 'vue';
 import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 
 const newUser = ref(new AccountModel())
 const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
@@ -78,15 +79,19 @@ const userStore = useUserStore()
     </v-container>
 
     <template #actions>
-      <v-btn prepend-icon="mdi-arrow-left" color="primary" variant="outlined" 
-        @click="showRegisterCard = false">
-          {{ $t('account.backToLogin') }}
-        </v-btn>
-      <v-spacer />
-      <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined" 
-        @click="userStore.registerAccount(newUser)">
-          {{ $t('account.register') }}
-        </v-btn>
+      <outlined-button
+        prepend-icon="mdi-arrow-left" 
+        @click="showRegisterCard = false"
+      >
+        {{ $t('account.backToLogin') }}
+      </outlined-button>
+
+      <outlined-button
+        prepend-icon="mdi-account-plus"
+        @click="userStore.registerAccount(newUser)"
+      >
+        {{ $t('account.register') }}
+      </outlined-button>
     </template>
   </card-view>
 </template>

software/src/pages/ordersPage/ordersCard.vue

@@ -6,13 +6,13 @@ defineProps({
   order: OrderModel
 })
 
-function getDotColor(order, step: number) {
-  if (order.shippingProgress == step)
-  {
-    return "orange"
-  } else if (order.shippingProgress >= step) 
+function getDotColor(order: OrderModel, step: number) {
+  if (order.shippingProgress >= step)
   {
     return "green"
+  } else if (order.shippingProgress + 1 == step) 
+  {
+    return "blue"
   } else 
   {
     return "grey"
@@ -32,7 +32,7 @@ function formatDateTimeString(string: string) {
     :title="$t('orders.orderFrom') + ' ' + formatDateTimeString(order.createdAt) + ' ' + $t('oclock')"
     :subtitle="$t('totalPrice') + ': ' + order.totalPrice + ' €'"
   >
-    <v-timeline direction="horizontal" side="start">
+    <v-timeline direction="horizontal" side="start" size="x-large">
       <v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
         {{ $t('orders.ordered') }}
       </v-timeline-item>
@@ -41,11 +41,15 @@ function formatDateTimeString(string: string) {
         {{ $t('orders.preparingForShipping') }}
       </v-timeline-item>
 
-      <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-truck-fast">
+      <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-send">
         {{ $t('orders.shipped') }}
       </v-timeline-item>
 
-      <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-package-check">
+      <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-truck-fast">
+        {{ $t('orders.inDelivery') }}
+      </v-timeline-item>
+
+      <v-timeline-item :dot-color="getDotColor(order, 5)" icon="mdi-package-check">
         {{ $t('orders.delivered') }}
       </v-timeline-item>
     </v-timeline>

software/src/pages/preferencesPage/systemSetup.vue

@@ -3,7 +3,7 @@ import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import axios from 'axios';
 import cardView from '@/components/cardView.vue';
-import actionDialog from '@/components/actionDialog.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 import { ref } from 'vue';
 import confirmDialog from '@/components/confirmDialog.vue';
 
@@ -18,7 +18,7 @@ function resetDb() {
       }
     })
 
-  confirmDialog.value = false
+  showConfirmDialog.value = false
   // todo: Request all data
 }
 
@@ -32,24 +32,21 @@ function resetSettings() {
     <v-container>
       <v-row>
         <v-col class="d-flex justify-center align-center">
-          <v-btn
+          <outlined-button
             @click="showConfirmDialog = true"
             prepend-icon="mdi-database-refresh"
             color="red"
-            variant="outlined"
           >
             {{ $t('preferences.resetDatabase') }}
-          </v-btn>
+          </outlined-button>
         </v-col>
         <v-col class="d-flex justify-center align-center">
-          <v-btn
-            @click="resetDb"
+          <outlined-button
+            @click="resetSettings"
             prepend-icon="mdi-cog-counterclockwise"
-            color="primary"
-            variant="outlined"
           >
             {{ $t('preferences.resetPreferences') }}
-          </v-btn>
+          </outlined-button>
         </v-col>
       </v-row>
     </v-container>
@@ -59,5 +56,6 @@ function resetSettings() {
     :title="$t('dialog.resetConfirm.title')"
     :description="$t('dialog.resetConfirm.description')"
     v-model="showConfirmDialog"
+    :onConfirm="resetDb"
   />
 </template>

software/src/pages/productsPage/productDetailsDialog.vue

@@ -5,7 +5,7 @@ import { useBasketStore } from '@/data/stores/basketStore';
 import { calcProductPrice, productToBasketItem } from '@/scripts/productScripts';
 import ActionDialog from '@/components/actionDialog.vue'
 import { ProductWithCategoryModel } from '@/data/models/productWithCategoryModel';
-import { BasketItemModel } from '@/data/models/basketItemModel';
+import outlinedButton from '@/components/outlinedButton.vue';
 
 const props = defineProps({
   product: {
@@ -20,9 +20,6 @@ const basketStore = useBasketStore()
 const selectedImage = ref("")
 
 function addProductToBasket() {
-  basketStore.addItemToBasket(
-    new BasketItemModel()
-  )
   basketStore.addItemToBasket(productToBasketItem(props.product, nrOfArticles.value))
   nrOfArticles.value = 1
   showDialog.value = false
@@ -67,7 +64,6 @@ watch(() => props.product.images, () => {
 
               <v-spacer />
             </v-row>
-            
           </v-col>
 
 
@@ -154,16 +150,14 @@ watch(() => props.product.images, () => {
         :disabled="product.storedItems == 0"
       />
 
-      <v-btn
+      <outlined-button
         prepend-icon="mdi-cart-plus"
         @click="addProductToBasket"
-        color="primary"
-        variant="outlined"
         height="50"
         :disabled="product.storedItems == 0"
       >
         {{ $t('addToBasket') }}
-      </v-btn>
+      </outlined-button>
     </template>
   </action-dialog>
 </template>