Implement ordering process

software/src/pages/basketPage/index.vue

@@ -22,27 +22,28 @@ const showOrderingDialog = ref()
     </v-row>
     <v-row>
       <v-col>
-        <card-view :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.product') }}
-            </div>
-            <div v-else>
-              {{ basketStore.itemsInBasket.length }} {{ $t('product.products') }}
-            </div>
-          </v-card-subtitle>
+        <card-view
+          :title="$t('menu.basket')"
+          :subtitle="basketStore.itemsInBasket.length + ' ' + 
+            $tc('product.product', basketStore.itemsInBasket.length)"
+          v-model="showOrderingDialog"
+          icon="mdi-cart"
+        >
+          <template #withoutContainer>
+            <!-- Display items if card is not empty -->
+            <products-table v-if="basketStore.itemsInBasket.length > 0" />
 
-          <products-table v-if="basketStore.itemsInBasket.length > 0" />
+            <!-- Display empty state if card is empty -->
+            <v-empty-state v-else
+              icon="mdi-basket-off"
+              :title="$t('emptyBasketTitle')"
+              :text="$t('emptyBasketText')"
+            />
 
-          <v-empty-state v-else
-            icon="mdi-basket-off"
-            :title="$t('emptyBasketTitle')"
-            :text="$t('emptyBasketText')"
-          />
-
-          <v-card-text class="text-right text-h5" v-if="basketStore.itemsInBasket.length > 0">
-            {{ $t('totalPrice') }}: {{ basketStore.getTotalPrice }} €
-          </v-card-text>
+            <v-card-text class="text-right text-h5" v-if="basketStore.itemsInBasket.length > 0">
+              {{ $t('totalPrice') }}: {{ basketStore.getTotalPrice }} €
+            </v-card-text>
+          </template>
 
           <template #actions>
             <outlined-button

software/src/pages/basketPage/orderingDialog.vue

@@ -2,21 +2,52 @@
 import actionDialog from '@/components/actionDialog.vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import outlinedButton from '@/components/outlinedButton.vue';
+import { ModelRef, ref } from 'vue';
+import { useAccountStore } from '@/data/stores/accountStore';
 
 const basketStore = useBasketStore()
+const accountStore = useAccountStore()
+const showDialog: ModelRef<boolean> = defineModel()
+const orderingInProgress = ref(false)
 
