SeatSelection page

software/backend/data/orders.json

@@ -9,7 +9,8 @@
       "tickets": [
         {
           "concertId": 0,
-          "orderPrice": 184
+          "orderPrice": 184,
+          "seatId": 43
         }
       ]
     },

software/backend/models/locations/seat.model.ts

@@ -1,5 +1,6 @@
-import { BelongsTo, Column, ForeignKey, Model, Table } from "sequelize-typescript";
+import { BelongsTo, Column, ForeignKey, HasMany, Model, Table } from "sequelize-typescript";
 import { SeatRow } from "./seatRow.model";
+import { Ticket } from "../ordering/ticket.model";
 
 @Table({ timestamps: false })
 export class Seat extends Model {
@@ -15,4 +16,7 @@ export class Seat extends Model {
 
   @BelongsTo(() => SeatRow)
   seatRow: SeatRow
+
+  @HasMany(() => Ticket)
+  tickets: Ticket[]
 }

software/backend/routes/band.routes.ts

@@ -92,12 +92,12 @@ band.get("/:name", (req: Request, res: Response) => {
               }
             ],
             attributes: {
-              exclude: [ "id", "tourId", "locationId" ]
+              exclude: [ "tourId", "locationId" ]
             }
           }
         ],
         attributes: {
-          exclude: [ "id", "bandId" ]
+          exclude: [ "bandId" ]
         }
       },
       Genre

software/backend/routes/concert.routes.ts

@@ -3,6 +3,10 @@ import { Concert } from "../models/acts/concert.model";
 import { Request, Response, Router } from "express";
 import { Event } from "../models/acts/event.model";
 import { City } from "../models/locations/city.model";
+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";
 
 export const concert = Router()
 
