From 35b12c97494ad755cc1a0d1b73e686ad182b2d8a Mon Sep 17 00:00:00 2001
From: Stavros Kounis <skounis@gmail.com>
Date: Tue, 25 Jan 2022 13:19:58 +0100
Subject: [PATCH] feat(progress) Display progress report and analytics.

---
 src/app/app.component.html                    |  1 +
 src/app/app.module.ts                         | 15 ++++++--
 .../progress/progress.component.css           |  0
 .../progress/progress.component.html          | 25 ++++++++++++
 .../progress/progress.component.spec.ts       | 25 ++++++++++++
 src/components/progress/progress.component.ts | 38 +++++++++++++++++++
 src/components/qrtree/qrtree.component.ts     |  4 +-
 src/interfaces/model.interface.ts             | 21 ++++++++++
 src/stores/app.store.ts                       | 32 ++++++++++------
 9 files changed, 143 insertions(+), 18 deletions(-)
 create mode 100644 src/components/progress/progress.component.css
 create mode 100644 src/components/progress/progress.component.html
 create mode 100644 src/components/progress/progress.component.spec.ts
 create mode 100644 src/components/progress/progress.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index dc12f48..b7da393 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -397,6 +397,7 @@
   <!-- Footer -->
   <footer class="dcc-footer">
     <mat-toolbar style="width: 100%;">
