Merge branch 'master' into 4-mongodb_api

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

@@ -12,34 +12,46 @@
 
 <mat-form-field class="margin-right">
   <mat-label>* Name</mat-label>
-  <input matInput
+  <input matInput *ngIf="meta"
          placeholder="Name"
-         [(ngModel)]="meta ? meta.name : name">
+         [(ngModel)]="meta.name">
+  <input matInput *ngIf="!meta"
+         placeholder="Name"
+         [(ngModel)]="name">
 </mat-form-field>
 
 <mat-form-field class="margin-right">
   <mat-label>Tag</mat-label>
-  <input matInput
+  <input matInput *ngIf="meta"
          placeholder="Add a tag"
-         [(ngModel)]="meta ? meta.tag : tag">
+         [(ngModel)]="meta.tag">
+  <input matInput *ngIf="!meta"
+         placeholder="Add a tag"
+         [(ngModel)]="tag">
 </mat-form-field>
 
 <mat-form-field *ngIf="mode==='post'"
                 class="margin-right"
 >
   <mat-label>* Longitude</mat-label>
-  <input matInput
+  <input matInput *ngIf="meta"
          placeholder="Add longitude"
-         [(ngModel)]="meta ? meta.longitude : longitude">
+         [(ngModel)]="meta.longitude">
+  <input matInput *ngIf="!meta"
+         placeholder="Add longitude"
+         [(ngModel)]="longitude">
 </mat-form-field>
 
 <mat-form-field *ngIf="mode==='post'"
                 class="margin-right"
 >
   <mat-label>* Latitude</mat-label>
-  <input matInput
+  <input matInput *ngIf="meta"
          placeholder="Add latitude"
-         [(ngModel)]="meta ? meta.latitude : latitude">
+         [(ngModel)]="meta.latitude">
+  <input matInput *ngIf="!meta"
+         placeholder="Add latitude"
+         [(ngModel)]="latitude">
 </mat-form-field>
 
 <button type="button"

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

@@ -7,8 +7,8 @@
 </div>
 
 <mat-expansion-panel
-  *ngFor="let image of images | slice:paginationGetStart():paginationGetEnd(); let i = index"
-  (opened)="loadImage(i + paginationGetStart(), image.filename.split('.')[0])"
+  *ngFor="let image of filterOnlyNewestImageVersion() | slice:paginationGetStart():paginationGetEnd()"
+  (opened)="loadImage(getImageIndex(image), image.filename.split('.')[0])"
 >
   <mat-expansion-panel-header (click)="$event.stopPropagation()">
     <h4 style="width: 25em"
@@ -51,7 +51,6 @@
         <div style="display: block; width: 100%">
           <h3>Metadata:</h3>
           <p *ngIf="image.filename">filename: {{image.filename}}</p>
-          <p *ngIf="image.tag">tag: {{image.tag}}</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>
@@ -64,13 +63,28 @@
                        [meta]=image
                        (reload)="this.reload.emit()"
     ></app-file-uploader>
-<!--    (reload)="loadImage(i + paginationGetStart(), $event.split('.')[0])"-->
+
+    <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">
+            <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>
+          </div>
+        </ng-template>
+      </mat-expansion-panel>
+    </ng-container>
 
   </ng-template>
 </mat-expansion-panel>
 
-<mat-paginator *ngIf="images.length > 0"
-               [length]="images.length"
+<mat-paginator *ngIf="filterOnlyNewestImageVersion().length > 0"
+               [length]="filterOnlyNewestImageVersion().length"
                [pageSize]="pageSizeOptions[0]"
                [pageSizeOptions]="pageSizeOptions"
                (page)="lastPageEvent = $event"

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

@@ -58,4 +58,21 @@ export class ImagesComponent implements OnInit, AfterViewInit {
       this.logger.error('loadImage', i, id, err);
     });
   }
+
+  filterOnlyNewestImageVersion() {
+    return this.images.filter(image => !image.previous);
+  }
+
+  getImageIndex(image: ImageMetadata) {
+    return this.images.findIndex(img => image === img);
+  }
+
+  getRelatedImageMeta(image: ImageMetadata, images: ImageMetadata[] = []) {
+    const found = this.images.find(im => im.previous === image.identifier);
+    if (found) {
+      return this.getRelatedImageMeta(found, images.concat(found));
+    } else {
+      return images;
+    }
+  }
 }

frontend/src/app/component/landing/landing.component.html

@@ -6,7 +6,7 @@
   </span>
 </h1>
 
-<mat-tab-group *ngIf="images">
+<mat-tab-group *ngIf="storageHealth; else loading">
   <mat-tab label="Images">
     <app-images [images]="images" (reload)="loadImages()"></app-images>
   </mat-tab>
@@ -14,3 +14,7 @@
     <app-map [images]="images"></app-map>
   </mat-tab>
 </mat-tab-group>
+
+<ng-template #loading>
+  Loading ...
+</ng-template>

frontend/src/app/interfaces/interface.ts

@@ -21,6 +21,7 @@ export interface ImageMetadata {
   image_b64?: string;
   tag?: string;
   version?: string;
+  previous?: string;
 }
 
 export interface GetImageResponse {