openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html

   1 \r
   2 <!-- /* Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *       http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16  -->\r
  17 \r
  18 <!DOCTYPE html>\r
  19 \r
  20 <html>\r
  21 \r
  22 <head lang="en">\r
  23     <meta charset="UTF-8">\r
  24     <title></title>\r
  25     <link href="css/bootstrap.min.css" rel="stylesheet" />\r
  26     <link href="css/VMMain.css" rel="stylesheet" />\r
  27     <link href="css/bootstrap-table.min.css" rel="stylesheet" />\r
  28     <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
  29     <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
  30     <script type="text/javascript" src="js/brs.js"></script>\r
  31     <script type="text/javascript" src="js/underlay.js"></script>\r
  32     <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
  33     <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>\r
  34     <style>\r
  35         .fixed-table-container tbody td .th-inner,\r
  36         .fixed-table-container thead th .th-inner {\r
  37             line-height: 4px;\r
  38         }\r
  39         .fixed-table-pagination .pagination-info {\r
  40             display: none !important;\r
  41         }\r
  42         .table tbody tr:hover td,\r
  43         .table tbody tr.odd:hover td {\r
  44             background-color: #e6fbe0 !important;\r
  45         }\r
  46         .delete-btn {\r
  47             background: url(delete.png) no-repeat !important;\r
  48             width: 16px;\r
  49             height: 16px;\r
  50             border: none;\r
  51         }\r
  52         table tr.openoTable_row_selected td {\r
  53             background: #e8f8fe!important;\r
  54             border-bottom: 1px solid #e8e8e8!important;\r
  55         }\r
  56         .container-fluid {\r
  57             padding-left: 10px;\r
  58             padding-right: 0px;\r
  59         }\r
  60     </style>\r
  61     <script type="text/javascript">\r
  62     $(document).ready(function() {\r
  63         var jsondata = loadUnderlayData();\r
  64         $('#tbl_overlay').bootstrapTable({\r
  65             //Assigning data to table\r
  66             data: jsondata\r
  67         });\r
  68         $('#underlayTpDataTable').bootstrapTable({\r
  69             //Assigning data to table\r
  70             data: {}\r
  71         });\r
  72         $('.table tbody tr').click(function() {\r
  73                  \r
  74                 $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
  75           });\r
  76 \r
  77             $('#sai').on('sort.bs.table', function () {\r
  78    \r
  79 \r
  80             }).on('click-row.bs.table', function () {\r
  81        \r
  82          \r
  83          $('.table tbody tr').click(function() {\r
  84                     \r
  85                 $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
  86           });\r
  87         \r
  88          });\r
  89     });\r
  90 \r
  91     function operateFormatter(value, row, index) {\r
  92         return [\r
  93             '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'\r
  94         ].join('');\r
  95     }\r
  96     window.operateEvents = {\r
  97         'click .siteDeleteImg': function(e, value, row, index) {\r
  98             // TO DO ajex call for delete\r
  99             console.log(value, row, index);\r
 100         }\r
 101     };\r
 102     /* function nameFormatter(value, row) {\r
 103                 jsonForTP = row.json.data;\r
 104                 var name=JSON.stringify(row.json.data);\r
 105                 var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";\r
 106         return temp;\r
 107     }*/\r
 108     function getMethod(obj) {\r
 109         //Update the lower table here\r
 110         $('#underlayTpDataTable').bootstrapTable(\r
 111             //Assigning data to table\r
 112             "append", JSON.parse(obj.name)\r
 113         );\r
 114     }\r
 115     </script>\r
 116 \r
 117 </head>\r
 118 \r
 119 <body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">\r
 120     <div class="container-fluid ms-controller">\r
 121         <h3>TP Details</h3>\r
 122  <!--        <div class="row-fluid" data-name="table_zone">\r
 123             <div id=''>\r
 124                 <div>\r
 125                     <div class="top">\r
 126                         <table class="table table-striped" id="tbl_overlay" data-pagination="true" data-page-size="5" data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">\r
 127                             <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">\r
 128                                 <tr class="active">\r
 129 \r
 130                                   <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
 131                                         <div class="openo-table-th-border"></div>\r
 132                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 133                                             <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">TP Name\r
 134                     </span>\r
 135                                         </div>\r
 136                                     </th>\r
 137                                     <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">\r
 138                                         <div class="openo-table-th-border"></div>\r
 139                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 140                                             <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">PE Name\r
 141                             </span>\r
 142                                         </div>\r
 143                                     </th>\r
 144                                     <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
 145                                         <div class="openo-table-th-border"></div>\r
 146                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 147                                             <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">VLAN ID\r
 148                     </span>\r
 149                                         </div>\r
 150                                     </th>\r
 151                                    <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
 152                                         <div class="openo-table-th-border"></div>\r
 153                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 154                                             <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Site CIDR\r
 155                     </span>\r
 156                                         </div>\r
 157                                     </th>\r
 158                                   <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
 159                                         <div class="openo-table-th-border"></div>\r
 160                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 161                                             <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">IP\r
 162                     </span>\r
 163                                         </div>\r
 164                                     </th>\r
 165 \r
 166                                 </tr>\r
 167                             </thead>\r
 168                             <tbody>\r
 169 \r
 170                                 <tr>\r
 171                                     <td>a_data </td>\r
 172                                     <td>data </td>\r
 173                                     <td>Sample1 </td>\r
 174                                   <td>Sample </td>\r
 175                                     <td>Sample1 </td>\r
 176                                 </tr>\r
 177 \r
 178                               <tr>\r
 179                                     <td>b_data </td>\r
 180                                     <td>new sample </td>\r
 181                                     <td>modified </td>\r
 182                                   <td>Sample </td>\r
 183                                     <td>Sample1 </td>\r
 184                                 </tr>\r
 185 \r
 186                                <tr>\r
 187                                   <td>alarm </td>\r
 188                                     <td>deleted </td>\r
 189                                     <td>Sample </td>\r
 190                                   <td>Sample </td>\r
 191                                     <td>Sample1 </td>\r
 192                                 </tr>\r
 193 \r
 194                                <tr>\r
 195                                     <td>datanew </td>\r
 196                                     <td>Sample </td>\r
 197                                     <td>Sample1 </td>\r
 198                                   <td>Sample </td>\r
 199                                     <td>Sample1 </td>\r
 200                                 </tr>\r
 201                             </tbody>\r
 202 \r
 203                         </table>\r
 204                     </div>\r
 205                 </div>\r
 206             </div>\r
 207         </div> -->\r
 208 \r
 209     <div class="row-fluid" data-name="table_zone">\r
 210         <div id='ict_virtualApplication_table_div'>\r
 211             <div>\r
 212                 <div class="top">\r
 213                     <table class="table-striped table " id="sai" data-pagination="true" data-pagination-first-text="First"\r
 214                            data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last"\r
 215                            data-filter-control="true">\r
 216                         <thead style="background:#ECECEC">\r
 217                         <tr>\r
 218                             <th data-field="tname" data-sortable="true" data-filter-control="input">TP Name</th>\r
 219                             <th data-field="pname" data-sortable="true" data-filter-control="input">PE Name</th>\r
 220                             <th data-field="vlan" data-sortable="true" data-filter-control="input">VLAN ID</th>\r
 221                             <th data-field="site" data-sortable="true" data-filter-control="input">Site CIDR</th>\r
 222                             <th data-field="ip" data-sortable="true" data-filter-control="input">IP</th>\r
 223                         </tr>\r
 224                         </thead>\r
 225                     </table>\r
 226                 </div>\r
 227             </div>\r
 228         </div>\r
 229     </div>\r
 230 \r
 231        \r
 232 \r
 233     </div>\r
 234 \r
 235 </body>\r
 236 \r
 237 </html>