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

properties on editor & credits in files

Browse Source
This commit is contained in:
Janis Hutz
2023-05-14 11:14:00 +02:00
parent beb837cc8d
commit c2a7a11aaf
34 changed files with 459 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/webapp/src/App.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - App.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<nav>
<router-link to="/">Home</router-link> |

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

@@ -5,4 +5,64 @@
* https://janishutz.com, development@janishutz.com
*
*
-->
-->
<template>
<div id="properties">
<h2>Properties</h2>
<table>
<tr>
<td>Position X:</td>
<td><div v-if="!isEditing.x" @dblclick="activateEditing( 'x' )">{{ posSize.x }}px</div>
<input v-else type="number" min="20" v-model="internal.x" @focusout="resubmit( 'x' )"></td>
</tr>
<tr>
<td>Position Y:</td>
<td><div v-if="!isEditing.y" @dblclick="activateEditing( 'y' )">{{ posSize.y }}px</div>
<input v-else type="number" min="20" v-model="internal.y" @focusout="resubmit( 'y' )"></td>
</tr>
<tr>
<td>Width:</td>
<td><div v-if="!isEditing.w" @dblclick="activateEditing( 'w' )">{{ posSize.w }}px</div>
<input v-else type="number" min="20" v-model="internal.w" @focusout="resubmit( 'w' )"></td>
</tr>
<tr>
<td>Height:</td>
<td><div v-if="!isEditing.h" @dblclick="activateEditing( 'h' )">{{ posSize.h }}px</div>
<input v-else type="number" min="20" v-model="internal.w" @focusout="resubmit( 'h' )"></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'propertiesSeatplan',
props: {
posSize: {
type: Object,
"default": { 'x': 100, 'y': 100, 'w': 200, 'h': 100 }
},
},
data () {
return {
isEditing: { 'w':false },
internal: { 'x': 100, 'y': 100, 'w': 200, 'h': 100 },
}
},
methods: {
activateEditing ( option ) {
this.isEditing[ option ] = true;
for ( let value in this.posSize ) {
this.internal[ value ] = this.posSize[ value ];
}
},
resubmit ( option ) {
console.log( 'ok' );
this.isEditing[ option ] = false;
this.$emit( 'updated', this.internal )
}
}
}
</script>

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

