From 5b8f1c03f7c0c9b31b831ac0f7e07738b3dd849d Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Sun, 9 Apr 2023 13:28:12 +0200 Subject: [PATCH] progress on seat plan --- src/webapp/public/index.html | 1 + src/webapp/src/components/seatplan.vue | 202 ++++++++++++++++++-- src/webapp/src/router/index.js | 50 ++++- src/webapp/src/views/OrderView.vue | 13 +- src/webapp/src/views/TicketsDetailsView.vue | 5 + 5 files changed, 251 insertions(+), 20 deletions(-) diff --git a/src/webapp/public/index.html b/src/webapp/public/index.html index b4d7f11..2f94747 100644 --- a/src/webapp/public/index.html +++ b/src/webapp/public/index.html @@ -10,6 +10,7 @@ <%= htmlWebpackPlugin.options.title %> + diff --git a/src/webapp/src/components/seatplan.vue b/src/webapp/src/components/seatplan.vue index bbfbba2..e1edc0c 100644 --- a/src/webapp/src/components/seatplan.vue +++ b/src/webapp/src/components/seatplan.vue @@ -8,7 +8,7 @@ - +
{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }}{{ eventInfo[ 'currency' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ] }}{{ eventInfo[ 'currency' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ][ ticket[ 2 ] ] }}

Total

@@ -17,6 +17,7 @@

Seating plan

{{ eventInfo.RoomName }}

+

Stage

@@ -40,6 +41,35 @@
+
+
+
+
+ close +
+
+

Choose a ticket option

+
    +
  • {{ group.name }} (0 - 15.99 years) - {{ eventInfo.currency }} {{ pricingCurrentlySelected[ group.id ] }}
    • +
+
+
+
+
+
+
+
+
+ close +
+
+

One or more seat(s) you have previously selected are/is no longer available!

+

Please select another one!

