portal/static/unbound_reservation_static/js/main.js

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