diff --git a/src/webapp/src/App.vue b/src/webapp/src/App.vue index c6f446a..8883cef 100644 --- a/src/webapp/src/App.vue +++ b/src/webapp/src/App.vue @@ -186,6 +186,7 @@ export default { document.documentElement.classList.add( 'light' ); this.theme = '☽'; } + localStorage.setItem( 'url', 'http://localhost:8081' ); } } diff --git a/src/webapp/src/components/notifications/popups.vue b/src/webapp/src/components/notifications/popups.vue index 9ab916a..0f1aa3e 100644 --- a/src/webapp/src/components/notifications/popups.vue +++ b/src/webapp/src/components/notifications/popups.vue @@ -36,6 +36,12 @@ +
+

{{ data.message }}

+
+ +
+
@@ -67,10 +73,13 @@ closePopup( message ) { $( '#popup-backdrop' ).fadeOut( 300 ); if ( message ) { - this.$emit( 'status', message ); - this.$emit( 'data', this.data ); + this.$emit( 'data', { 'data': this.data.selected, 'status': message } ); } }, + closePopupAdvanced ( message, data ) { + this.data[ 'selected' ] = data; + this.closePopup( message ); + }, openPopup ( message, options, dataType, selected ) { let data = { 'message': message ? message : 'No message defined on method call!!', 'options': options ? options : { '1': { 'value': 'undefined', 'displayName': 'No options specified in call' } }, 'selected': selected ? selected : '' }; this.data = data; @@ -177,4 +186,18 @@ .options button:hover { background-color: var( --accent-background-hover ); } + + .select-button { + background-color: rgba( 0, 0, 0, 0 ) !important; + color: var( --primary-color ) !important; + padding: 1vh 2vw !important; + border: solid var( --primary-color ) 1px; + border-radius: 5px; + transition: all 0.5s ease-in-out; + margin-bottom: 1vh; + } + + .select-button:hover { + background-color: var( --hover-color ) !important; + } \ No newline at end of file diff --git a/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue b/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue index bb08f08..791b706 100644 --- a/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue +++ b/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue @@ -50,7 +50,11 @@ export default { }, data: { type: Object, - "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } } + "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true }, 'categoryInfo': { 'pricing': { 'adult': { 'displayName': 'Adults - CHF 20.-', 'value': 'adult', 'price': 20 }, 'child': { 'displayName': 'Child (0 - 15.99y) - CHF 15.-', 'value': 'child', 'price': 15 } } } } + }, + id: { + type: Number, + "default": 1, } }, data () { @@ -81,6 +85,10 @@ export default { this.seats[ row ][ n ][ 'style' ] = `top: ${ row * size * this.scaleFactor }px; left: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;`; } this.seats[ row ][ n ][ 'scaling' ] = `font-size: ${this.scaleFactor * 200}%; `; + if ( this.data.categoryInfo.color ) { + this.seats[ row ][ n ][ 'style' ] += `color: ${ this.data.categoryInfo.color.fg ? this.data.categoryInfo.color.fg : 'black' }; background-color: ${ this.data.categoryInfo.color.bg ? this.data.categoryInfo.color.bg : 'rgba( 0, 0, 0, 0 )' }`; + } + if ( this.data.unavailableSeats ) { if ( this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ] ) { this.seats[ row ][ n ][ 'status' ] = 'nav'; @@ -98,17 +106,19 @@ export default { } }, selectSeat ( row, seat ) { - this.$emit( 'seatSelected', this.seats[ row ][ seat ] ); + let selectedSeat = this.seats[ row ][ seat ]; + selectedSeat[ 'sector' ] = this.data.sector; + selectedSeat[ 'option' ] = this.data.categoryInfo.pricing; + selectedSeat[ 'componentID' ] = this.id; + this.$emit( 'seatSelected', selectedSeat ); }, deselectSeat( row, seat ) { this.$emit( 'seatDeselected', this.seats[ row ][ seat ] ); - this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'av'; - // TODO: Make server call to deselect ticket + this.seats[ row ][ seat ][ 'status' ] = 'av'; }, validateSeatSelection( seatObject, selectedTicketOption ) { this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'sel'; this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'ticketOption' ] = selectedTicketOption; - // TODO: Make server call to reserve ticket } }, watch: { diff --git a/src/webapp/src/components/seatplan/userApp/userWindow.vue b/src/webapp/src/components/seatplan/userApp/userWindow.vue index 74b203d..fc38910 100644 --- a/src/webapp/src/components/seatplan/userApp/userWindow.vue +++ b/src/webapp/src/components/seatplan/userApp/userWindow.vue @@ -15,21 +15,21 @@ - - - - - - + + + @@ -39,7 +39,7 @@ - + @@ -81,6 +81,7 @@ standardDeviation: { 'currentTop': 0, 'currentLeft': 0 }, movePos: { 'top': 0, 'left': 0, 'isMoving': false, 'isSet': false }, generalSettings: { 'namingScheme': 'numeric' }, + selectedSeat: {}, } }, methods: { @@ -88,22 +89,14 @@ Coords are from top left corner of box. The below function is executed as the init hook (created hook) of vue.js, so whenever this particular page is loaded. - It loads previous data (if available) and starts the event listeners - for keyevents (like delete) and also check if the user uses a desktop - browser that meets all the requirements for being able to use the editor - reliably according to testing done. + It loads seat plan data and starts the event listeners + for keyevents (like +, -, =) */ runHook () { let self = this; this.zoomFactor = sessionStorage.getItem( 'zoom' ) ? parseFloat( sessionStorage.getItem( 'zoom' ) ) : 1; - /* - Keybinds: - - Delete: delete selected object - - Ctrl + S: Save - - Ctrl + Z: Undo - - Ctrl + Y: Redo - */ + document.onkeydown = function ( event ) { if ( event.key === '+' ) { self.zoom( 0.2 ); @@ -234,12 +227,21 @@ } }, seatSelected ( seat ) { - console.log( seat ); - this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'dropdown' ); - // Make call to server to reserve ticket. + this.selectedSeat = seat; + 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' ] } ); + } + }, + reserveTicket ( option ) { + if ( option.status == 'ok' ) { + this.$refs.component1[ 0 ].validateSeatSelection( this.selectedSeat, option.data ); + } + // TODO: Make call to server to reserve ticket when data is returned & save to localStorage array. }, seatDeselected ( seat ) { - + // TODO: Make call to server to deselect ticket & delete from localStorage array and delete eventArray if empty! } }, created () {