opendaylight/web/root/src/main/resources/js/one.js

   1 // global
   2 var one = {
   3         // global variables
   4         global : {
   5                 remoteAddress : "/"
   6         },
   7         role : null
   8 }
   9
  10 // one ui library
  11 one.lib = {};
  12
  13 // registry
  14 one.lib.registry = {};
  15
  16 /** DASHLET */
  17 one.lib.dashlet = {
  18         empty : function($dashlet) {
  19                 $dashlet.empty();
  20         },
  21         append : function($dashlet, $content) {
  22                 $dashlet.append($content);
  23         },
  24         header : function(header) {
  25                 var $h4 = $(document.createElement('h4'));
  26                 $h4.text(header);
  27                 return $h4;
  28         },
  29         list : function(list) {
  30                 var $ul = $(document.createElement('ul'));
  31                 $(list).each(function(index, value) {
  32                         var $li = $(document.createElement('li'));
  33                         $li.append(value);
  34                         $ul.append($li);
  35                 });
  36                 return $ul;
  37         },
  38         button : {
  39                 config : function(name, id, type, size) {
  40                         var button = {};
  41                         button['name'] = name;
  42                         button['id'] = id;
  43                         button['type'] = type;
  44                         button['size'] = size;
  45                         return button;
  46                 },
  47                 single : function(name, id, type, size) {
  48                         var buttonList = [];
  49                         var button = one.lib.dashlet.button.config(name, id, type, size);
  50                         buttonList.push(button);
  51                         return buttonList;
  52                 },
  53                 button : function(buttonList) {
  54                         var $buttonGroup = $(document.createElement('div'));
  55                         $buttonGroup.addClass("btn-group");
  56                         $(buttonList).each(function(index, value) {
  57                                 var $button = $(document.createElement('button'));
  58                                 $button.text(value.name);
  59                                 $button.addClass('btn');
  60                                 $button.addClass(value['type']);
  61                                 $button.addClass(value['size']);
  62                                 if(!(typeof value.id === 'undefined')) {
  63                                         $button.attr('id', value.id);
  64                                 }
  65                                 $buttonGroup.append($button);
  66                         });
  67                         return $buttonGroup;
  68                 }
  69         },
  70         table : {
  71                 table : function(classes, id) {
  72                         var $table = $(document.createElement('table'));
  73                         $table.addClass("table");
  74                         $(classes).each(function(index, value) {
  75                                 $table.addClass(value);
  76                         });
  77                         if (!(typeof id === 'undefined'))
  78                                 $table.attr("id", id);
  79                         return $table;
  80                 },
  81                 header : function(headers) {
  82                         var $thead = $(document.createElement('thead'));
  83                         var $tr = $(document.createElement('tr'));
  84                         $(headers).each(function(index, value) {
  85                                 $th = $(document.createElement('th'));
  86                                 $th.append(value);
  87                                 $tr.append($th);
  88                         });
  89                         $thead.append($tr);
  90                         return $thead;
  91                 },
  92                 body : function(body, thead) {
  93                         var $tbody = $(document.createElement('tbody'));
  94                         // if empty
  95                         if (body.length == 0 && !(typeof thead === 'undefined')) {
  96                                 var $tr = $(document.createElement('tr'));
  97                                 var $td = $(document.createElement('td'));
  98                                 $td.attr("colspan", thead.length);
  99                                 $td.text("No data available");
 100                                 $td.addClass("empty");
 101                                 $tr.append($td);
 102                                 $tbody.append($tr);
 103                                 return $tbody;
 104                         }
 105                         // else, populate as usual
 106                         $(body).each(function(index, value) {
 107                                 var $tr = $(document.createElement('tr'));
 108                                 // data-id
 109                                 if(value['id'] != undefined) {
 110                                         $tr.attr('data-id', value['id']);
 111                                 }
 112                                 // add classes
 113                                 $(value["type"]).each(function(index, value) {
 114                                         $tr.addClass(value);
 115                                 });
 116                                 // add entries
 117                                 $(value["entry"]).each(function(index, value) {
 118                                         var $td = $(document.createElement('td'));
 119                                         $td.append(value);
 120                                         $tr.append($td);
 121                                 });
 122                                 $tbody.append($tr);
 123                         });
 124                         return $tbody;
 125                 }
 126         },
 127         description : function(description, horizontal) {
 128                 var $dl = $(document.createElement('dl'));
 129                 if(horizontal == true) {
 130                         $dl.addClass("dl-horizontal");
 131                 }
 132                 $(description).each(function(index, value) {
 133                         var $dt = $(document.createElement('dt'));
 134                         $dt.text(value.dt);
 135                         var $dd = $(document.createElement('dd'));
 136                         $dd.text(value.dd);
 137                         $dl.append($dt).append($dd);
 138                 });
 139                 return $dl;
 140         }
 141 }
 142
 143 /** MODAL */
 144 one.lib.modal = {
 145         // clone default modal
 146         clone : function(id) {
 147                 var $clone = $("#modal").clone(true);
 148                 $clone.attr("id", id);
 149                 return $clone;
 150         },
 151         // populate modal
 152         populate : function($modal, header, $body, footer) {
 153                 var $h3 = $modal.find("h3");
 154                 $h3.text(header);
 155
 156                 var $modalBody = $modal.find(".modal-body");
 157                 $modalBody.append($body);
 158
 159                 $(footer).each(function(index, value) {
 160                         $modal.find(".modal-footer").append(value);
 161                 });
 162         },
 163         // clone and populate modal
 164         spawn : function(id, header, $body, footer) {
 165                 var $modal = one.lib.modal.clone(id);
 166                 one.lib.modal.populate($modal, header, $body, footer);
 167                 return $modal;
 168         },
 169         // empty modal
 170         empty : function($modal) {
 171                 $modal.find("h3").empty();
 172                 $modal.find(".modal-body").empty();
 173                 $modal.find(".modal-footer").empty();
 174         },
 175         // injection
 176         inject : {
 177                 body : function($modal, $body) {
 178                         $modal.find(".modal-body").empty();
 179                         $modal.find(".modal-body").append($body);
 180                 }
 181         }
 182 }
 183
 184 /** FORM */
 185 one.lib.form = {
 186         // create select-option form element
 187         select : {
 188                 create : function(options, multiple) {
 189                         // assert - auto assign
 190                         if(options == undefined) options = {};
 191
 192                         var $select = $(document.createElement('select'));
 193                         if (multiple == true) {
 194                                 $select.attr("multiple", "multiple");
 195                         }
 196                         var optionArray = one.lib.form.select.options(options);
 197                         $(optionArray).each(function(index, value) {
 198                                 $select.append(value);
 199                         });
 200                         return $select;
 201                 },
 202                 options : function(options) {
 203                         var result = [];
 204                         $.each(options, function(key, value) {
 205                                 var $option = $(document.createElement('option'));
 206                                 $option.attr("value", key);
 207                                 $option.text(value);
 208                                 result.push($option);
 209                         });
 210                         return result;
 211                 },
 212                 empty : function($select) {
 213                         $select.empty();
 214                 },
 215                 inject : function($select, options) {
 216                         $select.empty();
 217                         var options = one.lib.form.select.options(options);
 218                         $select.append(options);
 219                 },
 220                 prepend : function($select, options) {
 221                         var options = one.lib.form.select.options(options);
 222                         $select.prepend(options);
 223                 },
 224                 bubble : function($select, bubble) {
 225                         $($select.find("option")).each(function(index, value) {
 226                                 if( $(value).attr("value") == bubble ) {
 227                                         var option = $(value);
 228                                         $(value).remove();
 229                                         $select.prepend(option);
 230                                         return;
 231                                 }
 232                         });
 233                 }
 234         },
 235         // create legend form element
 236         legend : function(name) {
 237                 var $legend = $(document.createElement('legend'));
 238                 $legend.text(name);
 239                 return $legend;
 240         },
 241         // create label form element
 242         label : function(name) {
 243                 var $label = $(document.createElement('label'));
 244                 $label.text(name);
 245                 return $label;
 246         },
 247         // create help block form element
 248         help : function(help) {
 249                 var $help = $(document.createElement('span'));
 250                 $help.text(help);
 251                 $help.addClass("help-block");
 252                 return $help;
 253         },
 254         // create generic text input
 255         input : function(placeholder) {
 256                 var $input = $(document.createElement('input'));
 257                 $input.attr('type', 'text');
 258                 $input.attr('placeholder', placeholder);
 259                 return $input;
 260         }
 261 }
 262
 263 /** NAV */
 264 one.lib.nav = {
 265         unfocus : function($nav) {
 266                 $($nav.find("li")).each(function(index, value) {
 267                         $(value).removeClass("active");
 268                 });
 269         }
 270 }
 271
 272 /** ALERT */
 273 one.lib.alert = function(alert) {
 274         $("#alert p").text(alert);
 275         $("#alert").hide();
 276         $("#alert").slideToggle();
 277         clearTimeout(one.lib.registry.alert);
 278         one.lib.registry.alert = setTimeout(function() {
 279                 $("#alert").slideUp();
 280         }, 8000);
 281 }
 282
 283 /*
 284         INITIALIZATION
 285         executable JS code starts here
 286 */
 287 //ONE root page
 288 one.main = {};
 289
 290 one.main.constants = {
 291     address : {
 292         menu : "/web.json",
 293         prefix : "/one",
 294         save : "/save"
 295     }
 296 }
 297
 298 one.main.menu = {
 299     load : function() {
 300         one.main.menu.ajax(function(data) {
 301             // reparse the ajax data
 302             var result = one.main.menu.data.menu(data);
 303             // transform into list to append to menu
 304             var $div = one.main.menu.menu(result);
 305             // append to menu
 306             $("#menu .nav").append($div.children());
 307             // binding all menu items
 308             var $menu = $("#menu .nav a");
 309             $menu.click(function() {
 310                 var href = $(this).attr('href').substring(1);
 311                 one.main.page.load(href);
 312                 var $li = $(this).parent();
 313                 // reset all other active
 314                 $menu.each(function(index, value) {
 315                         $(value).parent().removeClass('active');
 316                 });
 317                 $li.addClass('active');
 318             });
 319             // reset or go to first menu item by default
 320             var currentLocation = location.hash;
 321             if (data[currentLocation.substring(1)] == undefined) {
 322                 $($menu[0]).click();
 323             } else {
 324                 $menu.each(function(index, value) {
 325                         var menuLocation = $(value).attr('href');
 326                         if (currentLocation == menuLocation) {
 327                                 $($menu[index]).click();
 328                                 return;
 329                         }
 330                 });
 331             }
 332         });
 333     },
 334     menu : function(result) {
 335         var $div = $(document.createElement('div'));
 336         $(result).each(function(index, value) {
 337             if( value != undefined) {
 338                 var $li = $(document.createElement('li'));
 339                 var $a = $(document.createElement('a'));
 340                 $a.text(value['name']);
 341                 $a.attr('href', '#'+value['id']);
 342                 $li.append($a);
 343                 $div.append($li);
 344             }
 345         });
 346         return $div;
 347     },
 348     ajax : function(successCallback) {
 349         $.getJSON(one.main.constants.address.menu, function(data) {
 350             successCallback(data);
 351         });
 352     },
 353     data : {
 354         menu : function(data) {
 355             var result = [];
 356             $.each(data, function(key, value) {
 357                 var order = value['order'];
 358                 if (order >= 0) {
 359                         var name = value['name'];
 360                         var entry = {
 361                             'name' : name,
 362                             'id' : key
 363                         };
 364                         result[order] = entry;
 365                 }
 366             });
 367             return result;
 368         }
 369     }
 370 }
 371
 372 one.main.page = {
 373     load : function(page) {
 374         // clear page related
 375         delete one.f;
 376         $('.dashlet', '#main').empty();
 377         $('.nav', '#main').empty();
 378         // fetch page's js
 379         $.getScript(one.main.constants.address.prefix+"/"+page+"/js/page.js");
 380
 381         $.ajaxSetup({
 382                 data : {
 383                         'x-page-url' : page
 384                 }
 385         });
 386     },
 387     dashlet : function($nav, dashlet) {
 388         var $li = $(document.createElement('li'));
 389         var $a = $(document.createElement('a'));
 390         $a.text(dashlet.name);
 391         $a.attr('id', dashlet.id);
 392         $a.attr('href', '#');
 393         $li.append($a);
 394         $nav.append($li);
 395     }
 396 }
 397
 398 one.main.admin = {
 399     id : {
 400         modal : {
 401             main : "one_main_admin_id_modal_main",
 402             close : "one_main_admin_id_modal_close",
 403             user : "one_main_admin_id_modal_user",
 404             add : {
 405                 user : "one_main_admin_id_modal_add_user",
 406                 close : "one_main_admin_id_modal_add_close",
 407                 form : {
 408                     name : "one_main_admin_id_modal_add_form_name",
 409                     role : "one_main_admin_id_modal_add_form_role",
 410                     password : "one_main_admin_id_modal_add_form_password"
 411                 }
 412             },
 413             remove : {
 414                 user : "one_main_admin_id_modal_remove_user",
 415                 close : "one_main_admin_id_modal_remove_close"
 416             }
 417         },
 418         add : {
 419             user : "one_main_admin_id_add_user"
 420         }
 421     },
 422     address : {
 423         root : "/admin",
 424         users : "/users"
 425     },
 426     modal : {
 427         initialize : function(callback) {
 428             var h3 = "Welcome "+$('#admin').text();
 429             var footer = one.main.admin.modal.footer();
 430             var $modal = one.lib.modal.spawn(one.main.admin.id.modal.main, h3, '', footer);
 431
 432             // close binding
 433             $('#'+one.main.admin.id.modal.close, $modal).click(function() {
 434                 $modal.modal('hide');
 435             });
 436
 437             // body inject
 438             one.main.admin.ajax.users(function($body) {
 439                 one.lib.modal.inject.body($modal, $body);
 440             });
 441
 442             // modal show callback
 443             callback($modal);
 444         },
 445         footer : function() {
 446             var footer = [];
 447
 448             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.close, "", "");
 449             var $closeButton = one.lib.dashlet.button.button(closeButton);
 450             footer.push($closeButton);
 451
 452             return footer;
 453         }
 454     },
 455     ajax : {
 456         users : function(callback) {
 457             $.getJSON(one.main.admin.address.root+one.main.admin.address.users, function(data) {
 458                 var body = one.main.admin.data.users(data);
 459                 var $body = one.main.admin.body.users(body);
 460                 callback($body);
 461             });
 462         }
 463     },
 464     data : {
 465         users : function(data) {
 466             var body = [];
 467             $(data).each(function(index, value) {
 468                 var tr = {};
 469                 var entry = [];
 470                 entry.push(value['user']);
 471                 entry.push(value['role']);
 472                 tr['entry'] = entry;
 473                 tr['id'] = value['user'];
 474                 body.push(tr);
 475             });
 476             return body;
 477         }
 478     },
 479     body : {
 480         users : function(body) {
 481             var $div = $(document.createElement('div'));
 482             var $h5 = $(document.createElement('h5'));
 483             $h5.append("Manage Users");
 484             var attributes = ["table-striped", "table-bordered", "table-hover", "table-cursor"];
 485             var $table = one.lib.dashlet.table.table(attributes);
 486             var headers = ["User", "Role"];
 487             var $thead = one.lib.dashlet.table.header(headers);
 488             var $tbody = one.lib.dashlet.table.body(body);
 489             $table.append($thead).append($tbody);
 490
 491             // bind table
 492             if (one.role < 2) {
 493                     $table.find('tr').click(function() {
 494                         var id = $(this).data('id');
 495                         one.main.admin.remove.modal.initialize(id);
 496                     });
 497             }
 498
 499             // append to div
 500             $div.append($h5).append($table);
 501
 502             if (one.role < 2) {
 503                     var addUserButton = one.lib.dashlet.button.single("Add User", one.main.admin.id.add.user, "btn-primary", "btn-mini");
 504                     var $addUserButton = one.lib.dashlet.button.button(addUserButton);
 505                     $div.append($addUserButton);
 506
 507                     // add user binding
 508                     $addUserButton.click(function() {
 509                         one.main.admin.add.modal.initialize();
 510                     });
 511             }
 512
 513             return $div;
 514         }
 515     },
 516     remove : {
 517         modal : {
 518             initialize : function(id) {
 519                 var h3 = "Remove User";
 520                 var footer = one.main.admin.remove.footer();
 521                 var $body = one.main.admin.remove.body();
 522                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user, h3, $body, footer);
 523
 524                 // close binding
 525                 $('#'+one.main.admin.id.modal.remove.close, $modal).click(function() {
 526                     $modal.modal('hide');
 527                 });
 528
 529                 // remove binding
 530                 $('#'+one.main.admin.id.modal.remove.user, $modal).click(function() {
 531                     one.main.admin.remove.modal.ajax(id, function(result) {
 532                         if (result == 'Success') {
 533                             $modal.modal('hide');
 534                             // body inject
 535                             var $admin = $('#'+one.main.admin.id.modal.main);
 536                             one.main.admin.ajax.users(function($body) {
 537                                 one.lib.modal.inject.body($admin, $body);
 538                             });
 539                         } else alert("Failed to remove user: "+result);
 540                     });
 541                 });
 542
 543                 $modal.modal();
 544             },
 545             ajax : function(id, callback) {
 546                 $.post(one.main.admin.address.root+one.main.admin.address.users+'/'+id, function(data) {
 547                     callback(data);
 548                 });
 549             },
 550         },
 551
 552         footer : function() {
 553             var footer = [];
 554
 555             var removeButton = one.lib.dashlet.button.single("Remove User", one.main.admin.id.modal.remove.user, "btn-danger", "");
 556             var $removeButton = one.lib.dashlet.button.button(removeButton);
 557             footer.push($removeButton);
 558
 559             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.remove.close, "", "");
 560             var $closeButton = one.lib.dashlet.button.button(closeButton);
 561             footer.push($closeButton);
 562
 563             return footer;
 564         },
 565         body : function() {
 566             var $p = $(document.createElement('p'));
 567             $p.append("Remove user?");
 568             return $p;
 569         },
 570     },
 571     add : {
 572         modal : {
 573             initialize : function() {
 574                 var h3 = "Add User";
 575                 var footer = one.main.admin.add.footer();
 576                 var $body = one.main.admin.add.body();
 577                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user, h3, $body, footer);
 578
 579                 // close binding
 580                 $('#'+one.main.admin.id.modal.add.close, $modal).click(function() {
 581                     $modal.modal('hide');
 582                 });
 583
 584                 // add binding
 585                 $('#'+one.main.admin.id.modal.add.user, $modal).click(function() {
 586                     one.main.admin.add.modal.add($modal, function(result) {
 587                         if(result == 'Success') {
 588                             $modal.modal('hide');
 589                             // body inject
 590                             var $admin = $('#'+one.main.admin.id.modal.main);
 591                             one.main.admin.ajax.users(function($body) {
 592                                 one.lib.modal.inject.body($admin, $body);
 593                             });
 594                         } else alert("Failed to add user: "+result);
 595                     });
 596                 });
 597
 598                 $modal.modal();
 599             },
 600             add : function($modal, callback) {
 601                 var user = {};
 602                 user['user'] = $modal.find('#'+one.main.admin.id.modal.add.form.name).val();
 603                 user['password'] = $modal.find('#'+one.main.admin.id.modal.add.form.password).val();
 604                 user['role'] = $modal.find('#'+one.main.admin.id.modal.add.form.role).find('option:selected').attr('value');
 605
 606                 var resource = {};
 607                 resource['json'] = JSON.stringify(user);
 608                 resource['action'] = 'add'
 609
 610                 one.main.admin.add.modal.ajax(resource, callback);
 611             },
 612             ajax : function(data, callback) {
 613                 $.post(one.main.admin.address.root+one.main.admin.address.users, data, function(data) {
 614                     callback(data);
 615                 });
 616             }
 617         },
 618         body : function() {
 619             var $form = $(document.createElement('form'));
 620             var $fieldset = $(document.createElement('fieldset'));
 621             // user
 622             var $label = one.lib.form.label('Username');
 623             var $input = one.lib.form.input('Username');
 624             $input.attr('id', one.main.admin.id.modal.add.form.name);
 625             $fieldset.append($label).append($input);
 626             // password
 627             var $label = one.lib.form.label('Password');
 628             var $input = one.lib.form.input('Password');
 629             $input.attr('id', one.main.admin.id.modal.add.form.password);
 630             $input.attr('type', 'password');
 631             $fieldset.append($label).append($input);
 632             // roles
 633             var $label = one.lib.form.label('Roles');
 634             var options = {
 635                 "Network-Admin" : "Network Administrator",
 636                 "Network-Operator" : "Network Operator"
 637             };
 638             var $select = one.lib.form.select.create(options);
 639             $select.attr('id', one.main.admin.id.modal.add.form.role);
 640             $fieldset.append($label).append($select);
 641             $form.append($fieldset);
 642             return $form;
 643         },
 644         footer : function() {
 645             var footer = [];
 646
 647             var addButton = one.lib.dashlet.button.single("Add User", one.main.admin.id.modal.add.user, "btn-primary", "");
 648             var $addButton = one.lib.dashlet.button.button(addButton);
 649             footer.push($addButton);
 650
 651             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.add.close, "", "");
 652             var $closeButton = one.lib.dashlet.button.button(closeButton);
 653             footer.push($closeButton);
 654
 655             return footer;
 656         }
 657     }
 658 }
 659
 660 one.main.dashlet = {
 661         left : {
 662                 top : $("#left-top .dashlet"),
 663                 bottom : $("#left-bottom .dashlet")
 664         },
 665         right : {
 666                 bottom : $("#right-bottom .dashlet")
 667         }
 668 }
 669
 670 /** BOOTSTRAP */
 671 $(".modal").on('hidden', function() {
 672     $(this).remove();
 673 });
 674
 675 $("#alert .close").click(function() {
 676         $("#alert").hide();
 677 });
 678
 679 /** INIT */
 680
 681 // parse role
 682 one.role = $('#admin').data('role');
 683
 684 // user admin
 685 $("#admin").click(function() {
 686     one.main.admin.modal.initialize(function($modal) {
 687         $modal.modal();
 688     });
 689 });
 690
 691 // save
 692 $("#save").click(function() {
 693         $.post(one.main.constants.address.save, function(data) {
 694                 if (data == "Success") {
 695                         one.lib.alert("Configuration Saved");
 696                 } else {
 697                         one.lib.alert("Unable to save configuration: "+data);
 698                 }
 699         });
 700 });
 701
 702 // logout
 703 $("#logout").click(function() {
 704         location.href = "/logout";
 705 });
 706
 707 $.ajaxSetup({
 708     complete : function(xhr,textStatus) {
 709         var page = xhr.getResponseHeader('X-Page-Location');
 710         if(page == '/login') {
 711             location.href = '/login';
 712         }
 713     }
 714 });
 715
 716 /** MAIN PAGE LOAD */
 717 one.main.menu.load();