portal/static/unbound_reservation_static/js/main_.js

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