mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
add colouring for seat plan
This commit is contained in:
@@ -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';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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 ) {
|
||||
|
||||
@@ -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 ] ) {
|
||||
|
||||
@@ -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 ) {
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user