diff --git a/src/webapp/public/index.html b/src/webapp/public/index.html index 8dccc9d..907ec59 100644 --- a/src/webapp/public/index.html +++ b/src/webapp/public/index.html @@ -11,8 +11,8 @@ - - + + diff --git a/src/webapp/src/components/seatplan/editor/properties.vue b/src/webapp/src/components/seatplan/editor/properties.vue index 70c0750..b7ef6d7 100644 --- a/src/webapp/src/components/seatplan/editor/properties.vue +++ b/src/webapp/src/components/seatplan/editor/properties.vue @@ -14,36 +14,53 @@ Position X: - + Position Y: - + Width: - + Height: - + + + + + Starting row: + + Origin: - + + + + + Type: + + Shape: - diff --git a/src/webapp/src/components/seatplan/editor/window.vue b/src/webapp/src/components/seatplan/editor/window.vue index db26501..e9c9cde 100644 --- a/src/webapp/src/components/seatplan/editor/window.vue +++ b/src/webapp/src/components/seatplan/editor/window.vue @@ -13,11 +13,11 @@
- - - + + +
@@ -26,6 +26,8 @@ + + @@ -52,11 +54,12 @@ data() { return { active: 0, - draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1, 'origin': 1, 'categories': { 1: 0 }, 'shape':'rectangular', 'kind': 'seat' } }, + draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1, 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1 } }, available: { 'redo': false, 'undo': false }, scaleFactor: 1, sizePoll: null, prevSize: { 'h': window.innerHeight, 'w': window.innerWidth }, + zoomFactor: 1, } }, methods: { @@ -71,6 +74,7 @@ */ runHook () { let self = this; + this.zoomFactor = sessionStorage.getItem( 'zoom' ) ? sessionStorage.getItem( 'zoom' ) : 1; /* Keybinds: @@ -100,8 +104,6 @@ this.loadSeatplan(); - // TODO: build Zoom function (including touch gesture support) - if ( !sessionStorage.getItem( 'seatplan-history' ) ) { sessionStorage.setItem( 'seatplan-history', JSON.stringify( { '1': this.scaleDown( this.draggables ) } ) ); } @@ -118,6 +120,7 @@ } let supportedBrowser = []; + this.save(); // TODO: Add warning for untested browsers & suboptimal window sizes! }, eventHandler ( e ) { @@ -131,8 +134,9 @@ Calculate scale factor (this adds support for differently sized screens) 900px is the "default" height */ + let height = $( document ).height() * 0.8; - this.scaleFactor = height / 900; + this.scaleFactor = ( height / 900 ) * this.zoomFactor; /* Load seatplan */ @@ -231,7 +235,7 @@ sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( 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, 'origin': 1, 'categories': { 1: 0 }, 'shape':'rectangular', 'kind': 'seat' }; + 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, 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1 }; this.saveHistory(); }, deleteSelected () { @@ -245,6 +249,12 @@ this.draggables = value; this.selectedObject = value; this.saveHistory(); + }, + zoom ( scale ) { + this.zoomFactor = this.zoomFactor * scale; + sessionStorage.setItem( 'zoom', this.zoomFactor ); + this.scaleFactor = this.scaleFactor * scale; + this.draggables = this.scaleUp( JSON.parse( sessionStorage.getItem( 'seatplan' ) ) ); } }, created () { diff --git a/src/webapp/src/components/seatplan/seatplanComponents/seats/circular.vue b/src/webapp/src/components/seatplan/seatplanComponents/seats/circular.vue index 1ed0703..4e3fd3d 100644 --- a/src/webapp/src/components/seatplan/seatplanComponents/seats/circular.vue +++ b/src/webapp/src/components/seatplan/seatplanComponents/seats/circular.vue @@ -41,6 +41,10 @@ export default { type: Number, "default": 1, }, + startingRow: { + type: Number, + "default": 1, + } }, data () { return { @@ -56,7 +60,7 @@ export default { const size = 33; let count = Math.min( Math.floor( w / size ), Math.floor( h / size ) ); this.seats = {}; - for ( let row = 0; row < count; row++ ) { + for ( let row = this.startingRow; row < count; row++ ) { let nn = row * ( Math.PI / 2 ); let r = row * size; this.seats[ row ] = {}; @@ -95,6 +99,9 @@ export default { }, origin() { this.calculateChairs(); + }, + startingRow() { + this.calculateChairs(); } }, created() { diff --git a/src/webapp/src/components/seatplan/seatplanComponents/seats/trapezoid.vue b/src/webapp/src/components/seatplan/seatplanComponents/seats/trapezoid.vue index 55882b0..ce6a046 100644 --- a/src/webapp/src/components/seatplan/seatplanComponents/seats/trapezoid.vue +++ b/src/webapp/src/components/seatplan/seatplanComponents/seats/trapezoid.vue @@ -41,6 +41,10 @@ export default { type: Number, "default": 1, }, + startingRow: { + type: Number, + "default": 1, + } }, data () { return { @@ -60,7 +64,7 @@ export default { let count = Math.floor( heightTriangle / ( sideOffset * 2 ) ); const angle = Math.PI / 4; this.seats = {}; - for ( let row = 0; row < count; row++ ) { + for ( let row = this.startingRow; row < count; row++ ) { let nn = 2 + ( row - 1 ) * 2; this.seats[ row ] = {}; for ( let n = 0; n < nn; n++ ) { @@ -98,6 +102,9 @@ export default { }, origin() { this.calculateChairs(); + }, + startingRow() { + this.calculateChairs(); } }, created() { diff --git a/src/webapp/src/components/seatplan/seatplanComponents/stage/stages.vue b/src/webapp/src/components/seatplan/seatplanComponents/stage/stages.vue index e69de29..a79958e 100644 --- a/src/webapp/src/components/seatplan/seatplanComponents/stage/stages.vue +++ b/src/webapp/src/components/seatplan/seatplanComponents/stage/stages.vue @@ -0,0 +1,37 @@ + + + + + + + +