keep always the same order of images;

remember if an expansion panel was opened or not;

frontend/src/app/component/file-uploader/file-uploader.component.ts

@@ -117,8 +117,8 @@ export class FileUploaderComponent implements OnInit {
         const metaData = this.loadMetaForFile();
         if (metaData) {
           this.name = metaData.name;
-          this.longitude = metaData.longitude;
+          this.longitude = metaData.longitude + '';
-          this.latitude = metaData.latitude;
+          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;
   }

frontend/src/app/component/images/images.component.html

@@ -5,14 +5,12 @@
   <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])"-->
   <mat-expansion-panel-header (click)="$event.stopPropagation()">
     <h4 style="width: 25em"
@@ -68,21 +66,53 @@
     ></app-file-uploader>
     <!--    (reload)="image.image_b64 = undefined; this.loadImage(getImageIndex(image), image.identifier)"-->
 
-    <ng-container *ngIf="getRelatedImageMeta(image); let relatedImageMetadata">
+    <ng-container *ngIf="getRelatedImageMeta(image); let relatedImages">
-      <mat-expansion-panel *ngIf="relatedImageMetadata.length > 0" [expanded]="openImageExpansion[i][1]">
+      <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>
+          <mat-expansion-panel *ngFor="let relImage of relatedImages.slice().reverse(); let j = index"
-            <p *ngIf="imageMeta.version">version: {{imageMeta.version}}</p>
+                               (opened)="loadImage(-1, relImage.identifier, relImage);
-            <p *ngIf="imageMeta.name">name: {{imageMeta.name}}</p>
+                               openImageExpansion[i][2+j]=true"
-            <p *ngIf="imageMeta.tag">tag: {{imageMeta.tag}}</p>
+                               (closed)="openImageExpansion[i][2+j] = false"
-            <p *ngIf="imageMeta.filename">filename: {{imageMeta.filename}}</p>
+                               [expanded]="openImageExpansion[i][2+j]"
-            <p *ngIf="imageMeta.latitude">latitude: {{imageMeta.latitude}}</p>
+          >
-            <p *ngIf="imageMeta.longitude">longitude: {{imageMeta.longitude}}</p>
+            <!--            <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>

frontend/src/app/component/images/images.component.ts

@@ -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 = [...Array(5)].map(() => this.getDefaultBoolDict(false));
-  ALL_CLOSED_DEFAULT: [[false, false], [false, false], [false, false], [false, false], [false, 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() {

frontend/src/app/component/landing/landing.component.ts

@@ -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));
   }