Adding Seat plan component and database tables

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"