diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 23c06be..8b4153a 100644
--- a/frontend/src/app/app.module.ts
+++ b/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,
diff --git a/frontend/src/app/component/images/images.component.html b/frontend/src/app/component/images/images.component.html
index 4da6d68..06b0789 100644
--- a/frontend/src/app/component/images/images.component.html
+++ b/frontend/src/app/component/images/images.component.html
@@ -6,7 +6,10 @@
File valid
-
+
{{image.name}}
@@ -17,18 +20,25 @@
-
- IMAGE
-
+
+
+
![]()
+
+
+
-
- >
-
-
-
-
+
+
+
+
+
+
+
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);
+ });
+ }
}
diff --git a/frontend/src/app/interfaces/interface.ts b/frontend/src/app/interfaces/interface.ts
index ddb4390..df68065 100644
--- a/frontend/src/app/interfaces/interface.ts
+++ b/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;
}
diff --git a/frontend/src/app/services/rest.service.ts b/frontend/src/app/services/rest.service.ts
index 8eceac0..cdb8e76 100644
--- a/frontend/src/app/services/rest.service.ts
+++ b/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 {
- return this.http.get(this.getImageUrl + id).pipe(
- tap(next => this.logger.debug('/getImage', id, next))
+ public getImage(id: string): Observable {
+ return this.http.get(this.getImageUrl + '/' + id).pipe(
+ tap(next => this.logger.debug('getImage', id, next))
);
}