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                 }
 129             },
 130             remove : {
 131                 user : "one_main_admin_id_modal_remove_user",
 132                 close : "one_main_admin_id_modal_remove_close"
 133             }
 134         },
 135         add : {
 136             user : "one_main_admin_id_add_user"
 137         }
 138     },
 139     address : {
 140         root : "/admin",
 141         users : "/users"
 142     },
 143     modal : {
 144         initialize : function(callback) {
 145             var h3 = "Welcome " + $('#admin').text();
 146             var footer = one.main.admin.modal.footer();
 147             var $modal = one.lib.modal.spawn(one.main.admin.id.modal.main, h3,
 148                     '', footer);
 149
 150             // close binding
 151             $('#' + one.main.admin.id.modal.close, $modal).click(function() {
 152                 $modal.modal('hide');
 153             });
 154
 155             // body inject
 156             one.main.admin.ajax.users(function($body) {
 157                 one.lib.modal.inject.body($modal, $body);
 158             });
 159
 160             // modal show callback
 161             callback($modal);
 162         },
 163         footer : function() {
 164             var footer = [];
 165
 166             var closeButton = one.lib.dashlet.button.single("Close",
 167                     one.main.admin.id.modal.close, "", "");
 168             var $closeButton = one.lib.dashlet.button.button(closeButton);
 169             footer.push($closeButton);
 170
 171             return footer;
 172         }
 173     },
 174     ajax : {
 175         users : function(callback) {
 176             $.getJSON(one.main.admin.address.root
 177                     + one.main.admin.address.users, function(data) {
 178                 var body = one.main.admin.data.users(data);
 179                 var $body = one.main.admin.body.users(body);
 180                 callback($body);
 181             });
 182         }
 183     },
 184     data : {
 185         users : function(data) {
 186             var body = [];
 187             $(data).each(function(index, value) {
 188                 var tr = {};
 189                 var entry = [];
 190                 entry.push(value['user']);
 191                 entry.push(value['role']);
 192                 tr['entry'] = entry;
 193                 tr['id'] = value['user'];
 194                 body.push(tr);
 195             });
 196             return body;
 197         }
 198     },
 199     body : {
 200         users : function(body) {
 201             var $div = $(document.createElement('div'));
 202             var $h5 = $(document.createElement('h5'));
 203             $h5.append("Manage Users");
 204             var attributes = [ "table-striped", "table-bordered",
 205                     "table-hover", "table-cursor" ];
 206             var $table = one.lib.dashlet.table.table(attributes);
 207             var headers = [ "User", "Role" ];
 208             var $thead = one.lib.dashlet.table.header(headers);
 209             var $tbody = one.lib.dashlet.table.body(body);
 210             $table.append($thead).append($tbody);
 211
 212             // bind table
 213             if (one.role < 2) {
 214                 $table.find('tr').click(function() {
 215                     var id = $(this).data('id');
 216                     one.main.admin.remove.modal.initialize(id);
 217                 });
 218             }
 219
 220             // append to div
 221             $div.append($h5).append($table);
 222
 223             if (one.role < 2) {
 224                 var addUserButton = one.lib.dashlet.button.single("Add User",
 225                         one.main.admin.id.add.user, "btn-primary", "btn-mini");
 226                 var $addUserButton = one.lib.dashlet.button
 227                         .button(addUserButton);
 228                 $div.append($addUserButton);
 229
 230                 // add user binding
 231                 $addUserButton.click(function() {
 232                     one.main.admin.add.modal.initialize();
 233                 });
 234             }
 235
 236             return $div;
 237         }
 238     },
 239     remove : {
 240         modal : {
 241             initialize : function(id) {
 242                 var h3 = "Remove User";
 243                 var footer = one.main.admin.remove.footer();
 244                 var $body = one.main.admin.remove.body();
 245                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user,
 246                         h3, $body, footer);
 247
 248                 // close binding
 249                 $('#' + one.main.admin.id.modal.remove.close, $modal).click(
 250                         function() {
 251                             $modal.modal('hide');
 252                         });
 253
 254                 // remove binding
 255                 $('#' + one.main.admin.id.modal.remove.user, $modal)
 256                         .click(
 257                                 function() {
 258                                     one.main.admin.remove.modal
 259                                             .ajax(
 260                                                     id,
 261                                                     function(result) {
 262                                                         if (result == 'Success') {
 263                                                             $modal
 264                                                                     .modal('hide');
 265                                                             // body inject
 266                                                             var $admin = $('#'
 267                                                                     + one.main.admin.id.modal.main);
 268                                                             one.main.admin.ajax
 269                                                                     .users(function($body) {
 270                                                                         one.lib.modal.inject
 271                                                                                 .body(
 272                                                                                         $admin,
 273                                                                                         $body);
 274                                                                     });
 275                                                         } else
 276                                                             alert("Failed to remove user: "
 277                                                                     + result);
 278                                                     });
 279                                 });
 280
 281                 $modal.modal();
 282             },
 283             ajax : function(id, callback) {
 284                 $.post(one.main.admin.address.root
 285                         + one.main.admin.address.users + '/' + id,
 286                         function(data) {
 287                             callback(data);
 288                         });
 289             },
 290         },
 291
 292         footer : function() {
 293             var footer = [];
 294
 295             var removeButton = one.lib.dashlet.button.single("Remove User",
 296                     one.main.admin.id.modal.remove.user, "btn-danger", "");
 297             var $removeButton = one.lib.dashlet.button.button(removeButton);
 298             footer.push($removeButton);
 299
 300             var closeButton = one.lib.dashlet.button.single("Close",
 301                     one.main.admin.id.modal.remove.close, "", "");
 302             var $closeButton = one.lib.dashlet.button.button(closeButton);
 303             footer.push($closeButton);
 304
 305             return footer;
 306         },
 307         body : function() {
 308             var $p = $(document.createElement('p'));
 309             $p.append("Remove user?");
 310             return $p;
 311         },
 312     },
 313     add : {
 314         modal : {
 315             initialize : function() {
 316                 var h3 = "Add User";
 317                 var footer = one.main.admin.add.footer();
 318                 var $body = one.main.admin.add.body();
 319                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user,
 320                         h3, $body, footer);
 321
 322                 // close binding
 323                 $('#' + one.main.admin.id.modal.add.close, $modal).click(
 324                         function() {
 325                             $modal.modal('hide');
 326                         });
 327
 328                 // add binding
 329                 $('#' + one.main.admin.id.modal.add.user, $modal)
 330                         .click(
 331                                 function() {
 332                                     one.main.admin.add.modal
 333                                             .add(
 334                                                     $modal,
 335                                                     function(result) {
 336                                                         if (result == 'Success') {
 337                                                             $modal
 338                                                                     .modal('hide');
 339                                                             // body inject
 340                                                             var $admin = $('#'
 341                                                                     + one.main.admin.id.modal.main);
 342                                                             one.main.admin.ajax
 343                                                                     .users(function($body) {
 344                                                                         one.lib.modal.inject
 345                                                                                 .body(
 346                                                                                         $admin,
 347                                                                                         $body);
 348                                                                     });
 349                                                         } else
 350                                                             alert("Failed to add user: "
 351                                                                     + result);
 352                                                     });
 353                                 });
 354
 355                 $modal.modal();
 356             },
 357             add : function($modal, callback) {
 358                 var user = {};
 359                 user['user'] = $modal.find(
 360                         '#' + one.main.admin.id.modal.add.form.name).val();
 361                 user['password'] = $modal.find(
 362                         '#' + one.main.admin.id.modal.add.form.password).val();
 363                 user['role'] = $modal.find(
 364                         '#' + one.main.admin.id.modal.add.form.role).find(
 365                         'option:selected').attr('value');
 366
 367                 var resource = {};
 368                 resource['json'] = JSON.stringify(user);
 369                 resource['action'] = 'add'
 370
 371                 one.main.admin.add.modal.ajax(resource, callback);
 372             },
 373             ajax : function(data, callback) {
 374                 $.post(one.main.admin.address.root
 375                         + one.main.admin.address.users, data, function(data) {
 376                     callback(data);
 377                 });
 378             }
 379         },
 380         body : function() {
 381             var $form = $(document.createElement('form'));
 382             var $fieldset = $(document.createElement('fieldset'));
 383             // user
 384             var $label = one.lib.form.label('Username');
 385             var $input = one.lib.form.input('Username');
 386             $input.attr('id', one.main.admin.id.modal.add.form.name);
 387             $fieldset.append($label).append($input);
 388             // password
 389             var $label = one.lib.form.label('Password');
 390             var $input = one.lib.form.input('Password');
 391             $input.attr('id', one.main.admin.id.modal.add.form.password);
 392             $input.attr('type', 'password');
 393             $fieldset.append($label).append($input);
 394             // roles
 395             var $label = one.lib.form.label('Roles');
 396             var options = {
 397                 "Network-Admin" : "Network Administrator",
 398                 "Network-Operator" : "Network Operator"
 399             };
 400             var $select = one.lib.form.select.create(options);
 401             $select.attr('id', one.main.admin.id.modal.add.form.role);
 402             $fieldset.append($label).append($select);
 403             $form.append($fieldset);
 404             return $form;
 405         },
 406         footer : function() {
 407             var footer = [];
 408
 409             var addButton = one.lib.dashlet.button.single("Add User",
 410                     one.main.admin.id.modal.add.user, "btn-primary", "");
 411             var $addButton = one.lib.dashlet.button.button(addButton);
 412             footer.push($addButton);
 413
 414             var closeButton = one.lib.dashlet.button.single("Close",
 415                     one.main.admin.id.modal.add.close, "", "");
 416             var $closeButton = one.lib.dashlet.button.button(closeButton);
 417             footer.push($closeButton);
 418
 419             return footer;
 420         }
 421     }
 422 }
 423
 424 one.main.dashlet = {
 425     left : {
 426         top : $("#left-top .dashlet"),
 427         bottom : $("#left-bottom .dashlet")
 428     },
 429     right : {
 430         bottom : $("#right-bottom .dashlet")
 431     }
 432 }
 433
 434 /** BOOTSTRAP */
 435 $(".modal").on('hidden', function() {
 436     $(this).remove();
 437 });
 438
 439 $("#alert .close").click(function() {
 440     $("#alert").hide();
 441 });
 442
 443 /** INIT */
 444
 445 // parse role
 446 one.role = $('#admin').data('role');
 447
 448 // user admin
 449 $("#admin").click(function() {
 450     one.main.admin.modal.initialize(function($modal) {
 451         $modal.modal();
 452     });
 453 });
 454
 455 // save
 456 $("#save").click(function() {
 457     $.post(one.main.constants.address.save, function(data) {
 458         if (data == "Success") {
 459             one.lib.alert("Configuration Saved");
 460         } else {
 461             one.lib.alert("Unable to save configuration: " + data);
 462         }
 463     });
 464 });
 465
 466 // logout
 467 $("#logout").click(function() {
 468     location.href = "/logout";
 469 });
 470
 471 $.ajaxSetup({
 472     complete : function(xhr, textStatus) {
 473         var mime = xhr.getResponseHeader('Content-Type');
 474         if (mime.substring(0, 9) == 'text/html') {
 475             location.href = '/';
 476         }
 477     }
 478 });
 479
 480 /** MAIN PAGE LOAD */
 481 one.main.menu.load();