From a246b89bfaee4b8f523c4461965e6b3cb826b40d Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Thu, 11 May 2023 20:58:09 +0200
Subject: [PATCH] progress on editor for seating plan

---
 .../src/components/seatplan/editor/window.vue | 26 +++++++++----------
 src/webapp/src/router/adminRoutes.js          | 11 --------
 src/webapp/src/router/mainRoutes.js           |  9 +++++++
 .../src/views/admin/events/EditorView.vue     |  6 +++++
 4 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/webapp/src/components/seatplan/editor/window.vue b/src/webapp/src/components/seatplan/editor/window.vue
index 2474ae9..6b26b5e 100644
--- a/src/webapp/src/components/seatplan/editor/window.vue
+++ b/src/webapp/src/components/seatplan/editor/window.vue
@@ -1,22 +1,14 @@
 <template>
     <div id="window">
         <div class="parent">
-            <Vue3DraggableResizable :initW="110" :initH="120" v-model:x="draggables[1].x" v-model:y="draggables[1].y" v-model:w="draggables[1].w" v-model:h="draggables[1].h"
-                v-model:active="draggables[1].active" :draggable="draggables[1].draggable" :resizable="draggables[1].resizable" @activated="print('activated')"
+            <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"
+                v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="print('activated')"
                 @deactivated="disableEditMode()" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
                 @dragging="print('dragging')" @resizing="print('resizing')" @drag-end="print('drag-end')"
-                @resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( 1 )">
-                <p v-if="draggables[1].draggable">This is a test example</p>
+                @resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( draggable.id )">
+                <p v-if="draggable.draggable">This is a test example</p>
                 <textarea @keydown.esc="disableEditMode()" value="This is a test example" v-else/>
             </Vue3DraggableResizable>
-            <Vue3DraggableResizable :initW="110" :initH="120" v-model:x="draggables[2].x" v-model:y="draggables[2].y" v-model:w="draggables[2].w" v-model:h="draggables[2].h"
-                v-model:active="draggables[2].active" :draggable="draggables[2].draggable" :resizable="draggables[2].resizable" @activated="print('activated')"
-                @deactivated="disableEditMode()" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
-                @dragging="print('dragging')" @resizing="print('resizing')" @drag-end="print('drag-end')"
-                @resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( 2 )">
-                <p v-if="draggables[2].draggable">This is a test example (2)</p>
-                <textarea @keydown.esc="disableEditMode()" value="This is a test example (2)" v-else/>
-            </Vue3DraggableResizable>
         </div>
     </div>
 </template>
@@ -32,7 +24,7 @@
         },
         data() {
             return {
-                draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 100, 'active': false, 'draggable': true, 'resizable': true }, 2: { 'x': 100, 'y':100, 'h': 100, 'w': 100, 'active': false, 'draggable': true, 'resizable': true } }
+                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 } }
             }
         },
         methods: {
@@ -55,3 +47,11 @@
         }
     }
 </script>
+
+<style scoped>
+    .parent {
+        width: 100%;
+        height: 80vh;
+        border: black 1px solid;
+    }
+</style>
diff --git a/src/webapp/src/router/adminRoutes.js b/src/webapp/src/router/adminRoutes.js
index 631e165..9337d6f 100644
--- a/src/webapp/src/router/adminRoutes.js
+++ b/src/webapp/src/router/adminRoutes.js
@@ -43,17 +43,6 @@ export default {
                 title: 'Events :: Admin - myevent',
                 adminAuthRequired: true,
             },
-            children: [
-                {
-                    path: 'seatplan',
-                    name: 'adminSeatplanEditor',
-                    component: () => import( '@/views/admin/events/EditorView.vue' ),
-                    meta: {
-                        title: 'Seatplan Editor :: Admin - myevent',
-                        adminAuthRequired: true,
-                    }
-                },
-            ]
         },
         {
             path: 'plugins',
diff --git a/src/webapp/src/router/mainRoutes.js b/src/webapp/src/router/mainRoutes.js
index ee2218c..b48b2b4 100644
--- a/src/webapp/src/router/mainRoutes.js
+++ b/src/webapp/src/router/mainRoutes.js
@@ -91,4 +91,13 @@ export default [
         name: 'NotFound', 
         component: () => import( '@/views/404.vue')
     },
+    {
+        path: '/admin/seatplan',
+        name: 'adminSeatplanEditor',
+        component: () => import( '@/views/admin/events/EditorView.vue' ),
+        meta: {
+            title: 'Seatplan Editor :: Admin - myevent',
+            adminAuthRequired: true,
+        }
+    },
 ]
\ No newline at end of file
diff --git a/src/webapp/src/views/admin/events/EditorView.vue b/src/webapp/src/views/admin/events/EditorView.vue
index 8fd67ea..b351f8f 100644
--- a/src/webapp/src/views/admin/events/EditorView.vue
+++ b/src/webapp/src/views/admin/events/EditorView.vue
@@ -24,3 +24,9 @@
         }
     };
 </script>
+
+<style>
+    nav {
+        display: none;
+    }
+</style>