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

many changes to various components

Browse Source
This commit is contained in:
Janis Hutz
2023-07-08 11:45:16 +02:00
parent 775a91351a
commit b86d7dd434
4 changed files with 66 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/webapp/src/App.vue
View File

@@ -186,6 +186,7 @@ export default {
document.documentElement.classList.add( 'light' );
this.theme = '☽';
}
localStorage.setItem( 'url', 'http://localhost:8081' );
}
}
</script>

27
src/webapp/src/components/notifications/popups.vue
View File

@@ -36,6 +36,12 @@
<button @click="closePopup( 'cancel' )" title="Cancel changes">Cancel</button>
</div>
</div>
<div v-else-if="contentType === 'selection'" class="options selection">
<h3>{{ data.message }}</h3>
<div v-for="selectOption in data.options">
<button class="select-button" @click="closePopupAdvanced( 'ok', selectOption.value )">{{ selectOption.displayName }}</button>
</div>
</div>
</div>
</div>
</div>
@@ -67,10 +73,13 @@
closePopup( message ) {
$( '#popup-backdrop' ).fadeOut( 300 );
if ( message ) {
this.$emit( 'status', message );
this.$emit( 'data', this.data );
this.$emit( 'data', { 'data': this.data.selected, 'status': message } );
}
},
closePopupAdvanced ( message, data ) {
this.data[ 'selected' ] = data;
this.closePopup( message );
},
openPopup ( message, options, dataType, selected ) {
let data = { 'message': message ? message : 'No message defined on method call!!', 'options': options ? options : { '1': { 'value': 'undefined', 'displayName': 'No options specified in call' } }, 'selected': selected ? selected : '' };
this.data = data;
@@ -177,4 +186,18 @@
.options button:hover {
background-color: var( --accent-background-hover );
}
.select-button {
background-color: rgba( 0, 0, 0, 0 ) !important;
color: var( --primary-color ) !important;
padding: 1vh 2vw !important;
border: solid var( --primary-color ) 1px;
border-radius: 5px;
transition: all 0.5s ease-in-out;
margin-bottom: 1vh;
}
.select-button:hover {
background-color: var( --hover-color ) !important;
}
</style>

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

@@ -50,7 +50,11 @@ export default {
},
data: {
type: Object,
"default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
"default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true }, 'categoryInfo': { 'pricing': { 'adult': { 'displayName': 'Adults - CHF 20.-', 'value': 'adult', 'price': 20 }, 'child': { 'displayName': 'Child (0 - 15.99y) - CHF 15.-', 'value': 'child', 'price': 15 } } } }
},
id: {
type: Number,
"default": 1,
}
},
data () {
@@ -81,6 +85,10 @@ export default {
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 )' }`;
}
if ( this.data.unavailableSeats ) {
if ( this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ] ) {
this.seats[ row ][ n ][ 'status' ] = 'nav';
@@ -98,17 +106,19 @@ export default {
}
},
selectSeat ( row, seat ) {
this.$emit( 'seatSelected', this.seats[ 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[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'av';
// TODO: Make server call to deselect ticket
this.seats[ row ][ seat ][ 'status' ] = 'av';
},
validateSeatSelection( seatObject, selectedTicketOption ) {
this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'sel';
this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'ticketOption' ] = selectedTicketOption;
// TODO: Make server call to reserve ticket
}
},
watch: {

48
src/webapp/src/components/seatplan/userApp/userWindow.vue
View File

@@ -15,21 +15,21 @@
<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 v-if="draggable.shape == 'circular' && draggable.type == 'seat'" :scale-factor="scaleFactor"
<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>
<trapezoidSeatplanComponent v-else-if="draggable.shape == 'trapezoid' && draggable.type == 'seat'" :scale-factor="scaleFactor"
<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>
<rectangularSeatplanComponent v-else-if="draggable.shape == 'rectangular' && draggable.type == 'seat'" :scale-factor="scaleFactor"
:w="draggable.w" :h="draggable.h" :origin="draggable.origin"
<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"
@seatSelected="( seat ) => { seatSelected( seat ) }" @seatDeselected="( seat ) => { seatDeselected( seat ) }"></rectangularSeatplanComponent>
<stagesSeatplanComponent v-else-if="draggable.type == 'stage'" :origin="draggable.origin" :shape="draggable.shape"></stagesSeatplanComponent>
<standingSeatplanComponent v-else-if="draggable.type == 'stand'" :origin="draggable.origin" :shape="draggable.shape"></standingSeatplanComponent>
<textFieldSeatplanComponent v-else-if="draggable.type == 'text'" :text="draggable.text.text" :text-size="draggable.text.textSize" :colour="draggable.text.colour" :origin="draggable.origin" :scale-factor="scaleFactor"></textFieldSeatplanComponent>
<stagesSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'stage'" :origin="draggable.origin" :shape="draggable.shape"></stagesSeatplanComponent>
<standingSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'stand'" :origin="draggable.origin" :shape="draggable.shape"></standingSeatplanComponent>
<textFieldSeatplanComponent :ref="'component' + draggable.id" v-else-if="draggable.type == 'text'" :text="draggable.text.text" :text-size="draggable.text.textSize" :colour="draggable.text.colour" :origin="draggable.origin" :scale-factor="scaleFactor"></textFieldSeatplanComponent>
</Vue3DraggableResizable>
</div>
</div>
@@ -39,7 +39,7 @@
<button title="Zoom out [-]" @click="zoom( -0.2 )"><span class="material-symbols-outlined">zoom_out</span></button>
</div>
<notifications ref="notification" location="topleft"></notifications>
<popups ref="popups" size="big"></popups>
<popups ref="popups" size="normal" @data="data => { reserveTicket( data ) }"></popups>
</div>
</template>
@@ -81,6 +81,7 @@
standardDeviation: { 'currentTop': 0, 'currentLeft': 0 },
movePos: { 'top': 0, 'left': 0, 'isMoving': false, 'isSet': false },
generalSettings: { 'namingScheme': 'numeric' },
selectedSeat: {},
}
},
methods: {
@@ -88,22 +89,14 @@
Coords are from top left corner of box.
The below function is executed as the init hook (created hook)
of vue.js, so whenever this particular page is loaded.
It loads previous data (if available) and starts the event listeners
for keyevents (like delete) and also check if the user uses a desktop
browser that meets all the requirements for being able to use the editor
reliably according to testing done.
It loads seat plan data and starts the event listeners
for keyevents (like +, -, =)
*/
runHook () {
let self = this;
this.zoomFactor = sessionStorage.getItem( 'zoom' ) ? parseFloat( sessionStorage.getItem( 'zoom' ) ) : 1;
/*
Keybinds:
- Delete: delete selected object
- Ctrl + S: Save
- Ctrl + Z: Undo
- Ctrl + Y: Redo
*/
document.onkeydown = function ( event ) {
if ( event.key === '+' ) {
self.zoom( 0.2 );
@@ -234,12 +227,21 @@
}
},
seatSelected ( seat ) {
console.log( seat );
this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'dropdown' );
// Make call to server to reserve ticket.
this.selectedSeat = seat;
if ( Object.keys( seat.option ).length > 1 ) {
this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'selection', 'adult' );
} else {
this.reserveTicket( { 'status': 'ok', 'data': Object.keys( seat.option )[ 0 ][ 'value' ] } );
}
},
reserveTicket ( option ) {
if ( option.status == 'ok' ) {
this.$refs.component1[ 0 ].validateSeatSelection( this.selectedSeat, option.data );
}
// TODO: Make call to server to reserve ticket when data is returned & save to localStorage array.
},
seatDeselected ( seat ) {
// TODO: Make call to server to deselect ticket & delete from localStorage array and delete eventArray if empty!
}
},
created () {