implemented validity check;

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>

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);
+  }
 }

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;
+}

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))
+    );
+  }
 }