SeatSelection page

This commit is contained in:
2024-10-04 20:15:16 +02:00
parent 8165f17fc8
commit e48782b897
22 changed files with 316 additions and 76 deletions

View File

@@ -1,6 +1,6 @@
<mxfile host="Electron" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/24.7.17 Chrome/128.0.6613.36 Electron/32.0.1 Safari/537.36" version="24.7.17">
<diagram name="Page-1" id="WevClHWmhzPAQ7FDN5po">
<mxGraphModel dx="3135" dy="1286" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<mxGraphModel dx="3157" dy="1300" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
@@ -811,51 +811,57 @@
<mxCell id="6UZwBTI8mqE8-S_CcwA3-151" value="" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.security.key_permissions;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="-18.820000000000096" y="755" width="9.43" height="20" as="geometry" />
</mxCell>
<mxCell id="7DIVNgt3cFn7LyBarME5-1" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" edge="1" parent="1">
<mxCell id="7DIVNgt3cFn7LyBarME5-1" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-320.05999999999995" y="110" as="sourcePoint" />
<mxPoint x="-320.05999999999995" y="180" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="7DIVNgt3cFn7LyBarME5-2" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" edge="1" parent="1">
<mxCell id="7DIVNgt3cFn7LyBarME5-2" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-79.94999999999993" y="-20" as="sourcePoint" />
<mxPoint x="-79.94999999999993" y="50" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="7DIVNgt3cFn7LyBarME5-3" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" edge="1" parent="1">
<mxCell id="7DIVNgt3cFn7LyBarME5-3" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-319.83" y="690" as="sourcePoint" />
<mxPoint x="-320.05999999999995" y="620" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="7DIVNgt3cFn7LyBarME5-5" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" edge="1" parent="1">
<mxCell id="7DIVNgt3cFn7LyBarME5-5" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-1040.34" y="185" as="sourcePoint" />
<mxPoint x="-1040.34" y="255" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="7DIVNgt3cFn7LyBarME5-6" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" edge="1" parent="1">
<mxCell id="7DIVNgt3cFn7LyBarME5-6" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-1520.4899999999998" y="150" as="sourcePoint" />
<mxPoint x="-1520.4899999999998" y="220" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="7DIVNgt3cFn7LyBarME5-7" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" edge="1" parent="1">
<mxCell id="7DIVNgt3cFn7LyBarME5-7" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="360" y="385" as="sourcePoint" />
<mxPoint x="280" y="385" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="7DIVNgt3cFn7LyBarME5-8" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" edge="1" parent="1">
<mxCell id="7DIVNgt3cFn7LyBarME5-8" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-561.17" y="730" as="sourcePoint" />
<mxPoint x="-561.4" y="660" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="7DIVNgt3cFn7LyBarME5-9" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;image: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
<mxCell id="7DIVNgt3cFn7LyBarME5-9" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;image: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
<mxGeometry x="-399.99999999999994" y="320" width="160" height="30" as="geometry" />
</mxCell>
<mxCell id="ixBWz6MtEORAIzOqTLXs-1" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#6a00ff;strokeColor=#3700CC;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-561.2099999999999" y="110" as="sourcePoint" />
<mxPoint x="-561.2099999999999" y="180" as="targetPoint" />
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>

View File

@@ -9,7 +9,8 @@
"tickets": [
{
"concertId": 0,
"orderPrice": 184
"orderPrice": 184,
"seatId": 43
}
]
},

View File

@@ -1,5 +1,6 @@
import { BelongsTo, Column, ForeignKey, Model, Table } from "sequelize-typescript";
import { BelongsTo, Column, ForeignKey, HasMany, Model, Table } from "sequelize-typescript";
import { SeatRow } from "./seatRow.model";
import { Ticket } from "../ordering/ticket.model";
@Table({ timestamps: false })
export class Seat extends Model {
@@ -15,4 +16,7 @@ export class Seat extends Model {
@BelongsTo(() => SeatRow)
seatRow: SeatRow
@HasMany(() => Ticket)
tickets: Ticket[]
}

View File

@@ -92,12 +92,12 @@ band.get("/:name", (req: Request, res: Response) => {
}
],
attributes: {
exclude: [ "id", "tourId", "locationId" ]
exclude: [ "tourId", "locationId" ]
}
}
],
attributes: {
exclude: [ "id", "bandId" ]
exclude: [ "bandId" ]
}
},
Genre

