display meta data per image;

style improvements;

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>