Adding Seat plan component and database tables

software/backend/data/cities.json

@@ -1,7 +1,6 @@
 {
   "data": [
     {
-      "id": 0,
       "name": "Hannover",
       "country": "Germany",
       "locations": [
@@ -9,34 +8,131 @@
           "id": 0,
           "name": "Swiss Life Hall",
           "address": "Ferdinand-Wilhelm-Fricke-Weg 8",
-          "cityId": 0,
-          "image": "swiss-life-hall.jpg"
+          "image": "swiss-life-hall.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 40
+            },
+            {
+              "name": "B",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 5,
+              "capacity": 25
+            },
+            {
+              "name": "C",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 5,
+              "capacity": 25
+            },
+            {
+              "name": "D",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 3,
+              "capacity": 30
+            },
+            {
+              "name": "E",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 3,
+              "capacity": 12
+            },
+            {
+              "name": "F",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 3,
+              "capacity": 12
+            }
+          ]
         },
         {
           "id": 1,
           "name": "Capitol",
           "address": "Schwarzer Bär 2",
-          "cityId": 0,
-          "image": "capitol.jpg"
+          "image": "capitol.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 50
+            }
+          ]
         },
         {
           "id": 2,
           "name": "ZAG Arena",
           "address": "EXPO-Plaza 7",
-          "cityId": 0,
-          "image": "zag-arena.jpg"
+          "image": "zag-arena.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 40
+            },
+            {
+              "name": "B",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 5,
+              "capacity": 25
+            },
+            {
+              "name": "C",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 5,
+              "capacity": 25
+            },
+            {
+              "name": "D",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 3,
+              "capacity": 30
+            },
+            {
+              "name": "E",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 3,
+              "capacity": 12
+            },
+            {
+              "name": "F",
+              "surcharge": 10,
+              "standingArea": false,
+              "rows": 3,
+              "capacity": 12
+            }
+          ]
         },
         {
           "id": 3,
           "name": "Kulturzentrum Faust",
           "address": "Zur Bettfedernfabrik 3",
-          "cityId": 0,
-          "image": "faust-hannover.jpg"
+          "image": "faust-hannover.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         }
       ]
     },
     {
-      "id": 1,
       "name": "München",
       "country": "Germany",
       "locations": [
@@ -44,27 +140,47 @@
           "id": 4,
           "name": "Olympiahalle München",
           "address": "Spiridon-Louis-Ring 21",
-          "cityId": 1,
-          "image": "olympiahalle-munich.jpg"
+          "image": "olympiahalle-munich.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 5,
           "name": "Schlachthof München",
           "address": "Zenettistraße 9",
-          "cityId": 1,
-          "image": "schlachthof-munich.jpg"
+          "image": "schlachthof-munich.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 6,
           "name": "Muffatwerk",
           "address": "Zellstraße 4",
-          "cityId": 1,
-          "image": "muffatwerk.jpg"
+          "image": "muffatwerk.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         }
       ]
     },
     {
-      "id": 2,
       "name": "Hamburg",
       "country": "Germany",
       "locations": [
@@ -72,34 +188,61 @@
           "id": 7,
           "name": "Elbphilharmonie Hamburg",
           "address": "Platz der deutschen Einheit",
-          "cityId": 2,
-          "image": "elbphilharmonie-hamburg.jpg"
+          "image": "elbphilharmonie-hamburg.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 8,
           "name": "Volksparkstadion",
           "address": "Sylvesterallee 7",
-          "cityId": 2,
-          "image": "volksparkstadion-hamburg.jpg"
+          "image": "volksparkstadion-hamburg.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 9,
           "name": "Barclays Arena",
           "address": "Sylvesterallee 10",
-          "cityId": 2,
-          "image": "barclays-arena.jpg"
+          "image": "barclays-arena.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 10,
           "name": "Stage Theater im Hafen Hamburg",
           "address": "Norderelbestraße 6",
-          "cityId": 2,
-          "image": "stage-theater-hamburg.jpg"
+          "image": "stage-theater-hamburg.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         }
       ]
     },
     {
-      "id": 3,
       "name": "Berlin",
       "country": "Germany",
       "locations": [
@@ -107,43 +250,85 @@
           "id": 11,
           "name": "Waldbühne Berlin",
           "address": "Am Glockenturm",
-          "cityId": 3,
-          "image": "waldbuehne-berlin.jpg"
+          "image": "waldbuehne-berlin.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 12,
           "name": "Olympiastadion Berlin",
           "address": "Olympischer Platz 3",
-          "cityId": 3,
-          "image": "olympiastadion-berlin.jpg"
+          "image": "olympiastadion-berlin.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 13,
           "name": "Uber Arena Berlin",
           "address": "Uber-Platz 1",
-          "cityId": 3,
-          "image": "uber-arena-berlin.jpg"
+          "image": "uber-arena-berlin.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 14,
           "name": "Columbiahalle",
           "address": "Columbiadamm 13-21",
-          "cityId": 3,
-          "image": "columbiahalle.jpg"
+          "image": "columbiahalle.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 15,
           "name": "Astra Kulturhaus",
           "address": "Revaler Straße 99",
-          "cityId": 3,
-          "image": "astra-kulturhaus.jpg"
+          "image": "astra-kulturhaus.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         },
         {
           "id": 16,
           "name": "Deutsche Oper Berlin",
           "address": "Bismarckstraße 35",
-          "cityId": 3,
-          "image": "deutsche-oper-berlin.jpg"
+          "image": "deutsche-oper-berlin.jpg",
+          "seatGroups": [
+            {
+              "name": "A",
+              "surcharge": 20,
+              "standingArea": true,
+              "capacity": 10
+            }
+          ]
         }
       ]
     }

