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