progress on editor for seating plan

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"
+            <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="draggables[1].active" :draggable="draggables[1].draggable" :resizable="draggables[1].resizable" @activated="print('activated')"
+                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 )">
+                @resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( draggable.id )">
-                <p v-if="draggables[1].draggable">This is a test example</p>
+                <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>

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',

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,
+        }
+    },
 ]

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

@@ -24,3 +24,9 @@
         }
     };
 </script>
+
+<style>
+    nav {
+        display: none;
+    }
+</style>