gerrit.onap Code Review - ccsdk/cds.git/blob

   1 <div class="scrollWrapper">
   2     <div class="row m-0">
   3         <div class="col">
   4             <div class="form-group">
   5                 <label for="exampleInputEmail1">Function Instance Name</label>
   6                 <input disabled type="text" [(ngModel)]="currentFuncion['instance-name']" class="form-control"
   7                     placeholder="Function Instance Name">
   8             </div>
   9             <div class="form-group mb-0">
  10                 <label>Function Type</label>
  11                 <label class="attribute-value">{{currentFuncion['type']}}</label>
  12             </div>
  13             <div class="form-group">
  14                 <label for="exampleFormControlTextarea1">Description</label>
  15                 <textarea [(ngModel)]="currentFuncion['description']" class="form-control"
  16                     id="exampleFormControlTextarea1" rows="3"></textarea>
  17             </div>
  18         </div>
  19     </div>
  20
  21     <div class="accordion function-accordion" id="accordionExample">
  22         <!--INTERFACES-->
  23         <div class="card">
  24             <div class="card-header" id="headingOne">
  25                 <h2 class="mb-0">
  26                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
  27                         aria-expanded="true" aria-controls="collapseOne">
  28                         Interfaces
  29                     </button>
  30                 </h2>
  31             </div>
  32
  33             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
  34                 <div class="card-body">
  35                     <!--Inputs & Outputs Tabs-->
  36                     <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
  37                         <li class="nav-item" role="presentation">
  38                             <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
  39                                 role="tab" aria-controls="pills-home" aria-selected="true">Inputs</a>
  40                         </li>
  41                         <li class="nav-item" role="presentation">
  42                             <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
  43                                 role="tab" aria-controls="pills-profile" aria-selected="false">Outputs</a>
  44                         </li>
  45                     </ul>
  46                     <div class="tab-content" id="pills-tabContent">
  47                         <!--Inputs-->
  48                         <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
  49                             aria-labelledby="pills-home-tab">
  50                             <div class="row">
  51                                 <div class="col">
  52                                     <!--list-->
  53                                     <div class="attribute-wrap" [hidden]="!artifactPrefix">
  54                                         <div class="form-group">
  55                                             <label for="exampleFormControlTextarea">artifact-prefix-names
  56                                                 <i class="icon-required-star" type="button"
  57                                                     aria-hidden="true"></i></label>
  58                                         </div>
  59                                         <div class="custom-control custom-radio custom-control-inline">
  60                                             <input type="radio" id="functionRadioInline" name="functionRadioInline"
  61                                                 [checked]="!currentFuncion['inputs']['artifact-prefix-names']?.get_input"
  62                                                 (click)="setArtifact(true)" class="custom-control-input">
  63                                             <label class="custom-control-label" for="functionRadioInline">Pre-defined
  64                                                 Template</label>
  65                                         </div>
  66                                         <div class="custom-control custom-radio custom-control-inline">
  67                                             <input
  68                                                 [checked]="currentFuncion['inputs']['artifact-prefix-names']?.get_input"
  69                                                 (click)="setArtifact(false)" type="radio" id="functionRadioInline-a"
  70                                                 name="functionRadioInline" class="custom-control-input">
  71                                             <label class="custom-control-label" for="functionRadioInline-a">Input Drivin
  72                                                 Template</label>
  73                                         </div>
  74                                         <br />
  75                                         <button (click)="init()" type="button" data-toggle="modal"
  76                                             data-target="#templateModal" class="btn btn-select-template m-auto"><i
  77                                                 class="icon-add-circle" type="button" aria-hidden="true"></i> Select
  78                                             Template</button>
  79                                     </div>
  80
  81                                     <div class="attribute-wrap"
  82                                         *ngFor="let requiredInput of getKeys(requiredInputs); let i=index">
  83                                         <!--string-->
  84                                         <div *ngIf="getValue(requiredInput,requiredInputs).type=='string' || getValue(requiredInput,requiredInputs).type=='json'"
  85                                             class="form-group">
  86                                             <label for="exampleInputEmail1">{{ requiredInput }}<i
  87                                                     class="icon-required-star" type="button"
  88                                                     [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
  89                                                     aria-hidden="true"></i></label>
  90                                             <input [(ngModel)]="currentFuncion['inputs'][requiredInput]"
  91                                                 (focusout)="saveFunctionData()" type="text" class="form-control">
  92                                         </div>
  93                                         <!--JSON
  94                                         <div *ngIf="getValue(requiredInput,requiredInputs).type=='json'"
  95                                             class="form-group">
  96                                             <label for="exampleInputEmail1">{{ requiredInput }}<i
  97                                                     class="icon-required-star"
  98                                                     [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
  99                                                     aria-hidden="true"></i></label>
 100                                             <textarea style="height: 120px;" (change)="bind(requiredInput,$event)"
 101                                                 [value]="currentFuncion['inputs'][requiredInput]"
 102                                                 class="form-control"></textarea>
 103                                         </div>-->
 104                                         <!-- Integer -->
 105                                         <div class="form-group"
 106                                             *ngIf="getValue(requiredInput,requiredInputs).type=='integer'">
 107                                             <label for="exampleInputEmail1">{{ requiredInput }} <i
 108                                                     class="icon-required-star" type="button"
 109                                                     [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
 110                                                     aria-hidden="true"></i></label>
 111                                             <input [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="number"
 112                                                 (focusout)="saveFunctionData()" class="form-control" placeholder="">
 113                                         </div>
 114                                         <!--boolean-->
 115                                         <!-- <div *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'"> -->
 116                                         <div *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'">
 117                                             <div class="form-group">
 118                                                 <label for="exampleFormControlTextarea1">{{ requiredInput }}
 119                                                     <i class="icon-required-star" type="button"
 120                                                         [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
 121                                                         aria-hidden="true"></i></label><br />
 122                                             </div>
 123                                             <div class="custom-control custom-radio custom-control-inline">
 124                                                 <input [value]="true"
 125                                                     [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio"
 126                                                     id="{{'functionRadioInline' + i}}" (focusout)="saveFunctionData()"
 127                                                     name="{{'functionRadioInline' + i}}" class="custom-control-input">
 128                                                 <label class="custom-control-label"
 129                                                     for="{{'functionRadioInline' + i}}">True</label>
 130                                             </div>
 131                                             <div class="custom-control custom-radio custom-control-inline">
 132                                                 <input [value]="false"
 133                                                     [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio"
 134                                                     id="{{'functionRadioInline' + i+'-a'}}"
 135                                                     (focusout)="saveFunctionData()" name="{{'functionRadioInline' + i}}"
 136                                                     class="custom-control-input">
 137                                                 <label class="custom-control-label"
 138                                                     for="{{'functionRadioInline' + i+'-a'}}">False</label>
 139                                             </div>
 140                                         </div>
 141                                         <!-- </div> -->
 142                                     </div>
 143
 144                                     <!--integer-->
 145                                     <!-- <div class="attribute-wrap">
 146
 147                                     </div> -->
 148
 149                                 </div>
 150                             </div>
 151                             <!-- Add Optional Attributes button -->
 152                             <div class="row">
 153                                 <div class="col p-0">
 154                                     <div class="optional-attributes-menu">
 155                                         <div class="dropdown">
 156                                             <input class="dropdown-toggle" type="text">
 157                                             <div class="dropdown-text">
 158                                                 <i class="icon-add-circle" type="button" aria-hidden="true"></i> Add
 159                                                 Optional Attributes
 160                                             </div>
 161                                             <ul class="dropdown-content save-blueprint">
 162                                                 <li *ngFor="let optionalInput of getKeys(OptionalInputs)">
 163                                                     <a (click)="addToInputs(optionalInput)">{{ optionalInput }}</a>
 164                                                     <i (click)="addToInputs(optionalInput)"
 165                                                         class="icon-add-circle float-right" type="button"
 166                                                         aria-hidden="true"></i>
 167                                                 </li>
 168                                             </ul>
 169                                         </div>
 170                                     </div>
 171                                 </div>
 172                             </div>
 173                         </div>
 174                         <!--Outputs-->
 175                         <!-- Optional params -->
 176                         <div class="tab-pane fade" id="pills-profile" role="tabpanel"
 177                             aria-labelledby="pills-profile-tab">
 178                             <div class="attribute-wrap" *ngFor="let requiredOutput of getKeys(requiredOutputs)">
 179                                 <div class="form-group">
 180                                     <label for="exampleInputEmail1">{{ requiredOutput }} <i class="icon-required-star"
 181                                             type="button" aria-hidden="true"></i></label>
 182                                     <input [(ngModel)]="currentFuncion['outputs'][requiredOutput]" type=" text"
 183                                         (focusout)="saveFunctionData()" class="form-control">
 184                                 </div>
 185                             </div>
 186                         </div>
 187                     </div>
 188                 </div>
 189             </div>
 190         </div>
 191         <!--ARTIFACTS-->
 192         <div class="card" [hidden]="finalTemplates.size == 0" class="accordion" id="accordionExample1">
 193             <div class="card-header" id="headingTwo">
 194                 <h2 class="mb-0">
 195                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
 196                         aria-expanded="true" aria-controls="collapseTwo">
 197                         Artifacts
 198                     </button>
 199                 </h2>
 200             </div>
 201             <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
 202                 <div class="card-body">
 203                     <div class="row">
 204                         <div class="col-12" *ngFor="let file of  getKeys(finalTemplates)">
 205                             <a class="template-mapping-list">
 206                                 <p>{{file}}</p>
 207                                 <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
 208                                 <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
 209
 210                                 <a data-toggle="modal" (click)="fileToDelete = file"
 211                                     data-target="#templateDeletionModal" class="accordion-delete deleteTemplate"
 212                                     title="Delete Template"><i class="icon-delete-sm"></i></a>
 213                             </a>
 214
 215                         </div>
 216                     </div>
 217                 </div>
 218             </div>
 219         </div>
 220     </div>
 221     <br />
 222     <!-- <button class="btn btn-select-template m-auto" (click)="saveFunctionData()">Save</button> -->
 223 </div>
 224
 225 <!--function - Select Template - Modal-->
 226 <div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalTitle"
 227     aria-hidden="true">
 228     <div class="modal-dialog modal-dialog-scrollable" role="document">
 229         <div class="modal-content">
 230             <div class="modal-header">
 231                 <h5 class="modal-title" id="templateModalTitle">
 232                     Select Pre-defined Tempalte Name</h5>
 233                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 234                     <img src="assets/img/icon-close.svg" />
 235                 </button>
 236             </div>
 237             <div class="modal-body createAttributeTabs">
 238                 <div class="row">
 239                     <div class="col-6" *ngFor="let file of  getKeys(templateAndMappingMap)">
 240                         <a class="template-mapping-list float" [class.active]="selectedTemplates.has(file)">
 241                             <i *ngIf="selectedTemplates.has(file)" class="fa fa-check mx-1"></i>
 242                             <p (click)="setTemplate(file)">{{file}}</p>
 243                             <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
 244                             <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
 245                         </a>
 246                     </div>
 247                 </div>
 248
 249             </div>
 250             <div class="modal-footer">
 251                 <button type="button" class="btn btn-secondary" (click)="cancel()" data-dismiss="modal">Cancel</button>
 252                 <button type="button" class="btn btn-primary" data-dismiss="modal"
 253                     (click)="addTemplates()">Save</button>
 254             </div>
 255         </div>
 256     </div>
 257 </div>
 258
 259 <!-- Delete Modal -->
 260 <div class="modal fade" id="templateDeletionModal" tabindex="-1" role="dialog"
 261     aria-labelledby="templateDeletionModalLabel" aria-hidden="true">
 262     <div class="modal-dialog" role="document">
 263         <div class="modal-content">
 264             <div class="modal-header">
 265                 <h5 class="modal-title" id="templateDeletionModalLabel">Delete Script</h5>
 266                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 267                     <img src="assets/img/icon-close.svg" />
 268                 </button>
 269             </div>
 270             <div class="modal-body">
 271                 <p>Are you sure you want to delete Template file
 272                     <span>{{fileToDelete}}</span>?
 273                 </p>
 274             </div>
 275             <div class="modal-footer">
 276                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 277                 <button type="button" (click)="setTemplate(fileToDelete)" data-dismiss="modal"
 278                     class="btn btn-primary">Delete</button>
 279             </div>
 280         </div>
 281     </div>
 282 </div>