View File

@@ -3,6 +3,10 @@ import { Concert } from "../models/acts/concert.model";
import { Request, Response, Router } from "express";
import { Event } from "../models/acts/event.model";
import { City } from "../models/locations/city.model";
import { SeatGroup } from "../models/locations/seatGroup.model";
import { SeatRow } from "../models/locations/seatRow.model";
import { Seat } from "../models/locations/seat.model";
import { Ticket } from "../models/ordering/ticket.model";
export const concert = Router()
@@ -12,7 +16,29 @@ concert.get("/:id", (req: Request, res: Response) => {
Event,
{
model: Location,
include: [ City ],
include: [
{
model: City
},
{
model: SeatGroup,
include: [
{
model: SeatRow,
include: [
{
model: Seat,
include: [
{
model: Ticket
}
]
}
]
}
]
}
],
attributes: {
exclude: [ "cityId" ]
}
@@ -22,7 +48,27 @@ concert.get("/:id", (req: Request, res: Response) => {
exclude: [ "locationId", "tourId" ]
}
})
.then(shows => {
res.status(200).json(shows)
.then(concert => {
for (let seatGroup of concert.dataValues.location.dataValues.seatGroups) {
seatGroup.dataValues["occupied"] = 0
for (let seatRow of seatGroup.dataValues.seatRows) {
for (let seat of seatRow.dataValues.seats) {
seat.dataValues["state"] = 0
for (let ticket of seat.dataValues.tickets) {
if (ticket.dataValues.concertId == req.params.id) {
seat.dataValues["state"] = 1
seatGroup.dataValues["occupied"] += 1
break
}
}
delete seat.dataValues.tickets
}
}
}
res.status(200).json(concert)
})
})

View File

@@ -42,6 +42,7 @@ app.use("/genres", genre)
app.use("/orders", order)
app.use("/accounts", account)
app.use("/cities", city)
app.use("/concerts", concert)
// Start server

View File

@@ -20,7 +20,7 @@ defineProps({
<v-card
:title="title"
:subtitle="subtitle"
:icon="icon"
:prepend-icon="icon"
>
<slot></slot>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -5,3 +5,11 @@ let BASE_URL = "http://localhost:3000/concerts"
export async function getAllConcerts() {
return await axios.get(BASE_URL)
}
export async function getConcert(id: number) {
if (id != undefined) {
return await axios.get(BASE_URL + "/" + id)
} else {
return null
}
}

View File

@@ -5,5 +5,6 @@ export class SeatGroupModel {
surcharge: number
standingArea: Boolean
capacity: number
occupied: number
seatRows: Array<SeatRowModel>
}

View File

@@ -1,4 +1,5 @@
export class SeatModel {
id: number
seatNr: string
state: number
}

View File

@@ -0,0 +1,14 @@
import { SeatModel } from "../locations/seatModel";
import { SeatRowModel } from "../locations/seatRowModel";
export class SelectedSeatModel {
seat: SeatModel
seatRow: number
seatGroupName: string
constructor(seat: SeatModel, seatRow: number, seatGroupName: string) {
this.seat = seat
this.seatRow = seatRow
this.seatGroupName = seatGroupName
}
}

View File

@@ -3,17 +3,19 @@ import { useLocalStorage } from "@vueuse/core";
import { BasketItemModel } from "../models/ordering/basketItemModel";
import { useFeedbackStore } from "./feedbackStore";
import { BannerStateEnum } from "../enums/bannerStateEnum";
import { addOrder } from "../api/orderApi";
import { useAccountStore } from "./accountStore";
import { ConcertModel } from "../models/acts/concertModel";
import { AddressModel } from "../models/user/addressModel";
import { PaymentModel } from "../models/user/paymentModel";
import { SeatModel } from "../models/locations/seatModel";
import { ref } from "vue";
import { SelectedSeatModel } from "../models/ordering/selectedSeatModel";
export const useBasketStore = defineStore('basketStore', {
state: () => ({
itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", []),
usedAddress: useLocalStorage("hackmycart/basketStore/usedAddress", new AddressModel()),
usedPayment: useLocalStorage("hackmycart/basketStore/usedPayment", new PaymentModel())
usedPayment: useLocalStorage("hackmycart/basketStore/usedPayment", new PaymentModel()),
selectedSeats: ref<Array<SelectedSeatModel>>([])
}),
getters: {

View File

@@ -146,5 +146,8 @@
"filtering": "Filtern",
"bandMember": "Band Mitglieder",
"rating": "Bewertung | Bewertungen",
"image": "Foto | Fotos"
"image": "Foto | Fotos",
"seatSelection": "Sitzauswahl",
"loading": "Lade",
"orderSummary": "Bestellübersicht"
}

View File

@@ -146,5 +146,8 @@
"filtering": "Filtering",
"bandMember": "Band members",
"rating": "Rating | Ratings",
"image": "Image | Images"
"image": "Image | Images",
"seatSelection": "Select seat",
"loading": "Loading",
"orderSummary": "Order Summary"
}

View File

@@ -14,7 +14,7 @@ import { ref } from 'vue';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { getBand } from '@/data/api/bandApi';
import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
import cardWithTopImage from '@/components/cardWithTopImage.vue';
import { ConcertModel } from '@/data/models/acts/concertModel';
const router = useRouter()
const shoppingStore = useShoppingStore()
@@ -62,6 +62,7 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
<concert-list-item
:title="dateStringToHumanReadableString(concert.date)"
:image="concert.location.image"
@click="router.push('/concert/' + concert.id)"
>
<template #description>
<v-row>

View File

@@ -1,15 +0,0 @@
<script setup lang="ts">
import actionDialog from '@/components/actionDialog.vue';
import { LocationModel } from '@/data/models/locations/locationModel';
const showDialog = defineModel()
defineProps({
})
</script>
<template>
<action-dialog >
123
</action-dialog>
</template>

View File

@@ -0,0 +1,86 @@
<script setup lang="ts">
import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
import { ref } from 'vue';
import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
import { getConcert } from '@/data/api/concertApi';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { useRouter } from 'vue-router';
import sectionDivider from '@/components/sectionDivider.vue';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { useBasketStore } from '@/data/stores/basketStore';
const router = useRouter()
const seatGroups = ref<Array<SeatGroupModel>>()
const feedbackStore = useFeedbackStore()
const basketStore = useBasketStore()
feedbackStore.fetchDataFromServerInProgress = true
getConcert(Number(router.currentRoute.value.params.id))
.then(result => {
seatGroups.value = result.data.location.seatGroups
feedbackStore.fetchDataFromServerInProgress = false
})
// function findRow(seatRowId: number) {
// for (let seatGroup of seatGroups.value) {
// for(let seatRow of seatGroup.seatRows) {
// let result = seatRow.seats.find()
// }
// }
// }
</script>
<template>
<v-container>
<v-row>
<v-spacer />
<v-col cols="10">
<v-row>
<v-col>
<section-divider :title="$t('seatSelection')" />
</v-col>
</v-row>
<v-row >
<v-col class="text-center" v-if="feedbackStore.fetchDataFromServerInProgress">
<v-progress-circular
size="x-large"
width="10"
color="primary"
indeterminate
/>
<div class="pt-5 text-h3">
{{ $t('loading') }}...
</div>
</v-col>
<v-col v-else>
<seat-plan-map :seat-groups="seatGroups" />
</v-col>
</v-row>
<v-row>
<v-col>
<section-divider :title="$t('orderSummary')" />
</v-col>
</v-row>
<v-row>
<v-col>
<v-list >
<v-list-item v-for="seat in basketStore.selectedSeats" >
Group: {{ seat.seatGroupName }} - Row: {{ seat.seatRow }} - Seat: {{ seat.seat.seatNr }}
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-col>
<v-spacer />
</v-row>
</v-container>
</template>

View File

@@ -8,6 +8,7 @@ import LocationsPage from "@/pages/locations/locationsPage/index.vue"
import SearchPage from "@/pages/events/searchPage/index.vue"
import BandDetailPage from "@/pages/events/bandDetailPage/index.vue"
import LocationDetailPage from "@/pages/locations/locationDetailPage/index.vue"
import TicketOrderPage from "@/pages/events/ticketOrderPage/index.vue"
const routes = [
{ path: "/", component: HomePage },
@@ -15,6 +16,7 @@ const routes = [
{ path: '/locations', component: LocationsPage },
{ path: '/locations/:locationName', component: LocationDetailPage },
{ path: '/bands/:bandName', component: BandDetailPage },
{ path: '/concert/:id', component: TicketOrderPage },
{ path: '/events', component: EventsPage },
{ path: '/search', component: SearchPage },
...accountRoutes,