Adding Seat plan component and database tables

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>