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

migrate to different cart store

Browse Source
This commit is contained in:
Janis Hutz
2023-04-10 20:32:55 +02:00
parent a70c4cb1eb
commit 9fcdef4aac
2 changed files with 61 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/webapp/src/components/seatplan.vue
View File

@@ -5,14 +5,17 @@
<h3>{{ eventInfo.date }}</h3> <h3>{{ eventInfo.date }}</h3>
<h3>{{ eventInfo.location }}</h3> <h3>{{ eventInfo.location }}</h3>
<h3>Selected tickets</h3> <h3>Selected tickets</h3>
<table class="price-table"> <table class="price-table" v-for="event in selectedSeats">
<tr v-for="ticket in selectedSeats"> <tr>
<td>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }} ({{ eventInfo[ 'ageGroups' ][ ticket[ 2 ] ][ 'name' ] }})</td> <h4>{{ event.name }}</h4>
<td>{{ eventInfo[ 'currency' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ][ ticket[ 2 ] ] }}</td> </tr>
<tr v-for="ticket in event.selectedSeats">
<td>{{ seating[ ticket[ 'row' ] ][ 'content' ][ ticket[ 'seat' ] ][ 'name' ] }} ({{ eventInfo[ 'ageGroups' ][ ticket[ 'categoryID' ] ][ 'name' ] }})</td>
<td>{{ eventInfo[ 'currency' ] }} {{ ticket[ 'price' ] }}</td>
</tr> </tr>
</table> </table>
<h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3> <h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3>
<button @click="addToCart()">Add to cart</button> <router-link to="/cart">To cart</router-link>
</div> </div>
<div class="seatingPlan"> <div class="seatingPlan">
<h3>Seating plan</h3> <h3>Seating plan</h3>
@@ -74,8 +77,6 @@
</template> </template>
<script> <script>
let index = sessionStorage.getItem( 'arrayIndex' ) ? parseInt( sessionStorage.getItem( 'arrayIndex' ) ) : 0;
export default { export default {
name: 'noseatplan', name: 'noseatplan',
props: { props: {
@@ -95,12 +96,18 @@ export default {
/* /*
This function is called whenever the data on the webpage is to be reloaded This function is called whenever the data on the webpage is to be reloaded
*/ */
let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {};
// 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 let showError = false
for ( let i in data ) { for ( let i in data ) {
if ( this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'available' ] ) { if ( this.seating[ data[ i ][ 'row' ] ][ 'content' ][ data[ i ][ 'seat' ] ][ 'available' ] ) {
this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'selected' ] = true; this.seating[ data[ i ][ 'row' ] ][ 'content' ][ data[ i ][ 'seat' ] ][ 'selected' ] = true;
} else { } else {
showError = true; showError = true;
delete data[ i ]; delete data[ i ];
@@ -114,18 +121,21 @@ export default {
}, 500 ); }, 500 );
} }
sessionStorage.setItem( this.ticketID ?? 'default', JSON.stringify( data ) ); cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
this.selectedSeats = data; this.selectedSeats = cart;
this.sumUp(); this.sumUp();
}, },
sumUp () { sumUp () {
// This function calculates the total price of the tickets for this event. // This function calculates the total price of the tickets for this event.
let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {}; let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
let price = 0; let price = 0;
for ( let i in data ) { for ( let i in cart ) {
price += this.eventInfo[ 'categories' ][ this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'category' ] ][ 'price' ][ data[ i ][ 2 ] ]; for ( let entry in cart[ i ][ 'selectedSeats' ] ) {
price += parseInt( cart[ i ][ 'selectedSeats' ][ entry ][ 'price' ] );
}
} }
this.total = price; this.total = price;
@@ -139,12 +149,16 @@ export default {
been selected. been selected.
*/ */
sessionStorage.setItem( 'tempStorage', JSON.stringify( { 1:[ placeID, rowID ] } ) ); sessionStorage.setItem( 'tempStorage', JSON.stringify( { 1:[ placeID, rowID ] } ) );
let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {}; 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; let isDeleting = false;
for ( let i in data ) { for ( let i in data ) {
if ( data[ i ][ 0 ] == placeID && data[ i ][ 1 ] == rowID ) { if ( data[ i ][ 'seat' ] == placeID && data[ i ][ 'row' ] == rowID ) {
delete data[ i ]; delete data[ i ];
isDeleting = true; isDeleting = true;
} }
@@ -153,9 +167,9 @@ export default {
this.seating[ rowID ][ 'content' ][ placeID ][ 'selected' ] = !isDeleting; this.seating[ rowID ][ 'content' ][ placeID ][ 'selected' ] = !isDeleting;
if ( isDeleting ) { if ( isDeleting ) {
sessionStorage.setItem( 'arrayIndex', index ); cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
sessionStorage.setItem( this.ticketID ?? 'default', JSON.stringify( data ) ); sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
this.selectedSeats = data; this.selectedSeats = cart;
this.sumUp(); this.sumUp();
} else { } else {
if ( this.eventInfo.ageGroupCount > 1 ) { if ( this.eventInfo.ageGroupCount > 1 ) {
@@ -177,39 +191,26 @@ export default {
/* /*
This function stores a ticket into the event's selected seat sessionStorage. This function stores a ticket into the event's selected seat sessionStorage.
*/ */
let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {};
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 seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
sessionStorage.setItem( this.ticketID ?? 'default', JSON.stringify( data ) ); let ticket = this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ]
this.selectedSeats = data; 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;
data[ index ] = [ seat[ 1 ][ 0 ], seat[ 1 ][ 1 ], String( ticketOption ) ]; cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
index += 1;
sessionStorage.setItem( 'arrayIndex', index ); sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
sessionStorage.setItem( this.ticketID ?? 'default', JSON.stringify( data ) ); this.selectedSeats = cart;
this.selectedSeats = data;
$( '#overlay' ).hide( 200 ); $( '#overlay' ).hide( 200 );
this.sumUp(); this.sumUp();
}, },
addToCart () {
let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {};
cart[ this.ticketID ?? 'default' ] = { 'name': this.eventInfo.name, 'date': this.eventInfo.date, 'location': this.eventInfo.location, 'currency': this.eventInfo.currency };
for ( let seat in data ) {
let ticket = this.seating[ data[ seat ][ 1 ] ][ 'content' ][ data[ seat ][ 0 ] ]
let ticketData = { 'name': ticket[ 'name' ], 'categoryID': ticket[ 'category' ], 'category': this.eventInfo[ 'categories' ][ ticket[ 'category' ] ], 'price': this.eventInfo[ 'categories' ][ this.seating[ data[ seat ][ 1 ] ][ 'content' ][ data[ seat ][ 0 ] ][ 'category' ] ][ 'price' ][ data[ seat ][ 2 ] ] };
console.log( ticketData );
cart[ this.ticketID ?? 'default' ][ String( data[ seat ][ 1 ] ) + String( data[ seat ][ 0 ] ) ] = ticketData;
}
cart[ this.ticketID ?? 'default' ][ 'total' ] = this.total;
sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
// Sever call to reserve the tickets.
}
}, },
created() { created() {
this.loadPreviouslySelected(); this.loadPreviouslySelected();

17
src/webapp/src/views/CartView.vue
View File

@@ -1,9 +1,13 @@
<template> <template>
<div class="order"> <div class="cart">
<h1>Cart</h1> <h1>Cart</h1>
<h3>Your tickets</h3> <h3>Your tickets</h3>
<ul v-for="ticket in tickets"> <ul v-for="event in tickets" class="cart-list">
<li>{{ ticket }}</li> <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> </ul>
<router-link to="/purchase">Purchase now</router-link> <router-link to="/purchase">Purchase now</router-link>
</div> </div>
@@ -18,7 +22,7 @@
justify-content: center; justify-content: center;
} }
ul { .cart-list {
list-style: none; list-style: none;
width: 80%; width: 80%;
} }
@@ -67,8 +71,11 @@
}, },
methods: { methods: {
loadCart () { loadCart () {
sessionStorage.getItem( 'cart' ); this.tickets = JSON.parse( sessionStorage.getItem( 'cart' ) );
} }
}, },
created () {
this.loadCart();
}
} }
</script> </script>