Tickets moveable to basket, Basket shows tickets, removable

2024-10-05 20:23:13 +02:00
parent a676ce3d86
commit c54e6f3743
21 changed files with 301 additions and 334 deletions
--- 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>
--- 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>
--- 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>
+</template>
+
+<style scoped>
+.v-card--variant-tonal {
+}
+</style>
--- 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>
--- 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 => 
--- 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>
--- 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>

--- 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()
+  }
 }
--- 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
  }
 }
--- 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
  }
 }
--- 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 = []
    },

    /**
--- 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"
 }
--- 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"
 }
--- 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
--- a/software/src/pages/basketPage/productsTable.vue
+++ b/software/src/pages/basketPage/productsTable.vue
@@ -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>
--- a/software/src/pages/basketPage/ticketsTable.vue
+++ 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>
--- 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>
--- 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')" />
--- 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 />
--- 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
 }

 /**