properties on editor & credits in files

package.js

@@ -0,0 +1,8 @@
+/*
+*				myevent - package.js
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/

src/webapp/src/App.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - App.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <nav>
         <router-link to="/">Home</router-link> |

src/webapp/src/components/seatplan/editor/properties.vue

@@ -5,4 +5,64 @@
 *			https://janishutz.com, development@janishutz.com
 *
 *
--->
+-->
+
+<template>
+    <div id="properties">
+        <h2>Properties</h2>
+        <table>
+            <tr>
+                <td>Position X:</td>
+                <td><div v-if="!isEditing.x" @dblclick="activateEditing( 'x' )">{{ posSize.x }}px</div>
+                    <input v-else type="number" min="20" v-model="internal.x" @focusout="resubmit( 'x' )"></td>
+            </tr>
+            <tr>
+                <td>Position Y:</td>
+                <td><div v-if="!isEditing.y" @dblclick="activateEditing( 'y' )">{{ posSize.y }}px</div>
+                    <input v-else type="number" min="20" v-model="internal.y" @focusout="resubmit( 'y' )"></td>
+            </tr>
+            <tr>
+                <td>Width:</td>
+                <td><div v-if="!isEditing.w" @dblclick="activateEditing( 'w' )">{{ posSize.w }}px</div>
+                    <input v-else type="number" min="20" v-model="internal.w" @focusout="resubmit( 'w' )"></td>
+            </tr>
+            <tr>
+                <td>Height:</td>
+                <td><div v-if="!isEditing.h" @dblclick="activateEditing( 'h' )">{{ posSize.h }}px</div>
+                    <input v-else type="number" min="20" v-model="internal.w" @focusout="resubmit( 'h' )"></td>
+            </tr>
+        </table>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'propertiesSeatplan',
+    props: {
+        posSize: {
+            type: Object,
+            "default": { 'x': 100, 'y': 100, 'w': 200, 'h': 100 }
+        },
+    },
+    data () {
+        return {
+            isEditing: { 'w':false },
+            internal: { 'x': 100, 'y': 100, 'w': 200, 'h': 100 },
+        }
+    },
+    methods: {
+        activateEditing ( option ) {
+            this.isEditing[ option ] = true;
+            for ( let value in this.posSize ) {
+                this.internal[ value ] = this.posSize[ value ];
+            }
+        },
+        resubmit ( option ) {
+            console.log( 'ok' );
+            this.isEditing[ option ] = false;
+            this.$emit( 'updated', this.internal )
+        }
+    }
+}
+</script>
+

src/webapp/src/components/seatplan/editor/window.vue

@@ -9,36 +9,42 @@
 
 <template>
     <div id="window">
+        <properties class="properties" v-model:posSize="selectedObject" @updated="handleUpdate"></properties>
         <div class="parent">
             <Vue3DraggableResizable v-for="draggable in draggables" :initW="draggable.w" :initH="draggable.h" v-model:x="draggable.x" v-model:y="draggable.y" v-model:w="draggable.w" v-model:h="draggable.h"
-                v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="activateComponent();"
+                v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="activateComponent( draggable.id );"
-                @deactivated="saveHistory(); deactivateComponent( draggable.id );" @drag-start="print('drag-start')" @resize-start="print('resize-start');"
+                @drag-end="saveHistory();" @resize-end="saveHistory();" @contextmenu="( e ) => { e.preventDefault(); }" class="draggable-box">
-                @dragging="print('dragging')" @resizing="print('resizing')" @drag-end="saveHistory();"
-                @resize-end="saveHistory();" @contextmenu="( e ) => { e.preventDefault(); }" class="draggable-box">
                 <p v-if="draggable.draggable">This is a test example</p>
             </Vue3DraggableResizable>
         </div>
         <div>
-            <button @click="historyOp( 'undo' )">Undo</button>
+            <button v-if="available.undo" @click="historyOp( 'undo' )">Undo</button>
-            <button @click="historyOp( 'redo' )">Redo</button>
+            <button v-else disabled>Undo</button>
-            <button @click="setOtherValues()">Test</button>
+            <button v-if="available.redo" @click="historyOp( 'redo' )">Redo</button>
+            <button v-else disabled>Redo</button>
+            <button @click="addNewElement()">Add</button>
+            <button @click="deleteSelected()">Delete</button>
         </div>
     </div>
 </template>
 
 <script>
     import Vue3DraggableResizable from 'vue3-draggable-resizable';
+    import properties from '@/components/seatplan/editor/properties.vue';
     import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
 
     export default {
         'name': 'window',
         components: { 
-            Vue3DraggableResizable 
+            Vue3DraggableResizable,
+            properties
         },
         data() {
             return {
                 active: 0,
-                draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1 }, 2: { 'x': 100, 'y':100, 'h': 100, 'w': 100, 'active': false, 'draggable': true, 'resizable': true, 'id': 2 } }
+                draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1 } },
+                available: { 'redo': false, 'undo': false },
+                selectedObject: {},
             }
         },
         methods: {
@@ -58,6 +64,19 @@
                     this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan' ) );
                 }
 
+                for ( let element in this.draggables ) {
+                    if ( this.draggables[ element ].active ) {
+                        this.activateComponent( element );
+                    }
+                }
+
+                /* 
+                    Keybinds:
+                        - Delete: delete selected object
+                        - Ctrl + S: Save
+                        - Ctrl + Z: Undo
+                        - Ctrl + Y: Redo
+                */
                 document.onkeydown = function ( event ) {
                     if ( event.key === 'Delete' ) {
                         event.preventDefault();
@@ -65,54 +84,105 @@
                     } else if ( event.ctrlKey && event.key === 's' ) {
                         event.preventDefault();
                         self.save();
+                    } else if ( ( event.ctrlKey && event.key === 'y' ) ) {
+                        event.preventDefault();
+                        self.historyOp( 'redo' );
+                    } else if ( event.ctrlKey && event.key === 'z' ) {
+                        event.preventDefault();
+                        self.historyOp( 'undo' );
+                    } else if ( event.ctrlKey && event.key === 'i' ) {
+                        event.preventDefault();
+                        self.addNewElement();
                     }
                 };