@@ -12,7 +16,29 @@ concert.get("/:id", (req: Request, res: Response) => {
       Event,
       {
         model: Location,
-        include: [ City ],
+        include: [
+          {
+            model: City
+          },
+          {
+            model: SeatGroup,
+            include: [
+              {
+                model: SeatRow,
+                include: [
+                  {
+                    model: Seat,
+                    include: [
+                      {
+                        model: Ticket
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ],
         attributes: {
           exclude: [ "cityId" ]
         }
@@ -22,7 +48,27 @@ concert.get("/:id", (req: Request, res: Response) => {
       exclude: [ "locationId", "tourId" ]
     }
   })
-    .then(shows => {
-      res.status(200).json(shows)
+    .then(concert => {
+      for (let seatGroup of concert.dataValues.location.dataValues.seatGroups) {
+        seatGroup.dataValues["occupied"] = 0
+
+        for (let seatRow of seatGroup.dataValues.seatRows) {
+          for (let seat of seatRow.dataValues.seats) {
+            seat.dataValues["state"] = 0
+
+            for (let ticket of seat.dataValues.tickets) {
+              if (ticket.dataValues.concertId == req.params.id) {
+                seat.dataValues["state"] = 1
+                seatGroup.dataValues["occupied"] += 1
+                break
+              }
+            }
+
+            delete seat.dataValues.tickets
+          }
+        }
+      }
+
+      res.status(200).json(concert)
     })
-})
+})

software/backend/server.ts

@@ -42,6 +42,7 @@ app.use("/genres", genre)
 app.use("/orders", order)
 app.use("/accounts", account)
 app.use("/cities", city)
+app.use("/concerts", concert)
 
 
 // Start server

software/src/components/actionDialog.vue

@@ -20,7 +20,7 @@ defineProps({
     <v-card
       :title="title"
       :subtitle="subtitle"
-      :icon="icon"
+      :prepend-icon="icon"
     >
       <slot></slot>
 

software/src/components/seatPlanMap/seatGroupSheet.vue

@@ -1,42 +1,23 @@
 <script setup lang="ts">
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupTable from './seatGroupTable.vue';
+import { useBasketStore } from '@/data/stores/basketStore';
+import standingArea from './standingArea.vue';
 
 defineProps({
   seatGroup: SeatGroupModel,
   backgroundColor: String
 })
+
+
 </script>
 
 <template>
-  <v-sheet
+  <standing-area
+    :seat-group="seatGroup"
+    :background-color="backgroundColor"
     v-if="seatGroup != undefined && seatGroup.standingArea"
-    class="pa-5"
-    min-height="200"
-    height="100%"
-    :color="backgroundColor"
-  >
-    <v-row >
-      <v-col class="text-h4 text-center font-weight-black">
-        {{ seatGroup.name }}
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col class="text-center">
-        <v-icon
-          icon="mdi-account-group"
-          size="x-large"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col class="text-center text-h6">
-        {{ seatGroup.capacity }} Stehplätze
-      </v-col>
-    </v-row>
-  </v-sheet>
+  />
 
   <v-sheet
     v-else-if="seatGroup != undefined"
@@ -51,7 +32,7 @@ defineProps({
 
     <v-row>
       <v-col class="d-flex justify-center align-center">
-        <seat-group-table :seat-rows="seatGroup.seatRows" />
+        <seat-group-table :seat-rows="seatGroup.seatRows" :seat-group="seatGroup"/>
       </v-col>
     </v-row>
   </v-sheet>

software/src/components/seatPlanMap/seatGroupTable.vue

@@ -1,19 +1,54 @@
 <script setup lang="ts">
+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';
 
-defineProps({
+const basketStore = useBasketStore()
+
+let props = defineProps({
   seatRows: Array<SeatRowModel>,
+  seatGroup: SeatGroupModel
 })
+
+function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
+  let storeSeat = basketStore.selectedSeats.find(seat => 
+    seat.seat.id == clickedSeat.id
+  )
+
+  if (storeSeat == undefined) {
+    clickedSeat.state = 2
+    basketStore.selectedSeats.push(new SelectedSeatModel(clickedSeat, seatRow.row, props.seatGroup.name))
+  } else {
+    clickedSeat.state = 0
+    basketStore.selectedSeats = basketStore.selectedSeats.filter(seat => 
+      seat.seat.id != clickedSeat.id
+    )
+  }
+}
+
+function seatColor(state: number) {
+  switch (state) {
+    case 0: return "grey"
+    case 1: return "red"
+    case 2: return "orange"
+  }
+}
 </script>
 
 <template>
   <table>
     <tbody>
       <tr v-for="seatRow in seatRows">
-        <td v-for="seats in seatRow.seats">
+        <td v-for="seat in seatRow.seats">
           <v-btn
             variant="text"
-            icon="mdi-seat"
+            icon="mdi-circle"
+            :color="seatColor(seat.state)"
+            :disabled="seat.state == 1"
+            density="compact"
+            @click="handleSeatClick(seat, seatRow)"
           />
         </td>
       </tr>

software/src/components/seatPlanMap/seatPlanMap.vue

@@ -39,7 +39,7 @@ const seatGroupF = findSeatCategory("F")
 
   <v-row>
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupC" background-color="cyan-darken-2" />
+      <seat-group-sheet :seat-group="seatGroupC" background-color="cyan-darken-4" />
     </v-col>
 
     <v-col>
@@ -47,21 +47,21 @@ const seatGroupF = findSeatCategory("F")
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupB" background-color="cyan-darken-2" />
+      <seat-group-sheet :seat-group="seatGroupB" background-color="cyan-darken-4" />
     </v-col>
   </v-row>
 
   <v-row>
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupF" background-color="deep-purple-darken-2" />
+      <seat-group-sheet :seat-group="seatGroupF" background-color="deep-purple-darken-4" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupD" background-color="indigo-darken-2" />
+      <seat-group-sheet :seat-group="seatGroupD" background-color="indigo-darken-4" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupE" background-color="deep-purple-darken-2" />
+      <seat-group-sheet :seat-group="seatGroupE" background-color="deep-purple-darken-4" />
     </v-col>
   </v-row>
 </template>

software/src/components/seatPlanMap/standingArea.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+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';
+
+const basketStore = useBasketStore()
+
+let props = defineProps({
+  seatGroup: SeatGroupModel,
+  backgroundColor: String
+})
+
+function handleSeatClick() {
+  let freeSeat = props.seatGroup.seatRows[0].seats.find(seat =>
+    seat.state == 0
+  )
+
+  freeSeat.state = 2
+
+  basketStore.selectedSeats.push(new SelectedSeatModel(freeSeat, 0, props.seatGroup.name))
+}
+</script>
+
+<template>
+  <v-hover>
+    <template v-slot:default="{ isHovering, props}">
+      <v-sheet
+        v-bind="props"
+        class="pa-5"
+        min-height="200"
+        height="100%"
+        :color="isHovering ? 'red' : backgroundColor"
+        @click="handleSeatClick"
+      >
+        <v-row >
+          <v-col class="text-h4 text-center font-weight-black">
+            {{ seatGroup.name }}
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col class="text-center">
+            <v-icon
+              icon="mdi-account-group"
+              size="x-large"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col class="text-center text-h6">
+            {{ seatGroup.capacity - seatGroup.occupied }} Stehplätze
+          </v-col>
+        </v-row>
+      </v-sheet>
+    </template>
+  </v-hover>
+</template>

software/src/data/api/concertApi.ts

@@ -4,4 +4,12 @@ let BASE_URL = "http://localhost:3000/concerts"
 
 export async function getAllConcerts() {
   return await axios.get(BASE_URL)
-}
+}
+
+export async function getConcert(id: number) {
+  if (id != undefined) {
+    return await axios.get(BASE_URL + "/" + id)
+  } else {
+    return null
+  }
+}

software/src/data/models/locations/seatGroupModel.ts

@@ -5,5 +5,6 @@ export class SeatGroupModel {
   surcharge: number
   standingArea: Boolean
   capacity: number
+  occupied: number
   seatRows: Array<SeatRowModel>
 }

software/src/data/models/locations/seatModel.ts

@@ -1,4 +1,5 @@
 export class SeatModel {
   id: number
   seatNr: string
+  state: number
 }

software/src/data/models/ordering/selectedSeatModel.ts

@@ -0,0 +1,14 @@
+import { SeatModel } from "../locations/seatModel";
+import { SeatRowModel } from "../locations/seatRowModel";
+
+export class SelectedSeatModel {
+  seat: SeatModel
+  seatRow: number
+  seatGroupName: string
+
+  constructor(seat: SeatModel, seatRow: number, seatGroupName: string) {
+    this.seat = seat
+    this.seatRow = seatRow
+    this.seatGroupName = seatGroupName
+  }
+}

software/src/data/stores/basketStore.ts

@@ -3,17 +3,19 @@ import { useLocalStorage } from "@vueuse/core";
 import { BasketItemModel } from "../models/ordering/basketItemModel";
 import { useFeedbackStore } from "./feedbackStore";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
-import { addOrder } from "../api/orderApi";
-import { useAccountStore } from "./accountStore";
 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";
 
 export const useBasketStore = defineStore('basketStore', {
   state: () => ({
     itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", []),
     usedAddress: useLocalStorage("hackmycart/basketStore/usedAddress", new AddressModel()),
-    usedPayment: useLocalStorage("hackmycart/basketStore/usedPayment", new PaymentModel())
+    usedPayment: useLocalStorage("hackmycart/basketStore/usedPayment", new PaymentModel()),
+    selectedSeats: ref<Array<SelectedSeatModel>>([])
   }),
 
   getters: {

software/src/locales/de.json

@@ -146,5 +146,8 @@
   "filtering": "Filtern",
   "bandMember": "Band Mitglieder",
   "rating": "Bewertung | Bewertungen",
-  "image": "Foto | Fotos"
+  "image": "Foto | Fotos",
+  "seatSelection": "Sitzauswahl",
+  "loading": "Lade",
+  "orderSummary": "Bestellübersicht"
 }

software/src/locales/en.json

@@ -146,5 +146,8 @@
   "filtering": "Filtering",
   "bandMember": "Band members",
   "rating": "Rating | Ratings",
-  "image": "Image | Images"
+  "image": "Image | Images",
+  "seatSelection": "Select seat",
+  "loading": "Loading",
+  "orderSummary": "Order Summary"
 }

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>

software/src/router/routes.ts

@@ -8,6 +8,7 @@ import LocationsPage from "@/pages/locations/locationsPage/index.vue"
 import SearchPage from "@/pages/events/searchPage/index.vue"
 import BandDetailPage from "@/pages/events/bandDetailPage/index.vue"
 import LocationDetailPage from "@/pages/locations/locationDetailPage/index.vue"
+import TicketOrderPage from "@/pages/events/ticketOrderPage/index.vue"
 
 const routes = [
   { path: "/", component: HomePage },
@@ -15,6 +16,7 @@ const routes = [
   { path: '/locations', component: LocationsPage },
   { path: '/locations/:locationName', component: LocationDetailPage },
   { path: '/bands/:bandName', component: BandDetailPage },
+  { path: '/concert/:id', component: TicketOrderPage },
   { path: '/events', component: EventsPage },
   { path: '/search', component: SearchPage },
   ...accountRoutes,