From c54e6f3743b709ea50ccddd868abc85c5a5598ad Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Sat, 5 Oct 2024 20:23:13 +0200
Subject: [PATCH] Tickets moveable to basket, Basket shows tickets, removable

---
 software/backend/routes/concert.routes.ts     |  10 +-
 software/src/components/cardView.vue          |  61 +++--------
 .../navigation/navigationAppendItems.vue      |  13 ++-
 .../components/pageParts/concertListItem.vue  |  26 ++++-
 .../components/seatPlanMap/seatGroupSheet.vue |   9 +-
 .../components/seatPlanMap/seatGroupTable.vue |   4 +-
 .../components/seatPlanMap/seatPlanMap.vue    |  16 +--
 .../components/seatPlanMap/standingArea.vue   |   7 +-
 software/src/data/models/acts/concertModel.ts |  25 ++++-
 .../data/models/ordering/basketItemModel.ts   |  10 +-
 .../data/models/ordering/selectedSeatModel.ts |   7 +-
 software/src/data/stores/basketStore.ts       |  40 +++----
 software/src/locales/de.json                  |   4 +-
 software/src/locales/en.json                  |   4 +-
 software/src/pages/basketPage/index.vue       |  33 +++---
 .../src/pages/basketPage/productsTable.vue    | 103 ------------------
 .../src/pages/basketPage/ticketsTable.vue     |  71 ++++++++++++
 .../events/bandDetailPage/concertSection.vue  |  89 +++++++--------
 .../src/pages/events/bandDetailPage/index.vue |  55 +---------
 .../pages/events/ticketOrderPage/index.vue    |  44 ++++++--
 software/src/scripts/concertScripts.ts        |   4 +-
 21 files changed, 301 insertions(+), 334 deletions(-)
 delete mode 100644 software/src/pages/basketPage/productsTable.vue
 create mode 100644 software/src/pages/basketPage/ticketsTable.vue

diff --git a/software/backend/routes/concert.routes.ts b/software/backend/routes/concert.routes.ts
index 32cbc01..9ae1c5b 100644
--- a/software/backend/routes/concert.routes.ts
+++ b/software/backend/routes/concert.routes.ts
@@ -7,13 +7,21 @@ import { SeatGroup } from "../models/locations/seatGroup.model";
 import { SeatRow } from "../models/locations/seatRow.model";
 import { Seat } from "../models/locations/seat.model";
 import { Ticket } from "../models/ordering/ticket.model";
