add colouring for seat plan

src/server/backend/db/data/eventDrafts.json

@@ -1 +1 @@
-{"test4":{"name":"Test4Event","description":"Let's see what happens if I update the description, how fast it is reflected in the UI","location":"test2","date":"2023-09-18T10:00:00.000Z","categories":{"1":{"price":{"1":20,"2":30},"bg":"#FFFFFF","fg":"#000000","name":"Category 1","id":"1","ticketCount":1}},"ageGroups":{"1":{"id":1,"name":"Child","age":"0 - 15.99"},"2":{"id":2,"name":"Adult"}},"maxTickets":0,"eventID":"test4","time":"10:00:00.000","startingPrice":20,"currency":"CHF","isDraft":true,"locationName":"TestLocation2","hasSeatplan":true}}
+{"test4":{"name":"Test4Event","description":"Let's see what happens if I update the description, how fast it is reflected in the UI","location":"test2","date":"2023-09-18T10:00:00.000Z","categories":{"1":{"price":{"1":20,"2":30},"bg":"#ff0000","fg":"#ff0000","name":"Category 1","id":"1","ticketCount":1}},"ageGroups":{"1":{"id":1,"name":"Child","age":"0 - 15.99"},"2":{"id":2,"name":"Adult"}},"maxTickets":0,"eventID":"test4","time":"10:00:00.000","startingPrice":20,"currency":"CHF","isDraft":true,"locationName":"TestLocation2","hasSeatplan":true}}

src/server/backend/db/data/events.json

@@ -1 +1 @@
-{"test4":{"name":"Test4Event","description":"Let's see what happens if I update the description, how fast it is reflected in the UI","location":"test2","date":"2023-09-18T10:00:00.000Z","categories":{"1":{"price":{"1":20,"2":30},"bg":"#FFFFFF","fg":"#000000","name":"Category 1","id":"1","ticketCount":1}},"ageGroups":{"1":{"id":1,"name":"Child","age":"0 - 15.99"},"2":{"id":2,"name":"Adult"}},"maxTickets":0,"eventID":"test4","time":"10:00:00.000","startingPrice":20,"currency":"CHF","isDraft":true,"locationName":"TestLocation2","hasSeatplan":true}}
+{"test4":{"name":"Test4Event","description":"Let's see what happens if I update the description, how fast it is reflected in the UI","location":"test2","date":"2023-09-18T10:00:00.000Z","categories":{"1":{"price":{"1":20,"2":30},"bg":"#ff0000","fg":"#ff0000","name":"Category 1","id":"1","ticketCount":1}},"ageGroups":{"1":{"id":1,"name":"Child","age":"0 - 15.99"},"2":{"id":2,"name":"Adult"}},"maxTickets":0,"eventID":"test4","time":"10:00:00.000","startingPrice":20,"currency":"CHF","isDraft":true,"locationName":"TestLocation2","hasSeatplan":true}}

src/server/backend/db/data/seatplan.json

