janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 13:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

first code for history for editor

Browse Source
This commit is contained in:
Janis Hutz
2023-05-12 19:30:06 +02:00
parent ad5ebf798f
commit beb837cc8d
8 changed files with 160 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/webapp/src/components/seatplan/editor/properties.vue
View File

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

111
src/webapp/src/components/seatplan/editor/window.vue
View File

@@ -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"
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( draggable.id )" class="draggable-box">
<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="activateComponent();"
@deactivated="saveHistory(); deactivateComponent( draggable.id );" @drag-start="print('drag-start')" @resize-start="print('resize-start');"
@dragging="print('dragging')" @resizing="print('resizing')" @drag-end="saveHistory();"
@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 ) {
this.draggables[ obj ].draggable = false;
this.draggables[ obj ].resizable = false;
activateComponent ( id ) {
this.active = id;
},
handleKeyboard ( key ) {
console.log( key );
deactivateComponent () {
this.active = 0;
},
disableEditMode () {
for ( let draggable in this.draggables ) {
this.draggables[ draggable ].draggable = true;
this.draggables[ draggable ].resizable = true;
print ( val ) {
console.log( val );
},
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;

9
src/webapp/src/main.js
View File

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

9
src/webapp/src/router/adminRoutes.js
View File

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

9
src/webapp/src/router/index.js
View File

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

15
src/webapp/src/router/mainRoutes.js
View File

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

9
src/webapp/src/views/admin/AdminView.vue
View File

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

9
src/webapp/src/views/admin/events/EditorView.vue
View File

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