render opened image;

frontend/src/app/app.module.ts

@@ -22,6 +22,7 @@ import {ImagesComponent} from './component/images/images.component';
 import {MapComponent} from './component/map/map.component';
 import {AgmCoreModule} from '@agm/core';
 import {AngularFileUploaderModule} from 'angular-file-uploader';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 
 @NgModule({
   declarations: [LandingComponent, ImagesComponent, MapComponent],
@@ -51,6 +52,7 @@ import {AngularFileUploaderModule} from 'angular-file-uploader';
             */
         }),
         AngularFileUploaderModule,
+        MatProgressSpinnerModule,
     ],
   // enables injecting
   providers: [

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

@@ -6,7 +6,10 @@
   <span style="width: 22.5em; display: inline-block">File valid</span>
 </div>
 
-<mat-expansion-panel *ngFor="let image of images | slice:paginationGetStart():paginationGetEnd(); let i = index">
+<mat-expansion-panel
+  *ngFor="let image of images | slice:paginationGetStart():paginationGetEnd(); let i = index"
+  (opened)="loadImage(i, image.filename.split('.')[0])"
+>
   <mat-expansion-panel-header (click)="$event.stopPropagation()">
     <span style="width: 30em"
     >{{image.name}}</span>
@@ -17,18 +20,25 @@
     </span>
   </mat-expansion-panel-header>
 
-  <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em">
+  <ng-template matExpansionPanelContent>
-    IMAGE
+    <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>
 
     <angular-file-uploader style="margin-left: 0 !important;"
-                         [config]="getImageUpdateConfig(image.filename)"
+                           [config]="getImageUpdateConfig(image.filename)">
-
-  >
     </angular-file-uploader>
+
     <span style="float: right">
       <button mat-raised-button color="warn" (click)="deleteImage(image)">Delete</button>
     </span>
+  </ng-template>
 </mat-expansion-panel>
 
 <mat-paginator [length]="images.length"

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

@@ -26,7 +26,7 @@ export class ImagesComponent implements OnInit, AfterViewInit {
 
   constructor(
     public restService: RestService,
-    private logger: NGXLogger
+    private logger: NGXLogger,
   ) {
   }
 
@@ -60,4 +60,12 @@ export class ImagesComponent implements OnInit, AfterViewInit {
       this.images = this.images.filter(im => im !== image);
     }).catch(err => this.logger.error(err));
   }
+
+  loadImage(i: number, id: string): void {
+    this.restService.getImage(id).toPromise().then(image => {
+      this.images[i].image_b64 = 'data:image/jpg;base64,' + image.image_data;
+    }).catch(err => {
+      this.logger.error('loadImage', i, id, err);
+    });
+  }
 }

frontend/src/app/interfaces/interface.ts

@@ -18,4 +18,11 @@ export interface ImageMetadata {
   seq_num_frames: number;
   sha512: string;
   selected?: boolean;
+  image_b64?: string;
+}
+
+export interface ImageResponse {
+  id: string;
+  image_data: string;
+  metadata: ImageMetadata;
 }

frontend/src/app/services/rest.service.ts

@@ -4,7 +4,7 @@ import {NGXLogger} from 'ngx-logger';
 import {environment} from '../../environments/environment';
 import {Observable} from 'rxjs';
 import {tap} from 'rxjs/operators';
-import {StorageHealth} from '../interfaces/interface';
+import {ImageResponse, StorageHealth} from '../interfaces/interface';
 
 @Injectable()
 export class RestService {
@@ -36,9 +36,9 @@ export class RestService {
     );
   }
 
-  public getImage(id: string): Observable<any> {
+  public getImage(id: string): Observable<ImageResponse> {
-    return this.http.get<any>(this.getImageUrl + id).pipe(
+    return this.http.get<ImageResponse>(this.getImageUrl + '/' + id).pipe(
-      tap(next => this.logger.debug('/getImage', id, next))
+      tap(next => this.logger.debug('getImage', id, next))
     );
   }