@@ -1 +1 @@
-{"test2":{"draft":{},"save":{"seatInfo":{"data":{"1":{"0":22},"2":{"0":9},"3":{"0":9}},"count":100},"data":{"1":{"x":299.02,"y":17.157,"h":564.951,"w":731.618,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":359.069,"y":661.765,"h":121.324,"w":604.167,"active":false,"draggable":true,"resizable":true,"id":2,"origin":3,"shape":"rectangular","type":"stage","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":519.608,"y":671.569,"h":83.333,"w":306.373,"active":false,"draggable":true,"resizable":true,"id":3,"origin":1,"shape":"rectangular","type":"text","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"Stage","textSize":25,"colour":"#2160ff"},"ticketCount":1,"numberingDirection":"left","category":"1"}}}},"test":{"draft":{},"save":{"seatInfo":{"data":{"1":{"0":22}},"count":0},"data":{"1":{"x":427.696,"y":160.539,"h":371.324,"w":734.069,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"stand","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1","ticketCount":50}}}}}
+{"test2":{"draft":{"seatInfo":{"data":{"1":{"0":22}},"count":0},"data":{"1":{"x":298.694,"y":17.138,"h":564.336,"w":730.822,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":359.068,"y":661.764,"h":121.192,"w":603.509,"active":false,"draggable":true,"resizable":true,"id":2,"origin":3,"shape":"rectangular","type":"stage","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":519.608,"y":671.569,"h":83.243,"w":306.039,"active":false,"draggable":true,"resizable":true,"id":3,"origin":1,"shape":"rectangular","type":"text","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"Stage","textSize":25,"colour":"#2160ff"},"ticketCount":1,"numberingDirection":"left","category":"1"}}},"save":{"seatInfo":{"data":{"1":{"0":22},"2":{"0":9},"3":{"0":9}},"count":100},"data":{"1":{"x":299.02,"y":17.157,"h":564.951,"w":731.618,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"seat","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1"},"2":{"x":359.069,"y":661.765,"h":121.324,"w":604.167,"active":false,"draggable":true,"resizable":true,"id":2,"origin":3,"shape":"rectangular","type":"stage","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"ticketCount":1,"numberingDirection":"left","category":"1"},"3":{"x":519.608,"y":671.569,"h":83.333,"w":306.373,"active":false,"draggable":true,"resizable":true,"id":3,"origin":1,"shape":"rectangular","type":"text","startingRow":1,"seatNumberingPosition":2,"sector":"A","text":{"text":"Stage","textSize":25,"colour":"#2160ff"},"ticketCount":1,"numberingDirection":"left","category":"1"}}}},"test":{"draft":{},"save":{"seatInfo":{"data":{"1":{"0":22}},"count":0},"data":{"1":{"x":427.696,"y":160.539,"h":371.324,"w":734.069,"active":false,"draggable":true,"resizable":true,"id":1,"origin":1,"shape":"rectangular","type":"stand","startingRow":1,"seatNumberingPosition":1,"sector":"A","text":{"text":"TestText","textSize":20,"colour":"#20FFFF"},"numberingDirection":"left","category":"1","ticketCount":50}}}}}

src/server/backend/db/db.js

@@ -214,11 +214,11 @@ const gc = () => {
     // this function acts as the database garbage collector. TicketTimeout can be changed from the GUI.
     this.getData( 'temp' ).then( tempData => {
         let data = tempData;
-        console.info( 'Garbage Collecting' );
+        console.info( '[ DB ] Garbage Collecting' );
         for ( let item in data ) {
             if ( new Date( data[ item ][ 'timestamp' ] ).getTime() + ( parseInt( settings.ticketTimeout ) * 1000 ) > new Date().getTime() ) {
                 delete data[ item ];
-                console.debug( 'Garbage collected a session' );
+                console.debug( '[ DB ] Garbage collected a session' );
             }
         }
     } );

src/webapp/main/src/components/seatplan/seatplanComponents/stages.vue

@@ -85,15 +85,19 @@ export default {
             if ( this.origin === 1 ) {
                 this.style = 'border-style: none none solid none';
                 this.circularStyle = 'top: 0; right: 100%;';
+                this.trapezoidStyle = 'rotate: 45deg';
             } else if ( this.origin === 2 ) {
                 this.style = 'border-style: none solid none none';
                 this.circularStyle = 'top: 0; right: 0;';
+                this.trapezoidStyle = 'rotate: 135deg';
             } else if ( this.origin === 3 ) {
                 this.style = 'border-style: solid none none none';
                 this.circularStyle = 'top: -100%; right: 0;';
+                this.trapezoidStyle = 'rotate: 225deg';
             } else if ( this.origin === 4 ) {
                 this.style = 'border-style: none none none solid';
                 this.circularStyle = 'top: -100%; right: 100%;';
+                this.trapezoidStyle = 'rotate: 315deg';
             }
         }
     },

src/webapp/main/src/components/seatplan/seatplanComponents/standing.vue

@@ -1,5 +1,5 @@
 <!--
-*				libreevent - standing.vue
+*				libreevent - stages.vue
 *
 *	Created by Janis Hutz 05/12/2023, Licensed under the GPL V3 License
 *			https://janishutz.com, development@janishutz.com
@@ -24,6 +24,7 @@
 #rectangular {
     border-color: black;
     border-width: 2px;
+    background-color: var( --popup-color );
 }
 
 #circular, #trapezoid {
@@ -33,7 +34,7 @@
 #trapezoid-ingredient {
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
     height: 200%;
     width: 200%;
     position: relative;
@@ -84,15 +85,19 @@ export default {
             if ( this.origin === 1 ) {
                 this.style = 'border-style: none none solid none';
                 this.circularStyle = 'top: 0; right: 100%;';
+                this.trapezoidStyle = 'rotate: 45deg';
             } else if ( this.origin === 2 ) {
                 this.style = 'border-style: none solid none none';
                 this.circularStyle = 'top: 0; right: 0;';
+                this.trapezoidStyle = 'rotate: 135deg';
             } else if ( this.origin === 3 ) {
                 this.style = 'border-style: solid none none none';
                 this.circularStyle = 'top: -100%; right: 0;';
+                this.trapezoidStyle = 'rotate: 225deg';
             } else if ( this.origin === 4 ) {
                 this.style = 'border-style: none none none solid';
                 this.circularStyle = 'top: -100%; right: 100%;';
+                this.trapezoidStyle = 'rotate: 315deg';
             }
         }
     },

src/webapp/main/src/components/seatplan/userApp/seatplanComponents/seats/circular.vue

@@ -93,7 +93,7 @@ export default {
                     }
                     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 )' }`;
+                        this.seats[ row ][ n ][ 'style' ] += `color: ${ this.data.categoryInfo.color ?? 'black' };`;
                     }
 
                     if ( this.data.unavailableSeats ) {

src/webapp/main/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue

@@ -95,7 +95,7 @@ export default {
                     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 )' }`;
+                        this.seats[ row ][ n ][ 'style' ] += `color: ${ this.data.categoryInfo.color ?? 'black' };`;
                     }
 
                     if ( this.unavailable[ this.id ] ) {

src/webapp/main/src/components/seatplan/userApp/seatplanComponents/seats/trapezoid.vue

@@ -98,7 +98,7 @@ export default {
                     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 )' }`;
+                        this.seats[ row ][ n ][ 'style' ] += `color: ${ this.data.categoryInfo.color ?? 'black' };`;
                     }
 
                     if ( this.data.unavailableSeats ) {

src/webapp/main/src/components/seatplan/userApp/seatplanComponents/stages.vue

@@ -85,15 +85,19 @@ export default {
             if ( this.origin === 1 ) {
                 this.style = 'border-style: none none solid none';
                 this.circularStyle = 'top: 0; right: 100%;';
+                this.trapezoidStyle = 'rotate: 45deg';
             } else if ( this.origin === 2 ) {
                 this.style = 'border-style: none solid none none';
                 this.circularStyle = 'top: 0; right: 0;';
+                this.trapezoidStyle = 'rotate: 135deg';
             } else if ( this.origin === 3 ) {
                 this.style = 'border-style: solid none none none';
                 this.circularStyle = 'top: -100%; right: 0;';
+                this.trapezoidStyle = 'rotate: 225deg';
             } else if ( this.origin === 4 ) {
                 this.style = 'border-style: none none none solid';
                 this.circularStyle = 'top: -100%; right: 100%;';
+                this.trapezoidStyle = 'rotate: 315deg';
             }
         }
     },

