SeatSelection page

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>