mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 05:14:23 +00:00
mostly working seat selection
This commit is contained in:
@@ -5,14 +5,19 @@
|
||||
<h3>Available tickets</h3>
|
||||
<div class="wrapper">
|
||||
<div v-for="ticket in tickets">
|
||||
{{ eventInfo[ 'categories' ][ ticket.category ][ 'name' ] }}
|
||||
{{ event[ 'categories' ][ ticket.category ][ 'name' ] }}
|
||||
<table>
|
||||
<tr v-for="ticketOption in eventInfo[ 'ageGroups' ]">
|
||||
<tr v-for="ticketOption in event[ 'ageGroups' ]">
|
||||
<td>
|
||||
{{ ticketOption.name }} <div style="display: inline" v-if="ticketOption.age">({{ ticketOption.age }})</div>
|
||||
</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>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -35,33 +40,73 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tickets: { 'ticket1': { 'name': 'Ticket 1', 'id': 'ticket1', 'category': 1 }, 'ticket2': { 'name': 'Ticket 2', 'id': 'ticket2', 'category': 2 } },
|
||||
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 },
|
||||
tickets: { 'ticket1': { 'name': 'Ticket 1', 'id': 'ticket1', 'category': 1, 'free': 20 }, 'ticket2': { 'name': 'Ticket 2', 'id': 'ticket2', 'category': 2, 'free': 20 } },
|
||||
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: {},
|
||||
}
|
||||
},
|
||||
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 ( 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 {
|
||||
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' ) {
|
||||
if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length > 1 ) {
|
||||
delete this.cart[ this.event.name ][ 'tickets' ][ this.selectedSeat.id ];
|
||||
if ( this.cart[ this.event.name ][ 'tickets' ][ data + '_' + option ][ 'count' ] === 1 ) {
|
||||
delete this.cart[ this.event.name ][ 'tickets' ][ data + '_' + option ];
|
||||
} 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 ];
|
||||
}
|
||||
}
|
||||
this.$refs.cart.calculateTotal();
|
||||
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() {
|
||||
console.log( 'Hello World' );
|
||||
created () {
|
||||
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
|
||||
// this.loadTickets();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -82,13 +127,6 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
background-color: var( --accent-background );
|
||||
color: var( --secondary-color );
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.noseatplan {
|
||||
grid-area: main;
|
||||
display: flex;
|
||||
@@ -107,85 +145,12 @@ export default {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
width: 100%;
|
||||
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 {
|
||||
.controls {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-right: 3vh;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: var( --accent-background );
|
||||
color: var( --secondary-color );
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
border-radius: 20px;
|
||||
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%;
|
||||
border: solid var( --primary-color ) 1px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -50,7 +50,7 @@ export default {
|
||||
},
|
||||
data: {
|
||||
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: {
|
||||
type: Number,
|
||||
@@ -91,7 +91,7 @@ export default {
|
||||
|
||||
if ( this.data.unavailableSeats ) {
|
||||
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[ 'option' ] = this.data.categoryInfo.pricing;
|
||||
selectedSeat[ 'componentID' ] = this.id;
|
||||
console.log( selectedSeat );
|
||||
this.$emit( 'seatSelected', selectedSeat );
|
||||
},
|
||||
deselectSeat( row, seat ) {
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
@seatSelected="( seat ) => { seatSelected( seat ) }"></trapezoidSeatplanComponent>
|
||||
|
||||
<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>
|
||||
|
||||
<stagesSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'stage'" :origin="draggable.origin" :shape="draggable.shape"></stagesSeatplanComponent>
|
||||
@@ -73,8 +73,8 @@
|
||||
},
|
||||
data() {
|
||||
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 },
|
||||
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 },
|
||||
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' } }, 'ageGroupCount': 2, 'maxTickets': 2 },
|
||||
available: { 'redo': false, 'undo': false },
|
||||
scaleFactor: 1,
|
||||
sizePoll: null,
|
||||
@@ -110,14 +110,16 @@
|
||||
}
|
||||
};
|
||||
|
||||
// Load seat plan
|
||||
this.loadSeatplan();
|
||||
// TODO: remove scaleDown function again once backend is up
|
||||
// TODO: Optimise for odd screen sizes and aspect ratios and fucking webkit
|
||||
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
|
||||
|
||||
// Load cart
|
||||
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
|
||||
|
||||
// Load seat plan
|
||||
this.loadSeatplan();
|
||||
|
||||
// TODO: remove scaleDown function again once backend is up
|
||||
// TODO: Optimise for odd screen sizes and aspect ratios and fucking webkit
|
||||
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
|
||||
},
|
||||
eventHandler ( e ) {
|
||||
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' );
|
||||
}, 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 ) {
|
||||
const allowedAttributes = [ 'w', 'h', 'x', 'y' ];
|
||||
@@ -235,6 +259,7 @@
|
||||
},
|
||||
seatSelected ( seat ) {
|
||||
this.selectedSeat = seat;
|
||||
console.log( seat );
|
||||
if ( Object.keys( seat.option ).length > 1 ) {
|
||||
this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'selection', 'adult' );
|
||||
} else {
|
||||
@@ -243,11 +268,12 @@
|
||||
},
|
||||
cartHandling ( operation, data ) {
|
||||
if ( operation === 'select' ) {
|
||||
console.log( this.selectedSeat.option );
|
||||
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 {
|
||||
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' ) {
|
||||
if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length > 1 ) {
|
||||
|
||||
@@ -8,32 +8,35 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div id="sideCartView" :style="'width: ' + width + 'vw'">
|
||||
<div id="sideCartView" :style="'width: ' + width + 'vw; top: ' + height + 'vh;'">
|
||||
<h2>Cart</h2>
|
||||
<div v-if="Object.keys( cart ).length > 0">
|
||||
<div v-for="event in cart">
|
||||
<h3>{{ event.displayName }}</h3>
|
||||
<div v-if="Object.keys( cart ).length > 0" style="height: 100%; width: 100%;">
|
||||
<div class="scroll-wrapper">
|
||||
<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">
|
||||
<tr v-for="ticket in event.tickets">
|
||||
<tr>
|
||||
<td>
|
||||
<h4 class="price">{{ ticket.displayName }}: </h4>
|
||||
<h4>TOTAL:</h4>
|
||||
</td>
|
||||
<td>
|
||||
{{ currency }} {{ ticket.price }}
|
||||
<h4>{{ currency }} {{ total }}</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<router-link to="/cart">To Cart</router-link>
|
||||
</div>
|
||||
<table class="tickets-table">
|
||||
<tr>
|
||||
<td>
|
||||
<h4>TOTAL:</h4>
|
||||
</td>
|
||||
<td>
|
||||
<h4>{{ currency }} {{ total }}</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div v-else>
|
||||
Your cart is currently empty
|
||||
@@ -57,6 +60,10 @@ export default {
|
||||
'currency': {
|
||||
type: String,
|
||||
default: 'CHF'
|
||||
},
|
||||
'height': {
|
||||
type: Number,
|
||||
default: 17
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -69,7 +76,7 @@ export default {
|
||||
this.total = 0;
|
||||
for ( let event in this.cart ) {
|
||||
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 {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 17vh;
|
||||
height: 90vh;
|
||||
height: 100vh;
|
||||
background-color: var( --accent-background );
|
||||
color: var( --secondary-color );
|
||||
}
|
||||
@@ -94,6 +100,12 @@ export default {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@@ -100,7 +100,7 @@
|
||||
},
|
||||
data () {
|
||||
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(),
|
||||
eventList: { 'upcoming': { 'name': 'Upcoming', 'content': {} }, 'past': { 'name': 'Past', 'content': {} } },
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<table class="tickets-table">
|
||||
<tr v-for="ticket in event.tickets">
|
||||
<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>
|
||||
{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
<popups ref="popups" size="normal" @data="data => { verifyTicketDelete( data.status ) }"></popups>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -87,25 +88,46 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import popups from '@/components/notifications/popups.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cart: {},
|
||||
backend: { 'currency': 'CHF' },
|
||||
ticketToDelete: {},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
popups,
|
||||
},
|
||||
methods: {
|
||||
calculateTotal () {
|
||||
this.backend.total = 0;
|
||||
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' ] );
|
||||
this.backend[ 'total' ] += parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'price' ] ) * parseInt( this.cart[ event ][ 'tickets' ][ ticket ][ 'count' ] ?? 1 );
|
||||
}
|
||||
}
|
||||
},
|
||||
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 () {
|
||||
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
|
||||
@@ -119,4 +141,9 @@
|
||||
nav {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -31,13 +31,19 @@
|
||||
<div class="cart-list">
|
||||
<h2>Order summary</h2>
|
||||
<h3>Your tickets</h3>
|
||||
<ul v-for="event in tickets">
|
||||
<li>{{ event.name }}
|
||||
<ul v-for="ticket in event.selectedSeats">
|
||||
<li>{{ ticket.name }} ({{ ticket.category.name }}, {{ ticket.ageGroup }}) {{ event.currency }} {{ ticket.price }}</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
{{ backend.currency }} {{ ticket.price }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tool-wrapper wrapper-loggedIn">
|
||||
<h4>Total: {{ backend.currency }} {{ backend.total }}</h4>
|
||||
</div>
|
||||
@@ -144,11 +150,6 @@
|
||||
'main main main sidebar';
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -164,6 +165,11 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -177,8 +183,8 @@ export default {
|
||||
return {
|
||||
settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialNumber': true, 'specialNumberDisplayName': { 'de': '', 'en': 'id number' } },
|
||||
isAuthenticated: false,
|
||||
tickets: {},
|
||||
backend: {},
|
||||
cart: {},
|
||||
backend: { 'currency': 'CHF' },
|
||||
cartNotEmpty: false,
|
||||
}
|
||||
},
|
||||
@@ -189,23 +195,33 @@ export default {
|
||||
methods: {
|
||||
loadData () {
|
||||
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 ) {
|
||||
if ( Object.keys( tickets[ event ][ 'selectedSeats' ] ).length ) {
|
||||
if ( Object.keys( tickets[ event ][ 'tickets' ] ).length ) {
|
||||
this.cartNotEmpty = true;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
if ( this.cartNotEmpty ) {
|
||||
this.tickets = tickets;
|
||||
this.backend = JSON.parse( sessionStorage.getItem( 'backend' ) );
|
||||
this.cart = tickets;
|
||||
this.isAuthenticated = this.userStore.getUserAuthenticated;
|
||||
this.settings.accountRequired = !this.backendStore.getIsGuestPurchaseAllowed;
|
||||
this.calculateTotal();
|
||||
} else {
|
||||
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 () {
|
||||
sessionStorage.setItem( 'redirect', '/purchase' );
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user