Tickets moveable to basket, Basket shows tickets, removable

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

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>

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>

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>

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')" />

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 />