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

   1 one.main = {};
   2
   3 one.main.constants = {
   4     address : {
   5         menu : "/web.json",
   6         prefix : "/controller/web",
   7         save : "/save"
   8     }
   9 }
  10
  11 one.main.menu = {
  12     load : function() {
  13         one.main.menu.ajax(function(data) {
  14             // reparse the ajax data
  15             var result = one.main.menu.data.menu(data);
  16             // transform into list to append to menu
  17             var $div = one.main.menu.menu(result);
  18             // append to menu
  19             $("#menu .nav").append($div.children());
  20             // binding all menu items
  21             var $menu = $("#menu .nav a");
  22             $menu.click(function() {
  23                 var href = $(this).attr('href').substring(1);
  24                 one.main.page.load(href);
  25                 var $li = $(this).parent();
  26                 // reset all other active
  27                 $menu.each(function(index, value) {
  28                     $(value).parent().removeClass('active');
  29                 });
  30                 $li.addClass('active');
  31             });
  32             // reset or go to first menu item by default
  33             var currentLocation = location.hash;
  34             if (data[currentLocation.substring(1)] == undefined) {
  35                 $($menu[0]).click();
  36             } else {
  37                 $menu.each(function(index, value) {
  38                     var menuLocation = $(value).attr('href');
  39                     if (currentLocation == menuLocation) {
  40                         $($menu[index]).click();
  41                         return;
  42                     }
  43                 });
  44             }
  45         });
  46     },
  47     menu : function(result) {
  48         var $div = $(document.createElement('div'));
  49         $(result).each(function(index, value) {
  50             if (value != undefined) {
  51                 var $li = $(document.createElement('li'));
  52                 var $a = $(document.createElement('a'));
  53                 $a.text(value['name']);
  54                 $a.attr('href', '#' + value['id']);
  55                 $li.append($a);
  56                 $div.append($li);
  57             }
  58         });
  59         return $div;
  60     },
  61     ajax : function(successCallback) {
  62         $.getJSON(one.main.constants.address.menu, function(data) {
  63             successCallback(data);
  64         });
  65     },
  66     data : {
  67         menu : function(data) {
  68             var result = [];
  69             $.each(data, function(key, value) {
  70                 var order = value['order'];
  71                 if (order >= 0) {
  72                     var name = value['name'];
  73                     var entry = {
  74                         'name' : name,
  75                         'id' : key
  76                     };
  77                     result[order] = entry;
  78                 }
  79             });
  80             return result;
  81         }
  82     }
  83 }
  84
  85 one.main.page = {
  86     load : function(page) {
  87         if (one.f !== undefined && one.f.cleanUp !== undefined) {
  88             one.f.cleanUp();
  89         }
  90         // clear page related
  91         delete one.f;
  92         $('.dashlet', '#main').empty();
  93         $('.nav', '#main').empty();
  94         // fetch page's js
  95         $.getScript(one.main.constants.address.prefix + "/" + page
  96                 + "/js/page.js");
  97
  98         $.ajaxSetup({
  99             data : {
 100                 'x-page-url' : page
 101             }
 102         });
 103     },
 104     dashlet : function($nav, dashlet) {
 105         var $li = $(document.createElement('li'));
 106         var $a = $(document.createElement('a'));
 107         $a.text(dashlet.name);
 108         $a.attr('id', dashlet.id);
 109         $a.attr('href', '#');
 110         $li.append($a);
 111         $nav.append($li);
 112     }
 113 }
 114
 115 one.main.admin = {
 116     id : {
 117         modal : {
 118             main : "one_main_admin_id_modal_main",
 119             close : "one_main_admin_id_modal_close",
 120             user : "one_main_admin_id_modal_user",
 121             add : {
 122                 user : "one_main_admin_id_modal_add_user",
 123                 close : "one_main_admin_id_modal_add_close",
 124                 form : {
 125                     name : "one_main_admin_id_modal_add_form_name",
 126                     role : "one_main_admin_id_modal_add_form_role",
 127                     password : "one_main_admin_id_modal_add_form_password",
 128                                         verify : "one_main_admin_id_modal_add_form_verify"
 129                 }
 130             },
 131             remove : {
 132                 user : "one_main_admin_id_modal_remove_user",
 133                 close : "one_main_admin_id_modal_remove_close",
 134                                 password : 'one_main_admin_id_modal_remove_password'
 135             },
 136                         password : {
 137                                 modal : 'one_main_admin_id_modal_password_modal',
 138                                 submit : 'one_main_admin_id_modal_password_submit',
 139                                 cancel : 'one_main_admin_id_modal_password_cancel',
 140                                 form : {
 141                                         old : 'one_main_admin_id_modal_password_form_old',
 142                                         set : 'one_main_admin_id_modal_password_form_new',
 143                                         verify : 'one_main_admin_id_modal_password_form_verify'
 144                                 }
 145                         }
 146         },
 147         add : {
 148             user : "one_main_admin_id_add_user"
 149         }
 150     },
 151     address : {
 152         root : "/admin",
 153         users : "/users",
 154                 password : '/admin/users/password/'
 155     },
 156     modal : {
 157         initialize : function(callback) {
 158             var h3 = "Welcome " + $('#admin').text();
 159             var footer = one.main.admin.modal.footer();
 160             var $modal = one.lib.modal.spawn(one.main.admin.id.modal.main, h3,
 161                     '', footer);
 162
 163             // close binding
 164             $('#' + one.main.admin.id.modal.close, $modal).click(function() {
 165                 $modal.modal('hide');
 166             });
 167
 168             // body inject
 169             one.main.admin.ajax.users(function($body) {
 170                 one.lib.modal.inject.body($modal, $body);
 171             });
 172
 173             // modal show callback
 174             callback($modal);
 175         },
 176         footer : function() {
 177             var footer = [];
 178
 179             var closeButton = one.lib.dashlet.button.single("Close",
 180                     one.main.admin.id.modal.close, "", "");
 181             var $closeButton = one.lib.dashlet.button.button(closeButton);
 182             footer.push($closeButton);
 183
 184             return footer;
 185         }
 186     },
 187     ajax : {
 188         users : function(callback) {
 189             $.getJSON(one.main.admin.address.root
 190                     + one.main.admin.address.users, function(data) {
 191                 var body = one.main.admin.data.users(data);
 192                 var $body = one.main.admin.body.users(body);
 193                 callback($body);
 194             });
 195         }
 196     },
 197     data : {
 198         users : function(data) {
 199             var body = [];
 200             $(data).each(function(index, value) {
 201                 var tr = {};
 202                 var entry = [];
 203                 entry.push(value['user']);
 204                 entry.push(value['roles']);
 205                 tr['entry'] = entry;
 206                 tr['id'] = value['user'];
 207                 body.push(tr);
 208             });
 209             return body;
 210         }
 211     },
 212     body : {
 213         users : function(body) {
 214             var $div = $(document.createElement('div'));
 215             var $h5 = $(document.createElement('h5'));
 216             $h5.append("Manage Users");
 217             var attributes = [ "table-striped", "table-bordered",
 218                     "table-hover", "table-cursor" ];
 219             var $table = one.lib.dashlet.table.table(attributes);
 220             var headers = [ "User", "Role" ];
 221             var $thead = one.lib.dashlet.table.header(headers);
 222             var $tbody = one.lib.dashlet.table.body(body);
 223             $table.append($thead).append($tbody);
 224
 225             // bind table
 226             if (one.role < 2) {
 227                 $table.find('tr').click(function() {
 228                     var id = $(this).data('id');
 229                     one.main.admin.remove.modal.initialize(id);
 230                 });
 231             }
 232
 233             // append to div
 234             $div.append($h5).append($table);
 235
 236             if (one.role < 2) {
 237                 var addUserButton = one.lib.dashlet.button.single("Add User",
 238                         one.main.admin.id.add.user, "btn-primary", "btn-mini");
 239                 var $addUserButton = one.lib.dashlet.button
 240                         .button(addUserButton);
 241                 $div.append($addUserButton);
 242
 243                 // add user binding
 244                 $addUserButton.click(function() {
 245                     one.main.admin.add.modal.initialize();
 246                 });
 247             }
 248
 249             return $div;
 250         }
 251     },
 252     remove : {
 253         modal : {
 254             initialize : function(id) {
 255                 var h3 = "Edit User";
 256                 var footer = one.main.admin.remove.footer();
 257                 var $body = one.main.admin.remove.body();
 258                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user,
 259                         h3, $body, footer);
 260
 261                 // close binding
 262                 $('#' + one.main.admin.id.modal.remove.close, $modal).click(
 263                         function() {
 264                             $modal.modal('hide');
 265                         });
 266
 267                 // remove binding
 268                 $('#' + one.main.admin.id.modal.remove.user, $modal)
 269                         .click(
 270                                 function() {
 271                                     one.main.admin.remove.modal
 272                                             .ajax(
 273                                                     id,
 274                                                     function(result) {
 275                                                         if (result == 'Success') {
 276                                                             $modal
 277                                                                     .modal('hide');
 278                                                             // body inject
 279                                                             var $admin = $('#'
 280                                                                     + one.main.admin.id.modal.main);
 281                                                             one.main.admin.ajax
 282                                                                     .users(function($body) {
 283                                                                         one.lib.modal.inject
 284                                                                                 .body(
 285                                                                                         $admin,
 286                                                                                         $body);
 287                                                                     });
 288                                                         } else
 289                                                             alert("Failed to remove user: "
 290                                                                     + result);
 291                                                     });
 292                                 });
 293
 294                                 // change password binding
 295                                 $('#' + one.main.admin.id.modal.remove.password, $modal).click(function() {
 296                                         one.main.admin.password.initialize(id, function() {
 297                                                 $modal.modal('hide');
 298                                         });
 299                                 });
 300
 301                 $modal.modal();
 302             },
 303             ajax : function(id, callback) {
 304                 $.post(one.main.admin.address.root
 305                         + one.main.admin.address.users + '/' + id,
 306                         function(data) {
 307                             callback(data);
 308                         });
 309             },
 310         },
 311
 312         footer : function() {
 313             var footer = [];
 314
 315             var removeButton = one.lib.dashlet.button.single("Remove User",
 316                     one.main.admin.id.modal.remove.user, "btn-danger", "");
 317             var $removeButton = one.lib.dashlet.button.button(removeButton);
 318             footer.push($removeButton);
 319
 320                         var change = one.lib.dashlet.button.single('Change Password',
 321                                         one.main.admin.id.modal.remove.password, 'btn-success', '');
 322                         var $change = one.lib.dashlet.button.button(change);
 323                         footer.push($change);
 324
 325             var closeButton = one.lib.dashlet.button.single("Close",
 326                     one.main.admin.id.modal.remove.close, "", "");
 327             var $closeButton = one.lib.dashlet.button.button(closeButton);
 328             footer.push($closeButton);
 329
 330             return footer;
 331         },
 332         body : function() {
 333             var $p = $(document.createElement('p'));
 334             $p.append('Select an action');
 335             return $p;
 336         },
 337     },
 338     add : {
 339         modal : {
 340             initialize : function() {
 341                 var h3 = "Add User";
 342                 var footer = one.main.admin.add.footer();
 343                 var $body = one.main.admin.add.body();
 344                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user,
 345                         h3, $body, footer);
 346
 347                 // close binding
 348                 $('#' + one.main.admin.id.modal.add.close, $modal).click(
 349                         function() {
 350                             $modal.modal('hide');
 351                         });
 352
 353                 // add binding
 354                 $('#' + one.main.admin.id.modal.add.user, $modal)
 355                         .click(
 356                                 function() {
 357                                     one.main.admin.add.modal
 358                                             .add(
 359                                                     $modal,
 360                                                     function(result) {
 361                                                         if (result == 'Success') {
 362                                                             $modal
 363                                                                     .modal('hide');
 364                                                             // body inject
 365                                                             var $admin = $('#'
 366                                                                     + one.main.admin.id.modal.main);
 367                                                             one.main.admin.ajax
 368                                                                     .users(function($body) {
 369                                                                         one.lib.modal.inject
 370                                                                                 .body(
 371                                                                                         $admin,
 372                                                                                         $body);
 373                                                                     });
 374                                                         } else
 375                                                             alert("Failed to add user: "
 376                                                                     + result);
 377                                                     });
 378                                 });
 379
 380                 $modal.modal();
 381             },
 382             add : function($modal, callback) {
 383                 var user = {};
 384                 user['user'] = $modal.find(
 385                         '#' + one.main.admin.id.modal.add.form.name).val();
 386                 user['password'] = $modal.find(
 387                         '#' + one.main.admin.id.modal.add.form.password).val();
 388                 roles = new Array();
 389                 roles[0] = $modal.find(
 390                         '#' + one.main.admin.id.modal.add.form.role).find(
 391                         'option:selected').attr('value');
 392                 user['roles'] = roles;
 393
 394                                 // password check
 395                                 var verify = $('#'+one.main.admin.id.modal.add.form.verify).val();
 396                                 if (user.password != verify) {
 397                                         alert('Passwords do not match');
 398                                         return false;
 399                                 }
 400
 401                 var resource = {};
 402                 resource['json'] = JSON.stringify(user);
 403                 resource['action'] = 'add'
 404
 405                 one.main.admin.add.modal.ajax(resource, callback);
 406             },
 407             ajax : function(data, callback) {
 408                 $.post(one.main.admin.address.root
 409                         + one.main.admin.address.users, data, function(data) {
 410                     callback(data);
 411                 });
 412             }
 413         },
 414         body : function() {
 415             var $form = $(document.createElement('form'));
 416             var $fieldset = $(document.createElement('fieldset'));
 417             // user
 418             var $label = one.lib.form.label('Username');
 419             var $input = one.lib.form.input('Username');
 420             $input.attr('id', one.main.admin.id.modal.add.form.name);
 421             $fieldset.append($label).append($input);
 422             // password
 423             var $label = one.lib.form.label('Password');
 424             var $input = one.lib.form.input('Password');
 425             $input.attr('id', one.main.admin.id.modal.add.form.password);
 426             $input.attr('type', 'password');
 427             $fieldset.append($label).append($input);
 428                         // password verify
 429                         var $label = one.lib.form.label('Verify Password');
 430                         var $input = one.lib.form.input('Verify Password');
 431                         $input.attr('id', one.main.admin.id.modal.add.form.verify);
 432                         $input.attr('type', 'password');
 433                         $fieldset.append($label).append($input);
 434             // roles
 435             var $label = one.lib.form.label('Roles');
 436             var options = {
 437                 "Network-Admin" : "Network Administrator",
 438                 "Network-Operator" : "Network Operator"
 439             };
 440             var $select = one.lib.form.select.create(options);
 441             $select.attr('id', one.main.admin.id.modal.add.form.role);
 442             $fieldset.append($label).append($select);
 443             $form.append($fieldset);
 444             return $form;
 445         },
 446         footer : function() {
 447             var footer = [];
 448
 449             var addButton = one.lib.dashlet.button.single("Add User",
 450                     one.main.admin.id.modal.add.user, "btn-primary", "");
 451             var $addButton = one.lib.dashlet.button.button(addButton);
 452             footer.push($addButton);
 453
 454             var closeButton = one.lib.dashlet.button.single("Close",
 455                     one.main.admin.id.modal.add.close, "", "");
 456             var $closeButton = one.lib.dashlet.button.button(closeButton);
 457             footer.push($closeButton);
 458
 459             return footer;
 460         }
 461     },
 462         password : {
 463                 initialize : function(id, successCallback) {
 464                         var h3 = 'Change Password';
 465                         var footer = one.main.admin.password.footer();
 466                         var $body = one.main.admin.password.body(id);;
 467                         var $modal = one.lib.modal.spawn(one.main.admin.id.modal.password.modal,
 468                                 h3, $body, footer);
 469
 470                         // cancel binding
 471                         $('#'+one.main.admin.id.modal.password.cancel, $modal).click(function() {
 472                                 $modal.modal('hide');
 473                         });
 474
 475                         // change password binding
 476                         $('#'+one.main.admin.id.modal.password.submit, $modal).click(function() {
 477                                 one.main.admin.password.submit(id, $modal, function(result) {
 478                                         if (result.code == 'SUCCESS') {
 479                                                 $modal.modal('hide');
 480                                                 successCallback();
 481                                         } else {
 482                                                 alert(result.code+': '+result.description);
 483                                         }
 484                                 });
 485                         });
 486
 487                         $modal.modal();
 488                 },
 489                 submit : function(id, $modal, callback) {
 490                         var resource = {};
 491                         resource.newPassword = $('#'+one.main.admin.id.modal.password.form.set, $modal).val();
 492
 493                         // verify password
 494                         var verify = $('#'+one.main.admin.id.modal.password.form.verify, $modal).val();
 495                         if (verify != resource.newPassword) {
 496                                 alert('Passwords do not match');
 497                                 return false;
 498                         }
 499
 500                         resource.currentPassword = $('#'+one.main.admin.id.modal.password.form.old, $modal).val();
 501
 502                         $.post(one.main.admin.address.password+id, resource, function(data) {
 503                                 callback(data);
 504                         });
 505                 },
 506                 body : function(id) {
 507                         var $form = $(document.createElement('form'));
 508                         var $fieldset = $(document.createElement('fieldset'));
 509                         // user
 510                         var $label = one.lib.form.label('Username');
 511                         var $input = one.lib.form.input('');
 512                         $input.attr('disabled', 'disabled');
 513                         $input.val(id);
 514                         $fieldset.append($label)
 515                                 .append($input);
 516                         // old password
 517             var $label = one.lib.form.label('Old Password');
 518             var $input = one.lib.form.input('Old Password');
 519             $input.attr('id', one.main.admin.id.modal.password.form.old);
 520             $input.attr('type', 'password');
 521             $fieldset.append($label).append($input);
 522                         // new password
 523             var $label = one.lib.form.label('New Password');
 524             var $input = one.lib.form.input('New Password');
 525             $input.attr('id', one.main.admin.id.modal.password.form.set);
 526             $input.attr('type', 'password');
 527             $fieldset.append($label).append($input);
 528                         // verify new password
 529                         var $label = one.lib.form.label('Verify Password');
 530                         var $input = one.lib.form.input('Verify Password');
 531                         $input.attr('id', one.main.admin.id.modal.password.form.verify);
 532                         $input.attr('type', 'password');
 533                         $fieldset.append($label).append($input);
 534                         // return
 535                         $form.append($fieldset);
 536                         return $form;
 537                 },
 538                 footer : function() {
 539                         var footer = [];
 540                         var submit = one.lib.dashlet.button.single('Submit',
 541                                 one.main.admin.id.modal.password.submit, 'btn-primary', '');
 542                         var $submit = one.lib.dashlet.button.button(submit);
 543                         footer.push($submit);
 544                         var cancel = one.lib.dashlet.button.single('Cancel',
 545                                 one.main.admin.id.modal.password.cancel, '', '');
 546                         var $cancel = one.lib.dashlet.button.button(cancel);
 547                         footer.push($cancel);
 548                         return footer;
 549                 }
 550         }
 551 }
 552
 553 one.main.dashlet = {
 554     left : {
 555         top : $("#left-top .dashlet"),
 556         bottom : $("#left-bottom .dashlet")
 557     },
 558     right : {
 559         bottom : $("#right-bottom .dashlet")
 560     }
 561 }
 562
 563 /** BOOTSTRAP */
 564 $(".modal").on('hidden', function() {
 565     $(this).remove();
 566 });
 567
 568 $("#alert .close").click(function() {
 569     $("#alert").hide();
 570 });
 571
 572 /** INIT */
 573
 574 // parse role
 575 one.role = $('#admin').data('role');
 576
 577 // user admin
 578 $("#admin").click(function() {
 579     one.main.admin.modal.initialize(function($modal) {
 580         $modal.modal();
 581     });
 582 });
 583
 584 // save
 585 $("#save").click(function() {
 586     $.post(one.main.constants.address.save, function(data) {
 587         if (data == "Success") {
 588             one.lib.alert("Configuration Saved");
 589         } else {
 590             one.lib.alert("Unable to save configuration: " + data);
 591         }
 592     });
 593 });
 594
 595 // logout
 596 $("#logout").click(function() {
 597     location.href = "/logout";
 598 });
 599
 600 $.ajaxSetup({
 601     complete : function(xhr, textStatus) {
 602         var mime = xhr.getResponseHeader('Content-Type');
 603         if (mime.substring(0, 9) == 'text/html') {
 604             location.href = '/';
 605         }
 606     }
 607 });
 608
 609 /** MAIN PAGE LOAD */
 610 one.main.menu.load();