+
+                // TODO: build Zoom function (including touch gesture support)
+
+                if ( !sessionStorage.getItem( 'seatplan-history' ) ) {
+                    sessionStorage.setItem( 'seatplan-history', JSON.stringify( { '1': this.draggables } ) );
+                }
+
+                let history = sessionStorage.getItem( 'seatplan-history' ) ? JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) : {};
+                let count = parseInt( Object.keys( history ).length );
+
+                if ( count > parseInt( sessionStorage.getItem( 'historyPos' ) ) ) {
+                    this.available.redo = true;
+                }
+
+                if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) > 0 ) {
+                    this.available.undo = true;
+                }
+
+                let supportedBrowser = [];
+                // TODO: Add warning for untested browsers & suboptimal window sizes!
             },
             activateComponent ( id ) {
                 this.active = id;
-            },
+                this.selectedObject = this.draggables[ this.active ];
-            deactivateComponent () {
-                this.active = 0;
-            },
-            print ( val ) {
-                console.log( val );
             },
             saveHistory () {
                 let history = sessionStorage.getItem( 'seatplan-history' ) ? JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) : {};
-                let count = Object.keys( history ).length + 1;
+                let count = parseInt( Object.keys( history ).length + 1 );
-                if ( count - 1 > sessionStorage.getItem( 'historyPos' ) ) {
+                if ( count - 1 > parseInt( sessionStorage.getItem( 'historyPos' ) ) ) {
-                    // remove all entries past historyPOS
+                    for ( let i = parseInt( sessionStorage.getItem( 'historyPos' ) ) + 1; i < count; i++ ) {
+                        delete history[ i ];
+                        this.available.redo = false;
+                    }
                 }
+                
+                count = parseInt( Object.keys( history ).length + 1 );
                 sessionStorage.setItem( 'historyPos', count );
                 history[ count ] = this.draggables;
                 sessionStorage.setItem( 'seatplan-history',  JSON.stringify( history ) );
+
+                if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) > 1 ) {
+                    this.available.undo = true;
+                }
+
                 this.save();
             },
-            setOtherValues () {
-                this.draggables = { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1 }, 2: { 'x': 100, 'y':400, 'h': 200, 'w': 300, 'active': false, 'draggable': true, 'resizable': true, 'id': 2 } }
-            },
             historyOp ( action ) {
                 if ( action === 'undo' ) {
-                    if ( sessionStorage.getItem( 'historyPos' ) > 2 ) {
+                    if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) > 1 ) {
-                        console.log( 'undo' );
                         sessionStorage.setItem( 'historyPos', parseInt( sessionStorage.getItem( 'historyPos' ) ) - 1 );
                         this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ];
+                        this.available.redo = true;
+                        if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) < 2 ) {
+                            this.available.undo = false;
+                        }
+                    } else {
+                        this.available.undo = false;
                     }
                 } else if ( action === 'redo' ) {
-                    if ( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length > sessionStorage.getItem( 'historyPos' ) ) {
+                    if ( parseInt( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length ) > parseInt( sessionStorage.getItem( 'historyPos' ) ) ) {
-                        console.log( 'redo' );
                         sessionStorage.setItem( 'historyPos', parseInt( sessionStorage.getItem( 'historyPos' ) ) + 1 );
                         this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ];
+                        this.available.undo = true;
+                        if ( parseInt( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length ) < parseInt( sessionStorage.getItem( 'historyPos' ) ) + 1 ) {
+                            this.available.redo = false;
+                        }
+                    } else {
+                        this.available.redo = false;
                     }
                 }
             },
             save () {
                 sessionStorage.setItem( 'seatplan', JSON.stringify( this.draggables ) );
             },
