Merge pull request #59 from skounis/feat/issue-58-countryplatform

feat(ux/model) Capture country and platform.

src/app/app.component.css

@@ -0,0 +1,14 @@
+.mat-radio-button {
+  margin-right: 1rem;
+  font-size: 80%;
+}
+
+.mat-input-element {
+  font-size: 80%;
+  color: #fff;
+
+}
+
+.mat-form-field {
+  width: 90px;
+}

src/app/app.component.html

@@ -363,12 +363,33 @@
     </button>
     <span>EU DCC Validation</span>
     <span class="example-spacer"></span>
-    <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+    <!-- <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
       <mat-icon>favorite</mat-icon>
     </button>
     <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
       <mat-icon>share</mat-icon>
-    </button>
+    </button> -->
+    <mat-radio-group aria-label="Select a platform"
+      [formControl]="platformControl"
+      [(ngModel)]="platform">
+      <mat-radio-button value="ANDROID">Android</mat-radio-button>
+      <mat-radio-button value="IOS">iOS</mat-radio-button>
+    </mat-radio-group>
+
+    <mat-form-field appearance="fill">
+      <input type="text"
+      placeholder="Country"
+      aria-label="Country"
+      matInput
+      [formControl]="countryControl"
+      [matAutocomplete]="auto"
+      [(ngModel)]="country">
+      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+          {{option}}
+        </mat-option>
+      </mat-autocomplete>
+    </mat-form-field>
   </mat-toolbar>
 </div>
 
@@ -405,7 +426,8 @@
       <button mat-button (click)="export()" [disabled]="!!downloadJsonHref">
         <mat-icon>code</mat-icon>Export
       </button>
-      <a *ngIf="!!downloadJsonHref" mat-flat-button  title="Download JSON" [href]="downloadJsonHref" download="test-results.json" (click)="clear()">Download</a>
+      <a *ngIf="!!downloadJsonHref" mat-flat-button title="Download JSON" [href]="downloadJsonHref"
+        download="test-results.json" (click)="clear()">Download</a>
     </mat-toolbar>
   </footer>
 </div>

src/app/app.component.ts

@@ -1,28 +1,64 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { AppStore } from '../stores/app.store';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import * as _ from 'lodash';
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { PlatformEnum } from '../interfaces/model.interface';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+
+  public set country(value: string) {
+    this.store.country = value;
+  }
+
+  public set platform(value: PlatformEnum) {
+    this.store.platform = value;
+  }
+
   title = 'dcc-validation-wire';
   showFiller = false;
 
   downloadJsonHref: any;
 
+  countries: Array<string> = [];
+  countryControl = new FormControl();
+  platformControl = new FormControl();
+  filteredOptions!: Observable<string[]>;
+
   constructor(private store: AppStore,
     private sanitizer: DomSanitizer,
     readonly snackBar: MatSnackBar) {
+    this.countries = this.prepare();
+    console.log(this.countries);
     this.store.getMessage().subscribe((message: string) => {
       if (!message) { return }
       this.open(message);
     });
   }
 
+  ngOnInit() {
+    this.filteredOptions = this.countryControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value)),
+    );
+
+    this.countryControl.valueChanges.subscribe(()=>{
+      console.log('Country selected:', this.countryControl.value)
+    })
+
+    this.platformControl.valueChanges.subscribe(()=>{
+      console.log('Platform selected:', this.platformControl.value)
+    })
+  }
+
   export() {
     const data = this.store.deserialize();
     const theJSON = JSON.stringify(data, null, 2);
@@ -51,4 +87,14 @@ export class AppComponent {
     }
     return this.snackBar.open(message, action, config);
   }
+
+  private prepare() {
+    let grouped = _.groupBy(this.store.getData().value, 'country');
+    return Object.keys(grouped);
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+    return this.countries.filter(option => option.toLowerCase().includes(filterValue));
+  }
 }

src/app/app.module.ts

