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 //OpenDaylight root page
 288 one.main = {};
 289
 290 one.main.constants = {
 291     address : {
 292         menu : "/web.json",
 293         prefix : "/controller/web",
 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                 if (one.f !== undefined && one.f.cleanUp !== undefined) {
 375                     one.f.cleanUp();
 376                 }
 377         // clear page related
 378         delete one.f;
 379         $('.dashlet', '#main').empty();
 380         $('.nav', '#main').empty();
 381         // fetch page's js
 382         $.getScript(one.main.constants.address.prefix+"/"+page+"/js/page.js");
 383
 384         $.ajaxSetup({
 385                 data : {
 386                         'x-page-url' : page
 387                 }
 388         });
 389     },
 390     dashlet : function($nav, dashlet) {
 391         var $li = $(document.createElement('li'));
 392         var $a = $(document.createElement('a'));
 393         $a.text(dashlet.name);
 394         $a.attr('id', dashlet.id);
 395         $a.attr('href', '#');
 396         $li.append($a);
 397         $nav.append($li);
 398     }
 399 }
 400
 401 one.main.admin = {
 402     id : {
 403         modal : {
 404             main : "one_main_admin_id_modal_main",
 405             close : "one_main_admin_id_modal_close",
 406             user : "one_main_admin_id_modal_user",
 407             add : {
 408                 user : "one_main_admin_id_modal_add_user",
 409                 close : "one_main_admin_id_modal_add_close",
 410                 form : {
 411                     name : "one_main_admin_id_modal_add_form_name",
 412                     role : "one_main_admin_id_modal_add_form_role",
 413                     password : "one_main_admin_id_modal_add_form_password"
 414                 }
 415             },
 416             remove : {
 417                 user : "one_main_admin_id_modal_remove_user",
 418                 close : "one_main_admin_id_modal_remove_close"
 419             }
 420         },
 421         add : {
 422             user : "one_main_admin_id_add_user"
 423         }
 424     },
 425     address : {
 426         root : "/admin",
 427         users : "/users"
 428     },
 429     modal : {
 430         initialize : function(callback) {
 431             var h3 = "Welcome "+$('#admin').text();
 432             var footer = one.main.admin.modal.footer();
 433             var $modal = one.lib.modal.spawn(one.main.admin.id.modal.main, h3, '', footer);
 434
 435             // close binding
 436             $('#'+one.main.admin.id.modal.close, $modal).click(function() {
 437                 $modal.modal('hide');
 438             });
 439
 440             // body inject
 441             one.main.admin.ajax.users(function($body) {
 442                 one.lib.modal.inject.body($modal, $body);
 443             });
 444
 445             // modal show callback
 446             callback($modal);
 447         },
 448         footer : function() {
 449             var footer = [];
 450
 451             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.close, "", "");
 452             var $closeButton = one.lib.dashlet.button.button(closeButton);
 453             footer.push($closeButton);
 454
 455             return footer;
 456         }
 457     },
 458     ajax : {
 459         users : function(callback) {
 460             $.getJSON(one.main.admin.address.root+one.main.admin.address.users, function(data) {
 461                 var body = one.main.admin.data.users(data);
 462                 var $body = one.main.admin.body.users(body);
 463                 callback($body);
 464             });
 465         }
 466     },
 467     data : {
 468         users : function(data) {
 469             var body = [];
 470             $(data).each(function(index, value) {
 471                 var tr = {};
 472                 var entry = [];
 473                 entry.push(value['user']);
 474                 entry.push(value['role']);
 475                 tr['entry'] = entry;
 476                 tr['id'] = value['user'];
 477                 body.push(tr);
 478             });
 479             return body;
 480         }
 481     },
 482     body : {
 483         users : function(body) {
 484             var $div = $(document.createElement('div'));
 485             var $h5 = $(document.createElement('h5'));
 486             $h5.append("Manage Users");
 487             var attributes = ["table-striped", "table-bordered", "table-hover", "table-cursor"];
 488             var $table = one.lib.dashlet.table.table(attributes);
 489             var headers = ["User", "Role"];
 490             var $thead = one.lib.dashlet.table.header(headers);
 491             var $tbody = one.lib.dashlet.table.body(body);
 492             $table.append($thead).append($tbody);
 493
 494             // bind table
 495             if (one.role < 2) {
 496                     $table.find('tr').click(function() {
 497                         var id = $(this).data('id');
 498                         one.main.admin.remove.modal.initialize(id);
 499                     });
 500             }
 501
 502             // append to div
 503             $div.append($h5).append($table);
 504
 505             if (one.role < 2) {
 506                     var addUserButton = one.lib.dashlet.button.single("Add User", one.main.admin.id.add.user, "btn-primary", "btn-mini");
 507                     var $addUserButton = one.lib.dashlet.button.button(addUserButton);
 508                     $div.append($addUserButton);
 509
 510                     // add user binding
 511                     $addUserButton.click(function() {
 512                         one.main.admin.add.modal.initialize();
 513                     });
 514             }
 515
 516             return $div;
 517         }
 518     },
 519     remove : {
 520         modal : {
 521             initialize : function(id) {
 522                 var h3 = "Remove User";
 523                 var footer = one.main.admin.remove.footer();
 524                 var $body = one.main.admin.remove.body();
 525                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user, h3, $body, footer);
 526
 527                 // close binding
 528                 $('#'+one.main.admin.id.modal.remove.close, $modal).click(function() {
 529                     $modal.modal('hide');
 530                 });
 531
 532                 // remove binding
 533                 $('#'+one.main.admin.id.modal.remove.user, $modal).click(function() {
 534                     one.main.admin.remove.modal.ajax(id, function(result) {
 535                         if (result == 'Success') {
 536                             $modal.modal('hide');
 537                             // body inject
 538                             var $admin = $('#'+one.main.admin.id.modal.main);
 539                             one.main.admin.ajax.users(function($body) {
 540                                 one.lib.modal.inject.body($admin, $body);
 541                             });
 542                         } else alert("Failed to remove user: "+result);
 543                     });
 544                 });
 545
 546                 $modal.modal();
 547             },
 548             ajax : function(id, callback) {
 549                 $.post(one.main.admin.address.root+one.main.admin.address.users+'/'+id, function(data) {
 550                     callback(data);
 551                 });
 552             },
 553         },
 554
 555         footer : function() {
 556             var footer = [];
 557
 558             var removeButton = one.lib.dashlet.button.single("Remove User", one.main.admin.id.modal.remove.user, "btn-danger", "");
 559             var $removeButton = one.lib.dashlet.button.button(removeButton);
 560             footer.push($removeButton);
 561
 562             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.remove.close, "", "");
 563             var $closeButton = one.lib.dashlet.button.button(closeButton);
 564             footer.push($closeButton);
 565
 566             return footer;
 567         },
 568         body : function() {
 569             var $p = $(document.createElement('p'));
 570             $p.append("Remove user?");
 571             return $p;
 572         },
 573     },
 574     add : {
 575         modal : {
 576             initialize : function() {
 577                 var h3 = "Add User";
 578                 var footer = one.main.admin.add.footer();
 579                 var $body = one.main.admin.add.body();
 580                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user, h3, $body, footer);
 581
 582                 // close binding
 583                 $('#'+one.main.admin.id.modal.add.close, $modal).click(function() {
 584                     $modal.modal('hide');
 585                 });
 586
 587                 // add binding
 588                 $('#'+one.main.admin.id.modal.add.user, $modal).click(function() {
 589                     one.main.admin.add.modal.add($modal, function(result) {
 590                         if(result == 'Success') {
 591                             $modal.modal('hide');
 592                             // body inject
 593                             var $admin = $('#'+one.main.admin.id.modal.main);
 594                             one.main.admin.ajax.users(function($body) {
 595                                 one.lib.modal.inject.body($admin, $body);
 596                             });
 597                         } else alert("Failed to add user: "+result);
 598                     });
 599                 });
 600
 601                 $modal.modal();
 602             },
 603             add : function($modal, callback) {
 604                 var user = {};
 605                 user['user'] = $modal.find('#'+one.main.admin.id.modal.add.form.name).val();
 606                 user['password'] = $modal.find('#'+one.main.admin.id.modal.add.form.password).val();
 607                 user['role'] = $modal.find('#'+one.main.admin.id.modal.add.form.role).find('option:selected').attr('value');
 608
 609                 var resource = {};
 610                 resource['json'] = JSON.stringify(user);
 611                 resource['action'] = 'add'
 612
 613                 one.main.admin.add.modal.ajax(resource, callback);
 614             },
 615             ajax : function(data, callback) {
 616                 $.post(one.main.admin.address.root+one.main.admin.address.users, data, function(data) {
 617                     callback(data);
 618                 });
 619             }
 620         },
 621         body : function() {
 622             var $form = $(document.createElement('form'));
 623             var $fieldset = $(document.createElement('fieldset'));
 624             // user
 625             var $label = one.lib.form.label('Username');
 626             var $input = one.lib.form.input('Username');
 627             $input.attr('id', one.main.admin.id.modal.add.form.name);
 628             $fieldset.append($label).append($input);
 629             // password
 630             var $label = one.lib.form.label('Password');
 631             var $input = one.lib.form.input('Password');
 632             $input.attr('id', one.main.admin.id.modal.add.form.password);
 633             $input.attr('type', 'password');
 634             $fieldset.append($label).append($input);
 635             // roles
 636             var $label = one.lib.form.label('Roles');
 637             var options = {
 638                 "Network-Admin" : "Network Administrator",
 639                 "Network-Operator" : "Network Operator"
 640             };
 641             var $select = one.lib.form.select.create(options);
 642             $select.attr('id', one.main.admin.id.modal.add.form.role);
 643             $fieldset.append($label).append($select);
 644             $form.append($fieldset);
 645             return $form;
 646         },
 647         footer : function() {
 648             var footer = [];
 649
 650             var addButton = one.lib.dashlet.button.single("Add User", one.main.admin.id.modal.add.user, "btn-primary", "");
 651             var $addButton = one.lib.dashlet.button.button(addButton);
 652             footer.push($addButton);
 653
 654             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.add.close, "", "");
 655             var $closeButton = one.lib.dashlet.button.button(closeButton);
 656             footer.push($closeButton);
 657
 658             return footer;
 659         }
 660     }
 661 }
 662
 663 one.main.dashlet = {
 664         left : {
 665                 top : $("#left-top .dashlet"),
 666                 bottom : $("#left-bottom .dashlet")
 667         },
 668         right : {
 669                 bottom : $("#right-bottom .dashlet")
 670         }
 671 }
 672
 673 /** BOOTSTRAP */
 674 $(".modal").on('hidden', function() {
 675     $(this).remove();
 676 });
 677
 678 $("#alert .close").click(function() {
 679         $("#alert").hide();
 680 });
 681
 682 /** INIT */
 683
 684 // parse role
 685 one.role = $('#admin').data('role');
 686
 687 // user admin
 688 $("#admin").click(function() {
 689     one.main.admin.modal.initialize(function($modal) {
 690         $modal.modal();
 691     });
 692 });
 693
 694 // save
 695 $("#save").click(function() {
 696         $.post(one.main.constants.address.save, function(data) {
 697                 if (data == "Success") {
 698                         one.lib.alert("Configuration Saved");
 699                 } else {
 700                         one.lib.alert("Unable to save configuration: "+data);
 701                 }
 702         });
 703 });
 704
 705 // logout
 706 $("#logout").click(function() {
 707         location.href = "/logout";
 708 });
 709
 710 $.ajaxSetup({
 711     complete : function(xhr,textStatus) {
 712         var mime = xhr.getResponseHeader('Content-Type');
 713         if (mime.substring(0, 9) == 'text/html') {
 714             location.href = '/';
 715         }
 716     }
 717 });
 718
 719 /** MAIN PAGE LOAD */
 720 one.main.menu.load();