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

   1 <div class="import-container-all">
   2     <div class="import-container">
   3         <div class="import-container-input">
   4             <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL then ENTER" type="input">
   5             <a class="enter-link" href="#"><i class="icon-enter-link"></i></a>
   6         </div>
   7         <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
   8                 (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span>
   9
  10     </div>
  11
  12     <div class="accordion">
  13         <!-- <div class="card creat-card">
  14             <div class="single-line">
  15                 <label class="label-name">File</label>
  16             </div>
  17         </div> -->
  18         <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script">
  19
  20             <div class="card">
  21                 <div [id]="'head-script-'+mapIndex" class="card-header">
  22                     <h5 class="mb-0 d-flex justify-content-between">
  23                         <button (click)="changeDivShow(mapIndex)"
  24                             aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse">
  25                             <i class="icon-file-code"></i> {{file.key}}
  26                         </button>
  27                         <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
  28                                 class="icon-delete-sm"></i></a>
  29                         <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
  30                                     class="icon-delete-sm"></i></a> -->
  31                         <!-- Delete Modal -->
  32                         <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
  33                             aria-labelledby="exampleModalLabel" aria-hidden="true">
  34                             <div class="modal-dialog" role="document">
  35                                 <div class="modal-content">
  36                                     <div class="modal-header">
  37                                         <h5 class="modal-title" id="exampleModalLabel">Delete Script</h5>
  38                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  39                                             <span aria-hidden="true">&times;</span>
  40                                         </button>
  41                                     </div>
  42                                     <div class="modal-body">
  43                                         <p>Are you sure you want to delete script file <span>ConfigDeploy.py</span>?</p>
  44                                     </div>
  45                                     <div class="modal-footer">
  46                                         <button type="button" class="btn btn-secondary"
  47                                             data-dismiss="modal">Cancel</button>
  48                                         <button type="button" class="btn btn-primary">Delete</button>
  49                                     </div>
  50                                 </div>
  51                             </div>
  52                         </div>
  53
  54
  55                     </h5>
  56                 </div>
  57                 <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
  58                     data-parent="#accordion-script">
  59                     <div class="card-body">
  60                         <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'"
  61                             [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'"
  62                             #editor style="height:300px;">
  63                         </ace-editor>
  64                     </div>
  65                 </div>
  66             </div>
  67
  68         </div>
  69     </div>
  70
  71 </div>
  72
  73 <div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
  74     tabindex="-1">
  75     <div class="modal-dialog" role="document">
  76         <div class="modal-content">
  77             <div class="modal-header">
  78                 <h5 class="modal-title" id="scriptsModalLabel">Import File</h5>
  79                 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
  80                     <img src="assets/img/icon-close.svg" />
  81                 </button>
  82             </div>
  83             <div class="modal-body">
  84                 <ngx-file-drop accept=".kt,.py" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
  85                     (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
  86                     <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
  87                         <div class="folder-upload">
  88                             <img src="assets/img/folder-upload.svg" />
  89                         </div>
  90                         <div class="folder-upload-text">
  91                             Drag & Drop file
  92                         </div>
  93                         <div class="folder-upload-text">or
  94                             <button (click)="openFileSelector()" class="btn btn-sm btn-primary" type="button">Browse
  95                                 Files
  96                             </button>
  97                         </div>
  98                         <div class="folder-upload-type">Allowed file type: Kotlin(kt), Python(py)</div>
  99                     </ng-template>
 100                 </ngx-file-drop>
 101                 <div class="upload-table">
 102                     <table class="table">
 103                         <thead>
 104                             <tr *ngFor="let item of uploadedFiles; let i=index">
 105                                 <th width="40"><img src="assets/img/icon-file-code.svg" /></th>
 106                                 <th>{{ item.name }}</th>
 107                                 <th width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th>
 108                             </tr>
 109                         </thead>
 110                     </table>
 111                 </div>
 112             </div>
 113             <div class="modal-footer">
 114                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
 115                     type="button">Cancel
 116                 </button>
 117                 <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
 118                     Import
 119                 </button>
 120             </div>
 121         </div>
 122     </div>
 123 </div>