janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 13:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

adjust seat plan components for user facing ui

Browse Source
This commit is contained in:
Janis Hutz
2023-07-03 17:25:03 +02:00
parent a5aae2c54f
commit e9681e57cf
3 changed files with 75 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/circular.vue
View File

@@ -10,7 +10,14 @@
<template> <template>
<div id="circularSeatplan"> <div id="circularSeatplan">
<div v-for="row in seats"> <div v-for="row in seats">
<span class="material-symbols-outlined seats" v-for="seat in row" :style="seat.style">living</span> <div class="seats" v-for="seat in row" :style="seat.style" :id="seat.id">
<span class="material-symbols-outlined" :style="seat.scaling" @click="selectSeat( seat.row, seat.seat )" v-if="seat.status == 'av'"
:title="seat.displayName + ', Available'">living</span>
<span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'nav'"
:title="seat.displayName + ', Unavailable'">close</span>
<span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'sel'"
:title="seat.displayName + ', Selected'">done</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -45,9 +52,9 @@ export default {
type: Number, type: Number,
"default": 1, "default": 1,
}, },
id: { data: {
type: Number, type: Object,
"default": 1 "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
} }
}, },
data () { data () {
@@ -64,26 +71,25 @@ export default {
const size = 33; const size = 33;
let count = Math.min( Math.floor( w / size ), Math.floor( h / size ) ); let count = Math.min( Math.floor( w / size ), Math.floor( h / size ) );
this.seats = {}; this.seats = {};
let details = { 'data': {}, 'id': this.id };
for ( let row = this.startingRow; row < count; row++ ) { for ( let row = this.startingRow; row < count; row++ ) {
let nn = row * ( Math.PI / 2 ); let nn = row * ( Math.PI / 2 );
details.data[ row ] = Math.floor( nn );
let r = row * size; let r = row * size;
this.seats[ row ] = {}; this.seats[ row ] = {};
for ( let n = 0; n < nn; n++ ) { for ( let n = 0; n < nn; n++ ) {
this.seats[ row ][ n ] = { 'style': '', 'id': 'sec' + this.data.sector + 'r' + row + 's' + n, 'displayName': ( this.data.sectorCount > 1 ? 'Sector ' + this.data.sector + ', ' : '' ) + 'Row ' + ( row + 1 ) + ', Seat ' + ( n + 1 ), 'status': 'av', 'row': row, 'seat': n };
let phi = n * size / ( row * size ); let phi = n * size / ( row * size );
if ( this.origin === 1 ) { if ( this.origin === 1 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi }rad` }; this.seats[ row ][ n ][ 'style' ] = `bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi }rad`;
} else if ( this.origin === 2 ) { } else if ( this.origin === 2 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - phi }rad` }; this.seats[ row ][ n ][ 'style' ] = `bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - phi }rad`;
} else if ( this.origin === 3 ) { } else if ( this.origin === 3 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi + Math.PI }rad` }; this.seats[ row ][ n ][ 'style' ] = `top: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi + Math.PI }rad`;
} else if ( this.origin === 4 ) { } else if ( this.origin === 4 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI - phi }rad` }; this.seats[ row ][ n ][ 'style' ] = `top: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI - phi }rad`;
}
this.seats[ row ][ n ][ 'scaling' ] = `font-size: ${this.scaleFactor * 200}%; `;
} }
} }
}
this.$emit( 'seatingInfo', details );
}, },
setScaleFactor () { setScaleFactor () {
for ( let row in this.seats ) { for ( let row in this.seats ) {
@@ -92,6 +98,9 @@ export default {
this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles; this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
} }
} }
},
selectSeat ( row, seat ) {
console.log( row + ' ' + seat );
} }
}, },
watch: { watch: {

43
src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue
View File

@@ -10,7 +10,14 @@
<template> <template>
<div id="rectangularSeatplan"> <div id="rectangularSeatplan">
<div v-for="row in seats" class="rows"> <div v-for="row in seats" class="rows">
<span class="material-symbols-outlined seats" v-for="seat in row" :style="seat.style" @click="selectSeat( seat.id )">living</span> <div class="seats" v-for="seat in row" :style="seat.style" :id="seat.id">
<span class="material-symbols-outlined" :style="seat.scaling" @click="selectSeat( seat.row, seat.seat )" v-if="seat.status == 'av'"
:title="seat.displayName + ', Available'">living</span>
<span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'nav'"
:title="seat.displayName + ', Unavailable'">close</span>
<span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'sel'"
:title="seat.displayName + ', Selected'">done</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -41,9 +48,9 @@ export default {
type: Number, type: Number,
"default": 1, "default": 1,
}, },
id: { data: {
type: Number, type: Object,
"default": 1 "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
} }
}, },
data () { data () {
@@ -62,14 +69,22 @@ export default {
for ( let row = 0; row < Math.floor( h / size ); row++ ) { for ( let row = 0; row < Math.floor( h / size ); row++ ) {
this.seats[ row ] = {}; this.seats[ row ] = {};
for ( let n = 0; n < Math.floor( w / size ); n++ ) { for ( let n = 0; n < Math.floor( w / size ); n++ ) {
this.seats[ row ][ n ] = { 'style': '', 'id': 'sec' + this.data.sector + 'r' + row + 's' + n, 'displayName': ( this.data.sectorCount > 1 ? 'Sector ' + this.data.sector + ', ' : '' ) + 'Row ' + ( row + 1 ) + ', Seat ' + ( n + 1 ), 'status': 'av', 'row': row, 'seat': n };
// TODO: apply style of category
if ( this.origin === 1 ) { if ( this.origin === 1 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ row * size * this.scaleFactor }px; left: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;` }; this.seats[ row ][ n ][ 'style' ] = `bottom: ${ row * size * this.scaleFactor }px; left: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;`;
} else if ( this.origin === 2 ) { } else if ( this.origin === 2 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ row * size * this.scaleFactor }px; right: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;` }; this.seats[ row ][ n ][ 'style' ] = `bottom: ${ row * size * this.scaleFactor }px; right: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;`;
} else if ( this.origin === 3 ) { } else if ( this.origin === 3 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ row * size * this.scaleFactor }px; right: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;` }; this.seats[ row ][ n ][ 'style' ] = `top: ${ row * size * this.scaleFactor }px; right: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;`;
} else if ( this.origin === 4 ) { } else if ( this.origin === 4 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ row * size * this.scaleFactor }px; left: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;` }; 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.unavailableSeats ) {
if ( this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ] ) {
this.seats[ row ][ n ][ 'status' ] = 'nav';
}
} }
} }
} }
@@ -81,6 +96,18 @@ export default {
this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles; this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
} }
} }
},
selectSeat ( row, seat ) {
this.$emit( 'seatSelected', this.seats[ row ][ seat ] );
},
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
},
validateSeatSelection( seatObject ) {
this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'sel';
// TODO: Make server call to reserve ticket
} }
}, },
watch: { watch: {

33
src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/trapezoid.vue
View File

@@ -10,7 +10,14 @@
<template> <template>
<div id="trapezoidSeatplan"> <div id="trapezoidSeatplan">
<div v-for="row in seats"> <div v-for="row in seats">
<span class="material-symbols-outlined seats" v-for="seat in row" :style="seat.style">living</span> <div class="seats" v-for="seat in row" :style="seat.style" :id="seat.id">
<span class="material-symbols-outlined" :style="seat.scaling" @click="selectSeat( seat.row, seat.seat )" v-if="seat.status == 'av'"
:title="seat.displayName + ', Available'">living</span>
<span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'nav'"
:title="seat.displayName + ', Unavailable'">close</span>
<span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'sel'"
:title="seat.displayName + ', Selected'">done</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -45,9 +52,9 @@ export default {
type: Number, type: Number,
"default": 1, "default": 1,
}, },
id: { data: {
type: Number, type: Object,
"default": 1 "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
} }
}, },
data () { data () {
@@ -68,25 +75,24 @@ export default {
let count = Math.floor( heightTriangle / ( sideOffset * 2 ) ); let count = Math.floor( heightTriangle / ( sideOffset * 2 ) );
const angle = Math.PI / 4; const angle = Math.PI / 4;
this.seats = {}; this.seats = {};
let details = { 'data': {}, 'id': this.id };
for ( let row = this.startingRow; row < count; row++ ) { for ( let row = this.startingRow; row < count; row++ ) {
let nn = 2 + ( row - 1 ) * 2; let nn = 2 + ( row - 1 ) * 2;
this.seats[ row ] = {}; this.seats[ row ] = {};
details.data[ row ] = Math.floor( nn );
for ( let n = 0; n < nn; n++ ) { for ( let n = 0; n < nn; n++ ) {
this.seats[ row ][ n ] = { 'style': '', 'id': 'sec' + this.data.sector + 'r' + row + 's' + n, 'displayName': ( this.data.sectorCount > 1 ? 'Sector ' + this.data.sector + ', ' : '' ) + 'Row ' + ( row + 1 ) + ', Seat ' + ( n + 1 ), 'status': 'av', 'row': row, 'seat': n };
let side = n * sideOffset; let side = n * sideOffset;
if ( this.origin === 1 ) { if ( this.origin === 1 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle }rad` }; this.seats[ row ][ n ][ 'style' ] = `bottom: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle }rad`;
} else if ( this.origin === 2 ) { } else if ( this.origin === 2 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ ( side + 5 ) * this.scaleFactor }px; right: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - angle }rad` }; this.seats[ row ][ n ][ 'style' ] = `bottom: ${ ( side + 5 ) * this.scaleFactor }px; right: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - angle }rad`;
} else if ( this.origin === 3 ) { } else if ( this.origin === 3 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ ( side + 5 ) * this.scaleFactor }px; right: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle + Math.PI }rad` }; this.seats[ row ][ n ][ 'style' ] = `top: ${ ( side + 5 ) * this.scaleFactor }px; right: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle + Math.PI }rad`;
} else if ( this.origin === 4 ) { } else if ( this.origin === 4 ) {
this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ Math.PI - angle }rad` }; this.seats[ row ][ n ][ 'style' ] = `top: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ Math.PI - angle }rad`;
}
this.seats[ row ][ n ][ 'scaling' ] = `font-size: ${this.scaleFactor * 200}%; `;
} }
} }
}
this.$emit( 'seatingInfo', details );
}, },
setScaleFactor () { setScaleFactor () {
for ( let row in this.seats ) { for ( let row in this.seats ) {
@@ -95,6 +101,9 @@ export default {
this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles; this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
} }
} }
},
selectSeat ( row, seat ) {
console.log( row + ' ' + seat );
} }
}, },
watch: { watch: {