src/webapp/main/src/components/seatplan/userApp/seatplanComponents/standing.vue

@@ -33,7 +33,7 @@
 #trapezoid-ingredient {
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
     height: 200%;
     width: 200%;
     position: relative;
@@ -73,7 +73,7 @@ export default {
         },
         color: {
             type: Object,
-            "default": { 'fg': '#FFFFFF', 'bg': '#999999' }
+            "default": { 'fg': '#FFFFFF' }
         }
     },
     data() {
@@ -86,19 +86,23 @@ export default {
     methods: {
         updateOrigin () {
             if ( this.origin === 1 ) {
-                this.style = 'border-style: none none solid none;';
+                this.style = 'border-style: none none solid none';
                 this.circularStyle = 'top: 0; right: 100%;';
+                this.trapezoidStyle = 'rotate: 45deg';
             } else if ( this.origin === 2 ) {
-                this.style = 'border-style: none solid none none;';
+                this.style = 'border-style: none solid none none';
                 this.circularStyle = 'top: 0; right: 0;';
+                this.trapezoidStyle = 'rotate: 135deg';
             } else if ( this.origin === 3 ) {
-                this.style = 'border-style: solid none none none;';
+                this.style = 'border-style: solid none none none';
                 this.circularStyle = 'top: -100%; right: 0;';
+                this.trapezoidStyle = 'rotate: 225deg';
             } else if ( this.origin === 4 ) {
-                this.style = 'border-style: none none none solid;';
+                this.style = 'border-style: none none none solid';
                 this.circularStyle = 'top: -100%; right: 100%;';
+                this.trapezoidStyle = 'rotate: 315deg';
             }
-            this.style += ` background-color: ${this.color.bg}; color: ${this.color.fg}`;
+            this.style += ` background-color: ${this.color.fg}; color: ${this.color.fg}`;
         },
     },
     watch: {

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

@@ -147,7 +147,6 @@
             },
             prepSeatplan () {
                 // Mark all selected seats + all unavailable seats
-                // { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': 'nav' }, 'categoryInfo': { 'pricing': { '1': { 'displayName': 'Adults - CHF 20.-', 'value': 'adult', 'price': 20 }, '2': { 'displayName': 'Child (0 - 15.99y) - CHF 15.-', 'value': 'child', 'price': 15 } } } }
                 let categoryDetails = {};
                 for ( let category in this.event.categories ) {
                     categoryDetails[ category ] = {};
@@ -158,7 +157,7 @@
                 }
 
                 for ( let element in this.draggables ) {
-                    this.draggables[ element ][ 'data' ] = { 'sector': this.draggables[ element ][ 'sector' ], 'categoryInfo': { 'pricing': categoryDetails[ this.draggables[ element ][ 'category' ] ] } };
+                    this.draggables[ element ][ 'data' ] = { 'sector': this.draggables[ element ][ 'sector' ], 'categoryInfo': { 'pricing': categoryDetails[ this.draggables[ element ][ 'category' ] ], 'color': this.event.categories[ this.draggables[ element ][ 'category' ] ][ 'fg' ] } };
                 }
 
                 this.seatChecks();

src/webapp/main/src/views/admin/events/EventsDetailsView.vue

@@ -81,17 +81,11 @@
                         </td>
                     </tr>
                     <tr>
-                        <td><div class="category-details">Foreground colour:</div></td>
+                        <td><div class="category-details">Colour:</div></td>
                         <td>
                             <input type="text" data-coloris v-model="category.fg" onkeydown="return false;">
                         </td>
                     </tr>
-                    <tr>
-                        <td><div class="category-details">Background colour:</div></td>
-                        <td>
-                            <input type="text" data-coloris v-model="category.bg" onkeydown="return false;">
-                        </td>
-                    </tr>
                     <tr v-if="!hasSeatPlan">
                         <td><div class="category-details">Total tickets for this category</div></td>
                         <td>