diff --git a/src/app/start/start.component.html b/src/app/start/start.component.html index c69261e98348b35ac75b823e5f1d16bd4580bb6e..144a80fb3bce77dd5cacdff48768e9d1797efdb1 100644 --- a/src/app/start/start.component.html +++ b/src/app/start/start.component.html @@ -11,10 +11,10 @@ <form [formGroup]="testtakerloginform" (ngSubmit)="testtakerlogin()"> <mat-card-title>Anmelden</mat-card-title> <mat-card-content> - <mat-form-field class="full-width"> + <mat-form-field> <input matInput formControlName="testname" placeholder="Anmeldename" (keyup.enter)="pw.focus()"> </mat-form-field> - <mat-form-field class="full-width"> + <mat-form-field> <input matInput #pw type="password" formControlName="testpw" placeholder="Kennwort" (keyup.enter)="testtakerlogin()"> </mat-form-field> </mat-card-content> @@ -29,7 +29,7 @@ <form [formGroup]="codeinputform" (ngSubmit)="codeinput()"> <mat-card-title>Anmelden</mat-card-title> <mat-card-content> - <mat-form-field class="full-width"> + <mat-form-field> <input matInput formControlName="code" placeholder="Personen-Code"(keyup.enter)="codeinput()"> </mat-form-field> </mat-card-content> diff --git a/src/app/sys-check/questionnaire/questionnaire.component.css b/src/app/sys-check/questionnaire/questionnaire.component.css index 04484579a2d94260287c2f3cc580c0f98f3a6c86..4300c5652f4298207bfe91117edd3498c3e54d39 100644 --- a/src/app/sys-check/questionnaire/questionnaire.component.css +++ b/src/app/sys-check/questionnaire/questionnaire.component.css @@ -12,3 +12,16 @@ left: 15px; right: 15px; } + +.formList { + margin: 30px; + max-width: 800px; +} + +.formEntry { + margin: 10px 0 0 0; +} + +.field { + width: 200px; +} diff --git a/src/app/sys-check/questionnaire/questionnaire.component.html b/src/app/sys-check/questionnaire/questionnaire.component.html index 580603178ae113dd4f5289a7c89a5943379e85f3..8de6b59519d8d2fed1ef122ccabb0e76e0a28ba7 100644 --- a/src/app/sys-check/questionnaire/questionnaire.component.html +++ b/src/app/sys-check/questionnaire/questionnaire.component.html @@ -2,22 +2,18 @@ <mat-spinner></mat-spinner> </div> <div class="step-body" #questionnaireBody> -<!-- <div [formGroup]="form"> - <div *ngFor="let f of formdef"> + <div [formGroup]="form" class="formList" fxLayout="column"> + <div *ngFor="let f of formdef" fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="left top" class="formEntry"> <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> + <mat-form-field class="field" [ngSwitch]="f.type" *ngIf="f.type !== 'header'"> + <input matInput *ngSwitchCase="'string'" [formControlName]="f.id"> + <mat-select [id]="f.id" *ngSwitchCase="'select'" [formControlName]="f.id"> + <mat-option *ngFor="let opt of f.options" [value]="opt"> + {{opt}} + </mat-option> + </mat-select> + </mat-form-field> </div> - </div>--> + </div> </div> diff --git a/src/app/sys-check/questionnaire/questionnaire.component.ts b/src/app/sys-check/questionnaire/questionnaire.component.ts index 4c4af82201edf312c28226012eb03da2a23e75e2..deb05797255cd77d56891c80a013b7a42d3c7153 100644 --- a/src/app/sys-check/questionnaire/questionnaire.component.ts +++ b/src/app/sys-check/questionnaire/questionnaire.component.ts @@ -1,5 +1,6 @@ +import { FormControl, FormGroup } from '@angular/forms'; import { FormDefEntry } from './../backend.service'; -import { SyscheckDataService } from './../syscheck-data.service'; +import { SyscheckDataService, ReportEntry } from './../syscheck-data.service'; import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; @Component({ @@ -11,6 +12,7 @@ export class QuestionnaireComponent implements OnInit { @ViewChild('questionnaireBody') questionnaireBody: ElementRef; questionnaireEnabled = false; formdef: FormDefEntry[] = []; + form: FormGroup; constructor( private ds: SyscheckDataService @@ -24,6 +26,20 @@ export class QuestionnaireComponent implements OnInit { this.formdef = []; } else { this.formdef = cc.formdef; + const group: any = {}; + + this.formdef.forEach(question => { + group[question.id] = new FormControl(''); + }); + this.form = new FormGroup(group); + this.form.valueChanges.subscribe(f => { + const myReportEntries: ReportEntry[] = []; + this.formdef.forEach(element => { + const myValue = this.form.controls[element.id].value; + myReportEntries.push({'label': element.prompt, 'value': myValue}); + }); + this.ds.questionnaireData$.next(myReportEntries); + }); } }); } diff --git a/src/app/sys-check/report/report.component.css b/src/app/sys-check/report/report.component.css index 04484579a2d94260287c2f3cc580c0f98f3a6c86..c695f52cd65be1f4dc09f1b2b30c1cdb613c9718 100644 --- a/src/app/sys-check/report/report.component.css +++ b/src/app/sys-check/report/report.component.css @@ -3,7 +3,7 @@ width: auto; top: 70px; bottom: 15px; - padding: 0px; + padding: 30px; margin-bottom: 20px; height: auto; background-color: white; diff --git a/src/app/sys-check/report/report.component.html b/src/app/sys-check/report/report.component.html index 52af00d7a5d4b2f6a107216597244626a3fcea4b..91fe87db75f76da21df6344cc2290fc130220a65 100644 --- a/src/app/sys-check/report/report.component.html +++ b/src/app/sys-check/report/report.component.html @@ -2,6 +2,10 @@ <mat-spinner></mat-spinner> </div> <div class="step-body"> - <p>report works not.</p> - + <h2>Computer-Info</h2> + <p *ngFor="let rd of environmentData">{{ rd.label }}: {{ rd.value }}</p> + <h2>Netzwerk-Info</h2> + <p *ngFor="let rd of networkData">{{ rd.label }}: {{ rd.value }}</p> + <h2>Fragen</h2> + <p *ngFor="let rd of questionnaireData">{{ rd.label }}: {{ rd.value }}</p> </div> diff --git a/src/app/sys-check/report/report.component.ts b/src/app/sys-check/report/report.component.ts index 274b5bc8fe305a8aaae32ce0bae09f742487094b..42194b5a3bd9b19e2d89ecf9461212af00240ab7 100644 --- a/src/app/sys-check/report/report.component.ts +++ b/src/app/sys-check/report/report.component.ts @@ -1,5 +1,4 @@ -import { merge } from 'rxjs'; -import { SyscheckDataService } from './../syscheck-data.service'; +import { SyscheckDataService, ReportEntry } from './../syscheck-data.service'; import { Component, OnInit } from '@angular/core'; @Component({ @@ -9,6 +8,9 @@ import { Component, OnInit } from '@angular/core'; }) export class ReportComponent implements OnInit { reportEnabled = false; + environmentData: ReportEntry[] = []; + networkData: ReportEntry[] = []; + questionnaireData: ReportEntry[] = []; constructor( private ds: SyscheckDataService @@ -16,17 +18,10 @@ export class ReportComponent implements OnInit { } ngOnInit() { - merge( - this.ds.environmentData$, - this.ds.networkData$, - this.ds.questionnaireData$).subscribe(t => { - this.updateReport(); - }); + this.ds.environmentData$.subscribe(rd => this.environmentData = rd); + this.ds.networkData$.subscribe(rd => this.networkData = rd); + this.ds.questionnaireData$.subscribe(rd => this.questionnaireData = rd); this.ds.reportEnabled$.subscribe(is => this.reportEnabled = is); } - - updateReport() { - - } } diff --git a/src/app/sys-check/run.component.ts b/src/app/sys-check/run.component.ts index e512b8bb7d74bd5608e4c1d2ff6a544f22bdca1a..b0ed894f342156d55276b54ac28b79456015d290 100644 --- a/src/app/sys-check/run.component.ts +++ b/src/app/sys-check/run.component.ts @@ -68,7 +68,7 @@ export class RunComponent implements OnInit { } else if (e.selectedStep === this.stepNetwork) { if (!this.stepNetwork.completed) { this.compNetwork.startCheck(); - // this.stepNetwork.completed = true; + this.stepNetwork.completed = true; } } diff --git a/src/app/sys-check/sys-check.module.ts b/src/app/sys-check/sys-check.module.ts index 7f53a26f6689ad98e6ef06248c96fd1fae21bfb1..6961f0c173d8382cfa3a9b064f989f6ea3f5efbc 100644 --- a/src/app/sys-check/sys-check.module.ts +++ b/src/app/sys-check/sys-check.module.ts @@ -9,10 +9,11 @@ import { StartComponent } from './start.component'; import { RunComponent } from './run.component'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatTooltipModule, MatCardModule, MatStepperModule, - MatToolbarModule, MatIconModule, MatDialogModule, MatFormFieldModule, MatInputModule, + MatToolbarModule, MatIconModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatTabsModule, MatProgressSpinnerModule } from '@angular/material'; import {MatDividerModule} from '@angular/material/divider'; import {MatListModule} from '@angular/material/list'; +import { ReactiveFormsModule } from '@angular/forms'; import { EnvironmentCheckComponent } from './environment-check/environment-check.component'; import { NetworkCheckComponent } from './network-check/network-check.component'; @@ -25,12 +26,17 @@ import { ReportComponent } from './report/report.component'; CommonModule, MatCardModule, FlexLayoutModule, + MatCheckboxModule, + MatFormFieldModule, + MatInputModule, SysCheckRoutingModule, MatProgressSpinnerModule, MatStepperModule, MatButtonModule, MatDividerModule, - MatListModule + MatListModule, + MatSelectModule, + ReactiveFormsModule ], declarations: [ StartComponent,