+ +
+
+
+
@@ -53,9 +83,10 @@ export default { }, data () { return { - seating: { 'r1': { 'name': 'Row 1', 'id': 'r1', 'content':{ 'S1':{ 'name': 'Seat 1', 'id': 'S1', 'available': true, 'selected': false, 'category':'2' } } }, 'r2': { 'name': 'Row 2', 'id': 'r2', 'content':{ 'S1':{ 'name': 'S1', 'id': 'S1', 'available': true, 'selected': false, 'category':'2' } } } }, - eventInfo: { 'name': 'TestEvent', 'location': 'TestLocation', 'date': 'TestDate', 'RoomName': 'TestRoom', 'currency': 'CHF', 'categories': { '1': { 'price': 20, 'bg': 'black', 'fg': 'white' }, '2': { 'price': 20, 'bg': 'green', 'fg': 'white' } } }, - selectedSeats: {} + seating: { 'r1': { 'name': 'Row 1', 'id': 'r1', 'content':{ 'S1':{ 'name': 'Seat 1', 'id': 'S1', 'available': true, 'selected': false, 'category':'1' } } }, 'r2': { 'name': 'Row 2', 'id': 'r2', 'content':{ 'S1':{ 'name': 'S1', 'id': 'S1', 'available': true, 'selected': false, 'category':'2' } } } }, + eventInfo: { 'name': 'TestEvent', 'location': 'TestLocation', 'date': 'TestDate', 'RoomName': 'TestRoom', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'stage': true }, + selectedSeats: {}, + pricingCurrentlySelected: {} } }, methods: { @@ -64,21 +95,48 @@ export default { if ( sessionStorage.getItem( 'selectedSeats' ) ) { data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) ); } + + let showError = false for ( let i in data ) { - this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'selected' ] = true; + if ( this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'available' ] ) { + this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'selected' ] = true; + } else { + showError = true; + delete data[ i ]; + } } + + if ( showError ) { + setTimeout( function () { + $( '#placeNotAvailable' ).show( 200 ); + console.log( 'showing error message' ); + }, 500 ); + } + + sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); + this.selectedSeats = data; }, + sumUp () { + let data = {}; + if ( sessionStorage.getItem( 'selectedSeats' ) ) { + data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) ); + } + }, + closePlaceNotAvailablePopup () { + $( '#placeNotAvailable' ).hide( 300 ); + }, selectSeat( placeID, rowID ) { + sessionStorage.setItem( 'tempStorage', JSON.stringify( { 1:[ placeID, rowID ] } ) ); let data = {}; if ( sessionStorage.getItem( 'selectedSeats' ) ) { data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) ); } let isDeleting = false; - + for ( let i in data ) { - if ( data[ i ][ 0 ] == placeID, data[ i ][ 1 ] == rowID ) { + if ( data[ i ][ 0 ] == placeID && data[ i ][ 1 ] == rowID ) { delete data[ i ]; isDeleting = true; } @@ -86,13 +144,39 @@ export default { this.seating[ rowID ][ 'content' ][ placeID ][ 'selected' ] = !isDeleting; - if ( !isDeleting ) { - data[ index ] = [ placeID, rowID ]; - index += 1; + if ( isDeleting ) { + sessionStorage.setItem( 'arrayIndex', index ); + sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); + this.selectedSeats = data; + } else { + $( '#overlay' ).show( 200 ); } + + this.pricingCurrentlySelected = this.eventInfo[ 'categories' ][ this.seating[ rowID ][ 'content' ][ placeID ][ 'category' ] ][ 'price' ]; + }, + closePopup () { + $( '#overlay' ).hide( 200 ); + let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) ); + this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ][ 'selected' ] = false; + }, + storeSeat( ticketOption ) { + let data = {}; + if ( sessionStorage.getItem( 'selectedSeats' ) ) { + data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) ); + } + + let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) ); + + sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); + this.selectedSeats = data; + + data[ index ] = [ seat[ 1 ][ 0 ], seat[ 1 ][ 1 ], String( ticketOption ) ]; + index += 1; + sessionStorage.setItem( 'arrayIndex', index ); sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); this.selectedSeats = data; + $( '#overlay' ).hide( 200 ); } }, created() { @@ -121,6 +205,7 @@ export default { grid-area: sidebar; background-color: rgb(30, 30, 82); color: white; + overflow: scroll; } .seatingPlan { @@ -129,10 +214,7 @@ export default { flex-direction: column; align-items: center; justify-content: justify; - } - - .seating { - width: 90%; + overflow: scroll; } .active { @@ -143,4 +225,96 @@ export default { background-color: rgb(177, 177, 177); padding: 0.4%; } + + .overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(37, 37, 37, 0.575); + height: 100%; + width: 100%; + } + + .popup { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + } + + .popup-content { + background-color: white; + 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 { + cursor: pointer; + margin-right: 3vh; + margin-top: 3vh; + } + + .option { + list-style: none; + padding: 7px 15px; + border-radius: 10px; + border-color: black; + border-style: solid; + border-width: 1px; + margin: 3px 0px; + cursor: pointer; + } + + .stage { + border-color: black; + border-style: solid; + width: 80%; + height: 7%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .button { + background-color: rgb(38, 38, 68); + color: white; + font-weight: bold; + font-size: 110%; + border-radius: 20px; + border-style: none; + padding: 10px 40px; + transition: 0.6s; + } + + .button:hover { + background-color: rgb(74, 74, 138); + transition: 0.3s; + cursor: pointer; + } diff --git a/src/webapp/src/router/index.js b/src/webapp/src/router/index.js index aabd6db..0d56f5e 100644 --- a/src/webapp/src/router/index.js +++ b/src/webapp/src/router/index.js @@ -53,6 +53,38 @@ const routes = [ title: 'Home :: Admin - myevent' } }, + { + path: 'admin-accounts', + name: 'adminAccounts', + component: () => import( '../views/AdminLoginView.vue' ), + meta: { + title: 'Accounts :: Admin - myevent' + } + }, + { + path: 'pages', + name: 'adminPages', + component: () => import( '../views/AdminLoginView.vue' ), + meta: { + title: 'Pages :: Admin - myevent' + } + }, + { + path: 'events', + name: 'adminEvents', + component: () => import( '../views/AdminLoginView.vue' ), + meta: { + title: 'Events :: Admin - myevent' + } + }, + { + path: 'plugins', + name: 'adminPlugins', + component: () => import( '../views/AdminLoginView.vue' ), + meta: { + title: 'Plugins :: Admin - myevent' + } + }, { path: 'settings', name: 'adminSettings', @@ -103,20 +135,28 @@ const routes = [ const router = createRouter( { history: createWebHistory( process.env.BASE_URL ), routes, - } ); router.afterEach( ( to, from ) => { - document.title = to.meta.title ? to.meta.title : 'default title'; + document.title = to.meta.title ? to.meta.title : 'myevent'; } ); -let disallowed = [ 'admin', 'adminMain' ]; -let isAuthenticated = true; +/* + TODO: Get auth status from server on reload +*/ + +let AdminPages = [ 'admin', 'adminMain' ]; +let isAdminAuthenticated = true; + +let UserAccountPages = [ 'account' ]; +let isUserAuthenticated = true; router.beforeEach( ( to, from ) => { - if ( disallowed.includes( to.name ) && !isAuthenticated ) { + if ( AdminPages.includes( to.name ) && !isAdminAuthenticated ) { return { name: 'adminLogin' }; + } else if ( UserAccountPages.includes( to.name ) && !isUserAuthenticated ) { + return { name: 'login' }; } } ); diff --git a/src/webapp/src/views/OrderView.vue b/src/webapp/src/views/OrderView.vue index 5fc5a33..69b59bc 100644 --- a/src/webapp/src/views/OrderView.vue +++ b/src/webapp/src/views/OrderView.vue @@ -4,7 +4,7 @@