portal/static/unbound_reservation_static/js/main_1.js

   1 jQuery(function ($) {
   2
   3     var x = 100000000;
   4     var count = 0;
   5 var gid;
   6     var me = this;
   7     var conexion_selecionada = null;
   8     var objeto_selecionado = null;
   9     var windows;
  10     var arrow_style = "Straight";
  11
  12         $( "#sortable-element li" ).draggable({
  13         appendTo: "body",
  14         helper: function() {
  15             return $("<ul class='sortable-element'></ul>").append( $(this).clone() );
  16         }
  17     });
  18
  19     $( "#editor" ).droppable({
  20         accept: "#sortable-element li",
  21         drop: function(event,ui){
  22             var nodetype;
  23             var input;
  24             var type = $(ui.draggable).attr('attr-type');
  25             var clase = 'diagrama';
  26             count++;
  27
  28             switch(type){
  29                 case "actor":
  30                     clase = 'actor';
  31                                         nodetype=false;
  32                 break;
  33                                 case "wireless":
  34                     clase = 'wireless';
  35                                         nodetype=true;
  36                 break;
  37                                 case "openflow":
  38                     clase = 'openflow';
  39                                         nodetype=false;
  40                 break;
  41                 default:
  42                     clase = 'diagrama';
  43                                         nodetype=false;
  44                 break;
  45             }
  46 //objeto_selecionado = this;
  47                 nodeid(0,0,count);
  48         console.log(count);
  49                 getItemsList(count,nodetype);
  50                 console.log(count);
  51                 readItemsList(count);
  52             input = "<span> Node-"+count+"</span>"+
  53                     "<div class='connect'></div>";
  54
  55             $(" <div style='"+posicion_drop(ui)+"' id='"+count+"' class='objeto "+clase+"'></div> ").append(input).appendTo(this);
  56             workflow();
  57         }
  58     });
  59
  60
  61     $("body").on('dblclick','.objeto span',function(){
  62         var texto = prompt("Title");
  63                 //var text2 = prompt("Title2");
  64         $(this).html(texto);
  65     });
  66             $("body").on('click','#editor',function(){
  67
  68         $("#menu").hide();
  69     });
  70 /*$(document).bind("contextmenu", function(event) {
  71     event.preventDefault();
  72     $("<div class='custom-menu'>Custom menu</div>")
  73         .appendTo("body")
  74         .css({top: event.pageY + "px", left: event.pageX + "px"});
  75 }).bind("click", function(event) {
  76     $("div.custom-menu").hide();
  77 });
  78 */
  79         // Trigger action when the contexmenu is about to be shown
  80 $("body").on("contextmenu",'.objeto', function (event) {
  81     objeto_selecionado = this;
  82                 nodeid(0,0,this.id);
  83        readItemsList(this.id);
  84                 gid=this.id;
  85     // Avoid the real one
  86     event.preventDefault();
  87
  88     // Show contextmenu
  89     $("#cssmenu").finish().toggle(100).
  90
  91     // In the right position (the mouse)
  92
  93     css({
  94         top: event.pageY-150 + "px",
  95         left: event.pageX-450 + "px"
  96     });
  97         console.log(this.id);
  98
  99 });
 100
 101
 102 // If the document is clicked somewhere
 103 $("body").bind("mousedown",'.objeto', function (e) {
 104
 105     // If the clicked element is not the menu
 106     if (!$(e.target).parents("#cssmenu").length > 0) {
 107
 108         // Hide it
 109         $("#cssmenu").hide(100);
 110     }
 111 });
 112
 113
 114 // If the menu element is clicked
 115 $("#cssmenu li").click(function(){
 116
 117     // This is the triggered action name
 118     switch($(this).attr("data-action")) {
 119
 120         // A case for each action. Your actions here
 121         case "first":document.getElementById('testbet').value="";getItemsList(gid); break;
 122         case "second":document.getElementById('testbet').value="omf:netmode";getItemsList(gid); break;
 123         case "third": alert("third"); break;
 124     }
 125
 126     // Hide it AFTER the action was triggered
 127     $("#cssmenu").hide(100);
 128   });
 129
 130  $("body").on('dblclick','.objeto',function(){
 131  //$("#menu").hide();
 132  $( "#menu" ).offset({ top: -10, left: -10 });
 133  //console.log(this.name);
 134  console.log(this.offsetTop);
 135  var t = this.offsetTop;
 136 var l = this.offsetLeft;
 137  //var x = $(this.name).position();
 138 //console.log(x.top);
 139 $( "#menu" ).offset({ top: t, left: l });
 140     $menu.menu();
 141         $("#menu").show();
 142
 143  });
 144     $("body").on('click','.objeto',function(){
 145                 $('.objeto').contextMenu(menu);
 146         objeto_selecionado = this;
 147                 nodeid(0,0,this.id);
 148
 149                 //getItemsList(this.id);
 150                 console.log(menu);
 151
 152
 153     });
 154
 155
 156     workflow = function(){
 157
 158         jsPlumb.importDefaults({
 159             Endpoint : ["Dot", {radius:2}],
 160             HoverPaintStyle : {strokeStyle:"#1e8151", lineWidth:0 },
 161
 162         });
 163
 164         windows = jsPlumb.getSelector('.objeto');
 165
 166         jsPlumb.makeSource(windows, {
 167
 168             filter:".connect",
 169             anchor:"Continuous",
 170             connector:[ arrow_style, { curviness:63 } ],
 171             connectorStyle:{
 172                 strokeStyle:"#5c96bc",
 173                 lineWidth:2,
 174                 outlineColor:"transparent",
 175                 outlineWidth:4
 176             },
 177                         connectorOverlays:[
 178       [ "Label", { label:"", id:"label" } ]
 179     ],
 180             isTarget:true,
 181             dropOptions : targetDropOptions
 182
 183         });
 184
 185         jsPlumb.makeTarget(windows, {
 186             dropOptions:{ hoverClass:"dragHover" },
 187             anchor: "Continuous"
 188         });
 189
 190
 191         var targetDropOptions = {
 192             tolerance:'touch',
 193             hoverClass:'dropHover',
 194             activeClass:'dragActive'
 195         };
 196
 197
 198         me.arrastrable();
 199
 200
 201         jsPlumb.bind("click", function(conn, originalEvent) {
 202             conexion_selecionada = conn;
 203             console.log(this);
 204             me.menu_arrow();
 205         });
 206     }
 207
 208
 209     posicion_drop = function(ui){
 210         var top = parseInt(ui.position['top'], 10) - 250;
 211         var left = parseInt(ui.position['left'], 10) - 560;
 212         var style = 'position:absolute;top:' + top + 'px;left:' + left + 'px;'
 213         return style;
 214     }
 215
 216
 217
 218     $(document).keyup(function(e){
 219         if(e.keyCode == 46){
 220             if(conexion_selecionada != null){
 221                 jsPlumb.detach(conexion_selecionada);
 222                 conexion_selecionada = null;
 223                                 $("#menu").hide();
 224             }
 225
 226             if(objeto_selecionado != null){
 227                 jsPlumb.remove(objeto_selecionado);
 228                                 resetForm('',objeto_selecionado.id);
 229                                 console.log(objeto_selecionado.id);
 230                 objeto_selecionado = null;
 231             }
 232         }
 233
 234         console.log(jsPlumb.getSelector('.objeto'));
 235     })
 236
 237
 238     //Menu de opciones en la conexión (flecha,unión)
 239     me.menu_arrow = function(){
 240         $.contextMenu({
 241             selector: '._jsPlumb_connector ',
 242             trigger: 'left',
 243             callback: function(key, options) {
 244                 var m = key;
 245                 me.menu_accion(key);
 246             },
 247             items: {
 248
 249                 "fold1":{
 250                     "name": "Conector",
 251                     "items": {
 252                         "flecha":   {"name": "Recto"},
 253                         "diagrama": {"name": "Diagrama"},
 254                         "ondular":  {"name": "Ondular"},
 255                         "cursiva":  {"name": "Cursiva"},
 256                     }
 257                 },
 258                 "fold1a": {
 259                     "name": "Estilo",
 260                     "items": {
 261                         "solido":       {"name": "Solido"},
 262                         "discontinua":  {"name": "Discontinua"}
 263                     }
 264                 },
 265                 "sep1": "---------",
 266                 "Eliminar":{"name": "Eliminar", "icon": "delete"},
 267             }
 268         });
 269     }
 270
 271
 272     me.menu_accion = function(accion){
 273         console.log(conexion_selecionada);
 274         if(accion == "Eliminar"){
 275             jsPlumb.detach(conexion_selecionada, {
 276                 fireEvent: false,
 277                 forceDetach: false
 278             })
 279         }
 280
 281         if(accion == "flecha"){
 282             conexion_selecionada.setConnector("Straight");
 283         }
 284
 285         if(accion == "diagrama"){
 286             conexion_selecionada.setConnector("Flowchart");
 287         }
 288
 289         if(accion == "ondular"){
 290             conexion_selecionada.setConnector("Bezier");
 291         }
 292
 293         if(accion == "cursiva"){
 294             conexion_selecionada.setConnector("StateMachine");
 295         }
 296
 297         if(accion == "discontinua"){
 298             conexion_selecionada.setPaintStyle({
 299                 strokeStyle:"#000",
 300                 lineWidth:2,
 301                 outlineColor:"transparent",
 302                 outlineWidth:4,
 303                 dashstyle: "4 2"
 304             });
 305         }
 306
 307         if(accion == "solido"){
 308             conexion_selecionada.setPaintStyle({
 309                 strokeStyle:"#000",
 310                 lineWidth:2,
 311                 outlineColor:"transparent",
 312                 outlineWidth:4
 313             });
 314         }
 315
 316     }
 317
 318     me.arrastrable = function(){
 319         jsPlumb.draggable($(".objeto"), {
 320
 321           containment:"editor"
 322         });
 323     }
 324
 325 var menu = [{
 326         name: 'create',
 327         img: 'images/create.png',
 328         title: 'create button',
 329         fun: function () {
 330             alert('i am add button')
 331         }
 332     }, {
 333         name: 'update',
 334         img: 'images/update.png',
 335         title: 'update button',
 336         subMenu: [{
 337             name: 'merge',
 338             title: 'It will merge row',
 339             img:'images/merge.png',
 340             fun: function () {
 341                 alert('It will merge row')
 342             }
 343         }, {
 344             name: 'replace',
 345             title: 'It will replace row',
 346             img:'images/replace.png',
 347             subMenu: [{
 348                 name: 'replace top 100',
 349                 img:'images/top.png',
 350                 fun:function(){
 351                 alert('It will replace top 100 rows');
 352                 }
 353
 354             }, {
 355                 name: 'replace all',
 356                 img:'images/all.png',
 357                 fun:function(){
 358                 alert('It will replace all rows');
 359                 }
 360             }]
 361         }]
 362     }, {
 363         name: 'delete',
 364         img: 'images/delete.png',
 365         title: 'create button',
 366         subMenu: [{
 367             'name': 'soft delete',
 368             img:'images/soft_delete.png',
 369             fun:function(){
 370             alert('You can recover back');
 371             }
 372         }, {
 373             'name': 'hard delete',
 374             img:'images/hard_delete.png',
 375             fun:function(){
 376             alert('It will delete permanently');
 377             }
 378         }]
 379
 380     }];
 381
 382 //Calling context menu
 383
 384
 385     var getMenuItem = function (itemData) {
 386         console.log(itemData);
 387         var item = $("<li>")
 388             .append(
 389         $("<a>", {
 390             href: '#' + itemData.link,
 391             html: itemData.name
 392         }));
 393         if (itemData.sub) {
 394             var subList = $("<ul>");
 395             $.each(itemData.sub, function () {
 396                 subList.append(getMenuItem(this));
 397             });
 398             item.append(subList);
 399         }
 400         return item;
 401     };
 402
 403     var $menu = $("#menu");
 404     $.each(data.menu, function () {
 405         $menu.append(
 406             getMenuItem(this)
 407         );
 408
 409
 410     });
 411
 412
 413         $("#menu").hide();
 414 });