101 lines
4.0 KiB
HTML
101 lines
4.0 KiB
HTML
<h2>Available Images</h2>
|
|
|
|
<div style="font-weight: bolder; font-size: 20px">
|
|
<span style="width: 22.5em; display: inline-block; margin-left: 1.15em">Name</span>
|
|
<span style="width: 22.5em; display: inline-block">Date</span>
|
|
<span style="width: 22.5em; display: inline-block">File valid</span>
|
|
</div>
|
|
|
|
<mat-expansion-panel
|
|
*ngFor="let image of filterOnlyNewestImageVersion() | slice:paginationGetStart():paginationGetEnd()"
|
|
(opened)="loadImage(getImageIndex(image), image.identifier)"
|
|
>
|
|
<!-- (opened)="loadImage(getImageIndex(image), image.filename.split('.')[0])"-->
|
|
<mat-expansion-panel-header (click)="$event.stopPropagation()">
|
|
<h4 style="width: 25em"
|
|
>{{image.name}}</h4>
|
|
<h4 style="width: 25em"
|
|
>{{image.datetime}}</h4>
|
|
<h4 style="width: 25em; color: red">
|
|
✓ | X (TO BE DONE)
|
|
</h4>
|
|
<span style="float: right; margin-left: auto; margin-right: 1em;">
|
|
<button mat-raised-button color="warn"
|
|
(click)="deleteImage(image); $event.stopPropagation()">
|
|
Delete
|
|
</button>
|
|
</span>
|
|
</mat-expansion-panel-header>
|
|
|
|
<mat-divider style="
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
opacity: 20%;"></mat-divider>
|
|
|
|
<ng-template matExpansionPanelContent>
|
|
|
|
<mat-grid-list cols="4" rowHeight="22em" style="width: 100%; margin: auto">
|
|
|
|
<mat-grid-tile style="justify-content: left!important;" colspan="1">
|
|
<div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em; display: flex">
|
|
<img *ngIf="image.image_b64, let b64; else loadingImage"
|
|
[src]="b64"
|
|
style="width: 100%; margin: auto" [alt]="image.filename"/>
|
|
<ng-template #loadingImage>
|
|
<mat-spinner style="margin: auto;"></mat-spinner>
|
|
</ng-template>
|
|
</div>
|
|
</mat-grid-tile>
|
|
|
|
<mat-grid-tile colspan="3">
|
|
<div style="display: block; width: 100%">
|
|
<h3>Metadata:</h3>
|
|
<p *ngIf="image.filename">filename: {{image.filename}}</p>
|
|
<p *ngIf="image.latitude">latitude: {{image.latitude}}</p>
|
|
<p *ngIf="image.longitude">longitude: {{image.longitude}}</p>
|
|
<p *ngIf="image.version">version: {{image.version}}</p>
|
|
</div>
|
|
</mat-grid-tile>
|
|
</mat-grid-list>
|
|
|
|
<app-file-uploader [mode]="'put'"
|
|
[filename]="image.filename.split('.')[0]"
|
|
[meta]=image
|
|
(reload)="image.image_b64 = undefined; this.loadImage(getImageIndex(image), image.identifier)"
|
|
></app-file-uploader>
|
|
|
|
<ng-container *ngIf="getRelatedImageMeta(image); let relatedImageMetadata">
|
|
<mat-expansion-panel *ngIf="relatedImageMetadata.length > 0">
|
|
<mat-expansion-panel-header>
|
|
Previous version meta
|
|
</mat-expansion-panel-header>
|
|
<ng-template matExpansionPanelContent>
|
|
<div *ngFor="let imageMeta of relatedImageMetadata">
|
|
<mat-divider></mat-divider>
|
|
<p *ngIf="imageMeta.filename">filename: {{imageMeta.filename}}</p>
|
|
<p *ngIf="imageMeta.latitude">latitude: {{imageMeta.latitude}}</p>
|
|
<p *ngIf="imageMeta.longitude">longitude: {{imageMeta.longitude}}</p>
|
|
<p *ngIf="imageMeta.version">version: {{imageMeta.version}}</p>
|
|
<p *ngIf="imageMeta.tag">tag: {{imageMeta.tag}}</p>
|
|
<p *ngIf="imageMeta.name">name: {{imageMeta.name}}</p>
|
|
</div>
|
|
</ng-template>
|
|
</mat-expansion-panel>
|
|
</ng-container>
|
|
|
|
</ng-template>
|
|
</mat-expansion-panel>
|
|
|
|
<mat-paginator *ngIf="filterOnlyNewestImageVersion().length > 0"
|
|
[length]="filterOnlyNewestImageVersion().length"
|
|
[pageSize]="pageSizeOptions[0]"
|
|
[pageSizeOptions]="pageSizeOptions"
|
|
(page)="lastPageEvent = $event"
|
|
showFirstLastButtons
|
|
></mat-paginator>
|
|
|
|
<mat-divider style="margin-top: 2em"></mat-divider>
|
|
<h3>Upload New Image</h3>
|
|
<app-file-uploader [mode]="'post'" (reload)="reload.emit()"></app-file-uploader>
|
|
<mat-divider style="margin-top: 2em"></mat-divider>
|