From 5012c8943fe1083c29e74a4ed41f741429bcefb5 Mon Sep 17 00:00:00 2001
From: Marco Zeisler <pfingstfrosch@gmail.com>
Date: Sat, 16 Jan 2021 00:40:38 +0100
Subject: [PATCH] display meta data per image; style improvements;

---
 frontend/src/app/app.module.ts                |  2 +
 .../file-uploader.component.html              | 20 +++----
 .../file-uploader/file-uploader.component.ts  | 18 ++++--
 .../component/images/images.component.html    | 56 +++++++++++++------
 .../component/landing/landing.component.css   |  1 -
 frontend/src/app/interfaces/interface.ts      |  1 +
 frontend/src/styles.css                       |  6 ++
 7 files changed, 73 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index ab15618..10e79e6 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -24,6 +24,7 @@ import {AgmCoreModule} from '@agm/core';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import { FileUploaderComponent } from './component/file-uploader/file-uploader.component';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatGridListModule} from '@angular/material/grid-list';
 
 @NgModule({
   declarations: [LandingComponent, ImagesComponent, MapComponent, FileUploaderComponent],
@@ -54,6 +55,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
       */
     }),
     MatProgressSpinnerModule,
+    MatGridListModule,
   ],
   // enables injecting
   providers: [
diff --git a/frontend/src/app/component/file-uploader/file-uploader.component.html b/frontend/src/app/component/file-uploader/file-uploader.component.html
index e1318c8..e431d92 100644
--- a/frontend/src/app/component/file-uploader/file-uploader.component.html
+++ b/frontend/src/app/component/file-uploader/file-uploader.component.html
@@ -10,6 +10,13 @@
        type="file"
 >
 
+<mat-form-field class="margin-right">
+  <mat-label>* Name</mat-label>
+  <input matInput
+         placeholder="Name"
+         [(ngModel)]="meta ? meta.name : name">
+</mat-form-field>
+
 <mat-form-field class="margin-right">
   <mat-label>Tag</mat-label>
   <input matInput
@@ -17,17 +24,10 @@
          [(ngModel)]="meta ? meta.tag : tag">
 </mat-form-field>
 
-<mat-form-field class="margin-right">
-  <mat-label>Name</mat-label>
-  <input matInput
-         placeholder="Name"
-         [(ngModel)]="meta ? meta.name : name">
-</mat-form-field>
-
 <mat-form-field *ngIf="mode==='post'"
                 class="margin-right"
 >
-  <mat-label>Longitude</mat-label>
+  <mat-label>* Longitude</mat-label>
   <input matInput
          placeholder="Add longitude"
          [(ngModel)]="meta ? meta.longitude : longitude">
@@ -36,7 +36,7 @@
 <mat-form-field *ngIf="mode==='post'"
                 class="margin-right"
 >
-  <mat-label>Longitude</mat-label>
+  <mat-label>* Latitude</mat-label>
   <input matInput
          placeholder="Add latitude"
          [(ngModel)]="meta ? meta.latitude : latitude">
@@ -46,7 +46,7 @@
         mat-raised-button
         class="margin-right"
         (click)="postFile()"
-        [disabled]="!(file || mode !== 'post')"
+        [disabled]="!file"
 >
   <span *ngIf="mode==='post'; else updateImage">Upload Image</span>
   <ng-template #updateImage>Update Image</ng-template>
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 44def82..472fffc 100644
--- a/frontend/src/app/component/file-uploader/file-uploader.component.ts
+++ b/frontend/src/app/component/file-uploader/file-uploader.component.ts
@@ -50,7 +50,7 @@ export class FileUploaderComponent implements OnInit {
       if (this.longitude && this.latitude) {
         metaDict['longitude'] = Number.parseFloat(this.longitude);
         metaDict['latitude'] = Number.parseFloat(this.latitude);
-      } else if (this.meta.longitude && this.meta.latitude) {
+      } else if (this.meta && this.meta.longitude && this.meta.latitude) {
         metaDict['longitude'] = this.meta.longitude;
         metaDict['latitude'] = this.meta.latitude;
       } else {
@@ -60,7 +60,7 @@ export class FileUploaderComponent implements OnInit {
 
     if (this.name) {
       metaDict['name'] = this.name;
-    } else if (this.meta.name) {
+    } else if (this.meta && this.meta.name) {
       metaDict['name'] = this.meta.name;
     } else {
       if (this.mode === 'post') {
@@ -70,7 +70,7 @@ export class FileUploaderComponent implements OnInit {
 
     if (this.tag) {
       metaDict['tag'] = this.tag;
-    } else if (this.meta.tag) {
+    } else if (this.meta && this.meta.tag) {
       metaDict['tag'] = this.meta.tag;
     }
 
@@ -134,9 +134,19 @@ export class FileUploaderComponent implements OnInit {
 
       this.snackBar.open('Upload successful', 'Dismiss');
       this.reload.emit(this.currentFileName);
+
+      this.name = '';
+      this.tag = '';
+      this.longitude = '';
+      this.latitude = '';
     } catch (err) {
       this.logger.error('error', err);
-      this.snackBar.open(err.error.Error, 'Dismiss');
+      try {
+        this.snackBar.open(err.error.Error, 'Dismiss');
+      } catch {
+        this.snackBar.open(err.message, 'Dismiss');
+      }
+
     }
   }
 
diff --git a/frontend/src/app/component/images/images.component.html b/frontend/src/app/component/images/images.component.html
index 2b9a7d1..1a7b45a 100644
--- a/frontend/src/app/component/images/images.component.html
+++ b/frontend/src/app/component/images/images.component.html
@@ -11,13 +11,13 @@
   (opened)="loadImage(i + paginationGetStart(), image.filename.split('.')[0])"
 >
   <mat-expansion-panel-header (click)="$event.stopPropagation()">
-    <span style="width: 30em"
-    >{{image.name}}</span>
-    <span style="width: 30em"
-    >{{image.datetime}}</span>
-    <span style="width: 30em">
+    <h4 style="width: 25em"
+    >{{image.name}}</h4>
+    <h4 style="width: 25em"
+    >{{image.datetime}}</h4>
+    <h4 style="width: 25em; color: red">
       ✓ | X (TO BE DONE)
-    </span>
+    </h4>
     <span style="float: right; margin-left: auto; margin-right: 1em;">
       <button mat-raised-button color="warn"
               (click)="deleteImage(image); $event.stopPropagation()">
@@ -26,22 +26,46 @@
     </span>
   </mat-expansion-panel-header>
 
-  <ng-template matExpansionPanelContent>
-    <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em; display: flex">
-      <img *ngIf="image.image_b64, let b64; else loadingImage"
-           [src]="b64"
-           style="width: 100%; margin: auto" [alt]="image.filename"/>
-      <ng-template #loadingImage>
-        <mat-spinner style="margin: auto;"></mat-spinner>
-      </ng-template>
+  <mat-divider style="
+  margin-top: 1em;
+  margin-bottom: 1em;
+  opacity: 20%;"></mat-divider>
 
-    </div>
+  <ng-template matExpansionPanelContent>
+
+    <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="image.image_b64, let b64; else loadingImage"
+               [src]="b64"
+               style="width: 100%; margin: auto" [alt]="image.filename"/>
+          <ng-template #loadingImage>
+            <mat-spinner style="margin: auto;"></mat-spinner>
+          </ng-template>
+
+        </div>
+      </mat-grid-tile>
+
+      <mat-grid-tile colspan="3">
+        <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>
+        </div>
+      </mat-grid-tile>
+    </mat-grid-list>
 
     <app-file-uploader [mode]="'put'"
                        [filename]="image.filename.split('.')[0]"
                        [meta]=image
-                       (reload)="loadImage(i + paginationGetStart(), $event.split('.')[0])"
+                       (reload)="this.reload.emit()"
     ></app-file-uploader>
+<!--    (reload)="loadImage(i + paginationGetStart(), $event.split('.')[0])"-->
+
   </ng-template>
 </mat-expansion-panel>
 
diff --git a/frontend/src/app/component/landing/landing.component.css b/frontend/src/app/component/landing/landing.component.css
index 8b13789..e69de29 100644
--- a/frontend/src/app/component/landing/landing.component.css
+++ b/frontend/src/app/component/landing/landing.component.css
@@ -1 +0,0 @@
-
diff --git a/frontend/src/app/interfaces/interface.ts b/frontend/src/app/interfaces/interface.ts
index b123d07..f132afe 100644
--- a/frontend/src/app/interfaces/interface.ts
+++ b/frontend/src/app/interfaces/interface.ts
@@ -20,6 +20,7 @@ export interface ImageMetadata {
   selected?: boolean;
   image_b64?: string;
   tag?: string;
+  version?: string;
 }
 
 export interface GetImageResponse {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6ff0f14..25a2a0b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -21,3 +21,9 @@ h2 {
   padding-left: 0 !important;
   margin-bottom: 1em;
 }
+
+.mat-figure {
+  justify-content: left !important;
+  display: grid !important;
+  align-items: baseline !important;
+}