SeatSelection page

software/src/pages/events/bandDetailPage/index.vue

@@ -14,7 +14,7 @@ import { ref } from 'vue';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { getBand } from '@/data/api/bandApi';
 import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
-import cardWithTopImage from '@/components/cardWithTopImage.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 const router = useRouter()
 const shoppingStore = useShoppingStore()
@@ -62,6 +62,7 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
             <concert-list-item
               :title="dateStringToHumanReadableString(concert.date)"
               :image="concert.location.image"
+              @click="router.push('/concert/' + concert.id)"
             >
               <template #description>
                 <v-row>

software/src/pages/events/bandDetailPage/ticketOrderDialog.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import actionDialog from '@/components/actionDialog.vue';
-import { LocationModel } from '@/data/models/locations/locationModel';
-
-const showDialog = defineModel()
-
-defineProps({
-})
-</script>
-
-<template>
-  <action-dialog  >
-    123
-  </action-dialog>
-</template>

software/src/pages/events/ticketOrderPage/index.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
+import { ref } from 'vue';
+import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
+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';
+
+const router = useRouter()
+const seatGroups = ref<Array<SeatGroupModel>>()
+const feedbackStore = useFeedbackStore()
+const basketStore = useBasketStore()
+
+feedbackStore.fetchDataFromServerInProgress = true
+
+getConcert(Number(router.currentRoute.value.params.id))
+  .then(result => {
+    seatGroups.value = result.data.location.seatGroups
+    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>
+  <v-container>
+    <v-row>
+      <v-spacer />
+
+      <v-col cols="10">
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('seatSelection')" />
+          </v-col>
+        </v-row>
+
+        <v-row >
+          <v-col class="text-center" v-if="feedbackStore.fetchDataFromServerInProgress">
+            <v-progress-circular
+              size="x-large"
+              width="10"
+              color="primary"
+              indeterminate
+            />
+
+            <div class="pt-5 text-h3">
+              {{ $t('loading') }}...
+            </div>
+          </v-col>
+
+          <v-col v-else>
+            <seat-plan-map :seat-groups="seatGroups" />
+          </v-col>
+        </v-row>
+
+
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('orderSummary')" />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-list >
+              <v-list-item v-for="seat in basketStore.selectedSeats" >
+                Group: {{ seat.seatGroupName }} - Row: {{ seat.seatRow }} - Seat: {{ seat.seat.seatNr }}
+              </v-list-item>
+            </v-list>
+          </v-col>
+        </v-row>
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+  </v-container>
+</template>