tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Redesign seat map layout

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-10-10 14:11:09 +02:00
parent 23b9fa3dd2
commit 8d78a9eeb7
14 changed files with 1967 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
software/src/components/seatPlanMap/seatGroupSheet.vue
View File

@@ -4,40 +4,146 @@ import seatGroupTable from './seatGroupTable.vue';
import standingArea from './standingArea.vue';
import { ConcertModel } from '@/data/models/acts/concertModel';
defineProps({
let props = defineProps({
seatGroup: SeatGroupModel,
concert: ConcertModel,
backgroundColor: String
withStage: Boolean
})
function getCornerClass() {
switch(props.seatGroup.name) {
case 'C': return "rounded-ts-xl"
case 'E': return "rounded-bs-xl"
case 'G': return "rounded-be-xl"
case 'I': return "rounded-te-xl"
}
}
function getStructureNumber() {
switch(props.seatGroup.name) {
case 'A':
case 'B':
case 'F': return 0
case 'D':
case 'H': return 1
case 'C': return 2
case 'E': return 3
case 'G': return 4
case 'I': return 5
}
}
function getNameLocation() {
switch(props.seatGroup.name) {
case 'B':
case 'C':
case 'I': return 0
case 'E':
case 'F':
case 'G': return 1
case 'D': return 2
case 'H': return 3
}
}
</script>
<template>
<standing-area
:seat-group="seatGroup"
:concert="concert"
:background-color="backgroundColor"
:with-stage="withStage"
v-if="seatGroup != undefined && seatGroup.standingArea"
/>
<v-sheet
v-else-if="seatGroup != undefined"
class="pa-5"
:color="backgroundColor"
class="pa-3"
:class="getCornerClass()"
border
style="height: 100%;"
>
<v-row >
<v-col class="text-h4 text-center font-weight-black">
{{ seatGroup.name }}
</v-col>
</v-row>
<!-- Block name above seat icons -->
<div v-if="getNameLocation() == 0">
<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"
:seat-group="seatGroup"
:concert="concert"
/>
</v-col>
</v-row>
<v-row>
<v-spacer v-if="seatGroup.name == 'C'" />
<v-col class="d-flex justify-center align-center">
<seat-group-table
:seat-rows="seatGroup.seatRows"
:seat-group="seatGroup"
:concert="concert"
:structure="getStructureNumber()"
/>
</v-col>
<v-spacer v-if="seatGroup.name == 'I'" />
</v-row>
</div>
<!-- Block name under seat icons -->
<div v-else-if="getNameLocation() == 1">
<v-row>
<v-col class="d-flex justify-center align-center">
<v-spacer v-if="seatGroup.name == 'E'" />
<seat-group-table
:seat-rows="seatGroup.seatRows"
:seat-group="seatGroup"
:concert="concert"
:structure="getStructureNumber()"
/>
</v-col>
<v-spacer v-if="seatGroup.name == 'G'" />
</v-row>
<v-row >
<v-col class="text-h4 text-center font-weight-black">
{{ seatGroup.name }}
</v-col>
</v-row>
</div>
<!-- Block name left to seat icons -->
<div v-else-if="getNameLocation() == 2">
<v-row>
<v-col class="text-h4 font-weight-black d-flex justify-center align-center">
{{ seatGroup.name }}
</v-col>
<v-col class="d-flex justify-center align-center">
<seat-group-table
:seat-rows="seatGroup.seatRows"
:seat-group="seatGroup"
:concert="concert"
:structure="getStructureNumber()"
/>
</v-col>
</v-row>
</div>
<!-- Block name right to seat icons -->
<div v-else-if="getNameLocation() == 3">
<v-row>
<v-col class="d-flex justify-center align-center">
<seat-group-table
:seat-rows="seatGroup.seatRows"
:seat-group="seatGroup"
:concert="concert"
:structure="getStructureNumber()"
/>
</v-col>
<v-col class="text-h4 font-weight-black d-flex justify-center align-center">
{{ seatGroup.name }}
</v-col>
</v-row>
</div>
</v-sheet>
</template>

123
software/src/components/seatPlanMap/seatGroupTable.vue
View File

@@ -11,7 +11,22 @@ const basketStore = useBasketStore()
let props = defineProps({
seatRows: Array<SeatRowModel>,
concert: ConcertModel,
seatGroup: SeatGroupModel
seatGroup: SeatGroupModel,
/**
* Structure of the seat placment
*
* 0 = Normal rectangular form, rows from top to bottom (default)
* 1 = Normal rectangular form but rows and cols are switched
* 2 = Pyramid structure from right bottom corner
* 3 = Pyramid structure from right top corner
* 4 = Pyramid structure from left top corner
* 5 = Pyramid structure from left bottom corner
*/
structure: {
type: Number,
default: 0
}
})
function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
@@ -30,24 +45,31 @@ function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
}
}
function seatColor(state: number) {
function seatColor(surcharge: number, state: number) {
switch (state) {
case 0: return "grey"
case 1: return "red"
case 0: {
switch(surcharge) {
case 0: return "orange"
case 10: return "teal"
case 20: return "green"
case 30: return "red"
}
}
case 1: return "grey"
case 2: return "orange"
}
}
</script>
<template>
<table>
<table v-if="structure == 0">
<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)"
:color="seatColor(seatGroup.surcharge, seat.state)"
:disabled="seat.state == 1"
density="compact"
@click="handleSeatClick(seat, seatRow)"
@@ -56,4 +78,93 @@ function seatColor(state: number) {
</tr>
</tbody>
</table>
<table v-else-if="structure == 1">
<tbody>
<tr v-for="i in seatRows[0].seats.length">
<td v-for="row in seatRows">
<v-btn
variant="text"
icon="mdi-circle"
:color="seatColor(seatGroup.surcharge, row.seats[i - 1].state)"
:disabled="row.seats[i - 1].state == 1"
density="compact"
@click="handleSeatClick(row.seats[i - 1], row)"
/>
</td>
</tr>
</tbody>
</table>
<table v-else-if="structure == 2">
<tbody>
<tr v-for="i in seatRows.length">
<td v-for="j in seatRows[i - 1].seats.length">
<v-btn
v-if="seatRows[i - 1].seats.length - i < j"
variant="text"
icon="mdi-circle"
:color="seatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
:disabled="seatRows[i - 1].seats[j - 1].state == 1"
density="compact"
@click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
/>
</td>
</tr>
</tbody>
</table>
<table v-else-if="structure == 3">
<tbody>
<tr v-for="i in seatRows.length">
<td v-for="j in seatRows[i - 1].seats.length">
<v-btn
v-if="j >= i"
variant="text"
icon="mdi-circle"
:color="seatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
:disabled="seatRows[i - 1].seats[j - 1].state == 1"
density="compact"
@click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
/>
</td>
</tr>
</tbody>
</table>
<table v-else-if="structure == 4">
<tbody>
<tr v-for="i in seatRows.length">
<td v-for="j in seatRows[i - 1].seats.length">
<v-btn
v-if="seatRows[i - 1].seats.length - i >= j - 1"
variant="text"
icon="mdi-circle"
:color="seatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
:disabled="seatRows[i - 1].seats[j - 1].state == 1"
density="compact"
@click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
/>
</td>
</tr>
</tbody>
</table>
<table v-else-if="structure == 5">
<tbody>
<tr v-for="i in seatRows.length">
<td v-for="j in seatRows[i - 1].seats.length">
<v-btn
v-if="j <= i"
variant="text"
icon="mdi-circle"
:color="seatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
:disabled="seatRows[i - 1].seats[j - 1].state == 1"
density="compact"
@click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
/>
</td>
</tr>
</tbody>
</table>
</template>

133
software/src/components/seatPlanMap/seatPlanMap.vue
View File

@@ -2,14 +2,18 @@
import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
import seatGroupSheet from './seatGroupSheet.vue';
import { ConcertModel } from '@/data/models/acts/concertModel';
import { LocationModel } from '@/data/models/locations/locationModel';
let props = defineProps({
seatGroups: Array<SeatGroupModel>,
concert: ConcertModel
location: LocationModel,
concert: {
type: ConcertModel,
default: new ConcertModel()
}
})
function findSeatCategory(name: string): SeatGroupModel {
return props.seatGroups.find(category =>
return props.location.seatGroups.find(category =>
category.name == name
)
}
@@ -20,50 +24,103 @@ const seatGroupC = findSeatCategory("C")
const seatGroupD = findSeatCategory("D")
const seatGroupE = findSeatCategory("E")
const seatGroupF = findSeatCategory("F")
const seatGroupG = findSeatCategory("G")
const seatGroupH = findSeatCategory("H")
const seatGroupI = findSeatCategory("I")
</script>
<template>
<v-row>
<v-col></v-col>
<v-sheet border class="pa-5">
<v-row>
<v-col cols="4">
<seat-group-sheet
:seat-group="seatGroupC"
:concert="concert"
background-color="grey"
/>
</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 cols="4">
<seat-group-sheet
:seat-group="seatGroupB"
:concert="concert"
background-color="grey"
/>
</v-col>
<v-col></v-col>
</v-row>
<v-col cols="4">
<seat-group-sheet
:seat-group="seatGroupI"
:concert="concert"
background-color="grey"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<seat-group-sheet :seat-group="seatGroupC" :concert="concert" background-color="cyan-darken-4" />
</v-col>
<v-row>
<v-col cols="4">
<seat-group-sheet
v-if="location.layout != 1"
:seat-group="seatGroupD"
:concert="concert"
background-color="grey"
/>
</v-col>
<v-col>
<seat-group-sheet :seat-group="seatGroupA" :concert="concert" background-color="grey" />
</v-col>
<v-col :cols="location.layout == 1 ? 10 : 4">
<seat-group-sheet
:seat-group="seatGroupA"
:concert="concert"
background-color="grey"
:withStage="location.layout == 3"
/>
</v-col>
<v-col>
<seat-group-sheet :seat-group="seatGroupB" :concert="concert" background-color="cyan-darken-4" />
</v-col>
</v-row>
<v-col v-if="location.layout != 3">
<v-sheet
color="grey-darken-3"
height="100%"
width="50"
class="px-5 py-2 d-flex justify-center align-center"
>
{{ $t('stage') }}
</v-sheet>
</v-col>
<v-row>
<v-col>
<seat-group-sheet :seat-group="seatGroupF" :concert="concert" background-color="deep-purple-darken-4" />
</v-col>
<v-col v-else cols="4">
<seat-group-sheet
:seat-group="seatGroupH"
:concert="concert"
background-color="grey"
/>
</v-col>
</v-row>
<v-col>
<seat-group-sheet :seat-group="seatGroupD" :concert="concert" background-color="indigo-darken-4" />
</v-col>
<v-col>
<seat-group-sheet :seat-group="seatGroupE" :concert="concert" background-color="deep-purple-darken-4" />
</v-col>
</v-row>
<v-row v-if="location.layout != 1">
<v-col cols="4">
<seat-group-sheet
:seat-group="seatGroupE"
:concert="concert"
background-color="grey"
/>
</v-col>
<v-col cols="4">
<seat-group-sheet
:seat-group="seatGroupF"
:concert="concert"
background-color="grey"
/>
</v-col>
<v-col cols="4">
<seat-group-sheet
:seat-group="seatGroupG"
:concert="concert"
background-color="grey"
/>
</v-col>
</v-row>
</v-sheet>
</template>

29
software/src/components/seatPlanMap/standingArea.vue
View File

@@ -9,7 +9,8 @@ const basketStore = useBasketStore()
let props = defineProps({
seatGroup: SeatGroupModel,
concert: ConcertModel,
backgroundColor: String
backgroundColor: String,
withStage: Boolean
})
function handleSeatClick() {
@@ -31,22 +32,32 @@ function handleSeatClick() {
class="pa-5"
min-height="200"
height="100%"
:color="isHovering ? 'red' : backgroundColor"
border
:color="isHovering ? 'orange' : ''"
@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-spacer />
<v-col class="text-center" cols="6">
<v-icon
v-if="!withStage"
icon="mdi-account-group"
size="x-large"
/>
<v-sheet
v-else
color="grey-darken-3"
height="100"
width="100%"
class="d-flex justify-center align-center"
>
{{ $t('stage') }}
</v-sheet>
</v-col>
<v-spacer />
</v-row>
<v-row>

1
software/src/data/models/locations/locationModel.ts
View File

@@ -10,6 +10,7 @@ export class LocationModel {
imageIndoor: string
imageOutdoor: string
seatSchema: string
layout: number
city: {
name: string
country: string

2
software/src/data/models/locations/seatModel.ts
View File

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

2
software/src/pages/homePage/index.vue
View File

@@ -81,7 +81,7 @@ getTopEvents(4)
<v-row>
<v-col v-for="i in 8" cols="3">
<card-with-top-image
:image="topLocations[i - 1].image"
:image="topLocations[i - 1].imageOutdoor"
:title="topLocations[i - 1].name"
smaller-title
@click="router.push('/locations/' + topLocations[i - 1].name.replaceAll(' ', '-').toLowerCase())"

3
software/src/pages/locations/locationDetailPage/index.vue
View File

@@ -80,7 +80,6 @@ getLocation(String(router.currentRoute.value.params.locationName))
</v-row>
<v-row>
<v-col>
<section-divider :title="$t('seatPlan')" />
@@ -96,7 +95,7 @@ getLocation(String(router.currentRoute.value.params.locationName))
<v-row v-else>
<v-col>
<seat-plan-map
:seat-groups="location.seatGroups"
:location="location"
/>
</v-col>
</v-row>

3
software/src/pages/locations/locationsPage/index.vue
View File

@@ -14,6 +14,9 @@ shoppingStore.getCities()
<template>
<v-container>
<v-row>
</v-row>
<v-row>
<v-spacer />