zenon/federated-storage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

keep always the same order of images;

Browse Source 
remember if an expansion panel was opened or not;
This commit is contained in:
Marco Zeisler
2021-01-18 22:53:32 +01:00
parent 93539dc6c5
commit df5e3d5ed2
4 changed files with 92 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/component/images/images.component.html
+46 -16
View File
@@ -5,15 +5,13 @@
<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(); let i = index"
(opened)="openImageExpansion[i][0] = true; loadImage(getImageIndex(image), image.identifier)"
(closed)="openImageExpansion[i][0] = false;"
[expanded]="openImageExpansion[i][0]"
>
{{openImageExpansion}} {{i}}
<!-- (opened)="loadImage(getImageIndex(image), image.filename.split('.')[0])"-->
<!-- (opened)="loadImage(getImageIndex(image), image.filename.split('.')[0])"-->
<mat-expansion-panel-header (click)="$event.stopPropagation()">
<h4 style="width: 25em"
>{{image.name}}</h4>
@@ -66,23 +64,55 @@
[meta]=image
(reload)="reload.emit()"
></app-file-uploader>
<!-- (reload)="image.image_b64 = undefined; this.loadImage(getImageIndex(image), image.identifier)"-->
<!-- (reload)="image.image_b64 = undefined; this.loadImage(getImageIndex(image), image.identifier)"-->
<ng-container *ngIf="getRelatedImageMeta(image); let relatedImageMetadata">
<mat-expansion-panel *ngIf="relatedImageMetadata.length > 0" [expanded]="openImageExpansion[i][1]">
<ng-container *ngIf="getRelatedImageMeta(image); let relatedImages">
<mat-expansion-panel *ngIf="relatedImages.length > 0" [expanded]="openImageExpansion[i][1]">
<mat-expansion-panel-header>
Previous version meta
Previous versions
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div *ngFor="let imageMeta of relatedImageMetadata">
<mat-divider></mat-divider>
<p *ngIf="imageMeta.version">version: {{imageMeta.version}}</p>
<p *ngIf="imageMeta.name">name: {{imageMeta.name}}</p>
<p *ngIf="imageMeta.tag">tag: {{imageMeta.tag}}</p>
<p *ngIf="imageMeta.filename">filename: {{imageMeta.filename}}</p>
<p *ngIf="imageMeta.latitude">latitude: {{imageMeta.latitude}}</p>
<p *ngIf="imageMeta.longitude">longitude: {{imageMeta.longitude}}</p>
</div>
<mat-expansion-panel *ngFor="let relImage of relatedImages.slice().reverse(); let j = index"
(opened)="loadImage(-1, relImage.identifier, relImage);
openImageExpansion[i][2+j]=true"
(closed)="openImageExpansion[i][2+j] = false"
[expanded]="openImageExpansion[i][2+j]"
>
<!-- <mat-divider></mat-divider>-->
<!-- <p *ngIf="imageMeta.version">version: {{imageMeta.version}}</p>-->
<!-- <p *ngIf="imageMeta.name">name: {{imageMeta.name}}</p>-->
<!-- <p *ngIf="imageMeta.tag">tag: {{imageMeta.tag}}</p>-->
<!-- <p *ngIf="imageMeta.filename">filename: {{imageMeta.filename}}</p>-->
<!-- <p *ngIf="imageMeta.latitude">latitude: {{imageMeta.latitude}}</p>-->
<!-- <p *ngIf="imageMeta.longitude">longitude: {{imageMeta.longitude}}</p>-->
<mat-expansion-panel-header>
<p>version: {{relImage.version ? relImage.version : 0}}</p>
</mat-expansion-panel-header>
<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="relImage.image_b64, let subB64; else loadingSubImage"
[src]="subB64"
style="width: 100%; margin: auto" [alt]="image.filename"/>
<ng-template #loadingSubImage>
<mat-spinner style="margin: auto;"></mat-spinner>
</ng-template>
</div>
</mat-grid-tile>
<mat-grid-tile colspan="3">
<div style="display: block; width: 100%">
<p *ngIf="relImage.filename">filename: {{relImage.filename}}</p>
<p *ngIf="relImage.latitude">latitude: {{relImage.latitude}}</p>
<p *ngIf="relImage.longitude">longitude: {{relImage.longitude}}</p>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-expansion-panel>
</ng-template>
</mat-expansion-panel>
</ng-container>