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['role']);
 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                 user['role'] = $modal.find(
 389                         '#' + one.main.admin.id.modal.add.form.role).find(
 390                         'option:selected').attr('value');
 391
 392                                 // password check
 393                                 var verify = $('#'+one.main.admin.id.modal.add.form.verify).val();
 394                                 if (user.password != verify) {
 395                                         alert('Passwords do not match');
 396                                         return false;
 397                                 }
 398
 399                 var resource = {};
 400                 resource['json'] = JSON.stringify(user);
 401                 resource['action'] = 'add'
 402
 403                 one.main.admin.add.modal.ajax(resource, callback);
 404             },
 405             ajax : function(data, callback) {
 406                 $.post(one.main.admin.address.root
 407                         + one.main.admin.address.users, data, function(data) {
 408                     callback(data);
 409                 });
 410             }
 411         },
 412         body : function() {
 413             var $form = $(document.createElement('form'));
 414             var $fieldset = $(document.createElement('fieldset'));
 415             // user
 416             var $label = one.lib.form.label('Username');
 417             var $input = one.lib.form.input('Username');
 418             $input.attr('id', one.main.admin.id.modal.add.form.name);
 419             $fieldset.append($label).append($input);
 420             // password
 421             var $label = one.lib.form.label('Password');
 422             var $input = one.lib.form.input('Password');
 423             $input.attr('id', one.main.admin.id.modal.add.form.password);
 424             $input.attr('type', 'password');
 425             $fieldset.append($label).append($input);
 426                         // password verify
 427                         var $label = one.lib.form.label('Verify Password');
 428                         var $input = one.lib.form.input('Verify Password');
 429                         $input.attr('id', one.main.admin.id.modal.add.form.verify);
 430                         $input.attr('type', 'password');
 431                         $fieldset.append($label).append($input);
 432             // roles
 433             var $label = one.lib.form.label('Roles');
 434             var options = {
 435                 "Network-Admin" : "Network Administrator",
 436                 "Network-Operator" : "Network Operator"
 437             };
 438             var $select = one.lib.form.select.create(options);
 439             $select.attr('id', one.main.admin.id.modal.add.form.role);
 440             $fieldset.append($label).append($select);
 441             $form.append($fieldset);
 442             return $form;
 443         },
 444         footer : function() {
 445             var footer = [];
 446
 447             var addButton = one.lib.dashlet.button.single("Add User",
 448                     one.main.admin.id.modal.add.user, "btn-primary", "");
 449             var $addButton = one.lib.dashlet.button.button(addButton);
 450             footer.push($addButton);
 451
 452             var closeButton = one.lib.dashlet.button.single("Close",
 453                     one.main.admin.id.modal.add.close, "", "");
 454             var $closeButton = one.lib.dashlet.button.button(closeButton);
 455             footer.push($closeButton);
 456
 457             return footer;
 458         }
 459     },
 460         password : {
 461                 initialize : function(id, successCallback) {
 462                         var h3 = 'Change Password';
 463                         var footer = one.main.admin.password.footer();
 464                         var $body = one.main.admin.password.body(id);;
 465                         var $modal = one.lib.modal.spawn(one.main.admin.id.modal.password.modal,
 466                                 h3, $body, footer);
 467
 468                         // cancel binding
 469                         $('#'+one.main.admin.id.modal.password.cancel, $modal).click(function() {
 470                                 $modal.modal('hide');
 471                         });
 472
 473                         // change password binding
 474                         $('#'+one.main.admin.id.modal.password.submit, $modal).click(function() {
 475                                 one.main.admin.password.submit(id, $modal, function(result) {
 476                                         if (result.code == 'SUCCESS') {
 477                                                 $modal.modal('hide');
 478                                                 successCallback();
 479                                         } else {
 480                                                 alert(result.code+': '+result.description);
 481                                         }
 482                                 });
 483                         });
 484
 485                         $modal.modal();
 486                 },
 487                 submit : function(id, $modal, callback) {
 488                         var resource = {};
 489                         resource.newPassword = $('#'+one.main.admin.id.modal.password.form.set, $modal).val();
 490
 491                         // verify password
 492                         var verify = $('#'+one.main.admin.id.modal.password.form.verify, $modal).val();
 493                         if (verify != resource.newPassword) {
 494                                 alert('Passwords do not match');
 495                                 return false;
 496                         }
 497
 498                         resource.currentPassword = $('#'+one.main.admin.id.modal.password.form.old, $modal).val();
 499
 500                         $.post(one.main.admin.address.password+id, resource, function(data) {
 501                                 callback(data);
 502                         });
 503                 },
 504                 body : function(id) {
 505                         var $form = $(document.createElement('form'));
 506                         var $fieldset = $(document.createElement('fieldset'));
 507                         // user
 508                         var $label = one.lib.form.label('Username');
 509                         var $input = one.lib.form.input('');
 510                         $input.attr('disabled', 'disabled');
 511                         $input.val(id);
 512                         $fieldset.append($label)
 513                                 .append($input);
 514                         // old password
 515             var $label = one.lib.form.label('Old Password');
 516             var $input = one.lib.form.input('Old Password');
 517             $input.attr('id', one.main.admin.id.modal.password.form.old);
 518             $input.attr('type', 'password');
 519             $fieldset.append($label).append($input);
 520                         // new password
 521             var $label = one.lib.form.label('New Password');
 522             var $input = one.lib.form.input('New Password');
 523             $input.attr('id', one.main.admin.id.modal.password.form.set);
 524             $input.attr('type', 'password');
 525             $fieldset.append($label).append($input);
 526                         // verify new password
 527                         var $label = one.lib.form.label('Verify Password');
 528                         var $input = one.lib.form.input('Verify Password');
 529                         $input.attr('id', one.main.admin.id.modal.password.form.verify);
 530                         $input.attr('type', 'password');
 531                         $fieldset.append($label).append($input);
 532                         // return
 533                         $form.append($fieldset);
 534                         return $form;
 535                 },
 536                 footer : function() {
 537                         var footer = [];
 538                         var submit = one.lib.dashlet.button.single('Submit',
 539                                 one.main.admin.id.modal.password.submit, 'btn-primary', '');
 540                         var $submit = one.lib.dashlet.button.button(submit);
 541                         footer.push($submit);
 542                         var cancel = one.lib.dashlet.button.single('Cancel',
 543                                 one.main.admin.id.modal.password.cancel, '', '');
 544                         var $cancel = one.lib.dashlet.button.button(cancel);
 545                         footer.push($cancel);
 546                         return footer;
 547                 }
 548         }
 549 }
 550
 551 one.main.dashlet = {
 552     left : {
 553         top : $("#left-top .dashlet"),
 554         bottom : $("#left-bottom .dashlet")
 555     },
 556     right : {
 557         bottom : $("#right-bottom .dashlet")
 558     }
 559 }
 560
 561 /** BOOTSTRAP */
 562 $(".modal").on('hidden', function() {
 563     $(this).remove();
 564 });
 565
 566 $("#alert .close").click(function() {
 567     $("#alert").hide();
 568 });
 569
 570 /** INIT */
 571
 572 // parse role
 573 one.role = $('#admin').data('role');
 574
 575 // user admin
 576 $("#admin").click(function() {
 577     one.main.admin.modal.initialize(function($modal) {
 578         $modal.modal();
 579     });
 580 });
 581
 582 // save
 583 $("#save").click(function() {
 584     $.post(one.main.constants.address.save, function(data) {
 585         if (data == "Success") {
 586             one.lib.alert("Configuration Saved");
 587         } else {
 588             one.lib.alert("Unable to save configuration: " + data);
 589         }
 590     });
 591 });
 592
 593 // logout
 594 $("#logout").click(function() {
 595     location.href = "/logout";
 596 });
 597
 598 $.ajaxSetup({
 599     complete : function(xhr, textStatus) {
 600         var mime = xhr.getResponseHeader('Content-Type');
 601         if (mime.substring(0, 9) == 'text/html') {
 602             location.href = '/';
 603         }
 604     }
 605 });
 606
 607 /** MAIN PAGE LOAD */
 608 one.main.menu.load();