fix update of images;

improve map pane;

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

@@ -40,12 +40,12 @@ export class FileUploaderComponent implements OnInit {
 
     if (this.filename) {
       this.id = this.filename;
+      metaDict['filename'] = this.filename;
     } else {
       this.id = this.currentFileName;
+      metaDict['filename'] = this.currentFileName;
     }
 
-    metaDict['filename'] = this.currentFileName;
-
     if (this.mode === 'post') {
       if (this.longitude && this.latitude) {
         metaDict['longitude'] = Number.parseFloat(this.longitude);
@@ -68,6 +68,8 @@ export class FileUploaderComponent implements OnInit {
       }
     }
 
+    // metaDict['name'] = this.currentFileName;
+
     if (this.tag) {
       metaDict['tag'] = this.tag;
     } else if (this.meta && this.meta.tag) {

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

@@ -8,8 +8,9 @@
 
 <mat-expansion-panel
   *ngFor="let image of filterOnlyNewestImageVersion() | slice:paginationGetStart():paginationGetEnd()"
-  (opened)="loadImage(getImageIndex(image), image.filename.split('.')[0])"
+  (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>
@@ -43,7 +44,6 @@
           <ng-template #loadingImage>
             <mat-spinner style="margin: auto;"></mat-spinner>
           </ng-template>
-
         </div>
       </mat-grid-tile>
 
@@ -61,7 +61,7 @@
     <app-file-uploader [mode]="'put'"
                        [filename]="image.filename.split('.')[0]"
                        [meta]=image
-                       (reload)="this.reload.emit()"
+                       (reload)="image.image_b64 = undefined; this.loadImage(getImageIndex(image), image.identifier)"
     ></app-file-uploader>
 
     <ng-container *ngIf="getRelatedImageMeta(image); let relatedImageMetadata">
@@ -71,10 +71,13 @@
         </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>

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

@@ -60,19 +60,14 @@ export class ImagesComponent implements OnInit, AfterViewInit {
   }
 
   filterOnlyNewestImageVersion() {
-    return this.images.filter(image => !image.previous);
+    return this.images.filter(image => !image.identifier.includes('_'));
   }
 
   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;
-    }
+  getRelatedImageMeta(image: ImageMetadata) {
+    return this.images.filter(im => im.identifier.includes(image.identifier) && im.identifier !== image.identifier);
   }
 }

frontend/src/app/component/map/map.component.html

@@ -5,15 +5,33 @@
          [longitude]="longitude"
          [zoom]="2">
   <agm-marker
-    *ngFor="let image of images"
+    *ngFor="let image of getImagesForMap()"
     [latitude]="image.latitude"
     [longitude]="image.longitude"
     [opacity]="1"
     [markerDraggable]="true"
-    (markerClick)="selectMarker($event)"
+    (markerClick)="loadImage(selectMarker($event))"
   ></agm-marker>
 </agm-map>
 
-<p *ngIf="selectedImage">
+<div *ngIf="selectedImage">
   Latitude: {{ selectedImage.latitude }} Longitude: {{ selectedImage.longitude }} Name: {{selectedImage.name}}
-</p>
+
+  <mat-divider style="margin-bottom: 1em;"></mat-divider>
+
+  <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em; display: flex">
+    <img *ngIf="selectedImage.image_b64, let b64; else loadingImage"
+         [src]="b64"
+         style="width: 100%; margin: auto" [alt]="selectedImage.filename"/>
+    <ng-template #loadingImage>
+      <mat-spinner style="margin: auto;"></mat-spinner>
+    </ng-template>
+  </div>
+
+  <p *ngIf="selectedImage.filename">filename: {{selectedImage.filename}}</p>
+<!--  <p *ngIf="selectedImage.latitude">latitude: {{selectedImage.latitude}}</p>-->
+<!--  <p *ngIf="selectedImage.longitude">longitude: {{selectedImage.longitude}}</p>-->
+  <p *ngIf="selectedImage.version">version: {{selectedImage.version}}</p>
+  <p *ngIf="selectedImage.tag">tag: {{selectedImage.tag}}</p>
+<!--  <p *ngIf="selectedImage.name">name: {{selectedImage.name}}</p>-->
+</div>

frontend/src/app/component/map/map.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {ImageMetadata} from '../../interfaces/interface';
+import {RestService} from '../../services/rest.service';
 
 // @ts-ignore
 @Component({
@@ -16,7 +17,7 @@ export class MapComponent implements OnInit {
   latitude = 43.879078;
   longitude = -103.4615581;
 
-  constructor() {
+  constructor(private restService: RestService) {
 
   }
 
@@ -25,6 +26,25 @@ export class MapComponent implements OnInit {
   }
 
   selectMarker(event) {
-    this.selectedImage = this.images.find(image => image.latitude === event.latitude && image.longitude === event.longitude);
+    console.log(event, this.images);
+    this.selectedImage = this.images.find(image =>
+      image.latitude === event.latitude && image.longitude === event.longitude && !image.identifier.includes('_')
+    );
+    return this.selectedImage;
   }
+
+  getImagesForMap() {
+    return this.images.filter(im => !im.identifier.includes('_'));
+  }
+
+  loadImage(image: ImageMetadata): void {
+    image.image_b64 = '';
+    this.restService.getImage(image.identifier).toPromise().then(im => {
+      image.image_b64 = 'data:image/jpg;base64,' + im.image_data;
+    }).catch(err => {
+      console.error('loadImage', image, err);
+    });
+  }
+
+
 }