mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 05:14:23 +00:00
migrate to new cart engine
This commit is contained in:
@@ -21,6 +21,8 @@ const settings = JSON.parse( fs.readFileSync( path.join( __dirname + '/config/se
|
||||
// const mail = require( './backend/mail/mailSender.js' );
|
||||
// const mailManager = new mail();
|
||||
|
||||
console.log( settings );
|
||||
|
||||
if ( settings.init ) {
|
||||
app.use( express.static( '../webapp/main/dist' ) );
|
||||
} else {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vite --host",
|
||||
"dev": "vite --host",
|
||||
"preview": "vite preview --host",
|
||||
"build": "vite build"
|
||||
},
|
||||
|
||||
@@ -1,22 +1,6 @@
|
||||
<template>
|
||||
<div class="seatingWrapper">
|
||||
<div class="sidebar">
|
||||
<h2>{{ eventInfo.name }}</h2>
|
||||
<h3>{{ eventInfo.date }}</h3>
|
||||
<h3>{{ eventInfo.location }}</h3>
|
||||
<h3>Selected tickets</h3>
|
||||
<table class="price-table" v-for="event in selectedSeats">
|
||||
<tr v-if="Object.keys( event.selectedSeats ).length">
|
||||
<h4>{{ event.name }}</h4>
|
||||
</tr>
|
||||
<tr v-for="ticket in event.selectedSeats">
|
||||
<td>{{ ticket.name }} ({{ ticket.ageGroup }})</td>
|
||||
<td>{{ eventInfo[ 'currency' ] }} {{ ticket[ 'price' ] }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3>
|
||||
<router-link to="/cart">To cart</router-link>
|
||||
</div>
|
||||
<sideCartView :cart="cart" ref="cart"></sideCartView>
|
||||
<div class="noseatplan">
|
||||
<h3>Available tickets</h3>
|
||||
<div class="wrapper">
|
||||
@@ -34,160 +18,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sideCartView from '@/components/sideCartView.vue';
|
||||
|
||||
export default {
|
||||
name: 'noseatplan',
|
||||
props: {
|
||||
ticketID: String
|
||||
},
|
||||
components: {
|
||||
sideCartView,
|
||||
},
|
||||
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 },
|
||||
selectedSeats: {},
|
||||
pricingCurrentlySelected: {},
|
||||
total: 0,
|
||||
cart: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadPreviouslySelected () {
|
||||
/*
|
||||
This function is called whenever the data on the webpage is to be reloaded
|
||||
*/
|
||||
|
||||
// load data from cart and set up cart if not available
|
||||
let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
|
||||
cart[ this.ticketID ?? 'default' ] = cart[ this.ticketID ?? 'default' ] ? cart[ this.ticketID ?? 'default' ] : { 'name': this.eventInfo.name, 'date': this.eventInfo.date, 'location': this.eventInfo.location, 'currency': this.eventInfo.currency };
|
||||
cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
|
||||
|
||||
let data = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
|
||||
|
||||
let showError = false
|
||||
for ( let i in data ) {
|
||||
if ( this.seating[ data[ i ][ 'row' ] ][ 'content' ][ data[ i ][ 'seat' ] ][ 'available' ] ) {
|
||||
this.seating[ data[ i ][ 'row' ] ][ 'content' ][ data[ i ][ 'seat' ] ][ 'selected' ] = true;
|
||||
cartHandling ( operation, data ) {
|
||||
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 };
|
||||
} else {
|
||||
showError = true;
|
||||
delete data[ i ];
|
||||
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 };
|
||||
}
|
||||
}
|
||||
|
||||
if ( showError ) {
|
||||
// TODO: Show popup that no more tickets in a category are available
|
||||
}
|
||||
|
||||
|
||||
// check if no ticket selected and prevent writing if no ticket
|
||||
// selected to not show too many events
|
||||
let isEmpty = sessionStorage.getItem( 'selectedTicket' ) ? false : true;
|
||||
|
||||
if ( !isEmpty ) {
|
||||
cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
|
||||
sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
|
||||
}
|
||||
|
||||
this.selectedSeats = cart;
|
||||
this.sumUp();
|
||||
},
|
||||
sumUp () {
|
||||
// This function calculates the total price of the tickets for this event.
|
||||
let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
|
||||
|
||||
let price = 0;
|
||||
for ( let i in cart ) {
|
||||
for ( let entry in cart[ i ][ 'selectedSeats' ] ) {
|
||||
price += parseInt( cart[ i ][ 'selectedSeats' ][ entry ][ 'price' ] );
|
||||
}
|
||||
}
|
||||
|
||||
let back = {};
|
||||
|
||||
back[ 'total' ] = price;
|
||||
back[ 'currency' ] = this.eventInfo.currency;
|
||||
|
||||
this.total = price;
|
||||
|
||||
|
||||
// check if no ticket selected and prevent writing if no ticket
|
||||
// selected to not show too many events
|
||||
let isEmpty = sessionStorage.getItem( 'selectedTicket' ) ? false : true;
|
||||
|
||||
if ( !isEmpty ) {
|
||||
sessionStorage.setItem( 'backend', JSON.stringify( back ) );
|
||||
sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
|
||||
}
|
||||
},
|
||||
selectSeat( placeID, rowID ) {
|
||||
/*
|
||||
This function allows the user to select a seat and deselect it, if it has previously
|
||||
been selected.
|
||||
*/
|
||||
sessionStorage.setItem( 'tempStorage', JSON.stringify( { 1:[ placeID, rowID ] } ) );
|
||||
let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
|
||||
cart[ this.ticketID ?? 'default' ] = cart[ this.ticketID ?? 'default' ] ? cart[ this.ticketID ?? 'default' ] : {};
|
||||
cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
|
||||
|
||||
let data = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
|
||||
|
||||
let isDeleting = false;
|
||||
|
||||
for ( let i in data ) {
|
||||
if ( data[ i ][ 'seat' ] == placeID && data[ i ][ 'row' ] == rowID ) {
|
||||
delete data[ i ];
|
||||
isDeleting = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.seating[ rowID ][ 'content' ][ placeID ][ 'selected' ] = !isDeleting;
|
||||
|
||||
if ( isDeleting ) {
|
||||
cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
|
||||
sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
|
||||
this.selectedSeats = cart;
|
||||
this.sumUp();
|
||||
} 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 ];
|
||||
} else {
|
||||
if ( this.eventInfo.ageGroupCount > 1 ) {
|
||||
$( '#overlay' ).show( 200 );
|
||||
} else {
|
||||
this.storeSeat( '1' );
|
||||
delete this.cart[ this.event.name ];
|
||||
}
|
||||
}
|
||||
|
||||
this.pricingCurrentlySelected = this.eventInfo[ 'categories' ][ this.seating[ rowID ][ 'content' ][ placeID ][ 'category' ] ][ 'price' ];
|
||||
},
|
||||
closePopup () {
|
||||
// This function closes the popup and sets the seat to not selected
|
||||
$( '#overlay' ).hide( 200 );
|
||||
let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
|
||||
this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ][ 'selected' ] = false;
|
||||
},
|
||||
storeSeat( ticketOption ) {
|
||||
/*
|
||||
This function stores a ticket into the event's selected seat sessionStorage.
|
||||
*/
|
||||
|
||||
let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
|
||||
cart[ this.ticketID ?? 'default' ] = cart[ this.ticketID ?? 'default' ] ? cart[ this.ticketID ?? 'default' ] : { 'name': this.eventInfo.name, 'date': this.eventInfo.date, 'location': this.eventInfo.location, 'currency': this.eventInfo.currency };
|
||||
cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
|
||||
|
||||
let data = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
|
||||
|
||||
let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
|
||||
|
||||
let ticket = this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ];
|
||||
let ticketData = { 'name': ticket[ 'name' ], 'categoryID': ticketOption, 'category': this.eventInfo[ 'categories' ][ ticket[ 'category' ] ], 'price': this.eventInfo[ 'categories' ][ this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ][ 'category' ] ][ 'price' ][ ticketOption ], 'row':seat[ 1 ][ 1 ], 'seat':seat[ 1 ][ 0 ], 'ageGroup': this.eventInfo[ 'ageGroups' ][ ticketOption ][ 'name' ] };
|
||||
data[ String( seat[ 1 ][ 1 ] ) + String( seat[ 1 ][ 0 ] ) ] = ticketData;
|
||||
|
||||
cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
|
||||
|
||||
|
||||
sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
|
||||
$( '#overlay' ).hide( 200 );
|
||||
this.selectedSeats = cart;
|
||||
this.sumUp();
|
||||
this.$refs.cart.calculateTotal();
|
||||
localStorage.setItem( 'cart', JSON.stringify( this.cart ) );
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadPreviouslySelected();
|
||||
console.log( 'Hello World' );
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -110,6 +110,7 @@ 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 ) {
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<button title="Reset zoom [=]" @click="zoom( 1 );"><span class="material-symbols-outlined">center_focus_strong</span></button>
|
||||
<button title="Zoom out [-]" @click="zoom( -0.2 )"><span class="material-symbols-outlined">zoom_out</span></button>
|
||||
</div>
|
||||
<sideCartView id="cart"></sideCartView>
|
||||
<sideCartView :cart="cart" ref="cart"></sideCartView>
|
||||
<notifications ref="notification" location="topleft"></notifications>
|
||||
<popups ref="popups" size="normal" @data="data => { reserveTicket( data ) }"></popups>
|
||||
</div>
|
||||
@@ -73,7 +73,6 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
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 },
|
||||
available: { 'redo': false, 'undo': false },
|
||||
@@ -85,6 +84,7 @@
|
||||
movePos: { 'top': 0, 'left': 0, 'isMoving': false, 'isSet': false },
|
||||
generalSettings: { 'namingScheme': 'numeric' },
|
||||
selectedSeat: {},
|
||||
cart: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -110,10 +110,14 @@
|
||||
}
|
||||
};
|
||||
|
||||
// Load seat plan
|
||||
this.loadSeatplan();
|
||||
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
|
||||
// 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' ) ): {};
|
||||
},
|
||||
eventHandler ( e ) {
|
||||
if ( this.prevSize.h != window.innerHeight || this.prevSize.w != window.innerWidth ) {
|
||||
@@ -234,16 +238,37 @@
|
||||
if ( Object.keys( seat.option ).length > 1 ) {
|
||||
this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'selection', 'adult' );
|
||||
} else {
|
||||
this.reserveTicket( { 'status': 'ok', 'data': Object.keys( seat.option )[ 0 ][ 'value' ] } );
|
||||
this.reserveTicket( { 'status': 'ok', 'data': Object.keys( seat.option )[ 0 ][ 'value' ], 'id': this.selectedSeat.componentID } );
|
||||
}
|
||||
},
|
||||
cartHandling ( operation, data ) {
|
||||
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 };
|
||||
} 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 };
|
||||
}
|
||||
} 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 ];
|
||||
} else {
|
||||
delete this.cart[ this.event.name ];
|
||||
}
|
||||
}
|
||||
this.$refs.cart.calculateTotal();
|
||||
localStorage.setItem( 'cart', JSON.stringify( this.cart ) );
|
||||
},
|
||||
reserveTicket ( option ) {
|
||||
if ( option.status == 'ok' ) {
|
||||
this.$refs.component1[ 0 ].validateSeatSelection( this.selectedSeat, option.data );
|
||||
this.$refs[ 'component' + this.selectedSeat.componentID ][ 0 ].validateSeatSelection( this.selectedSeat, option.data );
|
||||
this.cartHandling( 'select', option.data );
|
||||
}
|
||||
// TODO: Make call to server to reserve ticket when data is returned & save to localStorage array.
|
||||
},
|
||||
seatDeselected ( seat ) {
|
||||
this.selectedSeat = seat;
|
||||
this.cartHandling( 'deselect' );
|
||||
// TODO: Make call to server to deselect ticket & delete from localStorage array and delete eventArray if empty!
|
||||
}
|
||||
},
|
||||
@@ -263,7 +288,7 @@
|
||||
aspect-ratio: 16 / 9;
|
||||
-webkit-aspect-ratio: 16 / 9;
|
||||
top: 17vh;
|
||||
left: 10vw;
|
||||
left: 5vw;
|
||||
position: absolute;
|
||||
border: black 1px solid;
|
||||
user-select: none;
|
||||
@@ -301,7 +326,7 @@
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 17vh;
|
||||
left: 10.5vw;
|
||||
left: 5.5vw;
|
||||
}
|
||||
.toolbar button {
|
||||
margin-top: 10%;
|
||||
|
||||
@@ -8,21 +8,36 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div id="sideCartView">
|
||||
<div id="sideCartView" :style="'width: ' + width + 'vw'">
|
||||
<h2>Cart</h2>
|
||||
<div v-if="Object.keys( cart ).length > 0">
|
||||
<div v-for="event in cart">
|
||||
<h3>{{ event.displayName }}</h3>
|
||||
<table>
|
||||
<table class="tickets-table">
|
||||
<tr v-for="ticket in event.tickets">
|
||||
<td>
|
||||
<h4>{{ ticket.displayName }}: </h4>
|
||||
<h4 class="price">{{ ticket.displayName }}: </h4>
|
||||
</td>
|
||||
<td>
|
||||
{{ event.currency }} {{ ticket.price }}
|
||||
{{ currency }} {{ ticket.price }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -32,18 +47,31 @@ export default {
|
||||
props: {
|
||||
'cart': {
|
||||
type: Object,
|
||||
default: { 'TestEvent2': { 'displayName': 'TestEvent2', 'tickets': { 'secAr1s1': { 'displayName': 'Row 1, Seat 1', 'price': 20 } }, 'currency': 'CHF' } },
|
||||
total: 0
|
||||
default: {},
|
||||
// EXAMPLE: { 'TestEvent2': { 'displayName': 'TestEvent2', 'tickets': { 'secAr1s1': { 'displayName': 'Row 1, Seat 1', 'price': 20 } } } }
|
||||
},
|
||||
'width': {
|
||||
type: Number,
|
||||
default: 25
|
||||
},
|
||||
'currency': {
|
||||
type: String,
|
||||
default: 'CHF'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cart() {
|
||||
this.calculateTotal();
|
||||
data() {
|
||||
return {
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calculateTotal () {
|
||||
console.log( 'cart updated' );
|
||||
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' ] );
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -51,3 +79,23 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#sideCartView {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 17vh;
|
||||
height: 90vh;
|
||||
background-color: var( --accent-background );
|
||||
color: var( --secondary-color );
|
||||
}
|
||||
|
||||
.tickets-table {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -10,15 +10,21 @@
|
||||
<template>
|
||||
<div class="cart">
|
||||
<h1>Cart</h1>
|
||||
<div v-if="cartNotEmpty" class="cart-list">
|
||||
<div v-if="Object.keys( cart ).length > 0" class="cart-list">
|
||||
<h3>Your tickets</h3>
|
||||
<ul v-for="event in tickets" class="cart-list">
|
||||
<li>{{ event.name }}
|
||||
<ul v-for="ticket in event.selectedSeats">
|
||||
<li>{{ ticket.name }} ({{ ticket.category.name }}, {{ ticket.ageGroup }}) {{ event.currency }} {{ ticket.price }} <span class="material-symbols-outlined deleteButton" @click="deleteEntry( ticket.name, event.name )" title="Delete ticket">delete</span></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">{{ 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>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tool-wrapper">
|
||||
<h4>Total: {{ backend.currency }} {{ backend.total }}</h4>
|
||||
<router-link to="/purchase">Purchase now</router-link>
|
||||
@@ -84,68 +90,26 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tickets: {},
|
||||
backend: {},
|
||||
cartNotEmpty: false,
|
||||
cart: {},
|
||||
backend: { 'currency': 'CHF' },
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadCart () {
|
||||
this.cartNotEmpty = false;
|
||||
let tickets = JSON.parse( sessionStorage.getItem( 'cart' ) );
|
||||
|
||||
for ( let event in tickets ) {
|
||||
if ( Object.keys( tickets[ event ][ 'selectedSeats' ] ).length ) {
|
||||
this.cartNotEmpty = true;
|
||||
};
|
||||
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' ] );
|
||||
}
|
||||
}
|
||||
|
||||
this.tickets = tickets;
|
||||
this.backend = JSON.parse( sessionStorage.getItem( 'backend' ) );
|
||||
},
|
||||
deleteEntry( id, eventName ) {
|
||||
if ( confirm( 'Do you really want to delete this ticket?' ) ) {
|
||||
let tickets = JSON.parse( sessionStorage.getItem( 'cart' ) );
|
||||
for ( let event in tickets ) {
|
||||
let ev = tickets[ event ];
|
||||
if ( ev.name == eventName ) {
|
||||
for ( let ticket in ev[ 'selectedSeats' ] ) {
|
||||
if ( ev[ 'selectedSeats' ][ ticket ].name ) {
|
||||
delete tickets[ event ][ 'selectedSeats' ][ ticket ];
|
||||
deleteTicket ( ticketID, event ) {
|
||||
console.log( ticketID, event );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
sessionStorage.setItem( 'cart', JSON.stringify( tickets ) );
|
||||
this.sumUp();
|
||||
this.loadCart();
|
||||
};
|
||||
},
|
||||
sumUp () {
|
||||
// This function calculates the total price of the tickets for this event.
|
||||
let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
|
||||
|
||||
let price = 0;
|
||||
for ( let i in cart ) {
|
||||
for ( let entry in cart[ i ][ 'selectedSeats' ] ) {
|
||||
price += parseInt( cart[ i ][ 'selectedSeats' ][ entry ][ 'price' ] );
|
||||
}
|
||||
}
|
||||
|
||||
let back = {};
|
||||
|
||||
back[ 'total' ] = price;
|
||||
back[ 'currency' ] = this.backend.currency;
|
||||
|
||||
sessionStorage.setItem( 'backend', JSON.stringify( back ) );
|
||||
|
||||
this.total = price;
|
||||
|
||||
sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.loadCart();
|
||||
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
|
||||
this.calculateTotal();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
||||
|
||||
Reference in New Issue
Block a user