diff options
Diffstat (limited to 'lifecyclemgr/src/main/webapp/lifecyclemgr/bak/underlayvpn.html')
| -rw-r--r-- | lifecyclemgr/src/main/webapp/lifecyclemgr/bak/underlayvpn.html | 291 |
1 files changed, 291 insertions, 0 deletions
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/underlayvpn.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/underlayvpn.html new file mode 100644 index 00000000..634901f6 --- /dev/null +++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/underlayvpn.html @@ -0,0 +1,291 @@ +<!-- + + Copyright 2016-2017, Huawei Technologies Co., Ltd. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + +<!DOCTYPE html> +<html> +<head> + <head lang="en"> + <meta charset="UTF-8"> + <title></title> + <link href="css/bootstrap.min.css" rel="stylesheet"/> + <link href="css/jquery.dataTables.min.css" rel="stylesheet"/> + <link href="css/VMMain.css" rel="stylesheet"/> + <link href="css/bootstrap-table.min.css" rel="stylesheet"/> + <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> + <script type="text/javascript" src="js/bootstrap.min.js"></script> + <script type="text/javascript" src="js/brs.js"></script> + <script type="text/javascript" src="js/underlay.js"></script> + <script type="text/javascript" src="js/bootstrap-table.min.js"></script> + <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script> + <style> + .dropdown-menu { + min-width: 10px; + } + .btn { + padding: 4px; + } + + .fixed-table-container tbody td .th-inner, + .fixed-table-container thead th .th-inner { + line-height: 4px; + } + .fixed-table-pagination .pagination-info { + display: none !important; + } + .table tbody tr:hover td, + .table tbody tr.odd:hover td { + background-color: #e6fbe0 !important; + } + .delete-btn { + background: url(delete.png) no-repeat !important; + width: 16px; + height: 16px; + border: none; + } + table tr.openoTable_row_selected td { + background: #e8f8fe!important; + border-bottom: 1px solid #e8e8e8!important; + } + .container-fluid { + padding-left: 10px; + padding-right: 0px; + } + + .clearfix { + display: none; + } + .page-list{ + float:none !important; + display:inline-block !important; + margin-right: 10px; + vertical-align: middle; + margin-bottom: 25px; + + } + .pull-left{ + float:none !important; + display:inline-block !important; + } + + .pull-right{ + float:none !important; + display:inline-block !important; + } + + .fixed-table-pagination{ + height:20px; + float:right; + } + </style> + <script type="text/javascript"> + $(document).ready(function () { + + + var jsondata = loadUnderlayData(); + $('#tbl_overlay').bootstrapTable({ + //Assigning data to table + data: jsondata + }); + $('#underlayTpDataTable').bootstrapTable({ + //Assigning data to table + data: {} + }); + $('.table tbody tr').click(function () { + $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected'); + }); + + $('#sai').on('sort.bs.table', function () { + + + }).on('click-row.bs.table', function () { + + + $('.table tbody tr').click(function() { + + $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected'); + }); + + }); + + var serviceId = getQueryStringValue("serviceId"); + console.log("underlayvpn - serviceId : " + serviceId); + + }); + + function getQueryStringValue (key) { + var params = new URLSearchParams(window.location.search.slice(1)); + return params.get(key); + } + + function operateFormatter(value, row, index) { + return [ + '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />' + ].join(''); + } + window.operateEvents = { + 'click .siteDeleteImg': function(e, value, row, index) { + // TO DO ajex call for delete + console.log(value, row, index); + } + }; + /* function nameFormatter(value, row) { + jsonForTP = row.json.data; + var name=JSON.stringify(row.json.data); + var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>"; + return temp; + }*/ + function getMethod(obj) { + //Update the lower table here + $('#underlayTpDataTable').bootstrapTable( + //Assigning data to table + "append", JSON.parse(obj.name) + ); + } + </script> + +</head> + +<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope"> + <div class="container-fluid ms-controller"> + <h3>Underlay VPN</h3> + <!-- <div class="row-fluid" data-name="table_zone"> + <div id='ict_virtualApplication_table_div'> + <div> + <div class="top"> + <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"> + <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC"> + <tr class="active"> + + <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-formatter="nameFormatter" data-field="underlayName" data-sortable="true"> + <div class="openo-table-th-border"></div> + <div class="DataTables_sort_wrapper openo-ellipsis "> + <span id="underlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">Name + </span> + </div> + </th> + <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName" data-sortable="true"> + <div class="openo-table-th-border"></div> + <div class="DataTables_sort_wrapper openo-ellipsis "> + <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">State + </span> + </div> + </th> + <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true"> + <div class="openo-table-th-border"></div> + <div class="DataTables_sort_wrapper openo-ellipsis "> + <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Description + </span> + </div> + </th> + <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayDescription" align="center" data-formatter="operateFormatter" data-events="operateEvents"> + <div class="openo-table-th-border"></div> + <div class="DataTables_sort_wrapper openo-ellipsis "> + <span id="underlayDescription_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action + </span> + </div> + </th> + + </tr> + </thead> + <tbody> + + <tr> + <td>a_data </td> + <td>data </td> + <td>Sample1 </td> + <td> + <button class="table-btn delete-btn"></button> + </td> + </tr> + + <tr> + <td>b_data </td> + <td>new sample </td> + <td>modified </td> + <td> + <button class="table-btn delete-btn"></button> + </td> + </tr> + + <tr> + <td>data </td> + <td>updated </td> + <td>Sample </td> + <td> + <button class="table-btn delete-btn"></button> + </td> + </tr> + + <tr> + <td>alarm </td> + <td>deleted </td> + <td>Sample </td> + <td> + <button class="table-btn delete-btn"></button> + </td> + </tr> + </tbody> + + </table> + </div> + </div> + </div> + </div> + --> + + <div class="row-fluid" data-name="table_zone"> + <div id='ict_virtualApplication_table_div'> + <div> + <div class="top"> + <table class="table-striped table " id="sai" data-pagination="true" data-pagination-first-text="First" + data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last" + data-filter-control="true"> + <thead style="background:#ECECEC"> + <tr> + <th data-field="name" data-sortable="true" data-filter-control="input">Name</th> + <th data-field="state" data-sortable="true" data-filter-control="input">State</th> + <th data-field="desc" data-sortable="true" data-filter-control="input">Description</th> + <th data-field="action" data-sortable="">Action</th> + </tr> + </thead> + </table> + </div> + </div> + </div> + </div> + + <div id="tpDiv"> + <iframe src="UnderLay_TP.html" style="width:100%;height:450px;" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0"> + </iframe> + </div> + <div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide" + style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;"> + <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_0"><label + class="openo-ellipsis openo-select-blank-item" style="width: 100%; display: block; height: 20px;"></label> + </div> + <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_1"><label + class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">ETH</label></div> + <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_2"><label + class="openo-ellipsis " style="width: 100%; display: block; height: 20px;" title="POS">POS</label></div> + <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_3"><label + class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Trunk</label></div> + <div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_4"><label + class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Loopback</label></div> + </div> +</body> +</html>
\ No newline at end of file |