87 lines
2.3 KiB
HTML
87 lines
2.3 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-icon-button color="warn" type="submit">
|
|
<mat-icon svgIcon="file_upload"></mat-icon>
|
|
Upload image
|
|
</button>
|
|
<label>{{ imageError }}</label>
|
|
</form>
|
|
</div>
|
|
|
|
@if (resultsLength > 0) {
|
|
<div>
|
|
<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)"
|
|
class="cursor"
|
|
/>
|
|
</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>
|
|
<mat-icon
|
|
aria-hidden="false"
|
|
aria-label="Rotation"
|
|
(click)="rotate()"
|
|
class="rotate cursor"
|
|
svgIcon="rotate"
|
|
></mat-icon>
|
|
<div class="imgbox">
|
|
<img
|
|
class="center-fit cursor"
|
|
src="{{ popinImage }}"
|
|
(click)="closeModal()"
|
|
[@rotatedState]="stateRotation"
|
|
/>
|
|
</div>
|
|
</div>
|