software/backend/database.ts

@@ -9,14 +9,17 @@ import { Address } from "./models/user/address.model"
 import { Payment } from "./models/user/payment.model"
 import { AccountRole } from "./models/user/accountRole.model"
 import { Genre } from "./models/acts/genre.model"
-import { Location } from "./models/acts/location.model"
+import { Location } from "./models/locations/location.model"
 import { Band } from "./models/acts/band.model"
 import { Concert } from "./models/acts/concert.model"
 import { Member } from "./models/acts/member.model"
 import { Rating } from "./models/acts/rating.model"
 import { Tour } from "./models/acts/tour.model"
-import { City } from "./models/acts/city.model"
+import { City } from "./models/locations/city.model"
 import { BandGenre } from "./models/acts/bandGenre.model"
+import { Seat } from "./models/locations/seat.model"
+import { SeatGroup } from "./models/locations/seatGroup.model"
+import { SeatRow } from "./models/locations/seatRow.model"
 
 const dbName = "database"
 const dbUser = "root"
@@ -31,7 +34,8 @@ export const sequelize = new Sequelize({
   storage: "database.sqlite",
   models: [
     AccountRole, Account, Payment, Address,
-    City, Location, Genre, Band, BandGenre, Rating, Member, Tour, Concert,
+    City, Location, SeatGroup, SeatRow, Seat,
+    Genre, Band, BandGenre, Rating, Member, Tour, Concert,
     Order, OrderItem
   ]
 })

software/backend/models/acts/concert.model.ts

@@ -1,5 +1,5 @@
 import { BelongsTo, Column, ForeignKey, HasMany, Model, Table } from "sequelize-typescript";
-import { Location } from "./location.model";
+import { Location } from "./../locations/location.model";
 import { Tour } from "./tour.model";
 import { OrderItem } from "../ordering/orderItem.model";
 

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

@@ -1,6 +1,7 @@
 import { BelongsTo, Column, ForeignKey, HasMany, Model, Table } from "sequelize-typescript";
-import { Concert } from "./concert.model";
+import { Concert } from "./../acts/concert.model";
 import { City } from "./city.model";
