From 55ce77ae358e7ae3844781e5ce678a0c6f82f523 Mon Sep 17 00:00:00 2001
From: Marco Zeisler <pfingstfrosch@gmail.com>
Date: Mon, 18 Jan 2021 23:28:52 +0100
Subject: [PATCH] implemented validity check;

---
 .../component/images/images.component.html    | 16 +++++++-----
 .../app/component/images/images.component.ts  | 25 +++++++++++++++++++
 frontend/src/app/interfaces/interface.ts      |  7 ++++++
 frontend/src/app/services/rest.service.ts     | 12 ++++++---
 4 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/component/images/images.component.html b/frontend/src/app/component/images/images.component.html
index 01ea103..4e0ef2f 100644
--- a/frontend/src/app/component/images/images.component.html
+++ b/frontend/src/app/component/images/images.component.html
@@ -3,7 +3,7 @@
 <div style="font-weight: bolder; font-size: 20px">
   <span style="width: 22.5em; display: inline-block; margin-left: 1.15em">Name</span>
   <span style="width: 22.5em; display: inline-block">Date</span>
-  <span style="width: 22.5em; display: inline-block">File valid</span>
+  <span style="width: 22.5em; display: inline-block">File valid | available</span>
 </div>
 <mat-expansion-panel
   *ngFor="let image of filterOnlyNewestImageVersion() | slice:paginationGetStart():paginationGetEnd(); let i = index"
@@ -17,9 +17,13 @@
     >{{image.name}}</h4>
     <h4 style="width: 25em"
     >{{image.datetime}}</h4>
-    <h4 style="width: 25em; color: red">
-      ✓ | X (TO BE DONE)
+    <h4 style="width: 25em; margin-left: 4em;" *ngIf="image.valid !== undefined || image.available !== undefined;
+    else loadingValidity">
+      {{image.valid ? '✓' : 'X' }} | {{image.available ? '✓' : 'X' }}
     </h4>
+    <ng-template #loadingValidity>
+      <h4 style="width: 25em; margin-left: 5em;">...</h4>
+    </ng-template>
     <span style="float: right; margin-left: auto; margin-right: 1em;">
       <button mat-raised-button color="warn"
               (click)="deleteImage(image); $event.stopPropagation()">
@@ -62,7 +66,7 @@
     <app-file-uploader [mode]="'put'"
                        [filename]="image.filename.split('.')[0]"
                        [meta]=image
-                       (reload)="reload.emit()"
+                       (reload)="reload.emit(); checkValidity()"
     ></app-file-uploader>
     <!--    (reload)="image.image_b64 = undefined; this.loadImage(getImageIndex(image), image.identifier)"-->
 
@@ -124,12 +128,12 @@
                [length]="filterOnlyNewestImageVersion().length"
                [pageSize]="pageSizeOptions[0]"
                [pageSizeOptions]="pageSizeOptions"
-               (page)="lastPageEvent = $event; openImageExpansion = ALL_CLOSED_DEFAULT"
+               (page)="lastPageEvent = $event; openImageExpansion = ALL_CLOSED_DEFAULT; checkValidity()"
                showFirstLastButtons
                hidePageSize
 ></mat-paginator>
 
 <mat-divider style="margin-top: 2em"></mat-divider>
 <h3>Upload New Image</h3>
-<app-file-uploader [mode]="'post'" (reload)="reload.emit()"></app-file-uploader>
+<app-file-uploader [mode]="'post'" (reload)="reload.emit(); checkValidity()"></app-file-uploader>
 <mat-divider style="margin-top: 2em"></mat-divider>
diff --git a/frontend/src/app/component/images/images.component.ts b/frontend/src/app/component/images/images.component.ts
index 5688178..4c56180 100644
--- a/frontend/src/app/component/images/images.component.ts
+++ b/frontend/src/app/component/images/images.component.ts
@@ -38,6 +38,7 @@ export class ImagesComponent implements OnInit, AfterViewInit {
 
   ngOnInit(): void {
     this.lastPageEvent = {pageIndex: 0, pageSize: this.pageSizeOptions[0], length: this.images.length};
+    this.checkValidity();
   }
 
   ngAfterViewInit(): void {
@@ -89,4 +90,28 @@ export class ImagesComponent implements OnInit, AfterViewInit {
   getRelatedImageMeta(image: ImageMetadata) {
     return this.images.filter(im => im.identifier.includes(image.identifier) && im.identifier !== image.identifier);
   }
+
+  checkValidity() {
+    setTimeout(() => {
+      const start = this.paginationGetStart();
+      const end = this.paginationGetEnd();
+      const filteredImages = this.filterOnlyNewestImageVersion();
+      this.logger.debug('check validity', start, end, filteredImages);
+
+      for (let i = start; i < end; i++) {
+        try {
+          filteredImages[i].valid = undefined;
+          filteredImages[i].available = undefined;
+          this.restService.checkImageValid(filteredImages[i].identifier).toPromise().then(
+            res => {
+              filteredImages[i].valid = res.valid;
+              filteredImages[i].available = res.available;
+            }
+          );
+        } catch {
+          this.logger.debug('skip non-existing index', i);
+        }
+      }
+    }, 500);
+  }
 }
diff --git a/frontend/src/app/interfaces/interface.ts b/frontend/src/app/interfaces/interface.ts
index 668cd8b..bd19c71 100644
--- a/frontend/src/app/interfaces/interface.ts
+++ b/frontend/src/app/interfaces/interface.ts
@@ -3,6 +3,8 @@ export interface StorageHealth {
 }
 
 export interface ImageMetadata {
+  available?: boolean;
+  valid?: boolean;
   id: string;
   datetime: string;
   device_id: string;
@@ -34,3 +36,8 @@ export interface ImagePostResponse {
   id: string;
   filename: string;
 }
+
+export interface Validity {
+  available: boolean;
+  valid: boolean;
+}
diff --git a/frontend/src/app/services/rest.service.ts b/frontend/src/app/services/rest.service.ts
index 6576f7b..80e49ff 100644
--- a/frontend/src/app/services/rest.service.ts
+++ b/frontend/src/app/services/rest.service.ts
@@ -4,12 +4,11 @@ import {NGXLogger} from 'ngx-logger';
 import {environment} from '../../environments/environment';
 import {Observable} from 'rxjs';
 import {tap} from 'rxjs/operators';
-import {GetImageResponse, ImagePostResponse, StorageHealth} from '../interfaces/interface';
+import {GetImageResponse, ImagePostResponse, StorageHealth, Validity} from '../interfaces/interface';
 
 @Injectable()
 export class RestService {
-
-  constructor(
+    constructor(
     private logger: NGXLogger,
     private http: HttpClient
   ) {
@@ -21,6 +20,7 @@ export class RestService {
   private deleteImageUrl = this.imageUrl + '/delete';
   private postImageUrl = this.imageUrl + '/post';
   private updateImageUrl = this.imageUrl + '/update';
+  private getValidityOfImageUrl = this.imageUrl + '/status';
   private healthCheckUrl = this.currentLocation + '/check';
 
   public getAllImages(): Observable<any> {
@@ -78,4 +78,10 @@ export class RestService {
       tap(next => this.logger.debug('healthCheck', next))
     );
   }
+
+  public checkImageValid(id: string): Observable<Validity> {
+    return this.http.get<Validity>(this.getValidityOfImageUrl + '/' + id).pipe(
+      tap(next => this.logger.debug('checkValid', id, next))
+    );
+  }
 }