diff options
author | Christian Klinger | 2016-08-05 12:06:50 +0200 |
---|---|---|
committer | Christian Klinger | 2016-08-05 12:06:50 +0200 |
commit | 5773e599f142ea1b1106dbdbda219dfb14986878 (patch) | |
tree | 8986f3cba65b12cbd5450d5dcd34b32ffea735d1 /modules-available/roomplanner/js/grid.js | |
parent | added jqueryui module (diff) | |
download | slx-admin-5773e599f142ea1b1106dbdbda219dfb14986878.tar.gz slx-admin-5773e599f142ea1b1106dbdbda219dfb14986878.tar.xz slx-admin-5773e599f142ea1b1106dbdbda219dfb14986878.zip |
grobe Integration vom Raumplaner.
Diffstat (limited to 'modules-available/roomplanner/js/grid.js')
-rw-r--r-- | modules-available/roomplanner/js/grid.js | 518 |
1 files changed, 518 insertions, 0 deletions
diff --git a/modules-available/roomplanner/js/grid.js b/modules-available/roomplanner/js/grid.js new file mode 100644 index 00000000..1b82f772 --- /dev/null +++ b/modules-available/roomplanner/js/grid.js @@ -0,0 +1,518 @@ +if (!roomplanner) var roomplanner = { + + getScaleFactor: function() { + return this.settings.scale/100; + }, + getCellPositionFromPixels: function(left,top) { + var n = this.settings.scale / this.settings.cellsep; + return [ parseInt(left) - ((parseInt(left)%n)+n)%n , parseInt(top) - ((parseInt(top)%n)+n)%n]; + }, + getCellPositionFromGrid: function(row,col) { + var n = this.settings.scale / this.settings.cellsep; + return [ parseInt(col*n), parseInt(row*n) ] + }, + getGridFromPixels: function(left,top) { + var n = this.settings.scale / this.settings.cellsep; + return [Math.round(top/n), Math.round(left/n)]; + }, + settings: { + cellsep: 4, + scale: 100, + room: { + width: 1000, + height: 1000 + } + }, + selectFromServer: selectMachine, + isElementResizable: function(el) { + return (!$(el).attr('noresize') && $(el).attr('itemtype') != 'pc'); + }, + initRotation: function(el) { + if (!(new RegExp(".*(east|south|west|north)$").test($(el).attr('itemlook')))) { + return; + } + + $(el).append('<div class="rotationHandle glyphicon glyphicon-repeat"></div>'); + $(el).find('.rotationHandle').click(function () { + var str = $(el).attr('itemlook'); + if (str.indexOf('-') > -1){ + var values =str.split('-'); + var name = values[0]; + var direction = values[1]; + + var re = new RegExp("east|south|west|north"); + if (re.test(direction)) { + var newdirection; + switch(direction) { + case "east": + newdirection = "south"; + break; + case "south": + newdirection = "west"; + break; + case "west": + newdirection = "north"; + break; + case "north": + newdirection = "east"; + break; + } + var result = name + "-" + newdirection; + $(el).attr('itemlook', result); + } + } + }); + }, + initDelete: function(el) { + $(el).append('<div class="deleteHandle glyphicon glyphicon-remove-sign"></div>'); + $(el).find('.deleteHandle').click(function() { + if ($(this).parent().attr('itemtype') == "pc") { + var self = this; + BootstrapDialog.confirm(__('are you sure'),function(result) { + if (result) { + $(self).parent().remove(); + } + }); + } else { + $(this).parent().remove(); + } + }); + }, + initTooltip: function(el) { + if ($(el).attr('itemtype') == 'pc') { + var tip = "<b>Rechnerdaten</b><br>"; + $(roomplanner.computerAttributes).each(function(i,key){ + tip += __(key)+": "+$(el).attr(key)+"<br>"; + }); + + $(el).attr('data-togle','tooltip'); + $(el).attr('title',tip); + $(el).tooltip({html: true}); + } + }, + + initDraggable: function(el) { + $(el).draggable(); + var options = { + "containment" : "#draw-element-area", + "helper" : false, + "grid" : [(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)], + "stop": function(ev,ui) { + if ($(this).attr("obstacle") == "true") { + $(this).addClass("obstacle"); + } + + if ($(this).attr('itemtype') == "pc_drag") { + $(this).attr('itemtype','pc'); + } + + }, + "preventCollision" : true, + "restraint": "#draw-element-area", + "obstacle" : ".obstacle", + "start": function(ev,ui) { + if (roomplanner.isElementResizable(this)) { + $(this).resizable("option","maxHeight",null); + $(this).resizable("option","maxWidth",null); + } + + if ($(this).attr('itemtype') == "pc") { + $(this).attr('itemtype','pc_drag'); + } + + $(this).removeClass("obstacle"); + } + }; + + // pcs can be placed everywhere + if ($(el).attr('itemtype') == "pc") { + options.obstacle = '[itemtype="pc"]'; + } + + for (var o in options) { + $(el).draggable("option",o,options[o]); + } + }, + initResizable: function(el) { + if (!roomplanner.isElementResizable(el)) { return; } + + $(el).resizable({ + containment : "#draw-element-area", + obstacle: ".obstacle", + handles: "se", + autoHide: true, + grid: [(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)], + resize: function(ev,ui) { + var gridSteps = $(this).resizable("option","grid"); + + + var collides = $(this).collision(".obstacle"); + var pos = $(this).offset(); + var self = this; + + var mw = $(this).resizable("option","maxWidth"); + var mh = $(this).resizable("option","maxHeight"); + + var hLimit = ($(this).attr('scalable') == 'v'); + var vLimit = ($(this).attr('scalable') == 'h'); + + if(collides.length) { + $(collides).each(function(idx,item) { + var itempos = $(item).offset(); + + if (!hLimit) { + if (pos.left < itempos.left && (pos.left + $(self).width()) > itempos.left) { + $(self).resizable("option","maxWidth",parseInt(itempos.left - pos.left)); + + } else { + $(self).resizable("option","maxWidth",null); + } + } + + if (!vLimit) { + if (pos.top < itempos.top && pos.top + $(self).height() > itempos.top) { + $(self).resizable("option","maxHeight",parseInt(itempos.top - pos.top)); + } else { + $(self).resizable("option","maxHeight",null); + } + } + }); + } else { + if (!hLimit && (mw == null || mw > $(this).width())) { + $(this).resizable("option","maxWidth",null); + } + if (!vLimit && (mh == null || mh > $(this).height())) { + $(this).resizable("option","maxHeight",null); + } + } + }, + start: function(ev,ui) { + $(this).removeClass("obstacle"); + $(this).css('opacity',0.8); + + var gridSteps = $(this).resizable("option","grid"); + + $(this).resizable("option",{ + minHeight: gridSteps[1]*roomplanner.getScaleFactor(), + minWidth: gridSteps[0]*roomplanner.getScaleFactor() + }); + + if ($(this).attr('scalable')) { + switch ($(this).attr('scalable')) { + case 'h': + $(this).resizable("option",{ + minHeight: $(this).height(), + maxHeight: $(this).height() + }); + break; + case 'v': + $(this).resizable("option",{ + minWidth: $(this).width(), + maxWidth: $(this).width() + }); + break; + } + } + + }, + stop: function(ev,ui) { + if ($(this).attr("obstacle") == "true") { + $(this).addClass("obstacle"); + } + + var gridSteps = $(this).resizable("option","grid"); + var mw = $(this).resizable("option","maxWidth"); + if (mw) { + $(this).width(mw); + } else { + $(this).width($(this).outerWidth() - $(this).outerWidth()%(gridSteps[0])); + } + + var mh = $(this).resizable("option","maxHeight"); + if (mh) { + $(this).height(mh); + } else { + $(this).height($(this).outerHeight() - $(this).outerHeight()%(gridSteps[1])); + } + + + $(this).attr('data-width', $(this).outerWidth()/roomplanner.getScaleFactor() - (($(this).outerWidth()%gridSteps[0])/roomplanner.getScaleFactor())); + $(this).attr('data-height', $(this).outerHeight()/roomplanner.getScaleFactor() - (($(this).outerHeight()%gridSteps[1])/roomplanner.getScaleFactor())); + + + $(this).css('opacity',1); + } + }); + }, + serialize: function() { + + var objects = { + "furniture": [], + "computers": [] + }; + + var furniture = $('#draw-element-area div[itemtype="furniture"]'); + furniture.each(function(idx,el) { + objects.furniture.push({ + "gridRow" : $(el).attr('gridRow'), + "gridCol" : $(el).attr('gridCol'), + "data-width": $(el).attr('data-width'), + "data-height": $(el).attr('data-height'), + "itemlook": $(el).attr('itemlook'), + }); + }); + + var computers = $('#draw-element-area div[itemtype="pc"]'); + computers.each(function(idx,el) { + + var object = { + "gridRow" : $(el).attr('gridRow'), + "gridCol" : $(el).attr('gridCol'), + "data-width": $(el).attr('data-width'), + "data-height": $(el).attr('data-height'), + "itemlook": $(el).attr('itemlook'), + "muuid": $(el).attr('muuid') + }; + + objects.computers.push(object) + }); + + + return JSON.stringify(objects); + }, + load: function(object) { + try { + var objects = JSON.parse(object); + } catch(e) { + alert('invalid JSON format'); + return false; + } + + $('#draw-element-area').html(''); + + function itemToHtml(item, itemtype, obstacle) { + var html = '<div itemtype="'+itemtype+'" style="position:absolute;" '; + for (var prop in item) { + if (!item.hasOwnProperty(prop)) continue; + html += prop+'="'+item[prop]+'" '; + } + html += 'class="draggable ui-draggable'; + + if (obstacle) { + html += " obstacle"; + } + + html+= '"></div>'; + return html; + } + + if (objects.furniture) { + var furniture = objects.furniture; + for (var piece in furniture) { + var item = itemToHtml(furniture[piece], "furniture", true); + $('#draw-element-area').append(item); + + } + } + + + if (objects.computers) { + var computers = objects.computers; + for (var piece in computers) { + var item = itemToHtml(computers[piece], "pc", false); + $('#draw-element-area').append(item); + } + } + + $('#draw-element-area .draggable').each(function(idx,el) { + roomplanner.initDraggable(el); + roomplanner.initResizable(el); + roomplanner.initTooltip(el); + roomplanner.initRotation(el); + roomplanner.initDelete(el); + }); + + roomplanner.grid.scale(roomplanner.settings.scale); + }, + clear: function() { + $('#draw-element-area').html(''); + } +}; + +roomplanner.grid = (function() { + var grid = { + resize: function() { + var w = Math.max($('#drawpanel .panel-body').width(),roomplanner.settings.room.width*roomplanner.settings.scale) + var h = Math.max($('#drawpanel .panel-body').height(),roomplanner.settings.room.height*roomplanner.settings.scale) + $('#drawarea').width(w); + $('#drawarea').height(h); + }, + scale: function(num) { + $('#drawarea').css('background-size',num); + roomplanner.settings.scale = num; + $('#draw-element-area .ui-draggable').each(function(idx,item) { + var h = $(item).attr('data-height') * roomplanner.getScaleFactor(); + var w = $(item).attr('data-width') * roomplanner.getScaleFactor(); + //var pos = roomplanner.getCelloffset() + + var l = parseInt($(item).css('left')) * roomplanner.getScaleFactor(); + var t = parseInt($(item).css('top')) * roomplanner.getScaleFactor(); + + var pos = roomplanner.getCellPositionFromGrid($(item).attr('gridRow'),$(item).attr('gridCol')); + + $(item).css({width: w+"px", height: h+"px", left: pos[0]+"px", top: pos[1]+"px"}); + $(item).draggable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]); + + if (roomplanner.isElementResizable(item)) { + $(item).resizable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]); + } + }); + this.resize(); + }, + init: function() { + this.resize(); + $(window).resize($.proxy(function(){ + this.resize(); + },this)); + } + } + + return grid; +} +)(); + +$(document).ready(function(){ + roomplanner.grid.init(); + + $('#scaleslider').slider({ + orientation: "horizontal", + range: "min", + min: 20, + max: 200, + value: 100, + slide: function(event,ui) { + roomplanner.grid.scale(ui.value); + }, + stop: function(e, ui) { + $('#drawarea').trigger('checkposition'); + } + + }); + + $('#drawarea').bind('checkposition', function() { + if ($(this).offset().left > 0) { + $(this).css('left',0); + } + if (parseInt($(this).css('top')) > 0) { + $(this).css('top',0); + } + + if (($(this).width() + parseInt($(this).css('left'))) < $(this).parent().width()) { + $(this).css('left', ($(this).parent().width() - $(this).width())); + } + + if (($(this).height() + parseInt($(this).css('top'))) < $(this).parent().height()) { + $(this).css('top', ($(this).parent().height() - $(this).height())); + } + }); + + $('#drawarea').draggable({ + stop: function() { + $(this).trigger('checkposition'); + } + }); + + $('#draw-element-area').droppable({ + accept: ".draggable", + drop: function(event, ui) { + + // the element is already in drawing area + var el = (ui.helper == ui.draggable) ? ui.draggable : $(ui.helper.clone()); + var collidingSelector = ($(el).attr('itemtype') =="pc_drag") ? '[itemtype="pc"]' : '.obstacle'; + + if ($(el).collision(collidingSelector).length) { + return; + } + + var itemtype = $(el).attr('itemtype'); + $(el).attr('itemtype',itemtype.replace('_drag','')); + + $(el).removeClass('collides'); + $(el).css('opacity',1); + + if (ui.helper != ui.draggable) { + var l = parseInt($(el).css('left'))-parseInt($('#drawarea').css('left'))-$('#drawpanel').offset().left; + var t = parseInt($(el).css('top'))-parseInt($('#drawarea').css('top'))-($('#drawpanel').offset().top + $('#drawpanel .panel-heading').height()); + var cp = roomplanner.getCellPositionFromPixels(l,t); + $(el).css('left',cp[0]); + $(el).css('top',cp[1]); + } + + var gridPositions = roomplanner.getGridFromPixels(parseInt($(el).css('left')),parseInt($(el).css('top'))); + $(el).attr('gridRow',gridPositions[0]); + $(el).attr('gridCol',gridPositions[1]); + + if ($(el).attr("obstacle") == "true") { + $(el).addClass("obstacle"); + } + + roomplanner.initResizable(el); + roomplanner.initDraggable(el); + + if (ui.helper != ui.draggable) { + $(this).append(el); + + if ($(el).attr('itemtype') == "pc") { + + var uuids = []; + var computers = $('#draw-element-area div[itemtype="pc"]'); + computers.each(function(idx,el) { + if ($(el).attr('muuid')) { + uuids.push($(el).attr('muuid')); + } + }); + + roomplanner.selectFromServer(uuids, function (result) { + if (!result) { + $(el).remove(); + } else { + for (var key in result) { + $(el).attr(key,result[key]); + } + roomplanner.initTooltip(el); + } + }); + } + roomplanner.initDelete(el); + roomplanner.initRotation(el); + + } + + } + }); + + $('.draggable').draggable({ + helper: "clone", + //grid : [(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)], + preventCollision: true, + restraint: "#draw-element-area", + obstacle: ".obstacle", + cursorAt: {left:5,top:5}, + start: function(ev,ui) { + $(ui.helper).css('opacity',0.8); + $(ui.helper).height($(this).attr('data-height')*roomplanner.getScaleFactor()); + $(ui.helper).width($(this).attr('data-width')*roomplanner.getScaleFactor()); + var type = $(ui.helper).attr('itemtype'); + $(ui.helper).attr('itemtype',type+"_drag"); + }, + drag: function(ev,ui) { + var collidingSelector = ($(ui.helper).attr('itemtype') =="pc_drag") ? '[itemtype="pc"]' : '.obstacle'; + if ($(ui.helper).collision(collidingSelector).length) { + $(ui.helper).addClass('collides'); + } else { + $(ui.helper).removeClass('collides'); + } + } + }) + +}); |