keep always the same order of images;
remember if an expansion panel was opened or not;
This commit is contained in:
Marco Zeisler
parent
93539dc6c5
commit
df5e3d5ed2
@ -117,8 +117,8 @@ export class FileUploaderComponent implements OnInit {
|
||||
const metaData = this.loadMetaForFile();
|
||||
if (metaData) {
|
||||
this.name = metaData.name;
|
||||
this.longitude = metaData.longitude;
|
||||
this.latitude = metaData.latitude;
|
||||
this.longitude = metaData.longitude + '';
|
||||
this.latitude = metaData.latitude + '';
|
||||
}
|
||||
};
|
||||
|
||||
@ -162,7 +162,12 @@ export class FileUploaderComponent implements OnInit {
|
||||
}
|
||||
|
||||
private loadMetaForFile() {
|
||||
const metaData = metaFile.find(m => m.filename === this.currentFileName);
|
||||
const metaData = (metaFile as {
|
||||
filename: string,
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
name: string;
|
||||
}[]).find(m => m.filename === this.currentFileName);
|
||||
this.logger.debug('Found corresponding meta', this.currentFileName, metaData);
|
||||
return metaData;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
@ -20,8 +20,8 @@ export class ImagesComponent implements OnInit, AfterViewInit {
|
||||
pageSizeOptions: number[] = [5, 10, 25, 100];
|
||||
lastPageEvent: PageEvent;
|
||||
|
||||
openImageExpansion = [[true, true], [false, false], [false, false], [false, false], [false, false]];
|
||||
ALL_CLOSED_DEFAULT: [[false, false], [false, false], [false, false], [false, false], [false, false]];
|
||||
ALL_CLOSED_DEFAULT = [...Array(5)].map(() => this.getDefaultBoolDict(false));
|
||||
openImageExpansion = this.ALL_CLOSED_DEFAULT;
|
||||
|
||||
constructor(
|
||||
public restService: RestService,
|
||||
@ -30,6 +30,12 @@ export class ImagesComponent implements OnInit, AfterViewInit {
|
||||
) {
|
||||
}
|
||||
|
||||
private getDefaultBoolDict(value: boolean) {
|
||||
return new Proxy({}, {
|
||||
get: (target, name) => name in target ? target[name] : value
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.lastPageEvent = {pageIndex: 0, pageSize: this.pageSizeOptions[0], length: this.images.length};
|
||||
}
|
||||
@ -53,13 +59,23 @@ export class ImagesComponent implements OnInit, AfterViewInit {
|
||||
}).catch(err => this.logger.error(err));
|
||||
}
|
||||
|
||||
loadImage(i: number, id: string): void {
|
||||
loadImage(i: number, id: string, relImage?: ImageMetadata): void {
|
||||
if (!relImage) {
|
||||
this.restService.getImage(id).toPromise().then(image => {
|
||||
this.images[i].image_b64 = 'data:image/jpg;base64,' + image.image_data;
|
||||
this.logger.debug('image_b64', i, id, this.images[i].image_b64);
|
||||
}).catch(err => {
|
||||
this.logger.error('loadImage', i, id, err);
|
||||
});
|
||||
} else {
|
||||
this.restService.getImage(id).toPromise().then(image => {
|
||||
relImage.image_b64 = 'data:image/jpg;base64,' + image.image_data;
|
||||
this.logger.debug('image_b64', i, id, relImage.image_b64);
|
||||
}).catch(err => {
|
||||
this.logger.error('loadImage', i, id, err);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
filterOnlyNewestImageVersion() {
|
||||
|
||||
@ -28,7 +28,19 @@ export class LandingComponent implements OnInit {
|
||||
}
|
||||
|
||||
loadImages(): void {
|
||||
this.restService.getAllImages().toPromise().then(images => this.images = images).catch(err => this.logger.error(err));
|
||||
this.restService.getAllImages().toPromise().then(images =>
|
||||
this.images = images.sort((im1, im2) => {
|
||||
if (im1.name > im2.name) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (im1.name < im2.name) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
})
|
||||
).catch(err => this.logger.error(err));
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user