seatplan prep + lang prep

src/webapp/package-lock.json

@@ -11,7 +11,8 @@
         "core-js": "^3.8.3",
         "pinia": "^2.0.34",
         "vue": "^3.2.13",
-        "vue-router": "^4.0.3"
+        "vue-router": "^4.0.3",
+        "vue3-draggable-resizable": "^1.6.5"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~5.0.0",
@@ -9220,6 +9221,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue3-draggable-resizable": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/vue3-draggable-resizable/-/vue3-draggable-resizable-1.6.5.tgz",
+      "integrity": "sha512-31142E31fGNnq3HKqvmFLSsqIbhck7TyGuQWhUKrDw6DOcGAuRx4ddRjaxvT6fe7dgeKH53qAh+i0ZlWtPLl2g=="
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -16998,6 +17004,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue3-draggable-resizable": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/vue3-draggable-resizable/-/vue3-draggable-resizable-1.6.5.tgz",
+      "integrity": "sha512-31142E31fGNnq3HKqvmFLSsqIbhck7TyGuQWhUKrDw6DOcGAuRx4ddRjaxvT6fe7dgeKH53qAh+i0ZlWtPLl2g=="
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

src/webapp/package.json

@@ -10,7 +10,8 @@
     "core-js": "^3.8.3",
     "pinia": "^2.0.34",
     "vue": "^3.2.13",
-    "vue-router": "^4.0.3"
+    "vue-router": "^4.0.3",
+    "vue3-draggable-resizable": "^1.6.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",

src/webapp/src/components/noseatplan.vue

@@ -17,10 +17,17 @@
             <h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3>
             <router-link to="/cart">To cart</router-link>
         </div>
-        <div class="seatingPlan">
+        <div class="noseatplan">
             <h3>Available tickets</h3>
+            <div class="wrapper">
                 <div v-for="ticket in tickets">
-                {{ ticket.name }} ({{ eventInfo[ 'categories' ][ ticket.category ][ 'name' ] }}) - {{ eventInfo.currency }} {{ eventInfo.categories[ ticket.category ][ 'price' ][ '1' ] }} <span class="material-symbols-outlined">add</span> Selected <span class="material-symbols-outlined">remove</span>
+                    {{ eventInfo[ 'categories' ][ ticket.category ][ 'name' ] }}<br>
+                    <div v-for="ticketOption in eventInfo[ 'ageGroups' ]" class="ticket">
+                        <div>
+                            {{ ticketOption.name }} <div style="display: inline" v-if="ticketOption.age">({{ ticketOption.age }})</div> {{ eventInfo.currency }} {{ eventInfo[ 'categories' ][ ticket.category ][ 'price' ][ ticketOption.id ] }} <span class="material-symbols-outlined">add</span> Selected <span class="material-symbols-outlined">remove</span>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="overlay" id="placeNotAvailable">
@@ -49,7 +56,7 @@ export default {
     data () {
         return {
             tickets: { 'ticket1': { 'name': 'Ticket 1', 'id': 'ticket1', 'category': 1 }, 'ticket2': { 'name': 'Ticket 2', 'id': 'ticket2', 'category': 2 } },
-            eventInfo: { 'name': 'TestEvent', 'location': 'TestLocation', 'date': 'TestDate', 'RoomName': 'TestRoom', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount':2, 'stage': true },
+            eventInfo: { 'name': 'TestEvent', 'location': 'TestLocation', 'date': 'TestDate', 'RoomName': 'TestRoom', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99 years' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount':2, 'stage': true },
             selectedSeats: {},
             pricingCurrentlySelected: {},
             total: 0,
@@ -228,7 +235,7 @@ export default {
         overflow: scroll;
     }
 
-    .seatingPlan {
+    .noseatplan {
         grid-area: main;
         display: flex;
         flex-direction: column;
@@ -237,13 +244,21 @@ export default {
         overflow: scroll;
     }
 
-    .active {
-        cursor: pointer;
+    .wrapper {
+        width: 30%;
+        display: flex;
+        flex-direction: column;
+        align-items: justify;
+        justify-content: justify;
+        text-align: justify;
     }
 
-    .occupied {
-        background-color: var( --hover-color );
-        padding: 0.4%;
+    .ticket {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
 
     .overlay {
@@ -299,28 +314,6 @@ export default {
         margin-top: 3vh;
     }
 
-    .option {
-        list-style: none;
-        padding: 7px 15px;
-        border-radius: 10px;
-        border-color: var( --primary-color );
-        border-style: solid;
-        border-width: 1px;
-        margin: 3px 0px;
-        cursor: pointer;
-    }
-
-    .stage {
-        border-color: var( --primary-color );
-        border-style: solid;
-        width: 80%;
-        height: 7%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
     .button {
         background-color: var( --accent-background );
         color: var( --secondary-color );

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

@@ -0,0 +1,57 @@
+<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')"
+                @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>
+                <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>
+
+<script>
+    import Vue3DraggableResizable from 'vue3-draggable-resizable';
+    import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
+
+    export default {
+        'name': 'window',
+        components: { 
+            Vue3DraggableResizable 
+        },
+        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 } }
+            }
+        },
+        methods: {
+            print(val) {
+                console.log(val)
+            },
+            enableEditMode ( obj ) {
+                this.draggables[ obj ].draggable = false;
+                this.draggables[ obj ].resizable = false;
+            },
+            handleKeyboard ( key ) {
+                console.log( key );
+            },
+            disableEditMode () {
+                for ( let draggable in this.draggables ) {
+                    this.draggables[ draggable ].draggable = true;
+                    this.draggables[ draggable ].resizable = true;
+                }
+            },
+        }
+    }
+</script>

src/webapp/src/router/adminRoutes.js

@@ -42,8 +42,19 @@ export default {
             meta: {
                 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',
             name: 'adminPlugins',

src/webapp/src/router/index.js

@@ -56,7 +56,7 @@ if ( doSetup ) {
         router.addRoute( data.default );
         setTimeout( function () {
             router.replace( window.location.pathname );
-        }, 300 );
+        }, 200 );
     } );
 }
 

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

@@ -1,8 +1,12 @@
 <template>
     <div>
-        <h2>Events</h2>
-        <p>Welcome to the admin panel!</p>
-        <div class="bigButtons"></div>
+        <div class="main-view">
+            <router-view v-slot="{ Component, route }">
+                <transition :name="route.meta.transition || 'fade'" mode="out-in">
+                    <component :is="Component" />
+                </transition>
+            </router-view>
+        </div>
     </div>
 </template>
 

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

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <h2>Seatplan Editor</h2>
+        <window />
+    </div>
+</template>
+
+<script>
+    import window from '@/components/seatplan/editor/window.vue';
+
+    export default {
+        data () {
+            return {
+                formData: {}
+            }
+        },
+        components: {
+            window,
+        },
+        methods: {
+            setup () {
+                
+            }
+        }
+    };
+</script>