From e57c13341bf3b2d662b9eb330d0a2c5d33ae7891 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sun, 2 Jul 2023 13:21:59 +0200
Subject: [PATCH] add right click menu + more features for sp editor

---
 .../components/seatplan/editor/properties.vue | 84 +++++++++++++++-
 .../src/components/seatplan/editor/window.vue |  6 +-
 .../components/settings/rightClickMenu.vue    | 95 +++++++++++++++++++
 src/webapp/src/views/admin/SettingsView.vue   | 78 ++++++++++++++-
 website/src/admin-panel/seatplan-editor.md    |  8 +-
 5 files changed, 261 insertions(+), 10 deletions(-)
 create mode 100644 src/webapp/src/components/settings/rightClickMenu.vue

diff --git a/src/webapp/src/components/seatplan/editor/properties.vue b/src/webapp/src/components/seatplan/editor/properties.vue
index f356885..5c349e9 100644
--- a/src/webapp/src/components/seatplan/editor/properties.vue
+++ b/src/webapp/src/components/seatplan/editor/properties.vue
@@ -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>
diff --git a/src/webapp/src/components/seatplan/editor/window.vue b/src/webapp/src/components/seatplan/editor/window.vue
index 82066d1..d9c8d36 100644
--- a/src/webapp/src/components/seatplan/editor/window.vue
+++ b/src/webapp/src/components/seatplan/editor/window.vue
@@ -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;
diff --git a/src/webapp/src/components/settings/rightClickMenu.vue b/src/webapp/src/components/settings/rightClickMenu.vue
new file mode 100644
index 0000000..cff68f7
--- /dev/null
+++ b/src/webapp/src/components/settings/rightClickMenu.vue
@@ -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>
\ No newline at end of file
diff --git a/src/webapp/src/views/admin/SettingsView.vue b/src/webapp/src/views/admin/SettingsView.vue
index d71f91a..0695f71 100644
--- a/src/webapp/src/views/admin/SettingsView.vue
+++ b/src/webapp/src/views/admin/SettingsView.vue
@@ -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%;
diff --git a/website/src/admin-panel/seatplan-editor.md b/website/src/admin-panel/seatplan-editor.md
index 59188c7..f6afa57 100644
--- a/website/src/admin-panel/seatplan-editor.md
+++ b/website/src/admin-panel/seatplan-editor.md
@@ -8,7 +8,13 @@ You may add more components by simply clicking the plus icon in the toolbar of t
 You may remove components by clicking the trash icon or by hitting 'delete' on your keyboard.
 
 ## Editing history
-The editor features undo and redo functions such that you can undo your mistakes and accidental undos can be reverted. Just hit the corresponding button in the toolbar.
+The editor features undo and redo functions such that you can undo your mistakes and accidental undos can be reverted. Just hit the corresponding button in the toolbar or use the keyboard shortcuts Ctrl + Z for Undo and Ctrl + Y for Redo.
+
+## Component number property
+This property can be used to tell the system in which order to number seats in. You can start at one for every time the numbering should start at 1 again. Just keep in mind that for optimal results, you should use a different sector whenever setting the component number to 1 again as otherwise there might be two seats 1 in a sector which can lead to confusion for the customer. You will be notified if there's such a conflict before deploying the seat plan.
+
+**Example:**
+You've got a seat plan which has 4 seat components. These 4 components are grouped into two different sectors. Now, for the component where the seat numbering should start for each sector, set the component number property to 1. This will tell the system to start numbering the seats from this component. You may also choose the numbering direction with the option right below called 'Numbering direction'.
 
 ## Saving
 The editor does auto-save a draft every minute. Pressing Ctrl + S or hitting the Save button in the toolbar will immediately save the seatplan as a draft. Click the deploy button to save the seatplan permanently, irreversibly overwriting any potentially existing old seatplan of that location, except you change the location name after the fact. 
\ No newline at end of file