@@ -9,36 +9,42 @@
<template>
<div id="window">
<properties class="properties" v-model:posSize="selectedObject" @updated="handleUpdate"></properties>
<div class="parent">
<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">
v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="activateComponent( draggable.id );"
@drag-end="saveHistory();" @resize-end="saveHistory();" @contextmenu="( e ) => { e.preventDefault(); }" class="draggable-box">
<p v-if="draggable.draggable">This is a test example</p>
</Vue3DraggableResizable>
</div>
<div>
<button @click="historyOp( 'undo' )">Undo</button>
<button @click="historyOp( 'redo' )">Redo</button>
<button @click="setOtherValues()">Test</button>
<button v-if="available.undo" @click="historyOp( 'undo' )">Undo</button>
<button v-else disabled>Undo</button>
<button v-if="available.redo" @click="historyOp( 'redo' )">Redo</button>
<button v-else disabled>Redo</button>
<button @click="addNewElement()">Add</button>
<button @click="deleteSelected()">Delete</button>
</div>
</div>
</template>
<script>
import Vue3DraggableResizable from 'vue3-draggable-resizable';
import properties from '@/components/seatplan/editor/properties.vue';
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
export default {
'name': 'window',
components: {
Vue3DraggableResizable
Vue3DraggableResizable,
properties
},
data() {
return {
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 } }
draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1 } },
available: { 'redo': false, 'undo': false },
selectedObject: {},
}
},
methods: {
@@ -58,6 +64,19 @@
this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan' ) );
}
for ( let element in this.draggables ) {
if ( this.draggables[ element ].active ) {
this.activateComponent( element );
}
}
/*
Keybinds:
- Delete: delete selected object
- Ctrl + S: Save
- Ctrl + Z: Undo
- Ctrl + Y: Redo
*/
document.onkeydown = function ( event ) {
if ( event.key === 'Delete' ) {
event.preventDefault();
@@ -65,54 +84,105 @@
} else if ( event.ctrlKey && event.key === 's' ) {
event.preventDefault();
self.save();
} else if ( ( event.ctrlKey && event.key === 'y' ) ) {
event.preventDefault();
self.historyOp( 'redo' );
} else if ( event.ctrlKey && event.key === 'z' ) {
event.preventDefault();
self.historyOp( 'undo' );
} else if ( event.ctrlKey && event.key === 'i' ) {
event.preventDefault();
self.addNewElement();
}
};
// TODO: build Zoom function (including touch gesture support)
if ( !sessionStorage.getItem( 'seatplan-history' ) ) {
sessionStorage.setItem( 'seatplan-history', JSON.stringify( { '1': this.draggables } ) );
}
let history = sessionStorage.getItem( 'seatplan-history' ) ? JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) : {};
let count = parseInt( Object.keys( history ).length );
if ( count > parseInt( sessionStorage.getItem( 'historyPos' ) ) ) {
this.available.redo = true;
}
if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) > 0 ) {
this.available.undo = true;
}
let supportedBrowser = [];
// TODO: Add warning for untested browsers & suboptimal window sizes!
},
activateComponent ( id ) {
this.active = id;
},
deactivateComponent () {
this.active = 0;
},
print ( val ) {
console.log( val );
this.selectedObject = this.draggables[ this.active ];
},
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
let count = parseInt( Object.keys( history ).length + 1 );
if ( count - 1 > parseInt( sessionStorage.getItem( 'historyPos' ) ) ) {
for ( let i = parseInt( sessionStorage.getItem( 'historyPos' ) ) + 1; i < count; i++ ) {
delete history[ i ];
this.available.redo = false;
}
}
count = parseInt( Object.keys( history ).length + 1 );
sessionStorage.setItem( 'historyPos', count );
history[ count ] = this.draggables;
sessionStorage.setItem( 'seatplan-history', JSON.stringify( history ) );
if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) > 1 ) {
this.available.undo = true;
}
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' );
if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) > 1 ) {
sessionStorage.setItem( 'historyPos', parseInt( sessionStorage.getItem( 'historyPos' ) ) - 1 );
this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ];
this.available.redo = true;
if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) < 2 ) {
this.available.undo = false;
}
} else {
this.available.undo = false;
}
} else if ( action === 'redo' ) {
if ( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length > sessionStorage.getItem( 'historyPos' ) ) {
console.log( 'redo' );
if ( parseInt( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length ) > parseInt( sessionStorage.getItem( 'historyPos' ) ) ) {
sessionStorage.setItem( 'historyPos', parseInt( sessionStorage.getItem( 'historyPos' ) ) + 1 );
this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ];
this.available.undo = true;
if ( parseInt( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length ) < parseInt( sessionStorage.getItem( 'historyPos' ) ) + 1 ) {
this.available.redo = false;
}
} else {
this.available.redo = false;
}
}
},
save () {
sessionStorage.setItem( 'seatplan', JSON.stringify( this.draggables ) );
},
addNewElement () {
this.draggables[ Object.keys( this.draggables ).length + 1 ] = { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': Object.keys( this.draggables ).length + 1 };
this.saveHistory();
},
deleteSelected () {
this.draggables[ this.active ].active = true;
if ( confirm( 'Do you really want to delete the selected item?' ) ) {
console.log( 'deleting' );
delete this.draggables[ this.active ];
this.saveHistory();
}
},
handleUpdate ( value ) {
this.draggables[ this.active ] = value;
this.selectedObject = value;
}
},
created () {
@@ -123,7 +193,7 @@
<style scoped>
.parent {
width: 99.9%;
width: 99.8%;
height: 80vh;
position: relative;
border: black 1px solid;
@@ -137,4 +207,19 @@
border: black 2px solid;
cursor: all-scroll;
}
.properties {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
background-color: var( --accent-background );
color: var( --secondary-color );
width: 20vw;
height: 75vh;
top: 10vh;
left: 79vw;
}
</style>

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

@@ -1,3 +1,12 @@
/*
* myevent - setupRoutes.js
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
export default {
path: '/setup',
name: 'setup',

9
src/webapp/src/stores/backendStore.js
View File

@@ -1,3 +1,12 @@
/*
* myevent - backendStore.js
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
import { defineStore } from "pinia";
export const useBackendStore = defineStore ( 'backend', {

9
src/webapp/src/stores/userStore.js
View File

@@ -1,3 +1,12 @@
/*
* myevent - userStore.js
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
import { defineStore } from "pinia";
export const useUserStore = defineStore ( 'user', {

9
src/webapp/src/views/404.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - 404.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="notFound">
<h1 class="code">404</h1>

9
src/webapp/src/views/AdminLoginView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - AdminLoginView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="login">
<div class="login-app">

9
src/webapp/src/views/CartView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - CartView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="cart">
<h1>Cart</h1>

8
src/webapp/src/views/GuestPurchaseView.vue
View File

@@ -0,0 +1,8 @@
<!--
* myevent - GuestPurchaseView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->

9
src/webapp/src/views/HomeView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - HomeView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<initial></initial>
</template>

9
src/webapp/src/views/LoginView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - LoginView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="login">
<div class="login-app">

9
src/webapp/src/views/OrderView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - OrderView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="order">
<h1>Order tickets</h1>

8
src/webapp/src/views/PaymentPrepareView.vue
View File

@@ -0,0 +1,8 @@
<!--
* myevent - PaymentPrepareView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->

9
src/webapp/src/views/PaymentView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - PaymentView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="order">
<h1>Purchase</h1>

9
src/webapp/src/views/PurchaseView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - PurchaseView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="purchase">
<h1>Purchase</h1>

9
src/webapp/src/views/SetupView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SetupView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<nav class="setup-nav">

9
src/webapp/src/views/SignupView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SignupView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="login">
<div class="login-app">

9
src/webapp/src/views/TicketsDetailsView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - TicketsDetailsView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="details">
<h1>Details</h1>

9
src/webapp/src/views/TicketsOrderingView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - TicketsOrderingView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div class="details">
<!-- Load correct component depending on what the event's config is -->

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

@@ -1,3 +1,12 @@
<!--
* myevent - AccountView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h2>Admin Accounts</h2>

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

@@ -1,3 +1,12 @@
<!--
* myevent - EventsView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<div class="main-view">

10
src/webapp/src/views/admin/HomeView.vue
View File

@@ -1,3 +1,13 @@
<!--
* myevent - HomeView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h2>Home</h2>

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

@@ -1,3 +1,12 @@
<!--
* myevent - PagesView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h2>Pages</h2>

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

@@ -1,3 +1,12 @@
<!--
* myevent - PluginsView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h2>Plugins</h2>

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

@@ -1,3 +1,12 @@
<!--
* myevent - SettingsView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h2>Settings</h2>

9
src/webapp/src/views/setup/SetupCompleteView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SetupCompleteView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h2>Setup was completed!</h2>

9
src/webapp/src/views/setup/SetupEventsView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SetupEventsView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h3>Setting up Events</h3>

9
src/webapp/src/views/setup/SetupPageView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SetupPageView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h3>Setting up the landing page</h3>

9
src/webapp/src/views/setup/SetupPaymentsView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SetupPaymentsView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h3>Setting up payment methods</h3>

9
src/webapp/src/views/setup/SetupRootView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SetupRootView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h3>Setting up the root account</h3>

9
src/webapp/src/views/setup/SetupStartView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SetupStartView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h2>Welcome to myevent!</h2>

9
src/webapp/src/views/setup/SetupTOSView.vue
View File

@@ -1,3 +1,12 @@
<!--
* myevent - SetupTOSView.vue
*
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
-->
<template>
<div>
<h3>Setting up TOS (optional)</h3>