Merge pull request #61 from skounis/feat/issue-60-upload

feat(download) Scaffold download and submit dialog.

src/app/app.component.html

@@ -421,13 +421,13 @@
       <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
+        <mat-icon>cloud_upload</mat-icon> Submit the results
       </button>
-      <button mat-button (click)="export()" [disabled]="!!downloadJsonHref">
+      <!-- <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>
+        download="test-results.json" (click)="clear()">Download</a> -->
     </mat-toolbar>
   </footer>
 </div>

src/app/app.component.ts

@@ -7,6 +7,8 @@ import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { PlatformEnum } from '../interfaces/model.interface';
+import { MatDialog } from '@angular/material/dialog';
+import { DownloadDialogComponent } from '../components/download-dialog/download-dialog.component';
 
 @Component({
   selector: 'app-root',
@@ -35,7 +37,8 @@ export class AppComponent implements OnInit {
 
   constructor(private store: AppStore,
     private sanitizer: DomSanitizer,
-    readonly snackBar: MatSnackBar) {
+    readonly snackBar: MatSnackBar,
+    public dialog: MatDialog) {
     this.countries = this.prepare();
     console.log(this.countries);
     this.store.getMessage().subscribe((message: string) => {
@@ -50,11 +53,11 @@ export class AppComponent implements OnInit {
       map(value => this._filter(value)),
     );
 
-    this.countryControl.valueChanges.subscribe(()=>{
+    this.countryControl.valueChanges.subscribe(() => {
       console.log('Country selected:', this.countryControl.value)
     })
 
-    this.platformControl.valueChanges.subscribe(()=>{
+    this.platformControl.valueChanges.subscribe(() => {
       console.log('Platform selected:', this.platformControl.value)
     })
   }
@@ -68,6 +71,7 @@ export class AppComponent implements OnInit {
 
   upload() {
     this.store.setMessage('Not implemented!')
+    this.openDownloadDialog();
   }
 
   clear() {
@@ -88,6 +92,16 @@ export class AppComponent implements OnInit {
     return this.snackBar.open(message, action, config);
   }
 
+  openDownloadDialog() {
+    this.export();
+    const data = this.downloadJsonHref;
+    const dialogRef = this.dialog.open(DownloadDialogComponent, {
+      data: data
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
   private prepare() {
     let grouped = _.groupBy(this.store.getData().value, 'country');
     return Object.keys(grouped);

src/app/app.module.ts

@@ -32,6 +32,9 @@ 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';
+import { MatDialogModule } from '@angular/material/dialog';
+import { DownloadDialogComponent } from '../components/download-dialog/download-dialog.component';
+
 
 
 @NgModule({
@@ -41,7 +44,8 @@ import { MatRadioModule } from '@angular/material/radio';
     DCCQRComponent,
     QRTreeComponent,
     TestResultComponent,
-    ProgressComponent
+    ProgressComponent,
+    DownloadDialogComponent
   ],
   imports: [
     AppRoutingModule,
@@ -66,7 +70,8 @@ import { MatRadioModule } from '@angular/material/radio';
     MatChipsModule,
     MatProgressBarModule,
     MatAutocompleteModule,
-    MatRadioModule
+    MatRadioModule,
+    MatDialogModule
   ],
   providers: [
     { provide: APP_INITIALIZER, useFactory: loadInitialData, deps: [DataLoaderService], multi: true },

src/components/download-dialog/download-dialog.component.html

@@ -0,0 +1,25 @@
+<h2 mat-dialog-title>Download and Submit</h2>
+<mat-dialog-content class="mat-typography">
+  <p>Use this application for navigating through all the available QR Codes. When finish download
+      the test results and submit the <code>results.json</code> if in the <a href="https://validationcycleportal.t-assets.de/#/login" target="_blank">Validation Portal.</a>
+  </p>
+
+  <h3>Download</h3>
+  <p>Your test results are prepared and are ready for download. Please use the button that follows and download the <code>results.json</code>file.</p>
+
+  <h3>Upload to the Validation Portal</h3>
+  <p>Visit the Validation portal and submit the downloaded <code>results.json</code>. For accessing the portal use the token which related to your country.</p>
+  <ul>
+      <li><a href="https://validationcycleportal.t-assets.de/#/login" target="_blank">Validation Portal.</a></li>
+  </ul>
+
+  <h3>Support</h3>
+  <p>For help and support please contact ...</p>
+
+  <p style="text-align: center;"><a *ngIf="!!data" mat-raised-button color="primary" title="Download JSON" [href]="data"
+    download="test-results.json" (click)="clear()" style="width: 60%; margin: auto;">Download</a>
+</p>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>Close</button>
+</mat-dialog-actions>

src/components/download-dialog/download-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadDialogComponent } from './download-dialog.component';
+
+describe('DownloadDialogComponent', () => {
+  let component: DownloadDialogComponent;
+  let fixture: ComponentFixture<DownloadDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DownloadDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/components/download-dialog/download-dialog.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-download-dialog',
+  templateUrl: './download-dialog.component.html',
+  styleUrls: ['./download-dialog.component.css']
+})
+export class DownloadDialogComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log('Dialog:', data);
+  }
+
+  ngOnInit(): void {
+  }
+
+  clear() {
+
+  }
+}