janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 13:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

mostly working seat selection

Browse Source
This commit is contained in:
Janis Hutz
2023-07-19 14:42:32 +02:00
parent b20103d5f1
commit d855f61347
7 changed files with 197 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/webapp/main/src/components/noseatplan.vue
View File

@@ -5,14 +5,19 @@
<h3>Available tickets</h3> <h3>Available tickets</h3>
<div class="wrapper"> <div class="wrapper">
<div v-for="ticket in tickets"> <div v-for="ticket in tickets">
{{ eventInfo[ 'categories' ][ ticket.category ][ 'name' ] }} {{ event[ 'categories' ][ ticket.category ][ 'name' ] }}
<table> <table>
<tr v-for="ticketOption in eventInfo[ 'ageGroups' ]"> <tr v-for="ticketOption in event[ 'ageGroups' ]">
<td> <td>
{{ ticketOption.name }} <div style="display: inline" v-if="ticketOption.age">({{ ticketOption.age }})</div> {{ ticketOption.name }} <div style="display: inline" v-if="ticketOption.age">({{ ticketOption.age }})</div>
</td> </td>
<td> <td>
{{ eventInfo.currency }} {{ eventInfo[ 'categories' ][ ticket.category ][ 'price' ][ ticketOption.id ] }} <span class="material-symbols-outlined">add</span> Selected <span class="material-symbols-outlined">remove</span> {{ event.currency }} {{ event[ 'categories' ][ ticket.category ][ 'price' ][ ticketOption.id ] }}
</td>
<td>
<span class="material-symbols-outlined controls" @click="selectTicket( ticket.id, ticketOption.id )">add</span>
{{ cart[ event.name ] ? ( cart[ event.name ][ 'tickets' ][ ticket.id + '_' + ticketOption.id ] ? cart[ event.name ][ 'tickets' ][ ticket.id + '_' + ticketOption.id ][ 'count' ] : 0 ) : 0 }}
<span class="material-symbols-outlined controls" @click="deselectTicket( ticket.id, ticketOption.id )">remove</span>
</td> </td>
</tr> </tr>
</table> </table>
@@ -35,33 +40,73 @@ export default {
}, },
data () { data () {
return { return {
tickets: { 'ticket1': { 'name': 'Ticket 1', 'id': 'ticket1', 'category': 1 }, 'ticket2': { 'name': 'Ticket 2', 'id': 'ticket2', 'category': 2 } }, tickets: { 'ticket1': { 'name': 'Ticket 1', 'id': 'ticket1', 'category': 1, 'free': 20 }, 'ticket2': { 'name': 'Ticket 2', 'id': 'ticket2', 'category': 2, 'free': 20 } },
eventInfo: { 'name': 'TestEvent', 'location': 'TestLocation', 'date': 'TestDate', 'RoomName': 'TestRoom', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99 years' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount':2, 'stage': true }, event: { 'name': 'TestEvent', 'location': 'TestLocation', 'date': 'TestDate', 'RoomName': 'TestRoom', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99 years' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount':2, 'stage': true },
cart: {}, cart: {},
} }
}, },
methods: { methods: {
cartHandling ( operation, data ) { selectTicket( id, option ) {
let totalTicketsPerID = 0;
if ( this.cart[ this.event.name ] ) {
if ( this.cart[ this.event.name ][ 'tickets' ][ id + '_' + option ] ) {
const tickets = this.cart[ this.event.name ][ 'tickets' ];
for ( let ticket in tickets ) {
if ( tickets[ ticket ][ 'id' ].split( '_' )[ 0 ] === id ) {
totalTicketsPerID += this.cart[ this.event.name ][ 'tickets' ][ tickets[ ticket ][ 'id' ] ][ 'count' ];
}
}
if ( totalTicketsPerID < this.tickets[ id ].free ) {
this.cartHandling( 'select', this.tickets[ id ], option );
}
} else {
this.cartHandling( 'select', this.tickets[ id ], option );
}
} else {
this.cartHandling( 'select', this.tickets[ id ], option );
}
},
cartHandling ( operation, data, option ) {
if ( operation === 'select' ) { if ( operation === 'select' ) {
if ( this.cart[ this.event.name ] ) { if ( this.cart[ this.event.name ] ) {
this.cart[ this.event.name ][ 'tickets' ][ this.selectedSeat.id ] = { 'displayName': this.selectedSeat.displayName, 'price': this.selectedSeat.option[ data ].price, 'id': this.selectedSeat.id }; if ( this.cart[ this.event.name ][ 'tickets' ][ data.id + '_' + option ] ) {
this.cart[ this.event.name ][ 'tickets' ][ data.id + '_' + option ][ 'count' ] += 1;
} else {
this.cart[ this.event.name ][ 'tickets' ][ data.id + '_' + option ] = { 'displayName': data.name + ' (' + this.event.ageGroups[ option ].name + ')', 'price': this.event.categories[ data.category ].price[ option ], 'id': data.id + '_' + option, 'count': 1 };
}
} else { } else {
this.cart[ this.event.name ] = { 'displayName': this.event.name, 'tickets': {} }; this.cart[ this.event.name ] = { 'displayName': this.event.name, 'tickets': {} };
this.cart[ this.event.name ][ 'tickets' ][ this.selectedSeat.id ] = { 'displayName': this.selectedSeat.displayName, 'price': this.selectedSeat.option[ data ].price, 'id': this.selectedSeat.id }; this.cart[ this.event.name ][ 'tickets' ][ data.id + '_' + option ] = { 'displayName': data.name + ' (' + this.event.ageGroups[ option ].name + ')', 'price': this.event.categories[ data.category ].price[ option ], 'id': data.id + '_' + option, 'count': 1 };
} }
} else if ( operation === 'deselect' ) { } else if ( operation === 'deselect' ) {
if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length > 1 ) { if ( this.cart[ this.event.name ][ 'tickets' ][ data + '_' + option ][ 'count' ] === 1 ) {
delete this.cart[ this.event.name ][ 'tickets' ][ this.selectedSeat.id ]; delete this.cart[ this.event.name ][ 'tickets' ][ data + '_' + option ];
} else { } else {
this.cart[ this.event.name ][ 'tickets' ][ data + '_' + option ][ 'count' ] -= 1;
}
if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length < 1 ) {
delete this.cart[ this.event.name ]; delete this.cart[ this.event.name ];
} }
} }
this.$refs.cart.calculateTotal(); this.$refs.cart.calculateTotal();
localStorage.setItem( 'cart', JSON.stringify( this.cart ) ); localStorage.setItem( 'cart', JSON.stringify( this.cart ) );
}, },
deselectTicket( id, option ) {
if ( this.cart[ this.event.name ] ) {
if ( this.cart[ this.event.name ][ 'tickets' ][ id + '_' + option ] ) {
if ( this.cart[ this.event.name ][ 'tickets' ][ id + '_' + option ][ 'count' ] > 0 ) {
this.cartHandling( 'deselect', id, option );
}
}
}
},
loadTickets () {
// TODO: Load from server
}
}, },
created() { created () {
console.log( 'Hello World' ); this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
// this.loadTickets();
} }
} }
</script> </script>
@@ -82,13 +127,6 @@ export default {
height: 100%; height: 100%;
} }
.sidebar {
grid-area: sidebar;
background-color: var( --accent-background );
color: var( --secondary-color );
overflow: scroll;
}
.noseatplan { .noseatplan {
grid-area: main; grid-area: main;
display: flex; display: flex;
@@ -107,85 +145,12 @@ export default {
text-align: justify; text-align: justify;
} }
.ticket { .controls {
width: 100%; user-select: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var( --overlay-color );
height: 100%;
width: 100%;
}
.popup {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.popup-content {
background-color: var( --background-color );
height: 60%;
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-radius: 50px;
}
.popup-content-wrapper {
display: flex;
height: 90%;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: scroll;
}
.close-container {
width: 100%;
display: flex;
justify-content: flex-end;
}
.close-button {
cursor: pointer; cursor: pointer;
margin-right: 3vh; font-size: 100%;
margin-top: 3vh;
}
.button {
background-color: var( --accent-background );
color: var( --secondary-color );
font-weight: bold; font-weight: bold;
font-size: 110%; border: solid var( --primary-color ) 1px;
border-radius: 20px; border-radius: 100%;
border-style: none;
padding: 10px 40px;
transition: 0.6s;
}
.button:hover {
background-color: var( --accent-background-hover );
transition: 0.3s;
cursor: pointer;
}
.price-table {
width: 100%;
} }
</style> </style>

5
src/webapp/main/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue
View File

@@ -50,7 +50,7 @@ export default {
}, },
data: { data: {
type: Object, type: Object,
"default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true }, 'categoryInfo': { 'pricing': { 'adult': { 'displayName': 'Adults - CHF 20.-', 'value': 'adult', 'price': 20 }, 'child': { 'displayName': 'Child (0 - 15.99y) - CHF 15.-', 'value': 'child', 'price': 15 } } } } "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': 'nav' }, 'categoryInfo': { 'pricing': { '1': { 'displayName': 'Adults - CHF 20.-', 'value': '1', 'price': 20 }, '2': { 'displayName': 'Child (0 - 15.99y) - CHF 15.-', 'value': '2', 'price': 15 } } } }
}, },
id: { id: {
type: Number, type: Number,
@@ -91,7 +91,7 @@ export default {
if ( this.data.unavailableSeats ) { if ( this.data.unavailableSeats ) {
if ( this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ] ) { if ( this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ] ) {
this.seats[ row ][ n ][ 'status' ] = 'nav'; this.seats[ row ][ n ][ 'status' ] = this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ];
} }
} }
} }
@@ -110,7 +110,6 @@ export default {
selectedSeat[ 'sector' ] = this.data.sector; selectedSeat[ 'sector' ] = this.data.sector;
selectedSeat[ 'option' ] = this.data.categoryInfo.pricing; selectedSeat[ 'option' ] = this.data.categoryInfo.pricing;
selectedSeat[ 'componentID' ] = this.id; selectedSeat[ 'componentID' ] = this.id;
console.log( selectedSeat );
this.$emit( 'seatSelected', selectedSeat ); this.$emit( 'seatSelected', selectedSeat );
}, },
deselectSeat( row, seat ) { deselectSeat( row, seat ) {

42
src/webapp/main/src/components/seatplan/userApp/userWindow.vue
View File

@@ -24,7 +24,7 @@
@seatSelected="( seat ) => { seatSelected( seat ) }"></trapezoidSeatplanComponent> @seatSelected="( seat ) => { seatSelected( seat ) }"></trapezoidSeatplanComponent>
<rectangularSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.shape == 'rectangular' && draggable.type == 'seat'" :scale-factor="scaleFactor" <rectangularSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.shape == 'rectangular' && draggable.type == 'seat'" :scale-factor="scaleFactor"
:w="draggable.w" :h="draggable.h" :origin="draggable.origin" :w="draggable.w" :h="draggable.h" :origin="draggable.origin" :data="draggable.data"
@seatSelected="( seat ) => { seatSelected( seat ) }" @seatDeselected="( seat ) => { seatDeselected( seat ) }"></rectangularSeatplanComponent> @seatSelected="( seat ) => { seatSelected( seat ) }" @seatDeselected="( seat ) => { seatDeselected( seat ) }"></rectangularSeatplanComponent>
<stagesSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'stage'" :origin="draggable.origin" :shape="draggable.shape"></stagesSeatplanComponent> <stagesSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'stage'" :origin="draggable.origin" :shape="draggable.shape"></stagesSeatplanComponent>
@@ -73,8 +73,8 @@
}, },
data() { data() {
return { return {
draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1, 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1, 'seatCountingStartingPoint': 1, 'sector': 'A', 'text': { 'text': 'TestText', 'textSize': 20, 'colour': '#20FFFF' } }, 'ticketCount': 1 }, draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1, 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1, 'seatCountingStartingPoint': 1, 'sector': 'A', 'text': { 'text': 'TestText', 'textSize': 20, 'colour': '#20FFFF' }, 'ticketCount': 1, 'category': 1 } },
event: { 'name': 'TestEvent2', 'location': 'TestLocation2', 'date': '2023-07-15', 'RoomName': 'TestRoom2', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount': 2, 'maxTickets': 2 }, event: { 'name': 'TestEvent2', 'location': 'TestLocation2', 'date': '2023-07-15', 'RoomName': 'TestRoom2', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult' } }, 'ageGroupCount': 2, 'maxTickets': 2 },
available: { 'redo': false, 'undo': false }, available: { 'redo': false, 'undo': false },
scaleFactor: 1, scaleFactor: 1,
sizePoll: null, sizePoll: null,
@@ -110,14 +110,16 @@
} }
}; };
// Load cart
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
// Load seat plan // Load seat plan
this.loadSeatplan(); this.loadSeatplan();
// TODO: remove scaleDown function again once backend is up // TODO: remove scaleDown function again once backend is up
// TODO: Optimise for odd screen sizes and aspect ratios and fucking webkit // TODO: Optimise for odd screen sizes and aspect ratios and fucking webkit
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) ); sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
// Load cart
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
}, },
eventHandler ( e ) { eventHandler ( e ) {
if ( this.prevSize.h != window.innerHeight || this.prevSize.w != window.innerWidth ) { if ( this.prevSize.h != window.innerHeight || this.prevSize.w != window.innerWidth ) {
@@ -202,6 +204,28 @@
self.$refs.popups.openPopup( 'We are sorry to tell you that since the last time the seat plan was refreshed, one or more of the seats you have selected has/have been taken.', {}, 'string' ); self.$refs.popups.openPopup( 'We are sorry to tell you that since the last time the seat plan was refreshed, one or more of the seats you have selected has/have been taken.', {}, 'string' );
}, 500 ); }, 500 );
} }
// Mark all selected seats + all unavailable seats
// { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': 'nav' }, 'categoryInfo': { 'pricing': { '1': { 'displayName': 'Adults - CHF 20.-', 'value': 'adult', 'price': 20 }, '2': { 'displayName': 'Child (0 - 15.99y) - CHF 15.-', 'value': 'child', 'price': 15 } } } }
let categoryDetails = {};
for ( let category in this.event.categories ) {
categoryDetails[ category ] = {};
for ( let group in this.event.ageGroups ) {
categoryDetails[ category ][ group ] = {};
categoryDetails[ category ][ group ] = { 'displayName': this.event.ageGroups[ group ].name + ( this.event.ageGroups[ group ].age ? ' (' + this.event.ageGroups[ group ].age + ')' : '' ) + ' - ' + this.event.currency + ' ' + this.event.categories[ category ].price[ group ], 'value': group, 'price': this.event.categories[ category ].price[ group ] };
}
}
for ( let element in this.draggables ) {
this.draggables[ element ][ 'data' ] = { 'sector': this.draggables[ element ][ 'sector' ], 'unavailableSeats': {}, 'categoryInfo': { 'pricing': categoryDetails[ this.draggables[ element ][ 'category' ] ] } };
}
if ( this.cart[ this.event.name ] ) {
let tickets = this.cart[ this.event.name ][ 'tickets' ];
for ( let ticket in tickets ) {
this.draggables[ tickets[ ticket ].comp ][ 'data' ][ 'unavailableSeats' ][ ticket ] = 'sel';
}
}
}, },
scaleUp ( valueArray ) { scaleUp ( valueArray ) {
const allowedAttributes = [ 'w', 'h', 'x', 'y' ]; const allowedAttributes = [ 'w', 'h', 'x', 'y' ];
@@ -235,6 +259,7 @@
}, },
seatSelected ( seat ) { seatSelected ( seat ) {
this.selectedSeat = seat; this.selectedSeat = seat;
console.log( seat );
if ( Object.keys( seat.option ).length > 1 ) { if ( Object.keys( seat.option ).length > 1 ) {
this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'selection', 'adult' ); this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'selection', 'adult' );
} else { } else {
@@ -243,11 +268,12 @@
}, },
cartHandling ( operation, data ) { cartHandling ( operation, data ) {
if ( operation === 'select' ) { if ( operation === 'select' ) {
console.log( this.selectedSeat.option );
if ( this.cart[ this.event.name ] ) { if ( this.cart[ this.event.name ] ) {
this.cart[ this.event.name ][ 'tickets' ][ this.selectedSeat.id ] = { 'displayName': this.selectedSeat.displayName, 'price': this.selectedSeat.option[ data ].price, 'id': this.selectedSeat.id }; this.cart[ this.event.name ][ 'tickets' ][ this.selectedSeat.id ] = { 'displayName': this.selectedSeat.displayName, 'price': this.selectedSeat.option[ data ].price, 'id': this.selectedSeat.id, 'option': data, 'comp': this.selectedSeat.componentID };
} else { } else {
this.cart[ this.event.name ] = { 'displayName': this.event.name, 'tickets': {} }; this.cart[ this.event.name ] = { 'displayName': this.event.name, 'tickets': {} };
this.cart[ this.event.name ][ 'tickets' ][ this.selectedSeat.id ] = { 'displayName': this.selectedSeat.displayName, 'price': this.selectedSeat.option[ data ].price, 'id': this.selectedSeat.id }; this.cart[ this.event.name ][ 'tickets' ][ this.selectedSeat.id ] = { 'displayName': this.selectedSeat.displayName, 'price': this.selectedSeat.option[ data ].price, 'id': this.selectedSeat.id, 'option': data, 'comp': this.selectedSeat.componentID };
} }
} else if ( operation === 'deselect' ) { } else if ( operation === 'deselect' ) {
if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length > 1 ) { if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length > 1 ) {

52
src/webapp/main/src/components/sideCartView.vue
View File

@@ -8,32 +8,35 @@
--> -->
<template> <template>
<div id="sideCartView" :style="'width: ' + width + 'vw'"> <div id="sideCartView" :style="'width: ' + width + 'vw; top: ' + height + 'vh;'">
<h2>Cart</h2> <h2>Cart</h2>
<div v-if="Object.keys( cart ).length > 0"> <div v-if="Object.keys( cart ).length > 0" style="height: 100%; width: 100%;">
<div v-for="event in cart"> <div class="scroll-wrapper">
<h3>{{ event.displayName }}</h3> <div v-for="event in cart">
<h3>{{ event.displayName }}</h3>
<table class="tickets-table">
<tr v-for="ticket in event.tickets">
<td>
<h4 class="price"><div style="display: inline;" v-if="ticket.count">{{ ticket.count }}x</div> {{ ticket.displayName }}: </h4>
</td>
<td>
{{ currency }} {{ ticket.price }}
</td>
</tr>
</table>
</div>
<table class="tickets-table"> <table class="tickets-table">
<tr v-for="ticket in event.tickets"> <tr>
<td> <td>
<h4 class="price">{{ ticket.displayName }}: </h4> <h4>TOTAL:</h4>
</td> </td>
<td> <td>
{{ currency }} {{ ticket.price }} <h4>{{ currency }} {{ total }}</h4>
</td> </td>
</tr> </tr>
</table> </table>
<router-link to="/cart">To Cart</router-link>
</div> </div>
<table class="tickets-table">
<tr>
<td>
<h4>TOTAL:</h4>
</td>
<td>
<h4>{{ currency }} {{ total }}</h4>
</td>
</tr>
</table>
</div> </div>
<div v-else> <div v-else>
Your cart is currently empty Your cart is currently empty
@@ -57,6 +60,10 @@ export default {
'currency': { 'currency': {
type: String, type: String,
default: 'CHF' default: 'CHF'
},
'height': {
type: Number,
default: 17
} }
}, },
data() { data() {
@@ -69,7 +76,7 @@ export default {
this.total = 0; this.total = 0;
for ( let event in this.cart ) { for ( let event in this.cart ) {
for ( let ticket in this.cart[ event ][ 'tickets' ] ) { for ( let ticket in this.cart[ event ][ 'tickets' ] ) {
this.total += parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'price' ] ); this.total += parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'price' ] ) * parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'count' ] ?? 1 );
} }
} }
} }
@@ -84,8 +91,7 @@ export default {
#sideCartView { #sideCartView {
position: fixed; position: fixed;
right: 0; right: 0;
top: 17vh; height: 100vh;
height: 90vh;
background-color: var( --accent-background ); background-color: var( --accent-background );
color: var( --secondary-color ); color: var( --secondary-color );
} }
@@ -94,6 +100,12 @@ export default {
width: 80%; width: 80%;
} }
.scroll-wrapper {
width: 100%;
height: 70%;
overflow: scroll;
}
.price { .price {
margin: 0; margin: 0;
padding: 0; padding: 0;

2
src/webapp/main/src/views/admin/EventsView.vue
View File

@@ -100,7 +100,7 @@
}, },
data () { data () {
return { return {
events: { 'test':{ 'name': 'TestEvent', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'freeSeats': 2, 'maxSeats': 2, 'date':'2023-07-15', 'startingPrice':15, 'location': 'TestLocation', 'eventID': 'test', 'currency': 'CHF', 'logo': new URL( '/src/assets/logo.png', import.meta.url ).href }, 'test2':{ 'name': 'TestEvent2', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'freeSeats': 2, 'maxSeats': 2, 'date':'2023-06-13', 'startingPrice':15, 'location': 'TestLocation', 'eventID': 'test2', 'currency': 'CHF', 'logo': new URL( '/src/assets/logo.png', import.meta.url ).href } }, events: { 'test':{ 'name': 'TestEvent', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'freeSeats': 2, 'maxSeats': 2, 'date':'2023-08-15', 'startingPrice':15, 'location': 'TestLocation', 'eventID': 'test', 'currency': 'CHF', 'logo': new URL( '/src/assets/logo.png', import.meta.url ).href }, 'test2':{ 'name': 'TestEvent2', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'freeSeats': 2, 'maxSeats': 2, 'date':'2023-06-13', 'startingPrice':15, 'location': 'TestLocation', 'eventID': 'test2', 'currency': 'CHF', 'logo': new URL( '/src/assets/logo.png', import.meta.url ).href } },
currentDate: new Date().getTime(), currentDate: new Date().getTime(),
eventList: { 'upcoming': { 'name': 'Upcoming', 'content': {} }, 'past': { 'name': 'Past', 'content': {} } }, eventList: { 'upcoming': { 'name': 'Upcoming', 'content': {} }, 'past': { 'name': 'Past', 'content': {} } },
} }

37
src/webapp/main/src/views/purchasing/CartView.vue
View File

@@ -17,7 +17,7 @@
<table class="tickets-table"> <table class="tickets-table">
<tr v-for="ticket in event.tickets"> <tr v-for="ticket in event.tickets">
<td> <td>
<h4 class="price">{{ ticket.displayName }}: </h4> <h4 class="price"><div style="display: inline;" v-if="ticket.count">{{ ticket.count }}x</div> {{ ticket.displayName }}: </h4>
</td> </td>
<td> <td>
{{ backend.currency }} {{ ticket.price }} <span class="material-symbols-outlined deleteButton" @click="deleteTicket( ticket.id, event.displayName )" title="Delete ticket">delete</span> {{ backend.currency }} {{ ticket.price }} <span class="material-symbols-outlined deleteButton" @click="deleteTicket( ticket.id, event.displayName )" title="Delete ticket">delete</span>
@@ -36,6 +36,7 @@
<span class="material-symbols-outlined empty-cart">remove_shopping_cart</span> <span class="material-symbols-outlined empty-cart">remove_shopping_cart</span>
</div> </div>
</div> </div>
<popups ref="popups" size="normal" @data="data => { verifyTicketDelete( data.status ) }"></popups>
</div> </div>
</template> </template>
@@ -87,25 +88,46 @@
</style> </style>
<script> <script>
import popups from '@/components/notifications/popups.vue';
export default { export default {
data() { data() {
return { return {
cart: {}, cart: {},
backend: { 'currency': 'CHF' }, backend: { 'currency': 'CHF' },
ticketToDelete: {},
} }
}, },
components: {
popups,
},
methods: { methods: {
calculateTotal () { calculateTotal () {
this.backend.total = 0; this.backend[ 'total' ] = 0;
for ( let event in this.cart ) { for ( let event in this.cart ) {
for ( let ticket in this.cart[ event ][ 'tickets' ] ) { for ( let ticket in this.cart[ event ][ 'tickets' ] ) {
this.backend.total += parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'price' ] ); this.backend[ 'total' ] += parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'price' ] ) * parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'count' ] ?? 1 );
} }
} }
}, },
deleteTicket ( ticketID, event ) { deleteTicket ( ticketID, event ) {
console.log( ticketID, event ); this.ticketToDelete[ 'event' ] = event;
} this.ticketToDelete[ 'id' ] = ticketID;
this.$refs.popups.openPopup( 'Do you really want to delete this ticket?', {}, 'confirm' );
},
verifyTicketDelete ( status ) {
if ( status === 'ok' ) {
if ( Object.keys( this.cart[ this.ticketToDelete.event ][ 'tickets' ] ).length > 1 ) {
delete this.cart[ this.ticketToDelete.event ][ 'tickets' ][ this.ticketToDelete.id ];
} else {
delete this.cart[ this.ticketToDelete.event ];
}
}
localStorage.setItem( 'cart', JSON.stringify( this.cart ) );
},
logs ( message ) {
console.log( message );
},
}, },
created () { created () {
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {}; this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
@@ -119,4 +141,9 @@
nav { nav {
display: initial; display: initial;
} }
.price {
margin: 0;
padding: 0;
}
</style> </style>

52
src/webapp/main/src/views/purchasing/PurchaseView.vue
View File

@@ -31,13 +31,19 @@
<div class="cart-list"> <div class="cart-list">
<h2>Order summary</h2> <h2>Order summary</h2>
<h3>Your tickets</h3> <h3>Your tickets</h3>
<ul v-for="event in tickets"> <div v-for="event in cart">
<li>{{ event.name }} <h3>{{ event.displayName }}</h3>
<ul v-for="ticket in event.selectedSeats"> <table class="tickets-table">
<li>{{ ticket.name }} ({{ ticket.category.name }}, {{ ticket.ageGroup }}) {{ event.currency }} {{ ticket.price }}</li> <tr v-for="ticket in event.tickets">
</ul> <td>
</li> <h4 class="price"><div style="display: inline;" v-if="ticket.count">{{ ticket.count }}x</div> {{ ticket.displayName }}: </h4>
</ul> </td>
<td>
{{ backend.currency }} {{ ticket.price }}
</td>
</tr>
</table>
</div>
<div class="tool-wrapper wrapper-loggedIn"> <div class="tool-wrapper wrapper-loggedIn">
<h4>Total: {{ backend.currency }} {{ backend.total }}</h4> <h4>Total: {{ backend.currency }} {{ backend.total }}</h4>
</div> </div>
@@ -144,11 +150,6 @@
'main main main sidebar'; 'main main main sidebar';
} }
ul {
list-style: none;
text-align: justify;
}
.cart-list { .cart-list {
width: 100%; width: 100%;
display: flex; display: flex;
@@ -164,6 +165,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.price {
margin: 0;
padding: 0;
}
</style> </style>
<script> <script>
@@ -177,8 +183,8 @@ export default {
return { return {
settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialNumber': true, 'specialNumberDisplayName': { 'de': '', 'en': 'id number' } }, settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialNumber': true, 'specialNumberDisplayName': { 'de': '', 'en': 'id number' } },
isAuthenticated: false, isAuthenticated: false,
tickets: {}, cart: {},
backend: {}, backend: { 'currency': 'CHF' },
cartNotEmpty: false, cartNotEmpty: false,
} }
}, },
@@ -189,23 +195,33 @@ export default {
methods: { methods: {
loadData () { loadData () {
this.cartNotEmpty = false; this.cartNotEmpty = false;
let tickets = JSON.parse( sessionStorage.getItem( 'cart' ) ); let tickets = JSON.parse( localStorage.getItem( 'cart' ) );
console.log( tickets );
for ( let event in tickets ) { for ( let event in tickets ) {
if ( Object.keys( tickets[ event ][ 'selectedSeats' ] ).length ) { if ( Object.keys( tickets[ event ][ 'tickets' ] ).length ) {
this.cartNotEmpty = true; this.cartNotEmpty = true;
}; };
} }
if ( this.cartNotEmpty ) { if ( this.cartNotEmpty ) {
this.tickets = tickets; this.cart = tickets;
this.backend = JSON.parse( sessionStorage.getItem( 'backend' ) );
this.isAuthenticated = this.userStore.getUserAuthenticated; this.isAuthenticated = this.userStore.getUserAuthenticated;
this.settings.accountRequired = !this.backendStore.getIsGuestPurchaseAllowed; this.settings.accountRequired = !this.backendStore.getIsGuestPurchaseAllowed;
this.calculateTotal();
} else { } else {
this.$router.push( '/tickets' ); this.$router.push( '/tickets' );
} }
}, },
calculateTotal () {
this.backend[ 'total' ] = 0;
for ( let event in this.cart ) {
for ( let ticket in this.cart[ event ][ 'tickets' ] ) {
this.backend[ 'total' ] += parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'price' ] ) * parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'count' ] ?? 1 );
}
}
},
setRedirect () { setRedirect () {
sessionStorage.setItem( 'redirect', '/purchase' ); sessionStorage.setItem( 'redirect', '/purchase' );
} }