diff --git a/src/app/sys-check/backend.service.ts b/src/app/sys-check/backend.service.ts index 9cefc5b15c086a3ed14aa1d1a38777cadb87cf98..a58c90ace784a49c9c3e837dd60e866bc0603fe7 100644 --- a/src/app/sys-check/backend.service.ts +++ b/src/app/sys-check/backend.service.ts @@ -3,7 +3,7 @@ import { Injectable, Inject } from '@angular/core'; import { HttpClient, HttpParams, HttpHeaders, HttpEvent, HttpErrorResponse } from '@angular/common/http'; import { Observable, of } from 'rxjs'; import { catchError } from 'rxjs/operators'; -import { NetworkData, NetworkRequestTestResult } from './syscheck-data.service'; +import { NetworkRequestTestResult } from './syscheck-data.service'; @Injectable({ providedIn: 'root' @@ -21,7 +21,13 @@ export class BackendService { label: 'Basistest', formdef: [], unit: '', - email: false + email: false, + downloadMinimum: 100, + downloadGood: 100, + uploadMinimum: 100, + uploadGood: 100, + pingMinimum: 100, + pingGood: 100 }; constructor( @@ -191,6 +197,12 @@ export interface CheckConfigData { formdef: FormDefEntry[]; unit: string; email: boolean; + uploadMinimum: number; + uploadGood: number; + downloadMinimum: number; + downloadGood: number; + pingMinimum: number; + pingGood: number; } export interface FormDefEntry { diff --git a/src/app/sys-check/network-check/network-check.component.ts b/src/app/sys-check/network-check/network-check.component.ts index cd1da1a0f036a5b111a0fbf382450357aa43e203..b7049d5803fd9faae8ca7ce2d7da76c7cf877eee 100644 --- a/src/app/sys-check/network-check/network-check.component.ts +++ b/src/app/sys-check/network-check/network-check.component.ts @@ -1,4 +1,4 @@ -import { SyscheckDataService, NetworkData, NetworkRequestTestResult } from './../syscheck-data.service'; +import { SyscheckDataService, NetworkRequestTestResult } from './../syscheck-data.service'; import { Component, OnInit } from '@angular/core'; import { BackendService, RequestBenchmarkerFunction, RequestBenchmarkerFunctionCallback} from '../backend.service'; @@ -10,7 +10,7 @@ import { BackendService, RequestBenchmarkerFunction, RequestBenchmarkerFunctionC export class NetworkCheckComponent implements OnInit { status = ''; testDone = false; - averageSpeed: NetworkData = { + averageSpeed: AverageSpeed = { uploadTest: -1, downloadTest: -1, pingTest: -1 @@ -139,14 +139,20 @@ export class NetworkCheckComponent implements OnInit { updateStatus(`Die folgenden Netzwerkeigenschaften wurden festgestellt:`); this.testDone = true; - this.ds.networkData$.next({ - 'uploadTest': this.averageSpeed.uploadTest, - 'downloadTest': this.averageSpeed.downloadTest, - 'pingTest': this.averageSpeed.pingTest - }); + // this.ds.networkData$.next({ + // 'uploadTest': this.averageSpeed.uploadTest, +// 'downloadTest': this.averageSpeed.downloadTest, + // 'pingTest': this.averageSpeed.pingTest + // }); }); }); } } + +export interface AverageSpeed { + uploadTest: number; + downloadTest: number; + pingTest: number; +} diff --git a/src/app/sys-check/questionnaire/questionnaire.component.css b/src/app/sys-check/questionnaire/questionnaire.component.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..04484579a2d94260287c2f3cc580c0f98f3a6c86 100644 --- a/src/app/sys-check/questionnaire/questionnaire.component.css +++ b/src/app/sys-check/questionnaire/questionnaire.component.css @@ -0,0 +1,14 @@ +.step-body { + position: absolute; + width: auto; + top: 70px; + bottom: 15px; + padding: 0px; + margin-bottom: 20px; + height: auto; + background-color: white; + border: 1px solid darkgreen; + display: block; + left: 15px; + right: 15px; +} diff --git a/src/app/sys-check/questionnaire/questionnaire.component.html b/src/app/sys-check/questionnaire/questionnaire.component.html index e5a26a2836baef42fd7deb9d9781a977b7a55f30..ccbf61b5dc5b30044470a2fc030b99d550d06350 100644 --- a/src/app/sys-check/questionnaire/questionnaire.component.html +++ b/src/app/sys-check/questionnaire/questionnaire.component.html @@ -1,3 +1,23 @@ -<p> - questionnaire works! -</p> +<div class="spinner-container" *ngIf="dataLoading"> + <mat-spinner></mat-spinner> +</div> +<div class="step-body" #questionnaireBody> + <div [formGroup]="form"> + <p *ngFor="let f of formdef"> + <label>{{f.prompt}}</label> + + <div [ngSwitch]="f.type"> + + <input *ngSwitchCase="'text'" [formControlName]="f.id" + [id]="f.id" [type]="t.type"> + + <select [id]="f.id" *ngSwitchCase="'singleselectlist'" [formControlName]="f.id"> + <option *ngFor="let opt of f.options">{{opt}}</option> + </select> + + </div> + + <div class="errorMessage" *ngIf="!isValid">{{f.prompt}} is required</div> + </p> + </div> +</div> diff --git a/src/app/sys-check/questionnaire/questionnaire.component.ts b/src/app/sys-check/questionnaire/questionnaire.component.ts index 5cd78f51e46e62c8d89950c133dedc234fdd9716..4c4af82201edf312c28226012eb03da2a23e75e2 100644 --- a/src/app/sys-check/questionnaire/questionnaire.component.ts +++ b/src/app/sys-check/questionnaire/questionnaire.component.ts @@ -1,5 +1,6 @@ +import { FormDefEntry } from './../backend.service'; import { SyscheckDataService } from './../syscheck-data.service'; -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'iqb-questionnaire', @@ -7,7 +8,9 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./questionnaire.component.css'] }) export class QuestionnaireComponent implements OnInit { + @ViewChild('questionnaireBody') questionnaireBody: ElementRef; questionnaireEnabled = false; + formdef: FormDefEntry[] = []; constructor( private ds: SyscheckDataService @@ -16,6 +19,13 @@ export class QuestionnaireComponent implements OnInit { ngOnInit() { this.ds.questionnaireEnabled$.subscribe(is => this.questionnaireEnabled = is); + this.ds.checkConfig$.subscribe(cc => { + if (cc === null) { + this.formdef = []; + } else { + this.formdef = cc.formdef; + } + }); } } diff --git a/src/app/sys-check/report/report.component.css b/src/app/sys-check/report/report.component.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..04484579a2d94260287c2f3cc580c0f98f3a6c86 100644 --- a/src/app/sys-check/report/report.component.css +++ b/src/app/sys-check/report/report.component.css @@ -0,0 +1,14 @@ +.step-body { + position: absolute; + width: auto; + top: 70px; + bottom: 15px; + padding: 0px; + margin-bottom: 20px; + height: auto; + background-color: white; + border: 1px solid darkgreen; + display: block; + left: 15px; + right: 15px; +} diff --git a/src/app/sys-check/report/report.component.html b/src/app/sys-check/report/report.component.html index e8605fbdedfc69e8790de709c23390171a72ff18..52af00d7a5d4b2f6a107216597244626a3fcea4b 100644 --- a/src/app/sys-check/report/report.component.html +++ b/src/app/sys-check/report/report.component.html @@ -1,3 +1,7 @@ -<p> - report works! -</p> +<div class="spinner-container" *ngIf="dataLoading"> + <mat-spinner></mat-spinner> +</div> +<div class="step-body"> + <p>report works not.</p> + +</div> diff --git a/src/app/sys-check/report/report.component.ts b/src/app/sys-check/report/report.component.ts index 1a64adb35c1216c0778016160bb02cb97b0c7455..274b5bc8fe305a8aaae32ce0bae09f742487094b 100644 --- a/src/app/sys-check/report/report.component.ts +++ b/src/app/sys-check/report/report.component.ts @@ -1,3 +1,4 @@ +import { merge } from 'rxjs'; import { SyscheckDataService } from './../syscheck-data.service'; import { Component, OnInit } from '@angular/core'; @@ -15,7 +16,17 @@ export class ReportComponent implements OnInit { } ngOnInit() { + merge( + this.ds.environmentData$, + this.ds.networkData$, + this.ds.questionnaireData$).subscribe(t => { + this.updateReport(); + }); + this.ds.reportEnabled$.subscribe(is => this.reportEnabled = is); } + updateReport() { + + } } diff --git a/src/app/sys-check/run.component.css b/src/app/sys-check/run.component.css index fc768126ac09334acb5d56480c9641e06b4e7c92..14d94b832cd8eef86682ec71a9dc907459f00bcf 100644 --- a/src/app/sys-check/run.component.css +++ b/src/app/sys-check/run.component.css @@ -5,3 +5,13 @@ .mat-mini-fab[disabled] { background-color: grey; } + +.fullheight { + min-height: 90%; +} + +.navi_buttons { + position: absolute; + bottom: 10px; + left: 10px; +} diff --git a/src/app/sys-check/run.component.html b/src/app/sys-check/run.component.html index 882b160a19572631277720e3c20543005dad8bb3..190de470121a69be73a737fce15c279f51eb0f68 100644 --- a/src/app/sys-check/run.component.html +++ b/src/app/sys-check/run.component.html @@ -7,7 +7,7 @@ <mat-step> <ng-template matStepLabel>Computer</ng-template> <iqb-environment-check></iqb-environment-check> - <div> + <div class="navi_buttons"> <button mat-mini-fab matStepperNext> <i class="material-icons">chevron_right</i> </button> @@ -16,7 +16,7 @@ <mat-step #stepNetwork> <ng-template matStepLabel>Netzwerk</ng-template> <iqb-network-check #compNetwork></iqb-network-check> - <div> + <div class="navi_buttons"> <button mat-mini-fab matStepperPrevious> <i class="material-icons">chevron_left</i> </button> @@ -28,7 +28,7 @@ <mat-step *ngIf="unitcheckAvailable" #stepUnit> <ng-template matStepLabel>Aufgabe</ng-template> <iqb-unit-check #compUnit></iqb-unit-check> - <div> + <div class="navi_buttons"> <button mat-mini-fab matStepperPrevious> <i class="material-icons">chevron_left</i> </button> @@ -40,7 +40,7 @@ <mat-step *ngIf="questionnaireAvailable"> <ng-template matStepLabel>Fragen</ng-template> <iqb-questionnaire></iqb-questionnaire> - <div> + <div class="navi_buttons"> <button mat-mini-fab matStepperPrevious> <i class="material-icons">chevron_left</i> </button> @@ -52,11 +52,11 @@ <mat-step> <ng-template matStepLabel>Bericht</ng-template> <iqb-report></iqb-report> - <div> - <button mat-mini-fab matStepperPrevious> - <i class="material-icons">chevron_left</i> - </button> - </div> + <div class="navi_buttons"> + <button mat-mini-fab matStepperPrevious> + <i class="material-icons">chevron_left</i> + </button> + </div> </mat-step> </mat-horizontal-stepper> </div> diff --git a/src/app/sys-check/run.component.ts b/src/app/sys-check/run.component.ts index c691db216c529b8071eeb6a20ed105b5082eef22..6e6c604527e930b6079675133db2e45ee7aa86ad 100644 --- a/src/app/sys-check/run.component.ts +++ b/src/app/sys-check/run.component.ts @@ -69,7 +69,7 @@ export class RunComponent implements OnInit { } } else if (e.selectedStep === this.stepNetwork) { if (!this.stepNetwork.completed) { - // this.compNetwork.startCheck(); + this.compNetwork.startCheck(); this.stepNetwork.completed = true; } } diff --git a/src/app/sys-check/syscheck-data.service.ts b/src/app/sys-check/syscheck-data.service.ts index 7a2ec730dc8e356b76ee03f2c90df37b06e19460..a7927f0e66ba8e87d0a1c4f77b654c01a5068402 100644 --- a/src/app/sys-check/syscheck-data.service.ts +++ b/src/app/sys-check/syscheck-data.service.ts @@ -7,8 +7,9 @@ import { Injectable } from '@angular/core'; }) export class SyscheckDataService { public checkConfig$ = new BehaviorSubject<CheckConfigData>(null); - public environmentData$ = new BehaviorSubject<EnvironmentData>(null); - public networkData$ = new BehaviorSubject<NetworkData>(null); + public environmentData$ = new BehaviorSubject<ReportEntry[]>([]); + public networkData$ = new BehaviorSubject<ReportEntry[]>([]); + public questionnaireData$ = new BehaviorSubject<ReportEntry[]>([]); public unitcheckAvailable$ = new BehaviorSubject<boolean>(false); public questionnaireAvailable$ = new BehaviorSubject<boolean>(false); @@ -35,15 +36,9 @@ export class SyscheckDataService { } } -export interface EnvironmentData { - osName: string; - osVersion: string; -} - -export interface NetworkData { - uploadTest: number; - downloadTest: number; - pingTest: number; +export interface ReportEntry { + label: string; + value: string; } export interface NetworkRequestTestResult { diff --git a/src/app/sys-check/unit-check/unit-check.component.css b/src/app/sys-check/unit-check/unit-check.component.css index 45835f0a2090f3bb2ddb78735eb5765177274ca0..04484579a2d94260287c2f3cc580c0f98f3a6c86 100644 --- a/src/app/sys-check/unit-check/unit-check.component.css +++ b/src/app/sys-check/unit-check/unit-check.component.css @@ -1,6 +1,14 @@ -.preview-body { - width: 100%; - margin-bottom: 10px; +.step-body { + position: absolute; + width: auto; + top: 70px; + bottom: 15px; + padding: 0px; + margin-bottom: 20px; + height: auto; background-color: white; - border: 2px solid darkgreen; + border: 1px solid darkgreen; + display: block; + left: 15px; + right: 15px; } diff --git a/src/app/sys-check/unit-check/unit-check.component.html b/src/app/sys-check/unit-check/unit-check.component.html index 49cd5b56caca6cd6e2ffe8ab47bccc6361c0dc1b..6f07bf6a4c6f5ff1d4fb36a2b88de5e2f6aafe7a 100644 --- a/src/app/sys-check/unit-check/unit-check.component.html +++ b/src/app/sys-check/unit-check/unit-check.component.html @@ -1,6 +1,6 @@ <div class="spinner-container" *ngIf="dataLoading"> <mat-spinner></mat-spinner> </div> -<div #iFrameHost iqbResizeIFrameChild class="preview-body"> +<div #iFrameHost iqbResizeIFrameChild class="step-body"> </div> diff --git a/src/app/sys-check/unit-check/unit-check.component.ts b/src/app/sys-check/unit-check/unit-check.component.ts index 3bdf7743af66b101e1c5221b0206c689920b544f..23ca06520317edfea396f13a5a3b5ec83b858917 100644 --- a/src/app/sys-check/unit-check/unit-check.component.ts +++ b/src/app/sys-check/unit-check/unit-check.component.ts @@ -1,7 +1,7 @@ import { LogindataService } from './../../logindata.service'; import { BackendService, UnitData } from './../backend.service'; import { SyscheckDataService } from './../syscheck-data.service'; -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks'; import { Subscription, BehaviorSubject } from 'rxjs'; @@ -17,7 +17,7 @@ import { Subscription, BehaviorSubject } from 'rxjs'; styleUrls: ['./unit-check.component.css'] }) export class UnitCheckComponent implements OnInit, OnDestroy { - @ViewChild('iFrameHost') iFrameHostElement: HTMLElement; + @ViewChild('iFrameHost') iFrameHostElement: ElementRef; unitcheckEnabled = false; private iFrameItemplayer: HTMLIFrameElement; @@ -126,19 +126,19 @@ export class UnitCheckComponent implements OnInit, OnDestroy { this.bs.getUnitData(unitId).subscribe((data: UnitData) => { // VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV - while (this.iFrameHostElement.hasChildNodes()) { - this.iFrameHostElement.removeChild(this.iFrameHostElement.lastChild); + while (this.iFrameHostElement.nativeElement.hasChildNodes()) { + this.iFrameHostElement.nativeElement.removeChild(this.iFrameHostElement.nativeElement.lastChild); } this.iFrameItemplayer = <HTMLIFrameElement>document.createElement('iframe'); this.iFrameItemplayer.setAttribute('srcdoc', data.player); this.iFrameItemplayer.setAttribute('sandbox', 'allow-forms allow-scripts allow-same-origin'); this.iFrameItemplayer.setAttribute('class', 'unitHost'); - this.iFrameItemplayer.setAttribute('height', String(this.iFrameHostElement.clientHeight)); + this.iFrameItemplayer.setAttribute('height', String(this.iFrameHostElement.nativeElement.clientHeight)); this.pendingItemDefinition$.next(data.def); - this.iFrameHostElement.appendChild(this.iFrameItemplayer); + this.iFrameHostElement.nativeElement.appendChild(this.iFrameItemplayer); this.dataLoading = false; }); } diff --git a/src/styles.css b/src/styles.css index 5934adcf41fd0c8dc8d76d53358a2ea6b3c0cdd3..9aa631cfddc7a227aa8337ca03c12aa8aada37bd 100644 --- a/src/styles.css +++ b/src/styles.css @@ -23,10 +23,15 @@ } .sheetofpaper { - flex: 10 0 900px; + display: block; + position: absolute; box-shadow: 5px 10px 20px black; background-color: white; - min-height: 90%; + min-height: auto; + bottom:0; + top:0; + left:0; + right:0; margin: 15px; padding: 5px; }