@@ -9,7 +9,7 @@ import { DataLoaderService } from '../services/data-loader.service';
 import { DCCDescriptionComponent } from '../components/dccdescription/dccdescription.component';
 import { DCCQRComponent } from '../components/dccqr/dccqr.component';
 import { environment } from '../environments/environment';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -30,6 +30,8 @@ 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';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatRadioModule } from '@angular/material/radio';
 
 
 @NgModule({
@@ -46,6 +48,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
+    ReactiveFormsModule,
     HttpClientModule,
     MatButtonModule,
     MatCardModule,
@@ -61,7 +64,9 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
     MatBadgeModule,
     MatTooltipModule,
     MatChipsModule,
-    MatProgressBarModule
+    MatProgressBarModule,
+    MatAutocompleteModule,
+    MatRadioModule
   ],
   providers: [
     { provide: APP_INITIALIZER, useFactory: loadInitialData, deps: [DataLoaderService], multi: true },

src/components/dccqr/dccqr.component.html

@@ -8,12 +8,15 @@
     <mat-card-title>{{item?.title}}</mat-card-title>
     <mat-card-subtitle>{{item?.country}}</mat-card-subtitle>
   </mat-card-header>
-  <img style="width: 60%; display: block; margin: 0 auto 16px;" mat-card-image [src]="imagePath" alt="DCC QR code">
+  <div style="width: 60%; max-width: 300px; display: block; margin: 0 auto 16px;">
+    <img style="max-width: 100%;" mat-card-image [src]="imagePath" alt="DCC QR code">
+  </div>
+
   <p>
     Scan the QR with your verifier and submit the results.
   </p>
 
-  <mat-expansion-panel hideToggle>
+  <!-- <mat-expansion-panel hideToggle>
     <mat-expansion-panel-header>
       <mat-panel-title>
         Base64
@@ -22,7 +25,7 @@
     <code>
           {{item?.qrcode64}}
         </code>
-  </mat-expansion-panel>
+  </mat-expansion-panel> -->
   <mat-card-content>
 
   </mat-card-content>

src/interfaces/model.interface.ts

@@ -96,6 +96,10 @@ export class TestResult implements ITestResult {
       return e.file == id;
     });
   }
+
+  touch() {
+    this.metadata.completedOn = new Date();
+  }
 }
 
 export class TestResultMetadata implements ITestResultMetadata {
@@ -105,7 +109,7 @@ export class TestResultMetadata implements ITestResultMetadata {
   platform: PlatformEnum;
   constructor(country?: string, completedOn?: Date, commit?: string, platform?: PlatformEnum) {
     this.country = country || 'EL';
-    this.completedOn= completedOn || new Date();
+    this.completedOn = completedOn || new Date();
     this.commit = commit || '';
     this.platform = platform || PlatformEnum.Android
   }

src/stores/app.store.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as _ from 'lodash';
-import { IQRCode, TestResult, ITestResultEntry } from '../interfaces/model.interface';
+import { IQRCode, TestResult, ITestResultEntry, PlatformEnum } from '../interfaces/model.interface';
 import { LocalStorageService } from '../services/local-storage.service';
 import { RepositoryContent } from '../interfaces/github.interface';
 
@@ -17,6 +17,16 @@ export class AppStore {
   private selected = new BehaviorSubject<IQRCode | null>(null);
   private message = new BehaviorSubject<string>('');
 
+  public set country(value: string) {
+    this.results.metadata.country = value;
+    this.serialize();    
+  }
+
+  public set platform(value: PlatformEnum) {
+    this.results.metadata.platform = value;
+    this.serialize();
+  }
+
   constructor(private localStorage: LocalStorageService, private github: GithubService) {
   }
 
@@ -165,7 +175,7 @@ export class AppStore {
    */
   capture(result: ITestResultEntry) {
     console.log('Store: Capture the scan result: ', result)
-    this.results.addEntry(result)
+    this.results.addEntry(result);
     this.serialize();
     // Update data
     if (this.raw) {
@@ -177,6 +187,7 @@ export class AppStore {
    * Store the results
    */
   public serialize() {
+    this.results.touch();
     this.localStorage.setItem(LocalStorageService.SCAN_RESULT_KEY, this.results);
   }
   /**