From 93539dc6c52f44ef3e503cd8d741ea8a0eece38f Mon Sep 17 00:00:00 2001
From: Marco Zeisler <pfingstfrosch@gmail.com>
Date: Mon, 18 Jan 2021 21:59:49 +0100
Subject: [PATCH] use metadata file; properly update available images after
 update;

---
 .../file-uploader/file-uploader.component.ts  | 28 ++++++++++++++-----
 .../component/images/images.component.html    | 23 +++++++++------
 .../app/component/images/images.component.ts  |  3 ++
 frontend/tsconfig.json                        |  4 ++-
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/component/file-uploader/file-uploader.component.ts b/frontend/src/app/component/file-uploader/file-uploader.component.ts
index 3d8f231..d726777 100644
--- a/frontend/src/app/component/file-uploader/file-uploader.component.ts
+++ b/frontend/src/app/component/file-uploader/file-uploader.component.ts
@@ -3,6 +3,8 @@ import {RestService} from '../../services/rest.service';
 import {NGXLogger} from 'ngx-logger';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {ImageMetadata} from '../../interfaces/interface';
+// @ts-ignore
+import metaFile from '../../../../../iotclient/metadata_full.json';
 
 @Component({
   selector: 'app-file-uploader',
@@ -47,21 +49,21 @@ export class FileUploaderComponent implements OnInit {
     }
 
     if (this.mode === 'post') {
-      if (this.longitude && this.latitude) {
-        metaDict['longitude'] = Number.parseFloat(this.longitude);
-        metaDict['latitude'] = Number.parseFloat(this.latitude);
-      } else if (this.meta && this.meta.longitude && this.meta.latitude) {
+      if (this.meta && this.meta.longitude && this.meta.latitude) {
         metaDict['longitude'] = this.meta.longitude;
         metaDict['latitude'] = this.meta.latitude;
+      } else if (this.longitude && this.latitude) {
+        metaDict['longitude'] = Number.parseFloat(this.longitude);
+        metaDict['latitude'] = Number.parseFloat(this.latitude);
       } else {
         throw new Error('Long/Lat necessary if new file!');
       }
     }
 
-    if (this.name) {
-      metaDict['name'] = this.name;
-    } else if (this.meta && this.meta.name) {
+    if (this.meta && this.meta.name) {
       metaDict['name'] = this.meta.name;
+    } else if (this.name) {
+      metaDict['name'] = this.name;
     } else {
       if (this.mode === 'post') {
         throw new Error('Name necessary if new file');
@@ -97,6 +99,7 @@ export class FileUploaderComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.logger.debug('meta', metaFile);
   }
 
   onFileSelected(fileEvent: Event) {
@@ -111,6 +114,12 @@ export class FileUploaderComponent implements OnInit {
         this.file = e.target.result;
         this.currentFileName = file.name;
         this.logger.debug('Selected file', this.currentFileName, this.file);
+        const metaData = this.loadMetaForFile();
+        if (metaData) {
+          this.name = metaData.name;
+          this.longitude = metaData.longitude;
+          this.latitude = metaData.latitude;
+        }
       };
 
       reader.readAsArrayBuffer(file);
@@ -152,4 +161,9 @@ export class FileUploaderComponent implements OnInit {
     }
   }
 
+  private loadMetaForFile() {
+    const metaData = metaFile.find(m => m.filename === this.currentFileName);
+    this.logger.debug('Found corresponding meta', this.currentFileName, metaData);
+    return metaData;
+  }
 }
diff --git a/frontend/src/app/component/images/images.component.html b/frontend/src/app/component/images/images.component.html
index a19689b..6cc6739 100644
--- a/frontend/src/app/component/images/images.component.html
+++ b/frontend/src/app/component/images/images.component.html
@@ -7,9 +7,12 @@
 </div>
 
 <mat-expansion-panel
-  *ngFor="let image of filterOnlyNewestImageVersion() | slice:paginationGetStart():paginationGetEnd()"
-  (opened)="loadImage(getImageIndex(image), image.identifier)"
+  *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"
@@ -50,10 +53,10 @@
       <mat-grid-tile colspan="3">
         <div style="display: block; width: 100%">
           <h3>Metadata:</h3>
+          <p *ngIf="image.version">version: {{image.version}}</p>
           <p *ngIf="image.filename">filename: {{image.filename}}</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>
         </div>
       </mat-grid-tile>
     </mat-grid-list>
@@ -61,23 +64,24 @@
     <app-file-uploader [mode]="'put'"
                        [filename]="image.filename.split('.')[0]"
                        [meta]=image
-                       (reload)="image.image_b64 = undefined; this.loadImage(getImageIndex(image), image.identifier)"
+                       (reload)="reload.emit()"
     ></app-file-uploader>
+<!--    (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">
+      <mat-expansion-panel *ngIf="relatedImageMetadata.length > 0" [expanded]="openImageExpansion[i][1]">
         <mat-expansion-panel-header>
           Previous version meta
         </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>
-            <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>
@@ -90,8 +94,9 @@
                [length]="filterOnlyNewestImageVersion().length"
                [pageSize]="pageSizeOptions[0]"
                [pageSizeOptions]="pageSizeOptions"
-               (page)="lastPageEvent = $event"
+               (page)="lastPageEvent = $event; openImageExpansion = ALL_CLOSED_DEFAULT"
                showFirstLastButtons
+               hidePageSize
 ></mat-paginator>
 
 <mat-divider style="margin-top: 2em"></mat-divider>
diff --git a/frontend/src/app/component/images/images.component.ts b/frontend/src/app/component/images/images.component.ts
index 7f4aa97..f738930 100644
--- a/frontend/src/app/component/images/images.component.ts
+++ b/frontend/src/app/component/images/images.component.ts
@@ -20,6 +20,9 @@ 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]];
+
   constructor(
     public restService: RestService,
     private logger: NGXLogger,
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 22734b3..e32011e 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -17,7 +17,9 @@
       "es2017",
       "dom"
     ],
-    "allowJs": true
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   }
 }