mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
add right click menu + more features for sp editor
This commit is contained in:
@@ -133,12 +133,31 @@
|
||||
<!-- SEAT NUMBERING for seats -->
|
||||
|
||||
<tr v-if="internal[ active ].type == 'seat'">
|
||||
<td>Seat numbering:</td>
|
||||
<td>Component number:
|
||||
<div class="info-container" @mouseenter="showInfo( 'componentNumber' )" @mouseleave="hideInfo( 'componentNumber' )">
|
||||
<span class="material-symbols-outlined info-icon">info</span>
|
||||
<div class="info-box" id="componentNumber">
|
||||
<div class="info-box-container">
|
||||
<div>
|
||||
With this you can change what the order of the components is which is used to determine the seat numbering. Read more <a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor#component-number-property">here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<select v-model="internal[ active ].seatCountingStartingPoint" @change="resubmit()">
|
||||
<option value="0">Continue</option>
|
||||
<option value="1">Start left</option>
|
||||
<option value="2">Start right</option>
|
||||
<input type="number" min="1" max="4" v-model="internal[ active ].seatNumberingPosition" @change="resubmit()">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- SEAT NUMBERING direction -->
|
||||
|
||||
<tr v-if="internal[ active ].type == 'seat'">
|
||||
<td>Numbering direction:</td>
|
||||
<td>
|
||||
<select min="20" v-model="internal[ active ].numberingDirection" @change="resubmit()">
|
||||
<option value="left">Left to right</option>
|
||||
<option value="right">Right to left</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -239,6 +258,14 @@ export default {
|
||||
}
|
||||
}
|
||||
this.$emit( 'updated', ret );
|
||||
},
|
||||
showInfo ( box ) {
|
||||
$( '#' + box ).stop();
|
||||
$( '#' + box ).fadeIn( 300 );
|
||||
},
|
||||
hideInfo ( box ) {
|
||||
$( '#' + box ).stop();
|
||||
$( '#' + box ).fadeOut( 300 );
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -261,3 +288,50 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-container {
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 100%;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
color: var( --primary-color );
|
||||
text-align: center;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
width: 20vw;
|
||||
height: 20vh;
|
||||
background-color: var( --hint-color );
|
||||
border-radius: 20px;
|
||||
top: 125%;
|
||||
right: -9.3vw;
|
||||
}
|
||||
|
||||
.info-box::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 100%; /* At the bottom of the tooltip */
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent var( --hint-color ) transparent;
|
||||
}
|
||||
|
||||
.info-box-container {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
padding: 10%;
|
||||
padding-top: 5%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -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, 'seatCountingStartingPoint': 1, 'sector': 'A', 'text': { 'text': 'TestText', 'textSize': 20, 'colour': '#20FFFF' } } },
|
||||
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' } },
|
||||
available: { 'redo': false, 'undo': false },
|
||||
scaleFactor: 1,
|
||||
sizePoll: null,
|
||||
@@ -275,7 +275,9 @@
|
||||
this.$refs.notification.createNotification( 'Deployed successfully', 5, 'ok', 'normal' );
|
||||
},
|
||||
addNewElement () {
|
||||
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, 'seatCountingStartingPoint': 0, 'sector': 'A', 'text': { 'text': 'TestText', 'textSize': 20, 'colour': '#20FFFF' }, 'ticketCount': 1 };
|
||||
// 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 + 1, 'sector': 'A', 'text': { 'text': 'TestText', 'textSize': 20, 'colour': '#20FFFF' }, 'ticketCount': 1, 'numberingDirection': 'left' };
|
||||
this.saveHistory();
|
||||
document.getElementById( 'parent' ).scrollTop = 0;
|
||||
document.getElementById( 'parent' ).scrollLeft = 0;
|
||||
|
||||
95
src/webapp/src/components/settings/rightClickMenu.vue
Normal file
95
src/webapp/src/components/settings/rightClickMenu.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<!--
|
||||
* libreevent - rightClickMenu.vue
|
||||
*
|
||||
* Created by Janis Hutz 07/02/2023, Licensed under the GPL V3 License
|
||||
* https://janishutz.com, development@janishutz.com
|
||||
*
|
||||
*
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="right-click-menu" id="right-click-menu">
|
||||
<ul>
|
||||
<li v-for="option in options" @click="executeCommand( option.command )"><span class="material-symbols-outlined right-click-symbols">{{ option.symbol }}</span>{{ option.display }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right-click-menu-disable" @click="closeRightClickMenu()" id="right-click-menu-disable"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'rightClickMenu',
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openRightClickMenu( event, options ) {
|
||||
$( '#right-click-menu' ).show( 100 );
|
||||
|
||||
// Get cursor position
|
||||
$( '#right-click-menu' ).css( 'top', event.clientY + 'px' );
|
||||
$( '#right-click-menu' ).css( 'left', event.clientX + 'px' );
|
||||
this.options = options;
|
||||
$( '#right-click-menu-disable' ).show();
|
||||
},
|
||||
closeRightClickMenu() {
|
||||
$( '#right-click-menu' ).hide( 100 );
|
||||
$( '#right-click-menu-disable' ).hide();
|
||||
},
|
||||
executeCommand ( command ) {
|
||||
this.closeRightClickMenu();
|
||||
this.$emit( 'command', command );
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Right click menu */
|
||||
|
||||
.right-click-symbols {
|
||||
margin-right: 2%;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.right-click-menu {
|
||||
text-align: justify;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
width: 10vw;
|
||||
position: fixed;
|
||||
background-color: var( --overlay-color );
|
||||
color: var( --secondary-color );
|
||||
padding: 0.5%;
|
||||
}
|
||||
|
||||
.right-click-menu ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right-click-menu ul li {
|
||||
cursor: pointer;
|
||||
width: 90%;
|
||||
padding: 5% 5%;
|
||||
}
|
||||
|
||||
.right-click-menu ul li:hover {
|
||||
background-color: var( --hover-color );
|
||||
}
|
||||
|
||||
.right-click-menu-disable {
|
||||
position: fixed;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -11,20 +11,30 @@
|
||||
<div>
|
||||
<h2>Settings</h2>
|
||||
<settings v-model:settings="settings"></settings>
|
||||
<table class="gateway-settings">
|
||||
<tr>
|
||||
<td style="width: 75%;">
|
||||
Edit settings of the payment gateway
|
||||
</td>
|
||||
<td>
|
||||
<span class="material-symbols-outlined" @click="showPaymentSettings();" style="cursor: pointer;" title="Edit settings for the payment gateway you selected">settings</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Detailed explanation of payment gateways can be found <a href="https://libreevent.janishutz.com/docs/payments" target="_blank">here</a>. You may install more payment gateway integrations in the plugins section.</p>
|
||||
|
||||
<div class="admin-settings">
|
||||
<h2>Admin Accounts</h2>
|
||||
<p>Before setting or editing permissions here, please read the corresponding section of the documentation <a href="https://libreevent.janishutz.com/docs/admin-panel/settings/admin-accounts#permissions" target="_blank">here</a>.
|
||||
<br>Usually, the permissions automatically set by the system on account creation should be appropriate.</p>
|
||||
<div v-for="account in adminAccounts" class="account" @click="showAccountSettings( account.username );" title="Edit permissions of this account">
|
||||
<div v-for="account in adminAccounts" class="account" @click="showAccountSettings( account.username );" title="Edit permissions of this account (right click for more options)" @contextmenu="( e ) => { e.preventDefault(); openRightClickMenu( account.username, e ); }">
|
||||
<div class="location-name">
|
||||
<h3>{{ account.username }}</h3>
|
||||
<p>{{ account.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<rightClickMenu ref="rclk" @command="( command ) => { executeCommand( command ) }"></rightClickMenu>
|
||||
<popups ref="popup" size="big"></popups>
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,16 +42,19 @@
|
||||
<script>
|
||||
import settings from '@/components/settings/settings.vue';
|
||||
import popups from '@/components/notifications/popups.vue';
|
||||
import rightClickMenu from '@/components/settings/rightClickMenu.vue';
|
||||
|
||||
export default {
|
||||
name: 'adminSettingsView',
|
||||
components: {
|
||||
settings,
|
||||
popups,
|
||||
rightClickMenu,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
adminAccounts: { 'janis': { 'username': 'janis', 'email': 'info@janishutz.com', 'permissions': [ ] }, 'admin': { 'username': 'admin', 'email': 'development@janishutz.com', 'permissions': [ ] } },
|
||||
currentlyOpenMenu: '',
|
||||
settings: {
|
||||
'2fa': {
|
||||
'display': 'Require Two-Factor-Authentication of user',
|
||||
@@ -138,6 +151,60 @@
|
||||
},
|
||||
}
|
||||
, 'settings' );
|
||||
},
|
||||
showPaymentSettings () {
|
||||
this.$refs.popup.openPopup( 'Payment gateway settings', {
|
||||
'pagesSettings': {
|
||||
'display': 'Modify pages',
|
||||
'id': 'pagesSettings',
|
||||
'tooltip':'Change this setting to allow or disallow the selected user to access and change any settings of pages like the start page.',
|
||||
'value': false,
|
||||
'type': 'toggle',
|
||||
},
|
||||
'locationsSettings': {
|
||||
'display': 'Location settings and seat plans',
|
||||
'id': 'locationsSettings',
|
||||
'tooltip':'Change this setting to allow or disallow the selected user to modify, delete or create locations with their corresponding seat plans.',
|
||||
'value': false,
|
||||
'type': 'toggle',
|
||||
},
|
||||
'plugins': {
|
||||
'display': 'Plugin management',
|
||||
'id': 'plugins',
|
||||
'tooltip':'Change this setting to allow or disallow the selected user to install or uninstall plugins. Some plugins might allow you to set extra permissions inside of their settings panels',
|
||||
'value': false,
|
||||
'type': 'toggle',
|
||||
},
|
||||
'events': {
|
||||
'display': 'Event management',
|
||||
'id': 'events',
|
||||
'tooltip':'Change this setting to allow or disallow the selected user to install or uninstall plugins. Some plugins might allow you to set extra permissions inside of their settings panels',
|
||||
'value': false,
|
||||
'type': 'toggle',
|
||||
},
|
||||
'entryControl': {
|
||||
'display': 'Entry control',
|
||||
'id': 'entryControl',
|
||||
'tooltip':'Change this setting to allow or disallow the selected user to execute entry control at the entrance to your event location.',
|
||||
'value': true,
|
||||
'type': 'toggle',
|
||||
},
|
||||
}
|
||||
, 'settings' );
|
||||
},
|
||||
executeCommand( command ) {
|
||||
if ( command === 'openPermissions' ) {
|
||||
this.showAccountSettings( this.currentlyOpenMenu );
|
||||
} else if ( command === 'deleteUser' ) {
|
||||
this.$refs.popup.openPopup( 'Do you really want to delete the user ' + this.currentlyOpenMenu + '?', {}, 'confirm' );
|
||||
}
|
||||
},
|
||||
handlePopupReturns( message, data ) {
|
||||
|
||||
},
|
||||
openRightClickMenu( id, event ) {
|
||||
this.$refs.rclk.openRightClickMenu( event, { 'edit': { 'command': 'openPermissions', 'symbol': 'edit', 'display': 'Edit permissions' }, 'delete': { 'command': 'deleteUser', 'symbol': 'delete', 'display': 'Delete User' } } )
|
||||
this.currentlyOpenMenu = id;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -147,6 +214,13 @@
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.gateway-settings {
|
||||
width: 70%;
|
||||
text-align: justify;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.admin-settings {
|
||||
text-align: justify;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user