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" type="input">
   5             <a class="enter-link" href="#"><i class="icon-enter"></i></a>
   6         </div>
   7         <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
   8                 href="#">Import File</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 [attr.aria-controls]="'id-script-'+mapIndex" [attr.data-target]="'#id-script-'+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 (click)="removeFile(mapIndex)" class="accordion-delete"><i class="icon-delete"></i></a>
  28                     </h5>
  29                 </div>
  30                 <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
  31                     data-parent="#accordion-script">
  32                     <div class="card-body">
  33                         <ace-editor [(text)]="file.value" [mode]="'kotlin'" [autoUpdateContent]="true"
  34                             [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
  35                             style="height:300px;">
  36                         </ace-editor>
  37                     </div>
  38                 </div>
  39             </div>
  40
  41         </div>
  42     </div>
  43
  44 </div>
  45
  46 <div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
  47     tabindex="-1">
  48     <div class="modal-dialog" role="document">
  49         <div class="modal-content">
  50             <div class="modal-header">
  51                 <h5 class="modal-title" id="scriptsModalLabel">Import File</h5>
  52                 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
  53                     <span aria-hidden="true">&times;</span>
  54                 </button>
  55             </div>
  56             <div class="modal-body">
  57                 <ngx-file-drop accept=".kt" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
  58                     (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
  59                     <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
  60                         <div class="folder-upload">
  61                             <img src="assets/img/folder-upload.svg" />
  62                         </div>
  63                         <div class="folder-upload-text">
  64                             Drag & Drop file
  65                         </div>
  66                         <div class="folder-upload-text">or
  67                             <button (click)="openFileSelector()" class="btn btn-sm btn-primary" type="button">Browse
  68                                 Files
  69                             </button>
  70                         </div>
  71                         <div class="folder-upload-type">Allowed file type: Kotlin(Kt)</div>
  72                     </ng-template>
  73                 </ngx-file-drop>
  74                 <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
  75                     <table class="table">
  76                         <thead>
  77                             <tr>
  78                                 <th>Name : {{ item.name }}</th>
  79                             </tr>
  80                         </thead>
  81                     </table>
  82                 </div>
  83             </div>
  84             <div class="modal-footer">
  85                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
  86                     type="button">Cancel
  87                 </button>
  88                 <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
  89                     Import
  90                 </button>
  91             </div>
  92         </div>
  93     </div>
  94 </div>