progress on editor for seating plan

This commit is contained in:
2023-05-11 20:58:09 +02:00
parent 19807f729c
commit a246b89bfa
4 changed files with 28 additions and 24 deletions

View File

@@ -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>

View File

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

View File

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

View File

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