progress on adding to cart

This commit is contained in:
2023-04-10 17:04:48 +02:00
parent c4abf91aeb
commit a70c4cb1eb
2 changed files with 40 additions and 23 deletions

View File

@@ -12,7 +12,7 @@
</tr> </tr>
</table> </table>
<h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3> <h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3>
<router-link to="/cart">To cart</router-link> <button @click="addToCart()">Add to cart</button>
</div> </div>
<div class="seatingPlan"> <div class="seatingPlan">
<h3>Seating plan</h3> <h3>Seating plan</h3>
@@ -92,10 +92,10 @@ export default {
}, },
methods: { methods: {
loadPreviouslySelected () { loadPreviouslySelected () {
let data = {}; /*
if ( sessionStorage.getItem( 'selectedSeats' ) ) { This function is called whenever the data on the webpage is to be reloaded
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) ); */
} let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {};
let showError = false let showError = false
for ( let i in data ) { for ( let i in data ) {
@@ -114,16 +114,14 @@ export default {
}, 500 ); }, 500 );
} }
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); sessionStorage.setItem( this.ticketID ?? 'default', JSON.stringify( data ) );
this.selectedSeats = data; this.selectedSeats = data;
this.sumUp(); this.sumUp();
}, },
sumUp () { sumUp () {
let data = {}; // This function calculates the total price of the tickets for this event.
if ( sessionStorage.getItem( 'selectedSeats' ) ) { let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {};
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
}
let price = 0; let price = 0;
for ( let i in data ) { for ( let i in data ) {
@@ -136,11 +134,12 @@ export default {
$( '#placeNotAvailable' ).hide( 300 ); $( '#placeNotAvailable' ).hide( 300 );
}, },
selectSeat( placeID, rowID ) { 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 ] } ) ); sessionStorage.setItem( 'tempStorage', JSON.stringify( { 1:[ placeID, rowID ] } ) );
let data = {}; let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {};
if ( sessionStorage.getItem( 'selectedSeats' ) ) {
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
}
let isDeleting = false; let isDeleting = false;
@@ -155,7 +154,7 @@ export default {
if ( isDeleting ) { if ( isDeleting ) {
sessionStorage.setItem( 'arrayIndex', index ); sessionStorage.setItem( 'arrayIndex', index );
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); sessionStorage.setItem( this.ticketID ?? 'default', JSON.stringify( data ) );
this.selectedSeats = data; this.selectedSeats = data;
this.sumUp(); this.sumUp();
} else { } else {
@@ -169,29 +168,47 @@ export default {
this.pricingCurrentlySelected = this.eventInfo[ 'categories' ][ this.seating[ rowID ][ 'content' ][ placeID ][ 'category' ] ][ 'price' ]; this.pricingCurrentlySelected = this.eventInfo[ 'categories' ][ this.seating[ rowID ][ 'content' ][ placeID ][ 'category' ] ][ 'price' ];
}, },
closePopup () { closePopup () {
// This function closes the popup and sets the seat to not selected
$( '#overlay' ).hide( 200 ); $( '#overlay' ).hide( 200 );
let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) ); let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ][ 'selected' ] = false; this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ][ 'selected' ] = false;
}, },
storeSeat( ticketOption ) { storeSeat( ticketOption ) {
let data = {}; /*
if ( sessionStorage.getItem( 'selectedSeats' ) ) { This function stores a ticket into the event's selected seat sessionStorage.
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) ); */
} let data = sessionStorage.getItem( this.ticketID ?? 'default' ) ? JSON.parse( sessionStorage.getItem( this.ticketID ?? 'default' ) ) : {};
let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) ); let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); sessionStorage.setItem( this.ticketID ?? 'default', JSON.stringify( data ) );
this.selectedSeats = data; this.selectedSeats = data;
data[ index ] = [ seat[ 1 ][ 0 ], seat[ 1 ][ 1 ], String( ticketOption ) ]; data[ index ] = [ seat[ 1 ][ 0 ], seat[ 1 ][ 1 ], String( ticketOption ) ];
index += 1; index += 1;
sessionStorage.setItem( 'arrayIndex', index ); sessionStorage.setItem( 'arrayIndex', index );
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); sessionStorage.setItem( this.ticketID ?? 'default', JSON.stringify( data ) );
this.selectedSeats = data; 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() {

View File

@@ -3,7 +3,7 @@
<h1>Cart</h1> <h1>Cart</h1>
<h3>Your tickets</h3> <h3>Your tickets</h3>
<ul v-for="ticket in tickets"> <ul v-for="ticket in tickets">
<li>Ticket</li> <li>{{ ticket }}</li>
</ul> </ul>
<router-link to="/purchase">Purchase now</router-link> <router-link to="/purchase">Purchase now</router-link>
</div> </div>
@@ -67,7 +67,7 @@
}, },
methods: { methods: {
loadCart () { loadCart () {
sessionStorage.getItem( 'selectedSeats' ); sessionStorage.getItem( 'cart' );
} }
}, },
} }