-function doOrder() {
-  basketStore.takeOrder()
+async function doOrder() {
+  orderingInProgress.value = true
+  await basketStore.takeOrder()
+  
+  showDialog.value = false
+  orderingInProgress.value = false
 }
 </script>
 
 <template>
   <action-dialog
     :title="$t('ordering.ordering')"
+    icon="mdi-basket-check"
+    v-model="showDialog"
+    max-width="800"
   >
+    <v-row>
+      <v-col>
+        Address
+      </v-col>
+    </v-row>
+    
+    <v-row>
+      <v-col>
+        <v-radio-group>
+          <v-radio
+            v-for="address in accountStore.userAccount.addresses"
+            :value="address"
+            :label="address.street + ' ' + address.houseNumber + ', ' + address.postalCode + ' ' + address.city"
+          />
+        </v-radio-group>
+      </v-col>
+    </v-row>
+
     <template #actions>
       <outlined-button
         @click="doOrder"
+        :loading="orderingInProgress"
       >
         {{ $t('ordering.takeOrder') }}
       </outlined-button>

software/src/pages/basketPage/productsTable.vue

@@ -30,18 +30,22 @@ function editQuantity(basketItem: BasketItemModel) {
 
     <tbody>
       <tr v-for="basketItem in basketStore.itemsInBasket">
-        <td><v-icon :icon="basketItem.categoryIcon" />
-          {{ basketItem.categoryName }}
+        <!-- Category icon and name -->
+        <td><v-icon :icon="basketItem.product.category.icon" />
+          {{ basketItem.product.category.name }}
         </td>
 
+        <!-- Product brand -->
         <td>
-          {{ basketItem.brand }}
+          {{ basketItem.product.brand.name }}
         </td>
 
+        <!-- Name of product -->
         <td>
-          {{ basketItem.name }}
+          {{ basketItem.product.name }}
         </td>
 
+        <!-- Quantity -->
         <td class="text-center">
           {{ basketItem.quantity }}x
           <v-btn
@@ -53,33 +57,35 @@ function editQuantity(basketItem: BasketItemModel) {
           />
         </td>
 
+        <!-- Price per unit -->
         <td class="text-right">
-          <div v-if="basketItem.discount > 0">
+          <div v-if="basketItem.product.discount > 0">
             <strong class="font-weight-bold text-body-1 text-red-lighten-1">
-              {{ calcPrice(basketItem.price, basketItem.discount) }} €
+              {{ calcPrice(basketItem.product.price, basketItem.product.discount) }} €
             </strong>
 
-            <div class="text-decoration-line-through ml-3 mt-1 text-caption">{{ basketItem.price }} €</div>
+            <div class="text-decoration-line-through ml-3 mt-1 text-caption">{{ basketItem.product.price }} €</div>
           </div>
 
           <div v-else>
-            {{ basketItem.price }} €
+            {{ basketItem.product.price }} €
           </div>
         </td>
 
+        <!-- Total price -->
         <td class="text-right">
-          <div v-if="basketItem.discount > 0">
+          <div v-if="basketItem.product.discount > 0">
             <strong class="font-weight-bold text-body-1 text-red-lighten-1">
-              {{ calcPrice(basketItem.price, basketItem.discount, basketItem.quantity) }} €
+              {{ calcPrice(basketItem.product.price, basketItem.product.discount, basketItem.quantity) }} €
             </strong>
 
             <div class="text-decoration-line-through ml-3 mt-1 text-caption">
-              {{ calcPrice(basketItem.price, 0, basketItem.quantity) }} €
+              {{ calcPrice(basketItem.product.price, 0, basketItem.quantity) }} €
             </div>
           </div>
 
           <div v-else>
-            {{ calcPrice(basketItem.price, 0, basketItem.quantity) }} €
+            {{ calcPrice(basketItem.product.price, 0, basketItem.quantity) }} €
           </div>
         </td>
 

software/src/pages/ordersPage/ordersCard.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import cardView from '@/components/cardView.vue';
 import { OrderModel } from '@/data/models/orderModel';
+import { useAccountStore } from '@/data/stores/accountStore';
+
+const accountStore = useAccountStore()
 
 defineProps({
   order: OrderModel
@@ -30,47 +33,49 @@ function formatDateTimeString(string: string) {
 <template>
   <card-view
     :title="$t('orders.orderFrom') + ' ' + formatDateTimeString(order.orderedAt) + ' ' + $t('oclock')"
-    :subtitle="$t('totalPrice') + ': ' + 0 + ' €'"
+    :subtitle="$t('totalPrice') + ': ' + accountStore.getOrderTotalPrice(order.id) + ' €'"
   >
-    <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>
+    <template #withoutContainer>
+      <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>
 
-      <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, 2)" icon="mdi-package-variant">
+          {{ $t('orders.preparingForShipping') }}
+        </v-timeline-item>
 
-      <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-send">
-        {{ $t('orders.shipped') }}
-      </v-timeline-item>
+        <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-truck-fast">
-        {{ $t('orders.inDelivery') }}
-      </v-timeline-item>
+        <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>
+        <v-timeline-item :dot-color="getDotColor(order, 5)" icon="mdi-package-check">
+          {{ $t('orders.delivered') }}
+        </v-timeline-item>
+      </v-timeline>
 
-    <v-table class="bg-surface-light">
-      <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.orderItems">
-          <td>{{ orderItem.quantity }}x</td>
-          <td>{{ orderItem.product.brand.name }}</td>
-          <td>{{ orderItem.product.name }}</td>
-          <td>{{ orderItem.product.price }} €</td>
-        </tr>
-      </tbody>
-    </v-table>
+      <v-table class="bg-surface-light">
+        <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.orderItems">
+            <td>{{ orderItem.quantity }}x</td>
+            <td>{{ orderItem.product.brand.name }}</td>
+            <td>{{ orderItem.product.name }}</td>
+            <td>{{ orderItem.product.price }} €</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </template>
   </card-view>
 </template>

software/src/pages/preferencesPage/systemSetup.vue

@@ -1,19 +1,32 @@
 <script setup lang="ts">
 import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
-import axios from 'axios';
 import cardView from '@/components/cardView.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
 import { ref } from 'vue';
 import confirmDialog from '@/components/confirmDialog.vue';
+import { getServerState, resetDatabase } from '@/data/api/mainApi';
 
 const feedbackStore = useFeedbackStore()
 const showConfirmDialog = ref(false)
+const serverOnline = ref(false)
 
-function resetDb() {
-  axios.get("http://127.0.0.1:3000/api/resetdatabase")
-    .then(res => {
-      if (res.status == 200) {
+getServerState()
+  .then(result => {
+    if (result.status == 200) {
+      serverOnline.value = true
+    } else {
+      serverOnline.value = false
+    }
+  })
+  .catch(error => {
+    serverOnline.value = false
+  })
+
+async function resetDb() {
+  await resetDatabase()
+    .then(result => {
+      if (result.status == 200) {
         feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
       }
     })
@@ -28,13 +41,31 @@ function resetSettings() {
 </script>
 
 <template>
-  <card-view :title="$t('preferences.systemSetup')" prepend-icon="mdi-engine" elevation="8">
+  <card-view
+    :title="$t('preferences.systemSetup')"
+    prepend-icon="mdi-engine"
+  >
+    <v-row>
+      <v-col>
+        {{ $t('serverState') }}:
+        <span v-if="serverOnline" class="text-green">
+          <v-icon icon="mdi-check" />
+          Online
+        </span>
+
+        <span v-else class="text-red">
+          <v-icon icon="mdi-alert-circle" />
+          Offline
+        </span>
+      </v-col>
+    </v-row>
     <v-row>
       <v-col class="d-flex justify-center align-center">
         <outlined-button
           @click="showConfirmDialog = true"
           prepend-icon="mdi-database-refresh"
           color="red"
+          :disabled="!serverOnline"
         >
           {{ $t('preferences.resetDatabase') }}
         </outlined-button>

software/src/pages/productsPage/productDetailsDialog.vue

@@ -2,7 +2,7 @@
 import { VNumberInput } from 'vuetify/labs/VNumberInput'
 import { ModelRef, ref, watch } from 'vue';
 import { useBasketStore } from '@/data/stores/basketStore';
-import { calcProductPrice, productToBasketItem } from '@/scripts/productScripts';
+import { calcPrice } from '@/scripts/productScripts';
 import ActionDialog from '@/components/actionDialog.vue'
 import { ProductModel } from '@/data/models/productModel';
 import outlinedButton from '@/components/outlinedButton.vue';
@@ -20,7 +20,7 @@ const basketStore = useBasketStore()
 const selectedImage = ref("")
 
 function addProductToBasket() {
-  basketStore.addItemToBasket(productToBasketItem(props.product, nrOfArticles.value))
+  basketStore.addItemToBasket(props.product, nrOfArticles.value)
   nrOfArticles.value = 1
   showDialog.value = false
 }
@@ -121,7 +121,7 @@ watch(() => props.product.images, () => {
             <div v-if="product.discount == 0" class="text-h3">{{ product.price }} €</div>
             <div v-else class="d-flex align-center flex-column my-auto">
               <div class="text-h3"> 
-                <span class="text-red-lighten-1"> {{ calcProductPrice(product, nrOfArticles) }} €</span>
+                <span class="text-red-lighten-1"> {{ calcPrice(product.price, product.discount) }} €</span>
                 <span class="text-h6 ml-2 text-decoration-line-through">{{ product.price }} € </span>
                 <span class="text-h6 ml-4 mb-1 bg-red">-{{ product.discount }} %</span>
               </div>