57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<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({
|
|
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="seat in seatRow.seats">
|
|
<v-btn
|
|
variant="text"
|
|
icon="mdi-circle"
|
|
:color="seatColor(seat.state)"
|
|
:disabled="seat.state == 1"
|
|
density="compact"
|
|
@click="handleSeatClick(seat, seatRow)"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template> |