first code for history for editor

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

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

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

@@ -1,15 +1,28 @@
+<!--
+*				myevent - window.vue
+*
+*	Created by Janis Hutz 05/12/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
 <template>
     <div id="window">
         <div class="parent">
-            <Vue3DraggableResizable v-for="draggable in draggables" :initW="110" :initH="120" v-model:x="draggable.x" v-model:y="draggable.y" v-model:w="draggable.w" v-model:h="draggable.h"
+            <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="print('activated')"
+                v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="activateComponent();"
-                @deactivated="disableEditMode()" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
+                @deactivated="saveHistory(); deactivateComponent( draggable.id );" @drag-start="print('drag-start')" @resize-start="print('resize-start');"
-                @dragging="print('dragging')" @resizing="print('resizing')" @drag-end="print('drag-end')"
+                @dragging="print('dragging')" @resizing="print('resizing')" @drag-end="saveHistory();"
-                @resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( draggable.id )" class="draggable-box">
+                @resize-end="saveHistory();" @contextmenu="( e ) => { e.preventDefault(); }" class="draggable-box">
                 <p v-if="draggable.draggable">This is a test example</p>
-                <textarea @keydown.esc="disableEditMode()" value="This is a test example" v-else/>
             </Vue3DraggableResizable>
         </div>
+        <div>
+            <button @click="historyOp( 'undo' )">Undo</button>
+            <button @click="historyOp( 'redo' )">Redo</button>
+            <button @click="setOtherValues()">Test</button>
+        </div>
     </div>
 </template>
 
@@ -24,33 +37,93 @@
         },
         data() {
             return {
-                draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 100, '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 } }
+                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 } }
             }
         },
         methods: {
-            print(val) {
+            /* 
-                console.log(val)
+                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.
+            */
+            runHook () {
+                let self = this;
+
+                if ( sessionStorage.getItem( 'seatplan' ) ) {
+                    this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan' ) );
+                }
+
+                document.onkeydown = function ( event ) {
+                    if ( event.key === 'Delete' ) {
+                        event.preventDefault();
+                        self.deleteSelected();
+                    } else if ( event.ctrlKey && event.key === 's' ) {
+                        event.preventDefault();
+                        self.save();
+                    }
+                };
             },
-            enableEditMode ( obj ) {
+            activateComponent ( id ) {
-                this.draggables[ obj ].draggable = false;
+                this.active = id;
-                this.draggables[ obj ].resizable = false;
             },
-            handleKeyboard ( key ) {
+            deactivateComponent () {
-                console.log( key );
+                this.active = 0;
             },
-            disableEditMode () {
+            print ( val ) {
-                for ( let draggable in this.draggables ) {
+                console.log( val );
-                    this.draggables[ draggable ].draggable = true;
+            },
-                    this.draggables[ draggable ].resizable = true;
+            saveHistory () {
+                let history = sessionStorage.getItem( 'seatplan-history' ) ? JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) : {};
+                let count = Object.keys( history ).length + 1;
+                if ( count - 1 > sessionStorage.getItem( 'historyPos' ) ) {
+                    // remove all entries past historyPOS
+                }
+                sessionStorage.setItem( 'historyPos', count );
+                history[ count ] = this.draggables;
+                sessionStorage.setItem( 'seatplan-history',  JSON.stringify( history ) );
+                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 ) {
+                        console.log( 'undo' );
+                        sessionStorage.setItem( 'historyPos', parseInt( sessionStorage.getItem( 'historyPos' ) ) - 1 );
+                        this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ];
+                    }
+                } else if ( action === 'redo' ) {
+                    if ( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length > 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' ) ];
+                    }
                 }
             },
+            save () {
+                sessionStorage.setItem( 'seatplan', JSON.stringify( this.draggables ) );
+            },
+            deleteSelected () {
+                if ( confirm( 'Do you really want to delete the selected item?' ) ) {
+                    console.log( 'deleting' );
+                }
+            }
+        },
+        created () {
+            this.runHook();
         }
     }
 </script>
 
 <style scoped>
     .parent {
-        width: 100%;
+        width: 99.9%;
         height: 80vh;
         position: relative;
         border: black 1px solid;

src/webapp/src/main.js

@@ -1,3 +1,12 @@
+/*
+*				myevent - main.js
+*
+*	Created by Janis Hutz 05/12/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';

src/webapp/src/router/adminRoutes.js

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

src/webapp/src/router/index.js

@@ -1,3 +1,12 @@
+/*
+*				myevent - index.js
+*
+*	Created by Janis Hutz 05/12/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
 import { createRouter, createWebHistory } from 'vue-router'
 import { useUserStore } from '@/stores/userStore';
 import { useBackendStore } from '@/stores/backendStore';

src/webapp/src/router/mainRoutes.js

@@ -1,5 +1,20 @@
+/*
+*				myevent - mainRoutes.js
+*
+*	Created by Janis Hutz 05/12/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
 import HomeView from '../views/HomeView.vue';
 
+/* 
+    This file contains all the routes for all pages accessible to a normal
+    user. It also includes some pages that require sign in.
+*/
+
+
 export default [
     {
         path: '/',

src/webapp/src/views/admin/AdminView.vue

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

src/webapp/src/views/admin/events/EditorView.vue

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