lifecyclemgr/src/main/webapp/lifecyclemgr/newShow.html

   1
   2 <!-- /* Copyright 2016-2017, Huawei Technologies Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *       http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16  -->
  17
  18 <!DOCTYPE html>
  19 <html>
  20
  21 <head>
  22
  23     <head lang="en">
  24         <meta charset="UTF-8">
  25         <title></title>
  26         <link href="css/bootstrap.min.css" rel="stylesheet" />
  27         <link href="css/VMMain.css" rel="stylesheet" />
  28         <link href="css/bootstrap-table.min.css" rel="stylesheet" />
  29         <link rel="import" href="accorTables.html">
  30         <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  31         <script type="text/javascript" src="js/bootstrap.min.js"></script>
  32         <script type="text/javascript" src="js/rest.js"></script>
  33         <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
  34         <!-- <script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js">
  35         </script>
  36         <link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> -->
  37         <script type="text/javascript">
  38         $(document).ready(function() {
  39                     $("#detailCont").show();
  40                     var jsondata = [];
  41                     //jsondata = loadNeData();
  42                     $('#sai').bootstrapTable({
  43                         //Assigning data to table
  44                         data: jsondata
  45                     });
  46                     $('.table tbody tr').click(function() {
  47                         $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
  48                     })
  49                     $('.detail-top ul li').click(function() {
  50                         $(this).addClass('current').siblings().removeClass('current');
  51                     });
  52                     $("#topoCont").hide();
  53                     $("#inpCont").hide();
  54
  55                     function operateFormatter(value, row, index) {
  56                         return [
  57                             '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
  58                         ].join('');
  59                     }
  60                     window.operateEvents = {
  61                         'click .siteDeleteImg': function(e, value, row, index) {
  62                             // TO DO ajex call for delete
  63                             var result = deleteNe(row.id, row);
  64                         }
  65                     };
  66
  67                     function hideBasic() {
  68                         $("#basicInfoTab").hide();
  69                     }
  70
  71                     function showBasic() {
  72                         $("#basicInfoTab").show();
  73                     }
  74
  75                     function showTopoCont() {
  76                         $("#topoCont").show();
  77                         $("#detailCont").hide();
  78                         $("#inpCont").hide();
  79                     }
  80
  81                     function showDetCont() {
  82                         $("#topoCont").hide();
  83                         $("#detailCont").show();
  84                         $("#inpCont").hide();
  85                     }
  86
  87                     function showInpCont() {
  88                         $("#topoCont").hide();
  89                         $("#detailCont").hide();
  90                         $("#inpCont").show();
  91                     }
  92
  93                     function showTopoContMod() {
  94                         $("#topoContMod").show();
  95                         $("#detailContMod").hide();
  96                         $("#inpContMod").hide();
  97                     }
  98
  99                     function showDetContMod() {
 100                         $("#topoContMod").hide();
 101                         $("#detailContMod").show();
 102                         $("#inpContMod").hide();
 103                     }
 104
 105                     function showInpContMod() {
 106                         $("#topoContMod").hide();
 107                         $("#detailContMod").hide();
 108                         $("#inpContMod").show();
 109                     }
 110         </script>
 111
 112         <style>
 113         .nav-tabs {
 114             border-bottom-style: none;
 115         }
 116         .mT15 {
 117             margin-top: 15px;
 118         }
 119         .fixed-table-container tbody td .th-inner,
 120         .fixed-table-container thead th .th-inner {
 121             line-height: 4px;
 122         }
 123         .fixed-table-pagination .pagination-info {
 124             display: none !important;
 125         }
 126         .table tbody tr:hover td,
 127         .table tbody tr.odd:hover td {
 128             background-color: #e6fbe0 !important;
 129         }
 130         /*.fixed-table-pagination .page-list{display:inline-block  !important}*/
 131
 132         .detail-top ul {
 133             background: #F8F6F6 !important;
 134         }
 135         .btn {
 136             padding: 4px;
 137         }
 138         </style>
 139     </head>
 140
 141     <body id="open_base_site_cotentBody" class="cotentBody ng-scope">
 142         <div class="container-fluid ms-controller">
 143             <h3> Life Cycle Manager > Service Info</h3>
 144             <div class="separator-line"></div>
 145
 146             <div class="detail" style="border-radius:5px;">
 147                 <div class="detail-top" style="margin-top:2px;border-radius:5px;">
 148                     <ul>
 149                         <li style="border-radius:5px;" id="detHov" class="current" onClick="showDetCont();">Detail Info</li>
 150                         <li style="border-radius:5px;" nClick="showTopoCont();">topo</li>
 151                         <li style="border-radius:5px;" onClick="showInpCont();">InputData</li>
 152                     </ul>
 153                 </div>
 154
 155                 <div style="border-radius:5px;">
 156                     <div id="detailCont" style="display:none;">
 157
 158                         <object data="accorTables.html" width="100%" height="300" type="text/html">
 159
 160                         </object>
 161                     </div>
 162                     <div id="topoCont" style="display:none;">downnn</div>
 163                     <div id="inpCont" style="display:none;">
 164                         <iframe src="inputData.html" name="" allowTransparency="true" scrolling="no" frameborder="0">
 165                         </iframe>
 166                     </div>
 167                 </div>
 168
 169                 <div class="detail-bottom"></div>
 170             </div>
 171
 172         </div>
 173         </br>
 174
 175         </div>
 176
 177     </body>
 178
 179 </html>