Implement ordering process

software/backend/routes/order.routes.ts

@@ -4,6 +4,7 @@ import { Product } from "../models/product.model";
 import { OrderItem } from "../models/orderItem.model";
 import { Brand } from "../models/brand.model";
 import { Category } from "../models/category.model";
+import { Sequelize } from "sequelize-typescript";
 
 export const order = Router()
 
@@ -36,25 +37,20 @@ order.get("/:id", (req: Request, res: Response) => {
 
 // Place a new order
 order.post("/", (req: Request, res: Response) => {
-  let totalPrice = 0
-
   Order.create(req.body)
     .then(async order => {
       for (let orderItem of req.body.orderItems) {
         OrderItem.create({
-          "orderId": order.id,
-          "quantity": orderItem.quantity,
-          "orderPrice": orderItem.orderPrice,
-          "productId": orderItem.productId
+          orderId: order.id,
+          quantity: orderItem.quantity,
+          orderPrice: orderItem.orderPrice,
+          productId: orderItem.productId
         })
 
-        totalPrice += orderItem.quantity * orderItem.orderPrice
-
-        Order.update({
-          totalPrice: totalPrice
-        }, {
-          where: { id: order.id }
-        })
+        Product.decrement(
+          "inStock", 
+          { where: { id: orderItem.productId } }
+        )
       }
 
       // Created

software/backend/scripts/databaseHelper.ts

@@ -20,11 +20,17 @@ import brands from "./../data/brands.json"
  * Delete all datasets in every database table
  */
 export function deleteAllTables() {
-  Category.destroy({ truncate: true })
-  Order.destroy({ truncate: true })
   OrderItem.destroy({truncate: true })
+  Order.destroy({ truncate: true })
+
   Product.destroy({ truncate: true })
+  Brand.destroy({ truncate: true })
+  Category.destroy({ truncate: true })
+  
+  Address.destroy({ truncate: true })
+  Payment.destroy({ truncate: true })
   Account.destroy({ truncate: true })
+  AccountRole.destroy({ truncate: true})
 }
 
 /**

software/backend/server.ts

@@ -20,6 +20,12 @@ app.use(bodyParser.json())
 // Create database and tables
 startDatabase()
 
+// Add delay for more realistic response times
+app.use((req, res, next) => {
+  console.log(123)
+  setTimeout(next, Math.floor((Math.random () * 4000) + 100))
+})
+
 // Routes
 app.use("/api", api)
 app.use("/categories", category)

software/src/data/api/mainApi.ts

@@ -0,0 +1,12 @@
+import axios from "axios"
+
+const BASE_URL = "http://localhost:3000/api"
+
+export function getServerState() {
+  return axios.get(BASE_URL)
+
+}
+
+export function resetDatabase() {
+  return axios.get(BASE_URL + "/resetdatabase")
+}

software/src/data/api/orderApi.ts

@@ -1,6 +1,7 @@
 import axios from "axios"
 import { OrderModel } from "../models/orderModel"
 import { BasketItemModel } from "../models/basketItemModel"
+import { calcPrice } from "@/scripts/productScripts"
 
 const BASE_URL = "http://localhost:3000/orders"
 
@@ -9,8 +10,18 @@ export async function getUserOrders(userId: number) {
 }
 
 export async function addOrder(accountId: number, basketItems: Array<BasketItemModel>) {
-  return axios.post(BASE_URL, {
-    "accountId": accountId,
-    "orderItem": basketItems
+  let orderItems = []
+
+  for (let basketItem of basketItems) {
+    orderItems.push({
+      productId: basketItem.product.id,
+      quantity: basketItem.quantity,
+      orderPrice: calcPrice(basketItem.product.price, basketItem.product.discount)
+    })
+  }
+
+  return axios.post(BASE_URL, {
+    accountId: accountId,
+    orderItems: orderItems
   })
 }

software/src/data/models/basketItemModel.ts

@@ -4,4 +4,9 @@ export class BasketItemModel {
   id: number = -1
   quantity: number = 1
   product: ProductModel = new ProductModel()
+
+  constructor(quantity: number, product: ProductModel) {
+    this.quantity = quantity
+    this.product = product
+  }
 }

software/src/data/models/orderItemModel.ts

@@ -1,8 +1,8 @@
 import { ProductModel } from "./productModel"
 
-export class OrderedItemModel {
+export class OrderItemModel {
   orderId: number = -1
-  product: ProductModel
   quantity: number = 1
-  totalPrice: number = 0
+  orderPrice: number = 0
+  product: ProductModel
 }

software/src/data/models/orderModel.ts

@@ -1,8 +1,9 @@
-import { OrderedItemModel } from "./orderedItemModel"
+import { OrderItemModel } from "./orderItemModel"
 
 export class OrderModel {
+  id: number
   accountId: number
   shippingProgress: number
-  orderItems: Array<OrderedItemModel>
+  orderItems: Array<OrderItemModel>
   orderedAt: string
 }

software/src/data/stores/accountStore.ts

@@ -6,6 +6,7 @@ import { useFeedbackStore } from "./feedbackStore";
 import { loginAccount, registerAccount, updateAccount } from "../api/accountApi";
 import { getUserOrders } from "../api/orderApi";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
+import { calcPrice } from "@/scripts/productScripts";
 
 export const useAccountStore = defineStore("accountStore", {
   state: () => ({
@@ -20,18 +21,12 @@ export const useAccountStore = defineStore("accountStore", {
       await loginAccount(username, password)
         .then(async result => {
           this.userAccount = result.data
-          this.loggedIn = true
 
           feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINSUCCESSFUL)
 
-          await getUserOrders(result.data.id)
-            .then(result => {
-              this.orders = result.data
-            })
+          this.refreshOrders()
         })
         .catch(error => {
-          this.loggedIn = false
-
           if (error.status == 400) {
             feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINERROR)
           } else if (error.status == 401) {
@@ -76,6 +71,24 @@ export const useAccountStore = defineStore("accountStore", {
       this.loggedIn = false
       
       feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL)
+    },
+
+    async refreshOrders() {
+      await getUserOrders(this.userAccount.id)
+        .then(result => {
+          this.orders = result.data
+        })
+    },
+
+    getOrderTotalPrice(orderId: number) {
+      let totalPrice = 0
+      let order: OrderModel = this.orders.find((order: OrderModel) => order.id == orderId)
+      
+      for (let item of order.orderItems) {
+        totalPrice += calcPrice(item.orderPrice, 0, item.quantity)
+      }
+
+      return Math.round(totalPrice * 100) / 100
     }
   }
 })

software/src/data/stores/basketStore.ts

@@ -1,11 +1,13 @@
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
-import { calcProductPrice } from "@/scripts/productScripts";
+import { calcPrice } from "@/scripts/productScripts";
 import { BasketItemModel } from "../models/basketItemModel";
 import { useFeedbackStore } from "./feedbackStore";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
 import { addOrder } from "../api/orderApi";
 import { useAccountStore } from "./accountStore";
+import { ProductModel } from "../models/productModel";
+import { useProductStore } from "./productStore";
 
 export const useBasketStore = defineStore('basketStore', {
   state: () => ({
@@ -13,11 +15,16 @@ export const useBasketStore = defineStore('basketStore', {
   }),
 
   getters: {
+    /**
+     * Calculate price of all items in the basket with discount
+     * 
+     * @returns Total price of basket
+     */
     getTotalPrice() {
       let result = 0
 
       for (let item of this.itemsInBasket) {
-        result += calcProductPrice(item, item.quantity)
+        result += calcPrice(item.product.price, item.product.discount, item.quantity)
       }
 
       return Math.round(result * 100) / 100
@@ -25,6 +32,11 @@ export const useBasketStore = defineStore('basketStore', {
   },
 
   actions: {
+    /**
+     * Remove an item from the basket
+     * 
+     * @param item Item to remove
+     */
     removeItemFromBasket(item: BasketItemModel) {
       const feedbackStore = useFeedbackStore()
       feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTREMOVED)
@@ -34,29 +46,39 @@ export const useBasketStore = defineStore('basketStore', {
       )
     },
 
-    addItemToBasket(item: BasketItemModel) {
+    /**
+     * Add an item to the basket. If the product is already in the basket, the quantity will increase
+     * 
+     * @param product Product to add
+     * @param quantity Quantity of the product
+     */
+    addItemToBasket(product: ProductModel, quantity: number) {
       const feedbackStore = useFeedbackStore()
       feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTADDED)
 
       // Product is already in the basket, increase number of items
-      if (this.itemsInBasket.find((basketItem) => basketItem.productId == item.product.id)) {
-        this.itemsInBasket.find((basketItem) => 
-          basketItem.productId == item.product.id).quantity += item.quantity
+      if (this.itemsInBasket.find((basketItem: BasketItemModel) => 
+        basketItem.product.id == product.id))
+      {
+        this.itemsInBasket.find((basketItem: BasketItemModel) => 
+          basketItem.product.id == product.id).quantity += quantity
       } else {
-        this.itemsInBasket.push(item)
+        this.itemsInBasket.push(new BasketItemModel(quantity, product))
       }
     },
 
-    takeOrder() {
+    /**
+     * Take an order to the server. Sends all articles in the basket and creates an order entry in the backend database
+     */
+    async takeOrder() {
       const accountStore = useAccountStore()
-// 
-      // const order = new OrderModel()
-      // order.accountId = userStore.userAccount.id
-      // order.orderItem = this.itemsInBasket
-// 
-      // console.log(order)
+      const productStore = useProductStore()
 
-      addOrder(accountStore.userAccount.id, this.itemsInBasket)
+      await addOrder(accountStore.userAccount.id, this.itemsInBasket)
+      this.itemsInBasket = []
+
+      await accountStore.refreshOrders()
+      await productStore.fetchAllProducts()
     }
   }
 })

software/src/locales/de.json

@@ -22,8 +22,7 @@
     "resetConfirm": "Soll die Datenbank wirklich zurückgesetzt werden?"
   },
   "product": {
-    "product": "Produkt",
-    "products": "Produkte",
+    "product": "Produkt | Produkte",
     "productName": "Produkt Name",
     "brand": "Marke",
     "productPrice": "Einzelpreis",
@@ -115,5 +114,6 @@
     "exerciseGroup2": "Aufgabengruppe 2: Broken Access Control",
     "exerciseGroup3": "Aufgabengruppe 3: Cross-Site Scripting (XSS)",
     "exercise": "Aufgabe {0}"
-  }
+  },
+  "serverState": "Server Status"
 }

software/src/locales/en.json

@@ -22,8 +22,7 @@
     "resetConfirm": "Really reset the database?"
   },
   "product": {
-    "product": "Product",
-    "products": "Products",
+    "product": "Product | Products",
     "productName": "Product name",
     "brand": "Brand",
     "productPrice": "Unit price",
@@ -115,5 +114,6 @@
     "exerciseGroup2": "Exercise Group 2: Broken Access Control",
     "exerciseGroup3": "Exercise Group 3: Cross-Site Scripting (XSS)",
     "exercise": "Exercise {0}"
-  }
+  },
+  "serverState": "Server State:"
 }

software/src/pages/basketPage/index.vue

@@ -22,18 +22,18 @@ 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" />
 
+            <!-- Display empty state if card is empty -->
             <v-empty-state v-else
               icon="mdi-basket-off"
               :title="$t('emptyBasketTitle')"
@@ -43,6 +43,7 @@ const showOrderingDialog = ref()
             <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,8 +33,9 @@ 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) + ' €'"
   >
+    <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') }}
@@ -72,5 +76,6 @@ function formatDateTimeString(string: string) {
           </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>

software/src/scripts/productScripts.ts

@@ -1,11 +1,3 @@
-import { BasketItemModel } from "@/data/models/basketItemModel";
-import { CategoryModel } from "@/data/models/categoryModel";
-import { ProductModel } from "@/data/models/productModel";
-
-export function calcProductPrice(product: ProductModel, quantity: number = 1): number {
-  return calcPrice(product.price, product.discount, quantity)
-}
-
 /**
  * Calculate a price based on parameters
  * 
@@ -18,27 +10,3 @@ export function calcProductPrice(product: ProductModel, quantity: number = 1): n
 export function calcPrice(price: number, discount: number = 0, quantity: number = 1): number {
   return Math.round(quantity * price * ((100 - discount) / 100) * 100) / 100
 }
-
-/**
- * Convert a ProductModel to a BasketModel
- * 
- * @param product ProductModel to convert
- * @param productCategory Category of the product
- * @param quantity Number of units
- * 
- * @returns BasketItemModel
- */
-export function productToBasketItem(product: ProductModel, quantity: number): BasketItemModel {
-  let result = new BasketItemModel()
-
-  result.productId = product.id
-  result.quantity = quantity
-  result.price = product.price
-  result.brand = product.brand
-  result.discount = product.discount
-  result.name = product.name
-  result.categoryName = product.category.name
-  result.categoryIcon = product.category.icon
-
-  return result
-}