+      <app-progress></app-progress>
       <span class="example-spacer"></span>
       <button mat-button (click)="upload()" class="example-icon" aria-label="Example icon-button with share icon">
         <mat-icon>cloud_upload</mat-icon> Upload Test Results
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 72a2979..56e3b79 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,7 +26,11 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MockDataInterceptor } from '../interceptors/mock-data.interceptor'
+import { MockDataInterceptor } from '../interceptors/mock-data.interceptor';
+import { ProgressComponent } from '../components/progress/progress.component'
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
 
 @NgModule({
   declarations: [
@@ -34,7 +38,8 @@ import { MockDataInterceptor } from '../interceptors/mock-data.interceptor'
     DCCDescriptionComponent,
     DCCQRComponent,
     QRTreeComponent,
-    TestResultComponent
+    TestResultComponent,
+    ProgressComponent
   ],
   imports: [
     AppRoutingModule,
@@ -54,11 +59,13 @@ import { MockDataInterceptor } from '../interceptors/mock-data.interceptor'
     MatExpansionModule,
     MatSnackBarModule,
     MatBadgeModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatChipsModule,
+    MatProgressBarModule
   ],
   providers: [
     { provide: APP_INITIALIZER, useFactory: loadInitialData, deps: [DataLoaderService], multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: MockDataInterceptor, multi: true},
+    { provide: HTTP_INTERCEPTORS, useClass: MockDataInterceptor, multi: true },
     DataLoaderService,
     AppStore,
     ...environment.providers,
diff --git a/src/components/progress/progress.component.css b/src/components/progress/progress.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/progress/progress.component.html b/src/components/progress/progress.component.html
new file mode 100644
index 0000000..964b165
--- /dev/null
+++ b/src/components/progress/progress.component.html
@@ -0,0 +1,25 @@
+<div style="margin-bottom: 5px;">
+  <mat-progress-bar class="example-margin" color="primary" mode="determinate" [value]="progress" [bufferValue]=" value">
+  </mat-progress-bar>
+</div>
+<mat-chip-list aria-label="Fish selection">
+  <mat-chip>
+    <mat-icon aria-hidden="false" aria-label="Example home icon">qr_code</mat-icon>
+    {{analytics?.progress(null)}} / {{analytics?.codes()}}
+  </mat-chip>
+  <mat-chip color="primary" selected>
+    <!-- <mat-icon aria-hidden="false" aria-label="Example home icon">check_circle</mat-icon>  -->
+    Valid:
+    {{analytics?.progress(testResult.Valid)}}
+  </mat-chip>
+  <mat-chip color="accent" selected>
+    <!-- <mat-icon aria-hidden="false" aria-label="Example home icon">report_problem</mat-icon>  -->
+    Invalid:
+    {{analytics?.progress(testResult.Invalid)}}
+  </mat-chip>
+  <mat-chip color="warn" selected>
+    <!-- <mat-icon aria-hidden="false" aria-label="Example home icon">error</mat-icon>  -->
+    Error:
+    {{analytics?.progress(testResult.Error)}}
+  </mat-chip>
+</mat-chip-list>
\ No newline at end of file
diff --git a/src/components/progress/progress.component.spec.ts b/src/components/progress/progress.component.spec.ts
new file mode 100644
index 0000000..6003cbc
--- /dev/null
+++ b/src/components/progress/progress.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressComponent } from './progress.component';
+
+describe('ProgressComponent', () => {
+  let component: ProgressComponent;
+  let fixture: ComponentFixture<ProgressComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProgressComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProgressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/components/progress/progress.component.ts b/src/components/progress/progress.component.ts
new file mode 100644
index 0000000..8f11154
--- /dev/null
+++ b/src/components/progress/progress.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { IQRCode, TestResultEnum, Analytics } from '../../interfaces/model.interface';
+import { AppStore } from '../../stores/app.store';
+
+@Component({
+  selector: 'app-progress',
+  templateUrl: './progress.component.html',
+  styleUrls: ['./progress.component.css']
+})
+export class ProgressComponent implements OnInit {
+  public get value(): number {
+    return !!this.analytics ? this.analytics.codes() : 0;
+  }
+  public get progress(): number {
+    return !!this.analytics ? this.analytics.progress(null) : 0;
+  }
+  public get testResult(): typeof TestResultEnum {
+    return TestResultEnum;
+  }
+  analytics: Analytics | null = null;
+
+  constructor(private store: AppStore) {
+    this.store.getSelected().subscribe((selected: IQRCode | null) => {
+      this.update();
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  private update() {
+    const qrcodes = this.store.getData().value;
+    const results = this.store.getResults();
+    const analytcs = new Analytics(qrcodes, results);
+    this.analytics = analytcs;
+  }
+
+}
diff --git a/src/components/qrtree/qrtree.component.ts b/src/components/qrtree/qrtree.component.ts
index 4ae71f7..98ef364 100644
--- a/src/components/qrtree/qrtree.component.ts
+++ b/src/components/qrtree/qrtree.component.ts
@@ -4,7 +4,7 @@ import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'
 import * as _ from 'lodash';
 import { AppStore } from '../../stores/app.store';
 import { TreeNode, FlatNode } from '../../interfaces/tree.interface'
-import { IQRCode, TestResultEnum  } from '../../interfaces/model.interface';
+import { IQRCode, TestResultEnum, Analytics  } from '../../interfaces/model.interface';
 
 @Component({
   selector: 'app-qrtree',
@@ -12,7 +12,7 @@ import { IQRCode, TestResultEnum  } from '../../interfaces/model.interface';
   styleUrls: ['./qrtree.component.css']
 })
 export class QRTreeComponent implements OnInit {
-  
+
   selected: IQRCode | null = null;
 
   constructor(private store: AppStore) {
diff --git a/src/interfaces/model.interface.ts b/src/interfaces/model.interface.ts
index 45e050e..1086d64 100644
--- a/src/interfaces/model.interface.ts
+++ b/src/interfaces/model.interface.ts
@@ -131,4 +131,25 @@ export class TestResultMetadata implements ITestResultMetadata {
   qrcode64?: string;
   /** The validation result */
   result?: TestResultEnum
+}
+
+export class Analytics {
+  constructor(private rqCodes: Array<IQRCode>, private results: TestResult) {}
+
+  /**
+   * @returns The number of all the QR Codes for testing.
+   */
+  public codes(): number {
+    return this.rqCodes.length | 0;
+  }
+
+  /**
+   * @param category The test result type.
+   * @returns The number of test submitted.
+   */
+  public progress(category: TestResultEnum | null): number {
+    // Return all
+    if (!category) return this.results.results.length;
+    return this.results.results.filter(value => value.result === category).length  
+  }
 }
\ No newline at end of file
diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts
index 6a0100b..50f675f 100644
--- a/src/stores/app.store.ts
+++ b/src/stores/app.store.ts
@@ -52,13 +52,13 @@ export class AppStore {
     this.raw = data;
     const mapped = data.tree.map((i): IQRCode => {
       const parts = i.path.split('/');
-      let item: IQRCode = { 
-        id: i.path, 
-        country: parts[COUNTRY], 
-        title: i.path, 
-        version: parts[VERSION], 
-        file: parts[FILE], 
-        uri: i.url,        
+      let item: IQRCode = {
+        id: i.path,
+        country: parts[COUNTRY],
+        title: i.path,
+        version: parts[VERSION],
+        file: parts[FILE],
+        uri: i.url,
       }
       item = this.decorate(item);
       return item;
@@ -97,9 +97,15 @@ export class AppStore {
    * @param value The QR Code
    */
   setSelected(value: IQRCode) {
-    this.github.getImage(value.uri).subscribe((item: any) => {
-      value.qrcode64 = item;
-      this.selected.next(value);
+    this.github.getImage(value.uri).subscribe({
+      next: (item: any) => {
+        value.qrcode64 = item;
+        this.selected.next(value);
+      },
+      error: (error) => {
+        this.setMessage('Error fetching the QR Code. See the console!');
+        console.error('app.store.ts: setSelected', error);
+      }
     });
   }
 
@@ -136,6 +142,7 @@ export class AppStore {
     if (index >= 0) {
       this.setSelected(this.data.value[index]);
     } else {
+      this.setMessage('You reached the 1st QR code in the list.');
       console.warn('Store: Start of the array reached.')
     }
   }
@@ -148,6 +155,7 @@ export class AppStore {
     if (index < this.data.value.length) {
       this.setSelected(this.data.value[index]);
     } else {
+      this.setMessage('You reached the last QR code in the list.');
       console.warn('Store: End of the array reached.')
     }
   }
@@ -160,7 +168,7 @@ export class AppStore {
     this.results.addEntry(result)
     this.serialize();
     // Update data
-    if(this.raw) {
+    if (this.raw) {
       this.setData(this.raw);
     }
   }
@@ -214,7 +222,7 @@ export class AppStore {
    * @param id QR code identifier
    * @returns qr code
    */
-  public find(id: string, ): IQRCode {
+  public find(id: string): IQRCode {
     const items = this.filter('id', id);
     return items[0];
   }