Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<form [formGroup]="form" novalidate>
<div class="form-group">
<label for="data_path">Data path</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button (click)="openModal(template); $event.stopPropagation()" class="btn btn-outline-secondary" type="button">
<i class="fas fa-folder-open"></i>
</button>
</div>
<input type="text" class="form-control" id="data_path" name="data_path" formControlName="data_path">
</div>
</div>
</form>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">ANIS file explorer</h4>
</div>
<div>
<app-spinner *ngIf="rootDirectoryIsLoading"></app-spinner>
<p class="ml-3 mt-3">
<i class="far fa-folder"></i>
{{ fileExplorerPath }}
</p>
<div *ngIf="rootDirectoryIsLoaded" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th scope="col">Name</th>
<th scope="col">Size</th>
<th scope="col">MimeType</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let fileInfo of rootDirectory" (click)="dataPathAction(fileInfo)" [class.pointer]="fileInfo.type === 'dir' && fileInfo.name !== '.'">
<td>
<span *ngIf="fileInfo.type === 'dir'"><i class="far fa-folder"></i></span>
<span *ngIf="fileInfo.type === 'file'"><i class="far fa-file"></i></span>
</td>
<td class="align-middle">
{{ fileInfo.name }}
</td>
<td class="align-middle">{{ fileInfo.size | formatFileSize: false }}</td>
<td class="align-middle">{{ fileInfo.mimetype }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button (click)="modalRef.hide()" class="btn btn-danger">Cancel</button>
<button [disabled]="fileExplorerPristine" (click)="selectDirectory()" class="btn btn-primary">Select this directory</button>
</div>
</ng-template>