add colouring for seat plan

This commit is contained in:
2023-09-09 13:55:05 +02:00
parent defaafdd54
commit 1d089c8d93
13 changed files with 36 additions and 26 deletions

View File

@@ -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';
}
}
},

View File

@@ -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';
}
}
},

View File

@@ -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 ) {

View File

@@ -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 ] ) {

View File

@@ -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 ) {

View File

@@ -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';
}
}
},

View File

@@ -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: {

View File

@@ -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();

View File

@@ -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>