49 lines
1.8 KiB
HTML
49 lines
1.8 KiB
HTML
<div>
|
|
<form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
|
|
<p>
|
|
<input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
|
|
(change)="onFileChanged($event)" />
|
|
</p>
|
|
<p>
|
|
<mat-form-field>
|
|
<mat-label>Comment about the image</mat-label>
|
|
<input matInput type="text" formControlName="comment" />
|
|
</mat-form-field>
|
|
</p>
|
|
|
|
<button mat-button color="warn" type="submit">
|
|
<mat-icon>file_upload</mat-icon>
|
|
Upload image
|
|
</button>
|
|
<label>{{ imageError }}</label>
|
|
</form>
|
|
</div>
|
|
|
|
<div *ngIf="resultsLength > 0">
|
|
<table mat-table [dataSource]="dataSourceTable">
|
|
<ng-container matColumnDef="comment">
|
|
<th mat-header-cell *matHeaderCellDef style="text-align: center;">Comments</th>
|
|
<td mat-cell *matCellDef="let element" style="text-align: left;"><span style="white-space:nowrap;">{{element.comment}}</span></td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="data">
|
|
<th mat-header-cell *matHeaderCellDef style="text-align: center;">Image</th>
|
|
<td mat-cell *matCellDef="let element" style="text-align: center;">
|
|
<img src="{{element.data}}" alt="image" style="width:50%;" (click)="openModal(element)">
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
</table>
|
|
|
|
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
|
|
</div>
|
|
|
|
<div class="imgmodal" [ngStyle]="{'display': (showPopin === true) ? 'block' : 'none'}">
|
|
<span class="close cursor" (click)="closeModal()">×</span>
|
|
<div class="imgbox">
|
|
<img class="center-fit cursor" src="{{ popinImage }}" (click)="closeModal()">
|
|
</div>
|
|
</div>
|