diff --git a/src/app/logindata.service.ts b/src/app/logindata.service.ts index 3503d2542438580bbe5aed325b568483a516e83d..2b127dfdad3070a3d38a34ad6d54511167831599 100644 --- a/src/app/logindata.service.ts +++ b/src/app/logindata.service.ts @@ -9,7 +9,7 @@ import { Injectable } from '@angular/core'; export class LogindataService { // observed only by app.components for the page header - public pageTitle$ = new BehaviorSubject<string>('IQB-Testcenter - Willkommen'); + public pageTitle$ = new BehaviorSubject<string>('IQB-Testcenter'); // key for test-controller // only these two are stored in localStorage diff --git a/src/app/sys-check/environment-check/environment-check.component.css b/src/app/sys-check/environment-check/environment-check.component.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..54fad71f7c1d8f3d630584cfe13cd792e8ded828 100644 --- a/src/app/sys-check/environment-check/environment-check.component.css +++ b/src/app/sys-check/environment-check/environment-check.component.css @@ -0,0 +1,23 @@ +mat-card-content { + margin-left: 30px; +} + +.material-icons { + position: relative; + top: 6px; +} + +.step-body { + position: absolute; + width: auto; + top: 70px; + bottom: 15px; + padding: 0px; + margin-bottom: 20px; + height: auto; + background-color: white; + display: block; + left: 15px; + right: 15px; + overflow: auto; +} diff --git a/src/app/sys-check/environment-check/environment-check.component.html b/src/app/sys-check/environment-check/environment-check.component.html index 3d7d4f5d8dd94d7a28c36be62c1454d3ed14bc65..fcde0cbabfcd234fcc960c50b5ed5b1f86bbaabe 100644 --- a/src/app/sys-check/environment-check/environment-check.component.html +++ b/src/app/sys-check/environment-check/environment-check.component.html @@ -1,66 +1,40 @@ -<br> -<mat-card> - <!-- <button (click)="goto()">Go To</button> --> - <!-- <button mat-raised-button (click)="osInfo()">Press for screen size</button> --> - <!-- <button mat-raised-button (click)="removeSysInfo()">Hide info</button> --> - <mat-list> - <mat-list-item *ngIf="discoveredEnvRating.OSRating === 'Good'">OS is <span style="color: darkgreen; font-weight: bold;"> {{discoveredEnvRating.OSRating }} </span> <i class="material-icons networkCheck_inlineIcon">check</i> ({{ osName }}) </mat-list-item> - <mat-divider></mat-divider> - <mat-list-item *ngIf="discoveredEnvRating.OSRating === 'N/A'">OS is <span style="color: darkgrey; font-weight: bold;"> {{discoveredEnvRating.OSRating }} </span> <i class="material-icons networkCheck_inlineIcon">warning</i> ({{ osName }}) </mat-list-item> - <mat-divider></mat-divider> - <mat-list-item *ngIf="discoveredEnvRating.OSRating === 'Possibly compatible'">OS is <span style="color: orange; font-weight: bold;"> {{discoveredEnvRating.OSRating }} </span> <i class="material-icons networkCheck_inlineIcon">warning</i> ({{ osName }}) </mat-list-item> - <mat-divider></mat-divider> - <mat-list-item *ngIf="discoveredEnvRating.OSRating === 'Not compatible'">OS is <span style="color: red; font-weight: bold;"> {{discoveredEnvRating.OSRating }} </span> <i class="material-icons networkCheck_inlineIcon">error</i> ({{ osName }}) </mat-list-item> - <mat-divider></mat-divider> - - <mat-list-item *ngIf="discoveredEnvRating.ResolutionRating === 'Good'">Resolution is <span style="color: darkgreen; font-weight: bold;"> {{discoveredEnvRating.ResolutionRating}} </span> <i class="material-icons networkCheck_inlineIcon">check</i> ({{ screenSize }})</mat-list-item> - <mat-divider></mat-divider> - <mat-list-item *ngIf="discoveredEnvRating.ResolutionRating === 'N/A'">Resolution is <span style="color: darkgrey; font-weight: bold;"> {{discoveredEnvRating.ResolutionRating}} </span> <i class="material-icons networkCheck_inlineIcon">warning</i> ({{ screenSize }})</mat-list-item> - <mat-divider></mat-divider> - <mat-list-item *ngIf="discoveredEnvRating.ResolutionRating === 'Possibly compatible'">Resolution is <span style="color: orange; font-weight: bold;"> {{discoveredEnvRating.ResolutionRating}} </span> <i class="material-icons networkCheck_inlineIcon">warning</i> ({{ screenSize }})</mat-list-item> - <mat-divider></mat-divider> - <mat-list-item *ngIf="discoveredEnvRating.ResolutionRating === 'Not compatible'">Resolution is <span style="color: red; font-weight: bold;"> {{discoveredEnvRating.ResolutionRating}} </span> <i class="material-icons networkCheck_inlineIcon">error</i> ({{ screenSize }})</mat-list-item> - <mat-divider></mat-divider> - - <mat-list-item *ngIf="discoveredEnvRating.BrowserRating === 'Good'">Browser is <span style="color: darkgreen; font-weight: bold;"> {{discoveredEnvRating.BrowserRating}} </span> <i class="material-icons networkCheck_inlineIcon">check</i>({{ result[0] }} {{ result[1] }})</mat-list-item> - <mat-list-item *ngIf="discoveredEnvRating.BrowserRating === 'N/A'">Browser is <span style="color: darkgrey; font-weight: bold;"> {{discoveredEnvRating.BrowserRating}} </span> <i class="material-icons networkCheck_inlineIcon">warning</i>({{ result[0] }} {{ result[1] }})</mat-list-item> - <mat-list-item *ngIf="discoveredEnvRating.BrowserRating === 'Possibly compatible'">Browser is <span style="color: orange; font-weight: bold;"> {{discoveredEnvRating.BrowserRating}} </span> <i class="material-icons networkCheck_inlineIcon">warning</i>({{ result[0] }} {{ result[1] }})</mat-list-item> - <mat-list-item *ngIf="discoveredEnvRating.BrowserRating === 'Not compatible'">Browser is <span style="color: red; font-weight: bold;"> {{discoveredEnvRating.BrowserRating}} </span> <i class="material-icons networkCheck_inlineIcon">error</i>({{ result[0] }} {{ result[1] }})</mat-list-item> - </mat-list> - -</mat-card> -<br> - - - - - - - - - - - -<!-- <p *ngIf="discoveredEnvRating.ResolutionRating === 'Not compatible'"> - Ihre Verbindung zum Testserver ist: <span style="color: red; font-weight: bold;">unzureichend <i class="material-icons networkCheck_inlineIcon">error</i></span> - </p> - - <p *ngIf="networkRating === 'slow'"> - Ihre Verbindung zum Testserver ist: <span style="color: orange; font-weight: bold;">langsam <i class="material-icons networkCheck_inlineIcon">warning</i></span> - </p> - - <p *ngIf="networkRating === 'ok'"> - Ihre Verbindung zum Testserver ist: <span style="color: green; font-weight: bold;">ok <i class="material-icons networkCheck_inlineIcon">check</i></span> - </p> - - <p *ngIf="networkRating === 'fast'"> - Ihre Verbindung zum Testserver ist: <span style="color: green; font-weight: bold;">schnell <i class="material-icons networkCheck_inlineIcon">check</i></span> - </p> - - <p *ngIf="networkRating === 'very fast'"> - Ihre Verbindung zum Testserver ist: <span style="color: darkgreen; font-weight: bold;">sehr schnell <i class="material-icons networkCheck_inlineIcon">check</i></span> - </p> - - <p *ngIf="networkRating === 'wow'"> - Ihre Verbindung zum Testserver ist: <span style="color: darkgreen; font-weight: bold;">sehr schnell (wow!) <i class="material-icons networkCheck_inlineIcon">check</i></span> - </p> --> \ No newline at end of file +<div class="step-body"> + <mat-card> + <mat-card-title>Betriebssystem</mat-card-title> + <mat-card-content> + <p>{{ osName }}</p> + <p [ngSwitch]="discoveredEnvRating.OSRating"> + <span *ngSwitchCase="'Good'" style="color: darkgreen; font-weight: bold;">gut <i class="material-icons">check</i></span> + <span *ngSwitchCase="'N/A'" style="color: darkgrey; font-weight: bold;">konnte nicht ermittelt werden <i class="material-icons">warning</i></span> + <span *ngSwitchCase="'Possibly compatible'" style="color: orange; font-weight: bold;">ausreichend <i class="material-icons">warning</i></span> + <span *ngSwitchCase="'Not compatible'" style="color: red; font-weight: bold;">nicht ausreichend <i class="material-icons">error</i></span> + </p> + </mat-card-content> + </mat-card> + + <mat-card> + <mat-card-title>Bildschirm-Auflösung</mat-card-title> + <mat-card-content> + <p>{{ discoveredEnvData.resolution.width }} x {{ discoveredEnvData.resolution.height }} px</p> + <p [ngSwitch]="discoveredEnvRating.ResolutionRating"> + <span *ngSwitchCase="'Good'" style="color: darkgreen; font-weight: bold;">gut <i class="material-icons">check</i></span> + <span *ngSwitchCase="'N/A'" style="color: darkgrey; font-weight: bold;">konnte nicht ermittelt werden <i class="material-icons">warning</i></span> + <span *ngSwitchCase="'Possibly compatible'" style="color: orange; font-weight: bold;">ausreichend <i class="material-icons">warning</i></span> + <span *ngSwitchCase="'Not compatible'" style="color: red; font-weight: bold;">nicht ausreichend <i class="material-icons">error</i></span> + </p> + </mat-card-content> + </mat-card> + + <mat-card> + <mat-card-title>Browser</mat-card-title> + <mat-card-content> + <p>{{ result[0] }} {{ result[1] }}</p> + <p [ngSwitch]="discoveredEnvRating.BrowserRating"> + <span *ngSwitchCase="'Good'" style="color: darkgreen; font-weight: bold;">gut <i class="material-icons">check</i></span> + <span *ngSwitchCase="'N/A'" style="color: darkgrey; font-weight: bold;">konnte nicht ermittelt werden <i class="material-icons">warning</i></span> + <span *ngSwitchCase="'Possibly compatible'" style="color: orange; font-weight: bold;">ausreichend <i class="material-icons">warning</i></span> + <span *ngSwitchCase="'Not compatible'" style="color: red; font-weight: bold;">nicht ausreichend <i class="material-icons">error</i></span> + </p> + </mat-card-content> + </mat-card> +</div> diff --git a/src/app/sys-check/network-check/network-check.component.css b/src/app/sys-check/network-check/network-check.component.css index 4519b63af82c4f62959f21fb0b932c61f3dc6985..6fcdad0f8e33994266fdd1be4101244d814ea44f 100644 --- a/src/app/sys-check/network-check/network-check.component.css +++ b/src/app/sys-check/network-check/network-check.component.css @@ -1,4 +1,23 @@ -.networkCheck_inlineIcon { +.material-icons { position: relative; top: 6px; -} \ No newline at end of file +} + +mat-card-content { + margin-left: 30px; +} + +.step-body { + position: absolute; + width: auto; + top: 70px; + bottom: 15px; + padding: 0px; + margin-bottom: 20px; + height: auto; + background-color: white; + display: block; + left: 15px; + right: 15px; + overflow: auto; +} diff --git a/src/app/sys-check/network-check/network-check.component.html b/src/app/sys-check/network-check/network-check.component.html index 4d64f446d002c73cfb83b329ef6215be3833a8fe..8e5ee74ebd82386ca59b2b7db09729d5cc2a1ca5 100644 --- a/src/app/sys-check/network-check/network-check.component.html +++ b/src/app/sys-check/network-check/network-check.component.html @@ -1,40 +1,42 @@ -<!-- -<div class="spinner-container" *ngIf="dataLoading"> -</div> ---> - -<p>{{this.status}}</p> - -<div *ngIf="!testDone"> - <p> +<div class="spinner-container" *ngIf="!testDone"> <mat-spinner></mat-spinner> - </p> </div> - -<div *ngIf="testDone"> - <p> - Downloadgeschwindigkeit: {{averageSpeed.downloadTest | number}} bytes pro Sekunde<br> - Uploadgeschwindigkeit: {{averageSpeed.uploadTest | number}} bytes pro Sekunde<br > - Ping: {{averageSpeed.pingTest | number}} ms - </p> - - <!-- network rating in simpler terms --> - <p *ngIf="networkRating === 'insufficient'"> - Ihre Verbindung zum Testserver ist: <span style="color: red; font-weight: bold;">unzureichend <i class="material-icons networkCheck_inlineIcon">error</i></span> - </p> - - <p *ngIf="networkRating === 'ok'"> - Ihre Verbindung zum Testserver ist: <span style="color: orange; font-weight: bold;">ok, aber vorsichtig <i class="material-icons networkCheck_inlineIcon">warning</i></span> - </p> - - <p *ngIf="networkRating === 'good'"> - Ihre Verbindung zum Testserver ist: <span style="color: green; font-weight: bold;">gut <i class="material-icons networkCheck_inlineIcon">check</i></span> - </p> - - <!-- end of network rating in simpler terms --> - - <p> - <button mat-raised-button (click)="startCheck()" *ngIf="testDone">Netz erneut prüfen</button> - </p> - -</div> \ No newline at end of file +<div class="step-body"> + <div *ngIf="!testDone"> + <p>{{this.status}}</p> + </div> + + <div *ngIf="testDone"> + <p [ngSwitch]="networkRating">Ihre Verbindung zum Testserver ist + <span *ngSwitchCase="'insufficient'" style="color: red; font-weight: bold;">unzureichend <i class="material-icons">error</i></span> + <span *ngSwitchCase="'ok'" style="color: orange; font-weight: bold;">vorauss. ausreichend (bes. Vorsichtsmaßnahmen treffen!) <i class="material-icons">warning</i></span> + <span *ngSwitchCase="'good'" style="color: green; font-weight: bold;">gut <i class="material-icons">check</i></span> + <button mat-raised-button (click)="startCheck()">Netz erneut prüfen</button> + </p> + </div> + + + <mat-card> + <mat-card-title>Geschwindigkeit Download</mat-card-title> + <mat-card-content> + <p *ngIf="averageSpeed.downloadTest >= 0">{{ averageSpeed.downloadTest | number }} bytes pro Sekunde</p> + <p *ngIf="averageSpeed.downloadTest < 0">bitte warten</p> + </mat-card-content> + </mat-card> + + <mat-card> + <mat-card-title>Geschwindigkeit Upload</mat-card-title> + <mat-card-content> + <p *ngIf="averageSpeed.uploadTest >= 0">{{ averageSpeed.uploadTest | number }} bytes pro Sekunde</p> + <p *ngIf="averageSpeed.uploadTest < 0">bitte warten</p> + </mat-card-content> + </mat-card> + + <mat-card> + <mat-card-title>Ping</mat-card-title> + <mat-card-content> + <p *ngIf="averageSpeed.pingTest >= 0">{{ averageSpeed.pingTest | number }} ms</p> + <p *ngIf="averageSpeed.pingTest < 0">bitte warten</p> + </mat-card-content> + </mat-card> +</div> 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 2cef747577547f5214c841e45a11244670fec8f8..97b896848d4101e61049869790d5de8af1567b25 100644 --- a/src/app/sys-check/network-check/network-check.component.ts +++ b/src/app/sys-check/network-check/network-check.component.ts @@ -28,14 +28,6 @@ export class NetworkCheckComponent implements OnInit { } public startCheck() { - console.log('started'); - - this.networkCheck() ; - } - - - public networkCheck() { - this.testDone = false; const testResults: Array<NetworkRequestTestResult> = []; diff --git a/src/app/sys-check/report/email/email.component.css b/src/app/sys-check/report/email/email.component.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/sys-check/report/email/email.component.html b/src/app/sys-check/report/email/email.component.html new file mode 100644 index 0000000000000000000000000000000000000000..322ac28fe5bc2712a37d8914bf3ea9bd3bb231a9 --- /dev/null +++ b/src/app/sys-check/report/email/email.component.html @@ -0,0 +1,19 @@ +<form [formGroup]="emailreportform"> + <h1 mat-dialog-title>Bericht senden</h1> + + <mat-dialog-content fxLayout="column"> + <p>Der Bericht wird an eine vorbereitete E-Mail-Adresse geschickt, die Sie aus Sicherheitsgründen + nicht ändern können. Um den Bericht einem bestimmten Projekt oder einer Studie zuordnen zu können, + geben Sie bitte einen kurzen Text ein, der dann als Betreff für die E-Mail verwendet wird! + </p> + <mat-form-field> + <input matInput formControlName="subject" placeholder="Betreff"> + </mat-form-field> + </mat-dialog-content> + + <mat-dialog-actions> + <button mat-raised-button color="primary" type="submit" + [disabled]="emailreportform.invalid" [mat-dialog-close]="emailreportform">Senden</button> + <button mat-raised-button [mat-dialog-close]="false">Abbrechen</button> + </mat-dialog-actions> +</form> diff --git a/src/app/sys-check/report/email/email.component.spec.ts b/src/app/sys-check/report/email/email.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..f435ad93b4fce54c89523dfa4cef667f84343644 --- /dev/null +++ b/src/app/sys-check/report/email/email.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EmailComponent } from './email.component'; + +describe('EmailComponent', () => { + let component: EmailComponent; + let fixture: ComponentFixture<EmailComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EmailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EmailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/sys-check/report/email/email.component.ts b/src/app/sys-check/report/email/email.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..1f258bb52772628bd06e5d4731af766a99cc05fa --- /dev/null +++ b/src/app/sys-check/report/email/email.component.ts @@ -0,0 +1,21 @@ +import { MAT_DIALOG_DATA } from '@angular/material'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Component, OnInit, Inject } from '@angular/core'; + +@Component({ + selector: 'app-email', + templateUrl: './email.component.html', + styleUrls: ['./email.component.css'] +}) +export class EmailComponent implements OnInit { + emailreportform: FormGroup; + + constructor(private fb: FormBuilder, + @Inject(MAT_DIALOG_DATA) public data: string) { } + + ngOnInit() { + this.emailreportform = this.fb.group({ + subject: this.fb.control('', [Validators.required]) + }); + } +} diff --git a/src/app/sys-check/report/report.component.css b/src/app/sys-check/report/report.component.css index 5515af2e3617d56871683c93be7185d966a7662f..ddf385fd784b778e76938059176851055ff661ac 100644 --- a/src/app/sys-check/report/report.component.css +++ b/src/app/sys-check/report/report.component.css @@ -11,6 +11,5 @@ display: block; left: 15px; right: 15px; - overflow-y: auto; - overflow-x: scroll; + overflow: auto; } diff --git a/src/app/sys-check/run.component.html b/src/app/sys-check/run.component.html index 125eb3f1b76d252327d0d04199f0c5314ccee3c6..6c6c4b8e951de60be0240c5d15402d8f18e9914e 100644 --- a/src/app/sys-check/run.component.html +++ b/src/app/sys-check/run.component.html @@ -8,9 +8,9 @@ <ng-template matStepLabel>Computer</ng-template> <iqb-environment-check #compEnv></iqb-environment-check> <div class="navi_buttons"> - <button mat-mini-fab matStepperNext> - <i class="material-icons">chevron_right</i> - </button> + <button mat-mini-fab matStepperNext> + <i class="material-icons">chevron_right</i> + </button> </div> </mat-step> <mat-step #stepNetwork> @@ -56,7 +56,7 @@ <button mat-mini-fab matStepperPrevious> <i class="material-icons">chevron_left</i> </button> - <button mat-raised-button>Als E-Mail verschicken</button> + <button mat-raised-button (click)="reportEmail()">Als E-Mail verschicken</button> </div> </mat-step> </mat-horizontal-stepper> diff --git a/src/app/sys-check/run.component.ts b/src/app/sys-check/run.component.ts index f97fafdc744fa52efcd4a456af0aa4cae0947b7c..4de9585c035fd71da547e8e8a538ec84277929d6 100644 --- a/src/app/sys-check/run.component.ts +++ b/src/app/sys-check/run.component.ts @@ -1,3 +1,4 @@ +import { EmailComponent } from './report/email/email.component'; import { NetworkCheckComponent } from './network-check/network-check.component'; import { SyscheckDataService } from './syscheck-data.service'; import { BehaviorSubject } from 'rxjs'; @@ -7,6 +8,7 @@ import { CheckConfigData, BackendService } from './backend.service'; import { MatStepper, MatStep } from '../../../node_modules/@angular/material'; import { UnitCheckComponent } from './unit-check/unit-check.component'; import { EnvironmentCheckComponent } from './environment-check/environment-check.component'; +import { MatDialog, MatSnackBar } from '@angular/material'; @Component({ @@ -24,7 +26,6 @@ export class RunComponent implements OnInit { @ViewChild('compUnit') compUnit: UnitCheckComponent; paramId: string; - unitcheckAvailable = false; questionnaireAvailable = false; emailEnabled = false; @@ -33,7 +34,9 @@ export class RunComponent implements OnInit { constructor( private bs: BackendService, private ds: SyscheckDataService, - private route: ActivatedRoute + private route: ActivatedRoute, + private emailDialog: MatDialog, + private snackBar: MatSnackBar ) { } @@ -101,4 +104,17 @@ export class RunComponent implements OnInit { } } + + reportEmail() { + const dialogRef = this.emailDialog.open(EmailComponent, { + width: '500px', + height: '500px', + data: 'jojo' + }); + dialogRef.afterClosed().subscribe(result => { + if (result !== false) { + this.snackBar.open('E-Mail versendet.', '', {duration: 3000}); + } + }); + } } diff --git a/src/app/sys-check/sys-check.module.ts b/src/app/sys-check/sys-check.module.ts index 6961f0c173d8382cfa3a9b064f989f6ea3f5efbc..57d93a216c04f521b37c775f27db1c379c52d3b6 100644 --- a/src/app/sys-check/sys-check.module.ts +++ b/src/app/sys-check/sys-check.module.ts @@ -10,7 +10,7 @@ import { RunComponent } from './run.component'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatTooltipModule, MatCardModule, MatStepperModule, MatToolbarModule, MatIconModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatSelectModule, - MatTabsModule, MatProgressSpinnerModule } from '@angular/material'; + MatTabsModule, MatProgressSpinnerModule, MatSnackBarModule } from '@angular/material'; import {MatDividerModule} from '@angular/material/divider'; import {MatListModule} from '@angular/material/list'; import { ReactiveFormsModule } from '@angular/forms'; @@ -20,6 +20,7 @@ import { NetworkCheckComponent } from './network-check/network-check.component'; import { UnitCheckComponent } from './unit-check/unit-check.component'; import { QuestionnaireComponent } from './questionnaire/questionnaire.component'; import { ReportComponent } from './report/report.component'; +import { EmailComponent } from './report/email/email.component'; @NgModule({ imports: [ @@ -36,6 +37,8 @@ import { ReportComponent } from './report/report.component'; MatDividerModule, MatListModule, MatSelectModule, + MatSnackBarModule, + MatDialogModule, ReactiveFormsModule ], declarations: [ @@ -46,10 +49,14 @@ import { ReportComponent } from './report/report.component'; UnitCheckComponent, QuestionnaireComponent, ResizeIFrameChildDirective, - ReportComponent], + ReportComponent, + EmailComponent], exports: [ StartComponent ], + entryComponents: [ + EmailComponent + ], providers: [ BackendService, SyscheckDataService