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

seatplan saving and loading for admin & user

Browse Source
This commit is contained in:
Janis Hutz
2023-07-20 15:24:38 +02:00
parent d855f61347
commit cbadd2a2c1
20 changed files with 525 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/webapp/main/src/components/seatplan/editor/properties.vue
View File

@@ -106,9 +106,7 @@
<tr v-if="internal[ active ].type == 'seat' || internal[ active ].type == 'stand'">
<td>Category:</td>
<td>
<select v-model="internal[ active ].seatCountingStartingPoint" @change="resubmit()">
<option v-for="category in categories" :value="category.value">{{ category.name }}</option>
</select>
<input type="text" v-model="internal[ active ].category" @change="resubmit()">
</td>
</tr>

95
src/webapp/main/src/components/seatplan/editor/window.vue
View File

@@ -71,7 +71,7 @@
data() {
return {
active: 0,
draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, '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' } },
draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, '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', 'seatNumberingPosition': 1, 'category': '1' } },
available: { 'redo': false, 'undo': false },
scaleFactor: 1,
sizePoll: null,
@@ -128,7 +128,41 @@
}
};
this.loadSeatplan();
// TODO: Create 1min interval saving
/*
Calculate scale factor (this adds support for differently sized screens)
900px is the "default" height
*/
let height = $( document ).height() * 0.8;
this.scaleFactor = ( height / 900 ) * this.zoomFactor;
/*
Load seatplan
*/
fetch( localStorage.getItem( 'url' ) + '/admin/getAPI/getSeatplanDraft?location=' + sessionStorage.getItem( 'locationID' ) ).then( res => {
if ( res.status === 200 ) {
res.json().then( data => {
this.draggables = this.scaleUp( data.data );
sessionStorage.setItem( 'seatplan', JSON.stringify( data.data ) );
for ( let element in this.draggables ) {
if ( this.draggables[ element ].active ) {
this.draggables[ element ].active = false;
}
}
} );
} else if ( res.status === 500 ) {
if ( sessionStorage.getItem( 'seatplan' ) ) {
this.draggables = this.scaleUp( JSON.parse( sessionStorage.getItem( 'seatplan' ) ) );
}
for ( let element in this.draggables ) {
if ( this.draggables[ element ].active ) {
this.draggables[ element ].active = false;
}
}
}
} );
if ( !sessionStorage.getItem( 'seatplan-history' ) ) {
sessionStorage.setItem( 'seatplan-history', JSON.stringify( { '1': this.scaleDown( this.draggables ) } ) );
@@ -163,10 +197,7 @@
let height = $( document ).height() * 0.8;
this.scaleFactor = ( height / 900 ) * this.zoomFactor;
/*
Load seatplan
*/
// TODO: load from server
if ( sessionStorage.getItem( 'seatplan' ) ) {
this.draggables = this.scaleUp( JSON.parse( sessionStorage.getItem( 'seatplan' ) ) );
}
@@ -263,21 +294,59 @@
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
},
saveDraft () {
// TODO: Save seat count and seat config to server as well
this.getSeatCount();
let progressNotification = this.$refs.notification.createNotification( 'Saving as draft', 5, 'progress', 'normal' );
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
this.$refs.notification.createNotification( 'Saved as draft', 5, 'ok', 'normal' );
// TODO: Save to server and add warning if no component has a seat start point if any component is a seat component
const options = {
method: 'post',
body: JSON.stringify( { 'data':{ 'seatInfo': this.seatCountInfo, 'data': this.scaleDown( this.draggables ) }, 'location': sessionStorage.getItem( 'locationID' ) } ),
headers: {
'Content-Type': 'application/json',
'charset': 'utf-8'
}
};
fetch( localStorage.getItem( 'url' ) + '/admin/api/saveSeatplanDraft', options ).then( res => {
if ( res.status === 200 ) {
res.text().then( text => {
console.log( text );
this.$refs.notification.cancelNotification( progressNotification );
this.$refs.notification.createNotification( 'Saved as draft', 5, 'ok', 'normal' );
} );
} else if ( res.status === 403 ) {
this.$refs.notification.cancelNotification( progressNotification );
this.$refs.notification.createNotification( 'Unauthenticated', 5, 'ok', 'error' );
}
} );
// TODO: add warning if no component has a seat start point if any component is a seat component
},
deploy () {
// TODO: Save to server
this.$refs.notification.createNotification( 'Deploying...', 5, 'progress', 'normal' );
this.$refs.notification.createNotification( 'Deployed successfully', 5, 'ok', 'normal' );
let deployNotification = this.$refs.notification.createNotification( 'Deploying...', 5, 'progress', 'normal' );
const options = {
method: 'post',
body: JSON.stringify( { 'data':{ 'seatInfo': this.seatCountInfo, 'data': this.scaleDown( this.draggables ) }, 'location': sessionStorage.getItem( 'locationID' ) } ),
headers: {
'Content-Type': 'application/json',
'charset': 'utf-8'
}
};
fetch( localStorage.getItem( 'url' ) + '/admin/api/saveSeatplan', options ).then( res => {
if ( res.status === 200 ) {
res.text().then( text => {
console.log( text );
this.$refs.notification.cancelNotification( deployNotification );
this.$refs.notification.createNotification( 'Deployed successfully', 5, 'ok', 'normal' );
} );
} else if ( res.status === 403 ) {
this.$refs.notification.cancelNotification( deployNotification );
this.$refs.notification.createNotification( 'Unauthenticated', 5, 'ok', 'error' );
}
} );
// TODO: add warning if no component has a seat start point if any component is a seat component
},
addNewElement () {
// TODO: Check that this algorithm actually works in practice. If not, replace with one that
// searches for the first available ID or uses a var to determine ID.
this.draggables[ Object.keys( this.draggables ).length + 1 ] = { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': Object.keys( this.draggables ).length + 1, 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1, 'seatNumberingPosition': Object.keys( this.draggables ).length, 'sector': 'A', 'text': { 'text': 'TestText', 'textSize': 20, 'colour': '#20FFFF' }, 'ticketCount': 1, 'numberingDirection': 'left' };
this.draggables[ Object.keys( this.draggables ).length + 1 ] = { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': ( Object.keys( this.draggables ).length + 1 ), 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1, 'seatNumberingPosition': Object.keys( this.draggables ).length, 'sector': 'A', 'text': { 'text': 'TestText', 'textSize': 20, 'colour': '#20FFFF' }, 'ticketCount': 1, 'numberingDirection': 'left', 'category': '1' };
this.saveHistory();
document.getElementById( 'parent' ).scrollTop = 0;
document.getElementById( 'parent' ).scrollLeft = 0;

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

@@ -14,9 +14,9 @@
<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>
:title="seat.displayName + ', Unavailable'">disabled_by_default</span>
<span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'sel'"
:title="seat.displayName + ', Selected'">done</span>
:title="seat.displayName + ', Selected'" @click="deselectSeat( seat.row, seat.seat )">check_box</span>
</div>
</div>
</div>
@@ -54,7 +54,11 @@ export default {
},
data: {
type: Object,
"default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
"default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': 'nav' }, 'categoryInfo': { 'pricing': { '1': { 'displayName': 'Adults - CHF 20.-', 'value': '1', 'price': 20 }, '2': { 'displayName': 'Child (0 - 15.99y) - CHF 15.-', 'value': '2', 'price': 15 } } } }
},
id: {
type: Number,
"default": 1,
}
},
data () {
@@ -76,7 +80,7 @@ export default {
let r = row * size;
this.seats[ row ] = {};
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 };
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 + ', Seat ' + ( n + 1 ), 'status': 'av', 'row': row, 'seat': n };
let phi = n * size / ( row * size );
if ( this.origin === 1 ) {
this.seats[ row ][ n ][ 'style' ] = `bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi }rad`;
@@ -88,19 +92,42 @@ export default {
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}%; `;
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' ] = this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ];
}
}
}
}
},
setScaleFactor () {
for ( let row in this.seats ) {
for ( let seat in this.seats[ row ] ) {
let styles = this.seats[ row ][ seat ].style.substring( this.seats[ row ][ seat ].style.indexOf( ';' ) + 1 );
this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
this.seats[ row ][ seat ].scaling = `font-size: ${this.scaleFactor * 200}%;`;
}
}
},
selectSeat ( row, seat ) {
console.log( row + ' ' + seat );
console.log( this.data.categoryInfo );
let selectedSeat = this.seats[ row ][ seat ];
selectedSeat[ 'sector' ] = this.data.sector;
selectedSeat[ 'option' ] = this.data.categoryInfo.pricing;
selectedSeat[ 'componentID' ] = this.id;
console.log( selectedSeat );
this.$emit( 'seatSelected', selectedSeat );
},
deselectSeat( row, seat ) {
this.$emit( 'seatDeselected', this.seats[ row ][ seat ] );
this.seats[ row ][ seat ][ 'status' ] = 'av';
},
validateSeatSelection( seatObject, selectedTicketOption ) {
console.log( seatObject );
this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'sel';
this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'ticketOption' ] = selectedTicketOption;
}
},
watch: {

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

@@ -44,6 +44,10 @@ export default {
type: Number,
"default": 1,
},
startingRow: {
type: Number,
"default": 1,
},
origin: {
type: Number,
"default": 1,
@@ -74,7 +78,6 @@ export default {
this.seats[ row ] = {};
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 ) {
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 ) {
@@ -84,7 +87,9 @@ export default {
} else if ( this.origin === 4 ) {
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 )' }`;
}
@@ -100,8 +105,7 @@ export default {
setScaleFactor () {
for ( let row in this.seats ) {
for ( let seat in this.seats[ row ] ) {
let styles = this.seats[ row ][ seat ].style.substring( this.seats[ row ][ seat ].style.indexOf( ';' ) + 1 );
this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
this.seats[ row ][ seat ].scaling = `font-size: ${this.scaleFactor * 200}%;`;
}
}
},

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

@@ -14,9 +14,9 @@
<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>
:title="seat.displayName + ', Unavailable'">disabled_by_default</span>
<span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'sel'"
:title="seat.displayName + ', Selected'">done</span>
:title="seat.displayName + ', Selected'" @click="deselectSeat( seat.row, seat.seat )">check_box</span>
</div>
</div>
</div>
@@ -54,7 +54,11 @@ export default {
},
data: {
type: Object,
"default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
"default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': 'nav' }, 'categoryInfo': { 'pricing': { '1': { 'displayName': 'Adults - CHF 20.-', 'value': '1', 'price': 20 }, '2': { 'displayName': 'Child (0 - 15.99y) - CHF 15.-', 'value': '2', 'price': 15 } } } }
},
id: {
type: Number,
"default": 1,
}
},
data () {
@@ -79,7 +83,7 @@ export default {
let nn = 2 + ( row - 1 ) * 2;
this.seats[ row ] = {};
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 };
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 + ', Seat ' + ( n + 1 ), 'status': 'av', 'row': row, 'seat': n };
let side = n * sideOffset;
if ( this.origin === 1 ) {
this.seats[ row ][ n ][ 'style' ] = `bottom: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle }rad`;
@@ -90,20 +94,43 @@ export default {
} else if ( this.origin === 4 ) {
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}%; `;
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' ] = this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ];
}
}
}
}
},
setScaleFactor () {
for ( let row in this.seats ) {
for ( let seat in this.seats[ row ] ) {
let styles = this.seats[ row ][ seat ].style.substring( this.seats[ row ][ seat ].style.indexOf( ';' ) + 1 );
this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
this.seats[ row ][ seat ].scaling = `font-size: ${this.scaleFactor * 200}%;`;
}
}
},
selectSeat ( row, seat ) {
console.log( 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[ row ][ seat ][ 'status' ] = 'av';
},
validateSeatSelection( seatObject, selectedTicketOption ) {
console.log( seatObject );
this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'sel';
this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'ticketOption' ] = selectedTicketOption;
}
},
watch: {

42
src/webapp/main/src/components/seatplan/userApp/userWindow.vue
View File

@@ -15,16 +15,19 @@
<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 :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>
<circularSeatplanComponent v-if="draggable.shape == 'circular' && draggable.type == 'seat'" :ref="'component' + draggable.id"
:scale-factor="scaleFactor" :w="draggable.w" :h="draggable.h" :origin="draggable.origin" :starting-row="draggable.startingRow"
:data="draggable.data" :id="draggable.id"
@seatSelected="( seat ) => { seatSelected( seat ) }" @seatDeselected="( seat ) => { seatDeselected( seat ) }"></circularSeatplanComponent>
<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>
<trapezoidSeatplanComponent v-else-if="draggable.shape == 'trapezoid' && draggable.type == 'seat'" :ref="'component' + draggable.id"
:scale-factor="scaleFactor" :w="draggable.w" :h="draggable.h" :origin="draggable.origin" :starting-row="draggable.startingRow"
:data="draggable.data" :id="draggable.id"
@seatSelected="( seat ) => { seatSelected( seat ) }" @seatDeselected="( seat ) => { seatDeselected( seat ) }"></trapezoidSeatplanComponent>
<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" :data="draggable.data"
<rectangularSeatplanComponent v-else-if="draggable.shape == 'rectangular' && draggable.type == 'seat'" :ref="'component' + draggable.id"
:scale-factor="scaleFactor" :w="draggable.w" :h="draggable.h" :origin="draggable.origin" :starting-row="draggable.startingRow"
:data="draggable.data" :id="draggable.id"
@seatSelected="( seat ) => { seatSelected( seat ) }" @seatDeselected="( seat ) => { seatDeselected( seat ) }"></rectangularSeatplanComponent>
<stagesSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'stage'" :origin="draggable.origin" :shape="draggable.shape"></stagesSeatplanComponent>
@@ -110,12 +113,25 @@
}
};
// Load cart
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
// Load seat plan
this.loadSeatplan();
// Load seatplan from server
let height = $( document ).height() * 0.8;
this.scaleFactor = ( height / 900 ) * this.zoomFactor;
fetch( localStorage.getItem( 'url' ) + '/getAPI/getSeatplan?location=' + sessionStorage.getItem( 'selectedTicket' ) ).then( res => {
if ( res.status === 200 ) {
res.json().then( data => {
this.draggables = this.scaleUp( data.data );
sessionStorage.setItem( 'seatplan', JSON.stringify( data.data ) );
} );
} else if ( res.status === 500 ) {
if ( sessionStorage.getItem( 'seatplan' ) ) {
this.draggables = this.scaleUp( JSON.parse( sessionStorage.getItem( 'seatplan' ) ) );
}
}
} );
// TODO: remove scaleDown function again once backend is up
// TODO: Optimise for odd screen sizes and aspect ratios and fucking webkit
@@ -188,7 +204,6 @@
/*
Load seatplan
*/
// TODO: load from server
if ( sessionStorage.getItem( 'seatplan' ) ) {
this.draggables = this.scaleUp( JSON.parse( sessionStorage.getItem( 'seatplan' ) ) );
}
@@ -218,7 +233,7 @@
for ( let element in this.draggables ) {
this.draggables[ element ][ 'data' ] = { 'sector': this.draggables[ element ][ 'sector' ], 'unavailableSeats': {}, 'categoryInfo': { 'pricing': categoryDetails[ this.draggables[ element ][ 'category' ] ] } };
}
}
if ( this.cart[ this.event.name ] ) {
let tickets = this.cart[ this.event.name ][ 'tickets' ];
@@ -286,6 +301,7 @@
localStorage.setItem( 'cart', JSON.stringify( this.cart ) );
},
reserveTicket ( option ) {
console.log( this.selectedSeat.componentID );
if ( option.status == 'ok' ) {
this.$refs[ 'component' + this.selectedSeat.componentID ][ 0 ].validateSeatSelection( this.selectedSeat, option.data );
this.cartHandling( 'select', option.data );

2
src/webapp/main/src/main.js
View File

@@ -19,7 +19,7 @@ app.use( createPinia() );
let userStore = useUserStore();
let prod = false;
let prod = true;
if ( prod ) {
fetch( '/api/getAuth' ).then( res => {

3
src/webapp/main/src/views/purchasing/PurchaseView.vue
View File

@@ -181,11 +181,12 @@ export default {
name: 'PurchaseView',
data () {
return {
settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialNumber': true, 'specialNumberDisplayName': { 'de': '', 'en': 'id number' } },
settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialNumber': true, 'specialRequirement': { 'display': { 'de': '', 'en': 'id number' }, 'rules': {} } },
isAuthenticated: false,
cart: {},
backend: { 'currency': 'CHF' },
cartNotEmpty: false,
userData: {},
}
},
computed: {