many changes to various components

src/webapp/src/App.vue

@@ -186,6 +186,7 @@ export default {
             document.documentElement.classList.add( 'light' );
             this.theme = '☽';
         }
+        localStorage.setItem( 'url', 'http://localhost:8081' );
     }
 }
 </script>

src/webapp/src/components/notifications/popups.vue

@@ -36,6 +36,12 @@
                             <button @click="closePopup( 'cancel' )" title="Cancel changes">Cancel</button>
                         </div>
                     </div>
+                    <div v-else-if="contentType === 'selection'" class="options selection">
+                        <h3>{{ data.message }}</h3>
+                        <div v-for="selectOption in data.options">
+                            <button class="select-button" @click="closePopupAdvanced( 'ok', selectOption.value )">{{ selectOption.displayName }}</button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -67,10 +73,13 @@
             closePopup( message ) {
                 $( '#popup-backdrop' ).fadeOut( 300 );
                 if ( message ) {
-                    this.$emit( 'status', message );
+                    this.$emit( 'data', { 'data': this.data.selected, 'status': message } );
-                    this.$emit( 'data', this.data );
                 }
             },
+            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;
+    }
 </style>

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';
+            this.seats[ row ][ seat ][ 'status' ] = 'av';
-            // TODO: Make server call to deselect ticket
         },
         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: {

src/webapp/src/components/seatplan/userApp/userWindow.vue

@@ -15,21 +15,21 @@
                 <Vue3DraggableResizable v-for="draggable in draggables" :initW="draggable.w" :initH="draggable.h" :x="draggable.x" :y="draggable.y" :w="draggable.w" :h="draggable.h"
                     :active="false" :draggable="false" :resizable="false" :parent="true" class="draggable-box">
 
-                    <circularSeatplanComponent v-if="draggable.shape == 'circular' && draggable.type == 'seat'" :scale-factor="scaleFactor" 
+                    <circularSeatplanComponent :ref="'component' + draggable.id" v-if="draggable.shape == 'circular' && draggable.type == 'seat'" :scale-factor="scaleFactor" 
                     :w="draggable.w" :h="draggable.h" :origin="draggable.origin" :starting-row="draggable.startingRow"
                     @seatSelected="( seat ) => { seatSelected( seat ) }"></circularSeatplanComponent>
 
-                    <trapezoidSeatplanComponent v-else-if="draggable.shape == 'trapezoid' && draggable.type == 'seat'" :scale-factor="scaleFactor" 
+                    <trapezoidSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.shape == 'trapezoid' && draggable.type == 'seat'" :scale-factor="scaleFactor" 
                     :w="draggable.w" :h="draggable.h" :origin="draggable.origin" :starting-row="draggable.startingRow"
                     @seatSelected="( seat ) => { seatSelected( seat ) }"></trapezoidSeatplanComponent>
 
-                    <rectangularSeatplanComponent v-else-if="draggable.shape == 'rectangular' && draggable.type == 'seat'" :scale-factor="scaleFactor" 
+                    <rectangularSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.shape == 'rectangular' && draggable.type == 'seat'" :scale-factor="scaleFactor" 
                     :w="draggable.w" :h="draggable.h" :origin="draggable.origin"
                     @seatSelected="( seat ) => { seatSelected( seat ) }" @seatDeselected="( seat ) => { seatDeselected( seat ) }"></rectangularSeatplanComponent>
 
-                    <stagesSeatplanComponent v-else-if="draggable.type == 'stage'" :origin="draggable.origin" :shape="draggable.shape"></stagesSeatplanComponent>
+                    <stagesSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'stage'" :origin="draggable.origin" :shape="draggable.shape"></stagesSeatplanComponent>
-                    <standingSeatplanComponent v-else-if="draggable.type == 'stand'" :origin="draggable.origin" :shape="draggable.shape"></standingSeatplanComponent>
+                    <standingSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'stand'" :origin="draggable.origin" :shape="draggable.shape"></standingSeatplanComponent>
-                    <textFieldSeatplanComponent v-else-if="draggable.type == 'text'" :text="draggable.text.text" :text-size="draggable.text.textSize" :colour="draggable.text.colour" :origin="draggable.origin" :scale-factor="scaleFactor"></textFieldSeatplanComponent>
+                    <textFieldSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'text'" :text="draggable.text.text" :text-size="draggable.text.textSize" :colour="draggable.text.colour" :origin="draggable.origin" :scale-factor="scaleFactor"></textFieldSeatplanComponent>
                 </Vue3DraggableResizable>
             </div>
         </div>
@@ -39,7 +39,7 @@
             <button title="Zoom out [-]" @click="zoom( -0.2 )"><span class="material-symbols-outlined">zoom_out</span></button>
         </div>
         <notifications ref="notification" location="topleft"></notifications>
-        <popups ref="popups" size="big"></popups>
+        <popups ref="popups" size="normal" @data="data => { reserveTicket( data ) }"></popups>
     </div>
 </template>
 
@@ -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
+                It loads seat plan data and starts the event listeners
-                for keyevents (like delete) and also check if the user uses a desktop
+                for keyevents (like +, -, =)
-                browser that meets all the requirements for being able to use the editor
-                reliably according to testing done.
             */
             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.selectedSeat = seat;
-                this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'dropdown' );
+                if ( Object.keys( seat.option ).length > 1 ) {
-                // Make call to server to reserve ticket.
+                    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 () {