+import { SeatGroup } from "./seatGroup.model";
 
 @Table({ timestamps: false })
 export class Location extends Model {
@@ -23,6 +24,9 @@ export class Location extends Model {
   @HasMany(() => Concert)
   concerts: Concert[]
 
+  @HasMany(() => SeatGroup)
+  seatGroups: SeatGroup[]
+
   @BelongsTo(() => City)
   city: City
 }

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

@@ -0,0 +1,18 @@
+import { BelongsTo, Column, ForeignKey, Model, Table } from "sequelize-typescript";
+import { SeatRow } from "./seatRow.model";
+
+@Table({ timestamps: false })
+export class Seat extends Model {
+  @Column
+  seatNr: number
+
+  @ForeignKey(() => SeatRow)
+  @Column
+  seatRowId: Number
+
+
+  // Relations
+
+  @BelongsTo(() => SeatRow)
+  seatRow: SeatRow
+}

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

@@ -0,0 +1,32 @@
+import { BelongsTo, Column, Default, ForeignKey, HasMany, Model, Table } from "sequelize-typescript";
+import { Location } from "./location.model";
+import { SeatRow } from "./seatRow.model";
+
+@Table({ timestamps: false })
+export class SeatGroup extends Model {
+  @Column
+  name: String
+
+  @Column
+  surcharge: Number
+
+  @Column
+  capacity: Number
+
+  @Default(false)
+  @Column
+  standingArea: Boolean
+
+  @ForeignKey(() => Location)
+  @Column
+  locationId: Number
+
+
+  // Relations
+
+  @BelongsTo(() => Location)
+  location: Location
+
+  @HasMany(() => SeatRow)
+  seatRows: SeatRow[]
+}

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

@@ -0,0 +1,22 @@
+import { BelongsTo, Column, ForeignKey, HasMany, Model, Table } from "sequelize-typescript";
+import { SeatGroup } from "./seatGroup.model";
+import { Seat } from "./seat.model";
+
+@Table({ timestamps: false })
+export class SeatRow extends Model {
+  @Column
+  row: number
+
+  @ForeignKey(() => SeatGroup)
+  @Column
+  seatGroupId: number
+
+  
+  // Relations
+
+  @BelongsTo(() => SeatGroup)
+  seatGroup: SeatGroup
+
+  @HasMany(() => Seat)
+  seats: Seat[]
+}

software/backend/routes/band.routes.ts

@@ -5,8 +5,8 @@ import { Rating } from "../models/acts/rating.model";
 import { Genre } from "../models/acts/genre.model";
 import { Tour } from "../models/acts/tour.model";
 import { Concert } from "../models/acts/concert.model";
-import { Location } from "../models/acts/location.model";
-import { City } from "../models/acts/city.model";
+import { Location } from "../models/locations/location.model";
+import { City } from "../models/locations/city.model";
 
 export const band = Router()
 

software/backend/routes/city.routes.ts

@@ -1,5 +1,5 @@
-import { Location } from "../models/acts/location.model";
-import { City } from "../models/acts/city.model";
+import { Location } from "../models/locations/location.model";
+import { City } from "../models/locations/city.model";
 import { Request, Response, Router } from "express";
 import { Concert } from "../models/acts/concert.model";
 

software/backend/routes/concert.routes.ts

@@ -1,8 +1,8 @@
-import { Location } from "../models/acts/location.model";
+import { Location } from "../models/locations/location.model";
 import { Concert } from "../models/acts/concert.model";
 import { Request, Response, Router } from "express";
 import { Tour } from "../models/acts/tour.model";
-import { City } from "../models/acts/city.model";
+import { City } from "../models/locations/city.model";
 
 export const concert = Router()
 

software/backend/routes/location.routes.ts

@@ -1,9 +1,12 @@
 import { Concert } from "../models/acts/concert.model";
-import { City } from "../models/acts/city.model";
-import { Location } from "../models/acts/location.model";
+import { City } from "../models/locations/city.model";
+import { Location } from "../models/locations/location.model";
 import { Request, Response, Router } from "express";
 import { Tour } from "../models/acts/tour.model";
 import { Band } from "../models/acts/band.model";
+import { SeatGroup } from "../models/locations/seatGroup.model";
+import { Seat } from "../models/locations/seat.model";
+import { SeatRow } from "../models/locations/seatRow.model";
 
 export const location = Router()
 
@@ -17,6 +20,15 @@ location.get("/", (req: Request, res: Response) => {
         attributes: {
           exclude: [ "locationId", "tourId" ]
         }
+      },
+      {
+        model: SeatGroup,
+        include: [
+          {
+            model: SeatRow,
+            include: [ Seat ]
+          }
+        ]
       }
     ],
     attributes: {

software/backend/routes/order.routes.ts

@@ -5,7 +5,7 @@ import { OrderItem } from "../models/ordering/orderItem.model";
 import { Payment } from "../models/user/payment.model";
 import { Address } from "../models/user/address.model";
 import { Band } from "../models/acts/band.model";
-import { Location } from "../models/acts/location.model";
+import { Location } from "../models/locations/location.model";
 
 export const order = Router()
 

software/backend/routes/tour.routes.ts

@@ -2,9 +2,9 @@ import { Concert } from "../models/acts/concert.model";
 import { Band } from "../models/acts/band.model";
 import { Tour } from "../models/acts/tour.model";
 import { Request, Response, Router } from "express";
-import { Location } from "../models/acts/location.model";
+import { Location } from "../models/locations/location.model";
 import { Genre } from "../models/acts/genre.model";
-import { City } from "../models/acts/city.model";
+import { City } from "../models/locations/city.model";
 
 export const tour = Router()
 

software/backend/scripts/databaseHelper.ts

@@ -8,11 +8,14 @@ import { Rating } from '../models/acts/rating.model'
 import { Member } from '../models/acts/member.model'
 import { Genre } from '../models/acts/genre.model'
 import { Band } from '../models/acts/band.model'
-import { Location } from '../models/acts/location.model'
+import { Location } from '../models/locations/location.model'
 import { Concert } from '../models/acts/concert.model'
 import { Tour } from '../models/acts/tour.model'
-import { City } from '../models/acts/city.model'
+import { City } from '../models/locations/city.model'
 import { BandGenre } from '../models/acts/bandGenre.model'
+import { SeatGroup } from '../models/locations/seatGroup.model'
+import { Seat } from '../models/locations/seat.model'
+import { SeatRow } from '../models/locations/seatRow.model'
 
 import accounts from "./../data/accounts.json"
 import orders from "./../data/orders.json"
@@ -35,8 +38,13 @@ export function deleteAllTables() {
   Member.destroy({ truncate: true })
   Genre.destroy({ truncate: true })
   Band.destroy({ truncate: true })
+  Tour.destroy({ truncate: true })
+
   Location.destroy({ truncate: true })
   Concert.destroy({ truncate: true })
+  SeatGroup.destroy({ truncate: true })
+  SeatRow.destroy({ truncate: true })
+  Seat.destroy({ truncate: true })
   
   Address.destroy({ truncate: true })
   Payment.destroy({ truncate: true })
@@ -48,13 +56,63 @@ export function deleteAllTables() {
  * Insert default datasets in the database tables
  */
 export async function prepopulateDatabase() {
+  deleteAllTables()
+  
   AccountRole.bulkCreate(accountRoles.data)
   Genre.bulkCreate(genres.data)
 
-  for (let city of cities.data) {
+  for (let city of cities.data)
+  {
     await City.create(city)
-      .then(dataset => {
-        Location.bulkCreate(city.locations)
+      .then(async cityDataset => {
+        for (let location of city.locations) 
+        {
+          location["cityId"] = cityDataset.id
+
+          await Location.create(location)
+            .then(async locationDataset => {
+              for (let seatGroup of location.seatGroups)
+              {
+                seatGroup["locationId"] = locationDataset.id
+                
+                await SeatGroup.create(seatGroup)
+                  .then(async seatGroupRes => {
+                    if (seatGroup.standingArea) {
+                      // In an area without seats, create one row with all "seats"
+                      await SeatRow.create({
+                        row: 0,
+                        seatGroupId: seatGroupRes.id
+                      })
+                        .then(async seatRowRes => {
+                          for (let i = 0; i < seatGroup.capacity; i++) {
+                            await Seat.create({
+                              seatNr: i + 1,
+                              seatRowId: seatRowRes.id
+                            })
+                          }
+                        })
+                    }
+                    else
+                    {
+                      for (let row = 0; row < seatGroup.rows; row++) {
+                        await SeatRow.create({
+                          row: row + 1,
+                          seatGroupId: seatGroupRes.id
+                        })
+                          .then(async seatRowRes => {
+                            for (let col = 0; col < seatGroup.capacity / seatGroup.rows; col++) {
+                              await Seat.create({
+                                seatNr: col,
+                                seatRowId: seatRowRes.id
+                              })
+                            }
+                          })
+                      }
+                    }
+                  })
+              }
+          })
+        }
       })
   }
 

software/src/App.vue

@@ -7,7 +7,7 @@ import navigationPrependItems from './components/navigation/navigationPrependIte
 import { usePreferencesStore } from './data/stores/preferencesStore';
 import { useFeedbackStore } from './data/stores/feedbackStore';
 import { useConcertStore } from './data/stores/concertStore';
-import { LocationModel } from './data/models/acts/locationModel';
+import { LocationModel } from './data/models/locations/locationModel';
 
 const preferencesStore = usePreferencesStore()
 const concertStore = useConcertStore()

software/src/components/actionDialog.vue

@@ -17,7 +17,7 @@ defineProps({
 
 <template>
   <v-dialog max-width="1200" v-model="showDialog">
-    <card-view
+    <v-card
       :title="title"
       :subtitle="subtitle"
       :icon="icon"
@@ -27,6 +27,6 @@ defineProps({
       <template #actions>
         <slot name="actions"></slot>
       </template>
-    </card-view>
+    </v-card>
   </v-dialog>
 </template>

software/src/components/seatPlanMap/seatGroupSheet.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
+import seatGroupTable from './seatGroupTable.vue';
+
+defineProps({
+  seatGroup: SeatGroupModel,
+  backgroundColor: String
+})
+</script>
+
+<template>
+  <v-sheet
+    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"
+    class="pa-5"
+    :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="d-flex justify-center align-center">
+        <seat-group-table :seat-rows="seatGroup.seatRows" />
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>

software/src/components/seatPlanMap/seatGroupTable.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { SeatRowModel } from '@/data/models/locations/seatRowModel';
+
+defineProps({
+  seatRows: Array<SeatRowModel>,
+})
+</script>
+
+<template>
+  <table>
+    <tbody>
+      <tr v-for="seatRow in seatRows">
+        <td v-for="seats in seatRow.seats">
+          <v-btn
+            variant="text"
+            icon="mdi-seat"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

software/src/components/seatPlanMap/seatPlanMap.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
+import seatGroupSheet from './seatGroupSheet.vue';
+
+let props = defineProps({
+  seatGroups: Array<SeatGroupModel>
+})
+
+function findSeatCategory(name: string): SeatGroupModel {
+  return props.seatGroups.find(category =>
+    category.name == name
+  )
+}
+
+const seatGroupA = findSeatCategory("A")
+const seatGroupB = findSeatCategory("B")
+const seatGroupC = findSeatCategory("C")
+const seatGroupD = findSeatCategory("D")
+const seatGroupE = findSeatCategory("E")
+const seatGroupF = findSeatCategory("F")
+</script>
+
+<template>
+  <v-row>
+    <v-col></v-col>
+
+    <v-col>
+      <v-sheet
+        color="grey-darken-3"
+        height="50"
+        class="px-5 py-2 d-flex justify-center align-center"
+      >
+        {{ $t('stage') }}
+      </v-sheet>
+    </v-col>
+
+    <v-col></v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <seat-group-sheet :seat-group="seatGroupC" background-color="cyan-darken-2" />
+    </v-col>
+
+    <v-col>
+      <seat-group-sheet :seat-group="seatGroupA" background-color="grey" />
+    </v-col>
+
+    <v-col>
+      <seat-group-sheet :seat-group="seatGroupB" background-color="cyan-darken-2" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <seat-group-sheet :seat-group="seatGroupF" background-color="deep-purple-darken-2" />
+    </v-col>
+
+    <v-col>
+      <seat-group-sheet :seat-group="seatGroupD" background-color="indigo-darken-2" />
+    </v-col>
+
+    <v-col>
+      <seat-group-sheet :seat-group="seatGroupE" background-color="deep-purple-darken-2" />
+    </v-col>
+  </v-row>
+</template>

software/src/data/models/acts/concertModel.ts

@@ -1,4 +1,4 @@
-import { LocationModel } from "./locationModel"
+import { LocationModel } from "./../locations/locationModel"
 
 export class ConcertModel {
   id: number

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

@@ -1,3 +1,5 @@
+import { SeatGroupModel } from "./seatGroupModel"
+
 /**
  * Replica of the API endpoint /locations
  */
@@ -6,6 +8,7 @@ export class LocationModel {
   name: string
   address: string
   image: string
+  seatSchema: string
   city: {
     name: string
     country: string
@@ -22,4 +25,5 @@ export class LocationModel {
       bandName: string
     }
   }>
+  seatGroups: Array<SeatGroupModel>
 }

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

@@ -0,0 +1,9 @@
+import { SeatRowModel } from "./seatRowModel"
+
+export class SeatGroupModel {
+  name: string
+  surcharge: number
+  standingArea: Boolean
+  capacity: number
+  seatRows: Array<SeatRowModel>
+}

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

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

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

@@ -0,0 +1,6 @@
+import { SeatModel } from "./seatModel"
+
+export class SeatRowModel {
+  row: number
+  seats: Array<SeatModel>
+}

software/src/data/stores/concertStore.ts

@@ -5,10 +5,10 @@ import { getAllTours } from "../api/tourApi";
 import { GenreModel } from "../models/acts/genreModel";
 import { getAllBands } from "../api/bandApi";
 import { BandModel } from "../models/acts/bandModel";
-import { LocationModel } from "../models/acts/locationModel";
+import { LocationModel } from "../models/locations/locationModel";
 import { getAllLocations } from "../api/locationApi";
 import { getAllGenres } from "../api/genreApi";
-import { CityModel } from "../models/acts/cityModel";
+import { CityModel } from "../models/locations/cityModel";
 import { getAllCities } from "../api/cityApi";
 
 export const useConcertStore = defineStore("concertStore", {
@@ -47,6 +47,7 @@ export const useConcertStore = defineStore("concertStore", {
 
       await getAllLocations() 
         .then(result => {
+          console.log(result.data)
           this.locations = result.data
         })
 

software/src/locales/de.json

@@ -139,5 +139,8 @@
   "band": "Band | Bands",
   "noEventsFound": "Keine Events gefunden",
   "from": "ab",
-  "soldOut": "Ausverkauft"
+  "soldOut": "Ausverkauft",
+  "city": "Stadt",
+  "seatPlan": "Saalplan",
+  "stage": "Bühne"
 }

software/src/locales/en.json

@@ -139,5 +139,8 @@
   "band": "Band | Bands",
   "noEventsFound": "No Events found",
   "from": "from",
-  "soldOut": "Sold Out"
+  "soldOut": "Sold Out",
+  "city": "City",
+  "seatPlan": "Seat Plan",
+  "stage": "Stage"
 }

software/src/pages/homePage/index.vue

@@ -62,6 +62,7 @@ const concertStore = useConcertStore()
               :image="'locations/' + concertStore.locations[i + 2].image"
               :title="concertStore.locations[i + 2].name"
               smaller-title
+              @click="router.push('/locations/' + concertStore.locations[i + 2].name.replaceAll(' ', '-').toLowerCase())"
             >
               {{ concertStore.locations[i + 2].city.name }}, {{ concertStore.locations[i + 2].city.country }}
             </card-with-top-image>

software/src/pages/locations/locationDetailPage/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { LocationModel } from '@/data/models/acts/locationModel';
+import { LocationModel } from '@/data/models/locations/locationModel';
 import { useConcertStore } from '@/data/stores/concertStore';
-import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
 import { useRouter } from 'vue-router';
 import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
 import sectionDivider from '@/components/sectionDivider.vue';
 import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
+import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
 
 const router = useRouter()
 const concertStore = useConcertStore()
@@ -83,6 +83,20 @@ const location: LocationModel = concertStore.locations.find(location =>
             />
           </v-col>
         </v-row>
+
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('seatPlan')" />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <seat-plan-map
+              :seat-groups="location.seatGroups"
+            />
+          </v-col>
+        </v-row>
       </v-col>
 
       <v-spacer/>

software/src/pages/shows/eventsPage/filterBar.vue

@@ -15,7 +15,7 @@ const concertStore = useConcertStore()
           variant="outlined"
           :items="concertStore.cities"
           v-model="concertStore.cityFilter"
-          label="Stadt"
+          :label="$t('city')"
           density="compact"
           class="mb-n5"
           :clearable="concertStore.cityFilter != null && concertStore.cityFilter.id != undefined"