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

popups for selection

Browse Source
This commit is contained in:
Janis Hutz
2023-07-04 17:54:18 +02:00
parent f9fb42e90b
commit 7d379bbe62
2 changed files with 42 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,12 @@
<div class="popup" :class="size">
<div class="close-wrapper"><span class="material-symbols-outlined close-button" @click="closePopup( 'cancel' );" title="Close this popup">close</span></div>
<div class="message-container">
<div v-if="contentType === 'string'" class="options"><h3>{{ data.message }}</h3></div>
<div v-if="contentType === 'string'" class="options">
<h3>{{ data.message }}</h3>
<div style="width: 100%; margin-top: 3%;">
<button @click="closePopup( 'ok' )" title="Close popup">Ok</button>
</div>
</div>
<div v-else-if="contentType === 'html'" v-html="data.message" class="options"></div>
<div v-else-if="contentType === 'settings'" class="options">
<h3>{{ data.message }}</h3>
@@ -17,8 +22,8 @@
<div v-else-if="contentType === 'confirm'" class="confirm options">
<h3>{{ data.message }}</h3>
<div style="width: 100%; margin-top: 3%;">
<button @click="closePopup( 'ok' )">Ok</button>
<button @click="closePopup( 'cancel' )">Cancel</button>
<button @click="closePopup( 'ok' )" title="Confirm operation">Ok</button>
<button @click="closePopup( 'cancel' )" title="Cancel operation">Cancel</button>
</div>
</div>
<div v-else-if="contentType === 'dropdown'" class="options">

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

@@ -14,9 +14,19 @@
<div class="content-parent">
<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" :w="draggable.w" :h="draggable.h" :origin="draggable.origin" :starting-row="draggable.startingRow"></circularSeatplanComponent>
<trapezoidSeatplanComponent 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"></trapezoidSeatplanComponent>
<rectangularSeatplanComponent v-else-if="draggable.shape == 'rectangular' && draggable.type == 'seat'" :scale-factor="scaleFactor" :w="draggable.w" :h="draggable.h" :origin="draggable.origin"></rectangularSeatplanComponent>
<circularSeatplanComponent 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"
: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"
@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>
@@ -29,6 +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>
</div>
</template>
@@ -41,6 +52,7 @@
import standingSeatplanComponent from '@/components/seatplan/userApp/seatplanComponents/standing.vue';
import textFieldSeatplanComponent from '@/components/seatplan/userApp/seatplanComponents/textField.vue';
import notifications from '@/components/notifications/notifications.vue';
import popups from '@/components/notifications/popups.vue';
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
export default {
@@ -54,6 +66,7 @@
standingSeatplanComponent,
textFieldSeatplanComponent,
notifications,
popups,
},
data() {
return {
@@ -183,6 +196,15 @@
this.draggables[ element ].active = false;
}
}
// Check if all seats are available
// TODO: delay call
let allSeatsAvailable = false;
let self = this;
setTimeout( () => {
if ( !allSeatsAvailable ) {
self.$refs.popups.openPopup( 'We are sorry to tell you that since the last time the seat plan was refreshed, one or more of the seats you have selected has/have been taken.', {}, 'string' );
}
}, 500 );
},
scaleUp ( valueArray ) {
const allowedAttributes = [ 'w', 'h', 'x', 'y' ];
@@ -214,6 +236,14 @@
this.loadSeatplan();
}
},
seatSelected ( seat ) {
console.log( seat );
this.$refs.popups.openPopup( 'Please choose a ticket option', seat.option, 'dropdown' );
// Make call to server to reserve ticket.
},
seatDeselected ( seat ) {
}
},
created () {
this.runHook();
@@ -229,6 +259,7 @@
.parent {
height: 80vh;
aspect-ratio: 16 / 9;
-webkit-aspect-ratio: 16 / 9;
top: 17vh;
left: 10vw;
position: absolute;