From e271ff091ecb59110c0f4b6176cd03520c62a6e4 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Tue, 18 Jul 2023 10:19:49 +0200 Subject: [PATCH] migrate to new cart engine --- src/server/app.js | 2 + src/webapp/main/package.json | 2 +- src/webapp/main/src/components/noseatplan.vue | 171 ++---------------- .../seatplanComponents/seats/rectangular.vue | 1 + .../seatplan/userApp/userWindow.vue | 39 +++- .../main/src/components/sideCartView.vue | 76 ++++++-- .../main/src/views/purchasing/CartView.vue | 88 +++------ src/webapp/setup/package.json | 2 +- 8 files changed, 145 insertions(+), 236 deletions(-) diff --git a/src/server/app.js b/src/server/app.js index 85e42ff..089dce3 100644 --- a/src/server/app.js +++ b/src/server/app.js @@ -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 { diff --git a/src/webapp/main/package.json b/src/webapp/main/package.json index 8fa9fe3..964b18c 100644 --- a/src/webapp/main/package.json +++ b/src/webapp/main/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "serve": "vite --host", + "dev": "vite --host", "preview": "vite preview --host", "build": "vite build" }, diff --git a/src/webapp/main/src/components/noseatplan.vue b/src/webapp/main/src/components/noseatplan.vue index 8b42d93..a8fea57 100644 --- a/src/webapp/main/src/components/noseatplan.vue +++ b/src/webapp/main/src/components/noseatplan.vue @@ -1,22 +1,6 @@ diff --git a/src/webapp/main/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue b/src/webapp/main/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue index 791b706..0cdeddd 100644 --- a/src/webapp/main/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue +++ b/src/webapp/main/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue @@ -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 ) { diff --git a/src/webapp/main/src/components/seatplan/userApp/userWindow.vue b/src/webapp/main/src/components/seatplan/userApp/userWindow.vue index bfca8b7..7e5055c 100644 --- a/src/webapp/main/src/components/seatplan/userApp/userWindow.vue +++ b/src/webapp/main/src/components/seatplan/userApp/userWindow.vue @@ -38,7 +38,7 @@ - + @@ -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%; diff --git a/src/webapp/main/src/components/sideCartView.vue b/src/webapp/main/src/components/sideCartView.vue index b21c72e..9f1123e 100644 --- a/src/webapp/main/src/components/sideCartView.vue +++ b/src/webapp/main/src/components/sideCartView.vue @@ -8,21 +8,36 @@ --> @@ -32,22 +47,55 @@ 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() { this.calculateTotal(); } } - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/webapp/main/src/views/purchasing/CartView.vue b/src/webapp/main/src/views/purchasing/CartView.vue index fe057f3..fb94ec2 100644 --- a/src/webapp/main/src/views/purchasing/CartView.vue +++ b/src/webapp/main/src/views/purchasing/CartView.vue @@ -10,15 +10,21 @@