SeatSelection page

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>