+import { Band } from "../models/acts/band.model";
 
 export const concert = Router()
 
 concert.get("/:id", (req: Request, res: Response) => {
   Concert.findByPk(req.params.id, {
     include: [ 
-      Event,
+      {
+        model: Event,
+        include: [
+          {
+            model: Band
+          }
+        ]
+      },
       {
         model: Location,
         include: [
diff --git a/software/src/components/cardView.vue b/software/src/components/cardView.vue
index 9000a50..45c57e2 100644
--- a/software/src/components/cardView.vue
+++ b/software/src/components/cardView.vue
@@ -7,57 +7,28 @@ defineProps({
   },
   subtitle: {
     type: String,
-  },
-  prependImage: {
-    type: String,
-    default: ""
   }
 })
 </script>
 
 <template>
-  <v-card v-if="prependImage != ''">
-    <v-row>
-      <v-col cols="3" class="pr-0">
-        <v-img
-          :src="prependImage"
-          height="220"
-          cover
-        >
-          <template #placeholder>
-            <v-skeleton-loader
-              type="image"
-              height="300"
-              cover
-            />
-          </template>
-        </v-img>
-      </v-col>
-
-      <v-col class="pl-0" >
-        <v-card-title>
-          {{ title }}
-        </v-card-title>
-
-        <v-card-subtitle>
-          {{ subtitle }}
-        </v-card-subtitle>
-
-        <div class="pa-4">
+  <v-card
+    variant="tonal"
+    :prepend-icon="icon"
+    :title="title"
+    :subtitle="subtitle"
+  >
+    <v-container class="pt-0">
+      <v-row>
+        <v-col >
           <slot></slot>
-        </div>
-
-        <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
-          <v-spacer />
-          <slot name="actions"></slot>
-        </v-card-actions>
-      </v-col>
-    </v-row>
-  </v-card>
-
-  <v-card v-else :title="title" :prepend-icon="icon">
-    <v-container>
-      <slot></slot>
+        </v-col>
+      </v-row>
     </v-container>
+    
+    <v-card-actions v-if="$slots.actions">
+      <v-spacer />
+      <slot name="actions"></slot>
+    </v-card-actions>
   </v-card>
 </template>
diff --git a/software/src/components/navigation/navigationAppendItems.vue b/software/src/components/navigation/navigationAppendItems.vue
index 3c40c80..8b097bf 100644
--- a/software/src/components/navigation/navigationAppendItems.vue
+++ b/software/src/components/navigation/navigationAppendItems.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/data/stores/accountStore';
+import { useBasketStore } from '@/data/stores/basketStore';
 import router from '@/plugins/router';
 
 const accountStore = useAccountStore()
+const basketStore = useBasketStore()
 
 function startSearch() {
   // todo
@@ -23,7 +25,16 @@ function startSearch() {
   <v-btn v-if="accountStore.userAccount.id == 0" variant="plain" icon="mdi-account" to="/account/login" />
   <v-btn v-else variant="plain" icon="mdi-account" to="/account/home" />
 
-  <v-btn variant="plain" icon="mdi-cart" to="/basket" />
+  <div>
+    <v-badge
+      :content="basketStore.itemsInBasket.reduce((tot, item) => {
+        return tot + item.seats.length
+      }, 0)"
+      color="red" offset-x="8" offset-y="8">
+      <v-btn variant="plain" icon="mdi-cart" to="/basket" />
+    </v-badge>
+  </div>
+
   <v-btn variant="plain" icon="mdi-help" to="/system/help" />
   <v-btn variant="plain" icon="mdi-cog" to="/system/preferences"/>
 </template>
\ No newline at end of file
diff --git a/software/src/components/pageParts/concertListItem.vue b/software/src/components/pageParts/concertListItem.vue
index d1f7ea6..ece4c55 100644
--- a/software/src/components/pageParts/concertListItem.vue
+++ b/software/src/components/pageParts/concertListItem.vue
@@ -5,7 +5,19 @@ defineProps({
   image: String,
   title: String,
   description: String,
-  loading: Boolean
+  loading: Boolean,
+  appendIcon: {
+    type: String,
+    default: "mdi-ticket"
+  },
+  appendIconColor: {
+    type: String,
+    default: "secondary"
+  },
+  link: {
+    type: Boolean,
+    default: true
+  }
 })
 </script>
 
@@ -15,6 +27,7 @@ defineProps({
       <card-with-left-image
         :title="title"
         :image="'http://localhost:3000/static/' + image"
+        :link="link"
       >
         <div class="text-body-1 font-weight-bold">
           <div v-if="!$slots.description">
@@ -29,8 +42,8 @@ defineProps({
         <template #append>
           <div>
             <v-icon
-              icon="mdi-ticket"
-              color="secondary"
+              :icon="appendIcon"
+              :color="appendIconColor"
               size="x-large"
             />
           </div>
@@ -48,4 +61,9 @@ defineProps({
       </card-with-left-image>
     </v-col>
   </v-row>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.v-card--variant-tonal {
+}
+</style>
\ No newline at end of file
diff --git a/software/src/components/seatPlanMap/seatGroupSheet.vue b/software/src/components/seatPlanMap/seatGroupSheet.vue
index b3b4655..e590539 100644
--- a/software/src/components/seatPlanMap/seatGroupSheet.vue
+++ b/software/src/components/seatPlanMap/seatGroupSheet.vue
@@ -3,9 +3,11 @@ import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupTable from './seatGroupTable.vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import standingArea from './standingArea.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 defineProps({
   seatGroup: SeatGroupModel,
+  concert: ConcertModel,
   backgroundColor: String
 })
 
@@ -15,6 +17,7 @@ defineProps({
 <template>
   <standing-area
     :seat-group="seatGroup"
+    :concert="concert"
     :background-color="backgroundColor"
     v-if="seatGroup != undefined && seatGroup.standingArea"
   />
@@ -32,7 +35,11 @@ defineProps({
 
     <v-row>
       <v-col class="d-flex justify-center align-center">
-        <seat-group-table :seat-rows="seatGroup.seatRows" :seat-group="seatGroup"/>
+        <seat-group-table
+          :seat-rows="seatGroup.seatRows"
+          :seat-group="seatGroup"
+          :concert="concert"
+        />
       </v-col>
     </v-row>
   </v-sheet>
diff --git a/software/src/components/seatPlanMap/seatGroupTable.vue b/software/src/components/seatPlanMap/seatGroupTable.vue
index 1432d9e..10dff53 100644
--- a/software/src/components/seatPlanMap/seatGroupTable.vue
+++ b/software/src/components/seatPlanMap/seatGroupTable.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ConcertModel } from '@/data/models/acts/concertModel';
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import { SeatModel } from '@/data/models/locations/seatModel';
 import { SeatRowModel } from '@/data/models/locations/seatRowModel';
@@ -9,6 +10,7 @@ const basketStore = useBasketStore()
 
 let props = defineProps({
   seatRows: Array<SeatRowModel>,
+  concert: ConcertModel,
   seatGroup: SeatGroupModel
 })
 
@@ -19,7 +21,7 @@ function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
 
   if (storeSeat == undefined) {
     clickedSeat.state = 2
-    basketStore.selectedSeats.push(new SelectedSeatModel(clickedSeat, seatRow.row, props.seatGroup.name))
+    basketStore.selectedSeats.push(new SelectedSeatModel(clickedSeat, seatRow.row, props.seatGroup.name, props.concert))
   } else {
     clickedSeat.state = 0
     basketStore.selectedSeats = basketStore.selectedSeats.filter(seat => 
diff --git a/software/src/components/seatPlanMap/seatPlanMap.vue b/software/src/components/seatPlanMap/seatPlanMap.vue
index 668a098..1d52733 100644
--- a/software/src/components/seatPlanMap/seatPlanMap.vue
+++ b/software/src/components/seatPlanMap/seatPlanMap.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupSheet from './seatGroupSheet.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 let props = defineProps({
-  seatGroups: Array<SeatGroupModel>
+  seatGroups: Array<SeatGroupModel>,
+  concert: ConcertModel
 })
 
 function findSeatCategory(name: string): SeatGroupModel {
@@ -39,29 +41,29 @@ const seatGroupF = findSeatCategory("F")
 
   <v-row>
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupC" background-color="cyan-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupC" :concert="concert" background-color="cyan-darken-4" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupA" background-color="grey" />
+      <seat-group-sheet :seat-group="seatGroupA" :concert="concert" background-color="grey" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupB" background-color="cyan-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupB" :concert="concert" background-color="cyan-darken-4" />
     </v-col>
   </v-row>
 
   <v-row>
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupF" background-color="deep-purple-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupF" :concert="concert" background-color="deep-purple-darken-4" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupD" background-color="indigo-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupD" :concert="concert" background-color="indigo-darken-4" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupE" background-color="deep-purple-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupE" :concert="concert" background-color="deep-purple-darken-4" />
     </v-col>
   </v-row>
 </template>
\ No newline at end of file
diff --git a/software/src/components/seatPlanMap/standingArea.vue b/software/src/components/seatPlanMap/standingArea.vue
index 3dfb7c3..7aaff0b 100644
--- a/software/src/components/seatPlanMap/standingArea.vue
+++ b/software/src/components/seatPlanMap/standingArea.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
+import { ConcertModel } from '@/data/models/acts/concertModel';
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
-import { SeatModel } from '@/data/models/locations/seatModel';
-import { SeatRowModel } from '@/data/models/locations/seatRowModel';
 import { SelectedSeatModel } from '@/data/models/ordering/selectedSeatModel';
 import { useBasketStore } from '@/data/stores/basketStore';
+import { concert } from 'backend/routes/concert.routes';
 
 const basketStore = useBasketStore()
 
 let props = defineProps({
   seatGroup: SeatGroupModel,
+  concert: ConcertModel,
   backgroundColor: String
 })
 
@@ -19,7 +20,7 @@ function handleSeatClick() {
 
   freeSeat.state = 2
 
-  basketStore.selectedSeats.push(new SelectedSeatModel(freeSeat, 0, props.seatGroup.name))
+  basketStore.selectedSeats.push(new SelectedSeatModel(freeSeat, 0, props.seatGroup.name, props.concert))
 }
 </script>
 
diff --git a/software/src/data/models/acts/concertModel.ts b/software/src/data/models/acts/concertModel.ts
index b6f578c..0b40866 100644
--- a/software/src/data/models/acts/concertModel.ts
+++ b/software/src/data/models/acts/concertModel.ts
@@ -1,9 +1,24 @@
 import { LocationModel } from "./../locations/locationModel"
+import { BandModel } from "./bandModel"
+import { EventModel } from "./eventModel"
 
 export class ConcertModel {
-  id: number
-  inStock: number
-  date: string
-  price: number
-  location: LocationModel
+  id: number = 0
+  inStock: number = 0
+  date: string = ""
+  price: number = 0
+  location: LocationModel = new LocationModel()
+  event: {
+    id: number
+    name: string
+    offered: boolean
+    image: string
+    band: BandModel
+  } = {
+    id: 0,
+    name: "",
+    offered: true,
+    image: "",
+    band: new BandModel()
+  }
 }
\ No newline at end of file
diff --git a/software/src/data/models/ordering/basketItemModel.ts b/software/src/data/models/ordering/basketItemModel.ts
index 8195339..e4dc6ad 100644
--- a/software/src/data/models/ordering/basketItemModel.ts
+++ b/software/src/data/models/ordering/basketItemModel.ts
@@ -1,12 +1,14 @@
 import { ConcertModel } from "../acts/concertModel"
+import { SeatModel } from "../locations/seatModel"
 
 export class BasketItemModel {
-  id: number = -1
-  quantity: number = 1
   concert: ConcertModel = new ConcertModel()
+  seats: Array<SeatModel> = []
+  price: number
 
-  constructor(quantity: number, concert: ConcertModel) {
-    this.quantity = quantity
+  constructor(concert: ConcertModel, seat: SeatModel, price: number) {
     this.concert = concert
+    this.seats = [ seat ]
+    this.price = price
   }
 }
\ No newline at end of file
diff --git a/software/src/data/models/ordering/selectedSeatModel.ts b/software/src/data/models/ordering/selectedSeatModel.ts
index ac23b97..2574f89 100644
--- a/software/src/data/models/ordering/selectedSeatModel.ts
+++ b/software/src/data/models/ordering/selectedSeatModel.ts
@@ -1,14 +1,17 @@
+import { ConcertModel } from "../acts/concertModel";
 import { SeatModel } from "../locations/seatModel";
-import { SeatRowModel } from "../locations/seatRowModel";
 
 export class SelectedSeatModel {
   seat: SeatModel
   seatRow: number
   seatGroupName: string
+  concert: ConcertModel
+  price: number
 
-  constructor(seat: SeatModel, seatRow: number, seatGroupName: string) {
+  constructor(seat: SeatModel, seatRow: number, seatGroupName: string, concert: ConcertModel) {
     this.seat = seat
     this.seatRow = seatRow
     this.seatGroupName = seatGroupName
+    this.concert = concert
   }
 }
\ No newline at end of file
diff --git a/software/src/data/stores/basketStore.ts b/software/src/data/stores/basketStore.ts
index d6bf833..ac406a0 100644
--- a/software/src/data/stores/basketStore.ts
+++ b/software/src/data/stores/basketStore.ts
@@ -3,12 +3,11 @@ import { useLocalStorage } from "@vueuse/core";
 import { BasketItemModel } from "../models/ordering/basketItemModel";
 import { useFeedbackStore } from "./feedbackStore";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
-import { ConcertModel } from "../models/acts/concertModel";
 import { AddressModel } from "../models/user/addressModel";
 import { PaymentModel } from "../models/user/paymentModel";
-import { SeatModel } from "../models/locations/seatModel";
 import { ref } from "vue";
 import { SelectedSeatModel } from "../models/ordering/selectedSeatModel";
+import { calcPrice } from "@/scripts/concertScripts";
 
 export const useBasketStore = defineStore('basketStore', {
   state: () => ({
@@ -27,9 +26,9 @@ export const useBasketStore = defineStore('basketStore', {
     getTotalPrice() {
       let result = 0
 
-      // for (let item of this.itemsInBasket) {
-      //   result += calcPrice(item.product.price, item.product.discount, item.quantity)
-      // }
+      for (let item of this.itemsInBasket) {
+        result += calcPrice(item.price, item.seats.length)
+      }
 
       return Math.round(result * 100) / 100
     }
@@ -50,25 +49,22 @@ export const useBasketStore = defineStore('basketStore', {
       )
     },
 
-    /**
-     * Add an item to the basket. If the product is already in the basket, the quantity will increase
-     * 
-     * @param concert Concert to add
-     * @param quantity Quantity of the product
-     */
-    addItemToBasket(concert: ConcertModel, quantity: number) {
-      const feedbackStore = useFeedbackStore()
-      feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTADDED)
+    moveSeatSelectionsToBasket() {
+      for (let selectedSeat of this.selectedSeats) {
+        let itemInBasket: BasketItemModel = this.itemsInBasket.find((basketItem: BasketItemModel) => {
+          return basketItem.concert.id == selectedSeat.concert.id
+        })
 
-      // Product is already in the basket, increase number of items
-      if (this.itemsInBasket.find((basketItem: BasketItemModel) => 
-        basketItem.concert.id == concert.id))
-      {
-        this.itemsInBasket.find((basketItem: BasketItemModel) => 
-          basketItem.concert.id == concert.id).quantity += quantity
-      } else {
-        this.itemsInBasket.push(new BasketItemModel(quantity, concert))
+        if (itemInBasket != undefined) {
+          itemInBasket.seats.push(selectedSeat.seat)
+        } else {
+          this.itemsInBasket.push(
+            new BasketItemModel(selectedSeat.concert, selectedSeat.seat, selectedSeat.concert.price)
+          )
+        }
       }
+
+      this.selectedSeats = []
     },
 
     /**
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index 90197a6..b6fa5cc 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -149,5 +149,7 @@
   "image": "Foto | Fotos",
   "seatSelection": "Sitzauswahl",
   "loading": "Lade",
-  "orderSummary": "Bestellübersicht"
+  "orderSummary": "Bestellübersicht",
+  "basket": "Warenkorb",
+  "event": "Event"
 }
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index bf354b5..6c7e07d 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -149,5 +149,7 @@
   "image": "Image | Images",
   "seatSelection": "Select seat",
   "loading": "Loading",
-  "orderSummary": "Order Summary"
+  "orderSummary": "Order Summary",
+  "basket": "Basket",
+  "event": "Event"
 }
diff --git a/software/src/pages/basketPage/index.vue b/software/src/pages/basketPage/index.vue
index bfc3181..0754c40 100644
--- a/software/src/pages/basketPage/index.vue
+++ b/software/src/pages/basketPage/index.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { useBasketStore } from '@/data/stores/basketStore';
-import productsTable from './productsTable.vue';
 import cardView from '@/components/cardView.vue';
 import orderingDialog from './orderingDialog.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
 import { ref } from 'vue';
 import { useAccountStore } from '@/data/stores/accountStore';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
+import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
+import ticketsTable from './ticketsTable.vue';
 
 const basketStore = useBasketStore()
 const accountStore = useAccountStore()
@@ -17,27 +19,28 @@ const showOrderingDialog = ref()
     <v-row>
       <v-col>
         <card-view
-          :title="$t('menu.basket')"
+          :title="$t('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 items if basket is not empty -->
+          <div v-if="basketStore.itemsInBasket.length > 0">
+            <tickets-table />
+          </div>
 
-            <!-- Display empty state if card is empty -->
-            <v-empty-state v-else
-              icon="mdi-basket-off"
-              :title="$t('emptyBasketTitle')"
-              :text="$t('emptyBasketText')"
-            />
+          <!-- Display empty state if card is empty -->
+          <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>
-          </template>
+          <v-card-text class="text-right text-h5" v-if="basketStore.itemsInBasket.length > 0">
+            {{ $t('totalPrice') }}: {{ (basketStore.getTotalPrice).toFixed(2) }} €
+          </v-card-text>
+          
 
           <template #actions>
             <outlined-button
diff --git a/software/src/pages/basketPage/productsTable.vue b/software/src/pages/basketPage/productsTable.vue
deleted file mode 100644
index a5b7634..0000000
--- a/software/src/pages/basketPage/productsTable.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import { BasketItemModel } from '@/data/models/basketItemModel';
-import { useBasketStore } from '@/data/stores/basketStore';
-
-const basketStore = useBasketStore()
-
-function removeFromBasket(basketItem: BasketItemModel) {
-  basketStore.removeItemFromBasket(basketItem)
-}
-
-function editQuantity(basketItem: BasketItemModel) {
-  // todo
-}
-</script>
-
-<template>
-  <v-table>
-    <thead>
-      <tr>
-        <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('product.productPrice') }}</th>
-        <th class="text-right">{{ $t('totalPrice') }}</th>
-        <th></th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr v-for="basketItem in basketStore.itemsInBasket">
-        <!-- Category icon and name -->
-        <td><v-icon :icon="basketItem.concert.category.icon" />
-          {{ basketItem.concert.category.name }}
-        </td>
-
-        <!-- Product brand -->
-        <td>
-          {{ basketItem.concert.brand.name }}
-        </td>
-
-        <!-- Name of product -->
-        <td>
-          {{ basketItem.concert.name }}
-        </td>
-
-        <!-- Quantity -->
-        <td class="text-center">
-          {{ basketItem.quantity }}x
-          <v-btn
-            icon="mdi-pencil" 
-            @click="editQuantity(basketItem)" 
-            color="orange" 
-            variant="text"
-            flat 
-          />
-        </td>
-
-        <!-- Price per unit -->
-        <!-- <td class="text-right">
-          <div v-if="basketItem.product.discount > 0">
-            <strong class="font-weight-bold text-body-1 text-red-lighten-1">
-              {{ calcPrice(basketItem.product.price, basketItem.product.discount) }} €
-            </strong>
-
-            <div class="text-decoration-line-through ml-3 mt-1 text-caption">{{ basketItem.product.price }} €</div>
-          </div>
-
-          <div v-else>
-            {{ basketItem.product.price }} €
-          </div>
-        </td> -->
-
-        <!-- Total price -->
-        <td class="text-right">
-          <div v-if="basketItem.concert.discount > 0">
-            <strong class="font-weight-bold text-body-1 text-red-lighten-1">
-              {{ calcPrice(basketItem.concert.price, basketItem.concert.discount, basketItem.quantity) }} €
-            </strong>
-
-            <div class="text-decoration-line-through ml-3 mt-1 text-caption">
-              {{ calcPrice(basketItem.concert.price, 0, basketItem.quantity) }} €
-            </div>
-          </div>
-
-          <div v-else>
-            {{ calcPrice(basketItem.concert.price, 0, basketItem.quantity) }} €
-          </div>
-        </td>
-
-        <td>
-          <v-btn
-            icon="mdi-delete"
-            @click="removeFromBasket(basketItem)"
-            color="red"
-            variant="text"
-            flat
-          />
-        </td>
-      </tr>
-    </tbody>
-  </v-table>
-</template>
\ No newline at end of file
diff --git a/software/src/pages/basketPage/ticketsTable.vue b/software/src/pages/basketPage/ticketsTable.vue
new file mode 100644
index 0000000..c2c4964
--- /dev/null
+++ b/software/src/pages/basketPage/ticketsTable.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useBasketStore } from '@/data/stores/basketStore';
+import { BasketItemModel } from '@/data/models/ordering/basketItemModel';
+import { calcPrice } from '@/scripts/concertScripts';
+
+const basketStore = useBasketStore()
+
+function removeFromBasket(basketItem: BasketItemModel) {
+  basketStore.removeItemFromBasket(basketItem)
+}
+
+function editQuantity(basketItem: BasketItemModel) {
+  // todo
+}
+</script>
+
+<template>
+  <v-table>
+    <thead>
+      <tr>
+        <th>{{ $t('band') }}</th>
+        <th>{{ $t('event') }}</th>
+        <th class="text-center">{{ $t('quantity') }}</th>
+        <th class="text-right">{{ $t('product.productPrice') }}</th>
+        <th class="text-right">{{ $t('totalPrice') }}</th>
+        <th></th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="basketItem in basketStore.itemsInBasket">
+        <!-- Band name -->
+        <td>
+          {{ basketItem.concert.event.band.name }}
+        </td>
+
+        <!-- Event name -->
+        <td>
+          {{ basketItem.concert.event.name }}
+        </td>
+
+        <!-- Quantity -->
+        <td class="text-center">
+          {{ basketItem.seats.length }}x
+        </td>
+
+        <!-- Price per event -->
+        <td class="text-right">
+          <div v-if="basketItem.seats">
+            {{ basketItem.price }} €
+          </div>
+        </td>
+
+        <!-- Total price -->
+        <td class="text-right">
+          {{ (calcPrice(basketItem.concert.price, basketItem.seats.length)).toFixed(2) }} €
+        </td>
+
+        <td>
+          <v-btn
+            icon="mdi-delete"
+            @click="removeFromBasket(basketItem)"
+            color="red"
+            variant="text"
+            flat
+          />
+        </td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
\ No newline at end of file
diff --git a/software/src/pages/events/bandDetailPage/concertSection.vue b/software/src/pages/events/bandDetailPage/concertSection.vue
index a75d602..06ed563 100644
--- a/software/src/pages/events/bandDetailPage/concertSection.vue
+++ b/software/src/pages/events/bandDetailPage/concertSection.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
 import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
-import sectionDivider from '@/components/sectionDivider.vue';
-import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
-import outlinedButton from '@/components/outlinedButton.vue';
 import { useRouter } from 'vue-router';
-import { ref } from 'vue';
-import { ConcertModel } from '@/data/models/acts/concertModel';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
 
 const router = useRouter()
-const showDialog = ref(false)
+const feedbackStore = useFeedbackStore()
 
 defineProps({
   band: {
@@ -17,70 +14,58 @@ defineProps({
     required: true
   }
 })
-
-function openTicketOrderDialog(concert: ConcertModel) {
-  showDialog.value = true
-}
 </script>
 
 <template>
-  <v-row>
+  <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
     <v-col>
-      <section-divider title="Konzerte" />
+      <concert-list-item :loading="true" />
     </v-col>
   </v-row>
 
-  <v-row v-for="concert of band.events[0].concerts">
+  <v-row v-else v-for="concert of band.events[0].concerts">
     <v-col>
-      <card-with-left-image
+      <concert-list-item
         :title="dateStringToHumanReadableString(concert.date)"
-        :image="'http://localhost:3000/static/locations/' + concert.location.image"
-        :link="false"
+        :image="concert.location.image"
+        @click="(concert.inStock > 0) && router.push('/concert/' + concert.id)"
+        :link="concert.inStock > 0"
+        :append-icon="concert.inStock == 0 ? 'mdi-minus-circle' : 'mdi-ticket'"
+        :append-icon-color="concert.inStock > 0 ? 'green' : 'red'"
       >
-        <v-row>
-          <v-col cols="auto" class="d-flex justify-center align-center px-0">
-            <v-btn
-              icon="mdi-map"
-              variant="text"
-              size="x-large"
-              @click="router.push('/locations/' + concert.location.name.replaceAll(' ', '-').toLowerCase())"
-            />
-          </v-col>
+        <template #description>
+          <v-row>
+            <v-col cols="auto" class="d-flex justify-center align-center px-0">
+              <v-btn
+                icon="mdi-map"
+                variant="text"
+                size="x-large"
+                @click="router.push('/locations/' + concert.location.name.replaceAll(' ', '-').toLowerCase())"
+              />
+            </v-col>
 
-          <v-col>
-            <div class="text-h6">
-              {{ concert.location.name }}
-            </div>
+            <v-col>
+              <div class="text-h6">
+                {{ concert.location.name }}
+              </div>
 
-            <div class="text-h6">
-              {{ concert.location.city.name }}
-            </div>
-          </v-col>
-        </v-row>
+              <div class="text-h6">
+                {{ concert.location.city.name }}
+              </div>
+            </v-col>
+          </v-row>
+        </template>
 
-        <template #append>
-          <div class="pb-3">
+        <template #append-text>
+          <div class="pb-3" v-if="concert.inStock > 0">
             {{ concert.price.toFixed(2) }} €
           </div>
 
-          <div>
-            <outlined-button
-              v-if="concert.inStock > 0"
-              prepend-icon="mdi-basket-plus"
-              @click="openTicketOrderDialog(concert)"
-            >
-              {{ $t('add') }}
-            </outlined-button>
-
-            <outlined-button v-else
-              color="red"
-              disabled
-            >
-              {{ $t('soldOut') }}
-            </outlined-button>
+          <div v-else>
+            {{ $t('soldOut') }}
           </div>
         </template>
-      </card-with-left-image>
+      </concert-list-item>
     </v-col>
   </v-row>
 </template>
\ No newline at end of file
diff --git a/software/src/pages/events/bandDetailPage/index.vue b/software/src/pages/events/bandDetailPage/index.vue
index 325e126..af1b993 100644
--- a/software/src/pages/events/bandDetailPage/index.vue
+++ b/software/src/pages/events/bandDetailPage/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useConcertStore } from '@/data/stores/concertStore';
 import { BandModel } from '@/data/models/acts/bandModel';
 import { useRouter } from 'vue-router';
 import ratingSection from './ratingSection.vue';
@@ -8,13 +7,10 @@ import gallerySection from './gallerySection.vue';
 import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import sectionDivider from '@/components/sectionDivider.vue';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { ref } from 'vue';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { getBand } from '@/data/api/bandApi';
-import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
-import { ConcertModel } from '@/data/models/acts/concertModel';
 
 const router = useRouter()
 const shoppingStore = useShoppingStore()
@@ -51,57 +47,8 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
           </v-col>
         </v-row>
 
-        <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
-          <v-col>
-            <concert-list-item :loading="true" />
-          </v-col>
-        </v-row>
+        <concert-section :band="band"/>
 
-        <v-row v-else v-for="concert of band.events[0].concerts">
-          <v-col>
-            <concert-list-item
-              :title="dateStringToHumanReadableString(concert.date)"
-              :image="concert.location.image"
-              @click="router.push('/concert/' + concert.id)"
-            >
-              <template #description>
-                <v-row>
-                  <v-col cols="auto" class="d-flex justify-center align-center px-0">
-                    <v-btn
-                      icon="mdi-map"
-                      variant="text"
-                      size="x-large"
-                      @click="router.push('/locations/' + concert.location.name.replaceAll(' ', '-').toLowerCase())"
-                    />
-                  </v-col>
-
-                  <v-col>
-                    <div class="text-h6">
-                      {{ concert.location.name }}
-                    </div>
-
-                    <div class="text-h6">
-                      {{ concert.location.city.name }}
-                    </div>
-                  </v-col>
-                </v-row>
-              </template>
-
-              <template #append-text>
-                <div class="pb-3" v-if="concert.inStock > 0">
-                  {{ concert.price.toFixed(2) }} €
-                </div>
-
-                <div v-else>
-                  {{ $t('soldOut') }}
-                </div>
-              </template>
-            </concert-list-item>
-          </v-col>
-        </v-row>
-
-
-        
         <v-row>
           <v-col>
             <section-divider :title="$t('bandMember')" />
diff --git a/software/src/pages/events/ticketOrderPage/index.vue b/software/src/pages/events/ticketOrderPage/index.vue
index 6302200..998f2f8 100644
--- a/software/src/pages/events/ticketOrderPage/index.vue
+++ b/software/src/pages/events/ticketOrderPage/index.vue
@@ -6,11 +6,15 @@ import { getConcert } from '@/data/api/concertApi';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { useRouter } from 'vue-router';
 import sectionDivider from '@/components/sectionDivider.vue';
-import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useBasketStore } from '@/data/stores/basketStore';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
+import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
+import outlinedButton from '@/components/outlinedButton.vue';
 
 const router = useRouter()
 const seatGroups = ref<Array<SeatGroupModel>>()
+const concertModel = ref<ConcertModel>(new ConcertModel())
 const feedbackStore = useFeedbackStore()
 const basketStore = useBasketStore()
 
@@ -19,16 +23,9 @@ feedbackStore.fetchDataFromServerInProgress = true
 getConcert(Number(router.currentRoute.value.params.id))
   .then(result => {
     seatGroups.value = result.data.location.seatGroups
+    concertModel.value = result.data
     feedbackStore.fetchDataFromServerInProgress = false
   })
-
-// function findRow(seatRowId: number) {
-//   for (let seatGroup of seatGroups.value) {
-//     for(let seatRow of seatGroup.seatRows) {
-//       let result = seatRow.seats.find()
-//     }
-//   }
-// }
 </script>
 
 <template>
@@ -37,6 +34,22 @@ getConcert(Number(router.currentRoute.value.params.id))
       <v-spacer />
 
       <v-col cols="10">
+        <v-row>
+          <v-col>
+            <concert-list-item
+              :loading="feedbackStore.fetchDataFromServerInProgress"
+              :link="false"
+              :title="concertModel.event.band.name + ' - ' + concertModel.event.name"
+              :image="concertModel.location.image"
+            >
+              <template #description>
+                <p>{{ dateStringToHumanReadableString(concertModel.date) }}</p>
+                <p>{{ concertModel.location.name }}</p>
+                <p>{{ concertModel.location.city.name }}</p>
+              </template>
+            </concert-list-item>
+          </v-col>
+        </v-row>
         <v-row>
           <v-col>
             <section-divider :title="$t('seatSelection')" />
@@ -58,7 +71,7 @@ getConcert(Number(router.currentRoute.value.params.id))
           </v-col>
 
           <v-col v-else>
-            <seat-plan-map :seat-groups="seatGroups" />
+            <seat-plan-map :concert="concertModel" :seat-groups="seatGroups" />
           </v-col>
         </v-row>
 
@@ -78,6 +91,17 @@ getConcert(Number(router.currentRoute.value.params.id))
             </v-list>
           </v-col>
         </v-row>
+
+        <v-row class="pb-5">
+          <outlined-button
+            prepend-icon="mdi-basket-plus"
+            @click="basketStore.moveSeatSelectionsToBasket(); router.push('/basket')"
+            :disabled="basketStore.selectedSeats.length == 0"
+            block
+          >
+            {{ $t('addToBasket') }}
+          </outlined-button>
+        </v-row>
       </v-col>
 
       <v-spacer />
diff --git a/software/src/scripts/concertScripts.ts b/software/src/scripts/concertScripts.ts
index eeb1fb0..17ebb30 100644
--- a/software/src/scripts/concertScripts.ts
+++ b/software/src/scripts/concertScripts.ts
@@ -12,8 +12,8 @@ import { EventModel } from "@/data/models/acts/eventModel"
  * 
  * @returns Price rounded to two digits
  */
-export function calcPrice(price: number, discount: number = 0, quantity: number = 1): number {
-  return Math.round(quantity * price * ((100 - discount) / 100) * 100) / 100
+export function calcPrice(price: number, quantity: number = 1): number {
+  return Math.round(quantity * price * 100) / 100
 }
 
 /**