render opened image;

frontend/src/app/app.module.ts

@@ -22,36 +22,38 @@ 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],
-  imports: [
-    ReactiveFormsModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
-    HttpClientModule,
-    MatFormFieldModule,
-    FormsModule,
-    MatButtonModule,
-    MatInputModule,
-    MatSlideToggleModule,
-    MatListModule,
-    MatExpansionModule,
-    MatCardModule,
-    MatPaginatorModule,
-    MatTableModule,
-    MatTabsModule,
-    // GoogleMapsModule,
-    AgmCoreModule.forRoot({
-      apiKey: 'AIzaSyBDgLJ1sL48IQg7e5jrwmUyXkqeEfVnf78'
-      /* apiKey is required, unless you are a
-      premium customer, in which case you can
-      use clientId
-      */
-    }),
-    AngularFileUploaderModule,
-  ],
+    imports: [
+        ReactiveFormsModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
+        HttpClientModule,
+        MatFormFieldModule,
+        FormsModule,
+        MatButtonModule,
+        MatInputModule,
+        MatSlideToggleModule,
+        MatListModule,
+        MatExpansionModule,
+        MatCardModule,
+        MatPaginatorModule,
+        MatTableModule,
+        MatTabsModule,
+        // GoogleMapsModule,
+        AgmCoreModule.forRoot({
+            apiKey: 'AIzaSyBDgLJ1sL48IQg7e5jrwmUyXkqeEfVnf78'
+            /* apiKey is required, unless you are a
+            premium customer, in which case you can
+            use clientId
+            */
+        }),
+        AngularFileUploaderModule,
+        MatProgressSpinnerModule,
+    ],
   // enables injecting
   providers: [
     RestService,

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">
-    IMAGE
-  </div>
+  <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>
 
-  <angular-file-uploader style="margin-left: 0 !important;"
-                         [config]="getImageUpdateConfig(image.filename)"
+    </div>
 
-  >
-  </angular-file-uploader>
-  <span style="float: right">
-    <button mat-raised-button color="warn" (click)="deleteImage(image)">Delete</button>
-  </span>
+    <angular-file-uploader style="margin-left: 0 !important;"
+                           [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> {
-    return this.http.get<any>(this.getImageUrl + id).pipe(
-      tap(next => this.logger.debug('/getImage', id, next))
+  public getImage(id: string): Observable<ImageResponse> {
+    return this.http.get<ImageResponse>(this.getImageUrl + '/' + id).pipe(
+      tap(next => this.logger.debug('getImage', id, next))
     );
   }