+            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 };
+                this.saveHistory();
+            },
             deleteSelected () {
+                this.draggables[ this.active ].active = true;
                 if ( confirm( 'Do you really want to delete the selected item?' ) ) {
-                    console.log( 'deleting' );
+                    delete this.draggables[ this.active ];
+                    this.saveHistory();
                 }
+            },
+            handleUpdate ( value ) {
+                this.draggables[ this.active ] = value;
+                this.selectedObject = value;
             }
         },
         created () {
@@ -123,7 +193,7 @@
 
 <style scoped>
     .parent {
-        width: 99.9%;
+        width: 99.8%;
         height: 80vh;
         position: relative;
         border: black 1px solid;
@@ -137,4 +207,19 @@
         border: black 2px solid;
         cursor: all-scroll;
     }
+
+    .properties {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 1;
+        background-color: var( --accent-background );
+        color: var( --secondary-color );
+        width: 20vw;
+        height: 75vh;
+        top: 10vh;
+        left: 79vw;
+    }
 </style>

src/webapp/src/router/setupRoutes.js

@@ -1,3 +1,12 @@
+/*
+*				myevent - setupRoutes.js
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
 export default {
     path: '/setup',
     name: 'setup',

src/webapp/src/stores/backendStore.js

@@ -1,3 +1,12 @@
+/*
+*				myevent - backendStore.js
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
 import { defineStore } from "pinia";
 
 export const useBackendStore = defineStore ( 'backend', {

src/webapp/src/stores/userStore.js

@@ -1,3 +1,12 @@
+/*
+*				myevent - userStore.js
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
 import { defineStore } from "pinia";
 
 export const useUserStore = defineStore ( 'user', {

src/webapp/src/views/404.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - 404.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="notFound">
         <h1 class="code">404</h1>

src/webapp/src/views/AdminLoginView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - AdminLoginView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="login">
         <div class="login-app">

src/webapp/src/views/CartView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - CartView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="cart">
         <h1>Cart</h1>

src/webapp/src/views/GuestPurchaseView.vue

@@ -0,0 +1,8 @@
+<!--
+*				myevent - GuestPurchaseView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->

src/webapp/src/views/HomeView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - HomeView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <initial></initial>
 </template>

src/webapp/src/views/LoginView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - LoginView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="login">
         <div class="login-app">

src/webapp/src/views/OrderView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - OrderView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="order">
         <h1>Order tickets</h1>

src/webapp/src/views/PaymentPrepareView.vue

@@ -0,0 +1,8 @@
+<!--
+*				myevent - PaymentPrepareView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->

src/webapp/src/views/PaymentView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - PaymentView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="order">
         <h1>Purchase</h1>

src/webapp/src/views/PurchaseView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - PurchaseView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="purchase">
         <h1>Purchase</h1>

src/webapp/src/views/SetupView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SetupView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <nav class="setup-nav">

src/webapp/src/views/SignupView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SignupView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="login">
         <div class="login-app">

src/webapp/src/views/TicketsDetailsView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - TicketsDetailsView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="details">
         <h1>Details</h1>

src/webapp/src/views/TicketsOrderingView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - TicketsOrderingView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div class="details">
         <!-- Load correct component depending on what the event's config is -->

src/webapp/src/views/admin/AccountView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - AccountView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h2>Admin Accounts</h2>

src/webapp/src/views/admin/EventsView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - EventsView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <div class="main-view">

src/webapp/src/views/admin/HomeView.vue

@@ -1,3 +1,13 @@
+<!--
+*				myevent - HomeView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
+
 <template>
     <div>
         <h2>Home</h2>

src/webapp/src/views/admin/PagesView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - PagesView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h2>Pages</h2>

src/webapp/src/views/admin/PluginsView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - PluginsView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h2>Plugins</h2>

src/webapp/src/views/admin/SettingsView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SettingsView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h2>Settings</h2>

src/webapp/src/views/setup/SetupCompleteView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SetupCompleteView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h2>Setup was completed!</h2>

src/webapp/src/views/setup/SetupEventsView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SetupEventsView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h3>Setting up Events</h3>

src/webapp/src/views/setup/SetupPageView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SetupPageView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h3>Setting up the landing page</h3>

src/webapp/src/views/setup/SetupPaymentsView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SetupPaymentsView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h3>Setting up payment methods</h3>

src/webapp/src/views/setup/SetupRootView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SetupRootView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h3>Setting up the root account</h3>

src/webapp/src/views/setup/SetupStartView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SetupStartView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h2>Welcome to myevent!</h2>

src/webapp/src/views/setup/SetupTOSView.vue

@@ -1,3 +1,12 @@
+<!--
+*				myevent - SetupTOSView.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div>
         <h3>Setting up TOS (optional)</h3>