ui/src/main/webapp/app/BluvalUI/ModifyBlueprintInstance/ModifyBlueprintInstanceTemplate.html

   1 <!--
   2 Copyright (c) 2019 AT&T Intellectual Property. All rights reserved.
   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 <div id="page-content" class="content" style="padding: 25px;">
  18     <style>
  19 $
  20 melon
  21 :
  22
  23 #F97D75
  24
  25  ; $ black
  26 :
  27
  28 #2E3641
  29
  30  ; *
  31
  32 button {
  33     background-color: $melon;
  34     border: 0;
  35     padding: 8px 20px;
  36     color: white;
  37     text-transform: uppercase;
  38     cursor: pointer;
  39     &:
  40     focus
  41     ,
  42     &
  43     :
  44     active
  45     {
  46
  47
  48
  49     outline
  50     :
  51
  52
  53
  54     0;
  55 }
  56
  57 }
  58 ul.ul-layer {
  59     list-style: none;
  60     padding-left: 0;
  61     margin-top: 25px;
  62 }
  63
  64 li.li-layer {
  65     border: 1px solid black;
  66     display: inline-block;
  67     padding: 5px 10px;
  68     margin-right: 5px;
  69     margin-bottom: 5px;
  70     text-transform: capitalize;
  71 }
  72
  73 .fa-close {
  74     cursor: pointer;
  75 }
  76 </style>
  77     <div>
  78         <h1 class="heading-page">Modify Blueprint Instance</h1>
  79
  80         <div>
  81             <div class="form-row">
  82                 <label for="textinputID-3a">Select Blueprint
  83                     Instance: </label> <select
  84                     ng-model="selectedBlueprintInstance"
  85                     ng-change="selectedBlueprintInstanceChange()"
  86                     ng-options="v for v in declerativeInsts">
  87                 </select>
  88             </div>
  89         </div>
  90         <br> <label for="textinputID-3a">Old layers: </label>
  91         <ul class="ul-layer">
  92             <li ng-repeat="oldLayer in oldLayers" class="li-layer">
  93                 {{oldLayer}}</li>
  94         </ul>
  95         <br>
  96
  97         <div ng-show="loadingBlueprintInstances || loadingLayers">
  98             <img src=" static/fusion/images/giphy.gif" />
  99         </div>
 100
 101         <div ng-if="selectedBlueprintInstance">
 102             <label for="textinputID-3a">New Layers: </label>
 103             <div>
 104                 <div class="form-row">
 105                     <label for="textinputID-3a">Add Layer: </label> <select
 106                         ng-model="selectedLayer"
 107                         ng-change="selectedLayerChange()"
 108                         ng-options="v for v in layers">
 109                     </select>
 110                     <button ng-disabled="!selectedLayer"
 111                         ng-click="addConfiguredLayer(selectedLayer)">Add</button>
 112                 </div>
 113             </div>
 114             <br>
 115
 116             <ul class="ul-layer">
 117                 <li ng-repeat="configuredLayer in configuredLayers"
 118                     class="li-layer"><span
 119                     ng-click="deleteConfiguredLayer($index)"><i
 120                         class="fa fa-close"></i></span> {{configuredLayer}}</li>
 121             </ul>
 122
 123             <div class="fn-ebz-container"
 124                 style="position: relative; top: 25px;">
 125                 <button href="javascript:void(0)" id="addbtn"
 126                     style="bottom: -17px;" size="small"
 127                     att-accessibility-click="13,32"
 128                     class="btn btn-alt btn-small" ng-click="modify();">Modify</button>
 129             </div>
 130         </div>
 131     </div>
 132 </div>