From 7c733af9cf8a1041e47f7ada0f562ac468221f72 Mon Sep 17 00:00:00 2001
From: Martin Mechtel <mechtelm@user.hu-berlin.de>
Date: Mon, 17 Dec 2018 20:09:38 +0100
Subject: [PATCH] report started
---
src/app/start/start.component.html | 6 ++---
.../questionnaire/questionnaire.component.css | 13 ++++++++++
.../questionnaire.component.html | 26 ++++++++-----------
.../questionnaire/questionnaire.component.ts | 18 ++++++++++++-
src/app/sys-check/report/report.component.css | 2 +-
.../sys-check/report/report.component.html | 8 ++++--
src/app/sys-check/report/report.component.ts | 19 +++++---------
src/app/sys-check/run.component.ts | 2 +-
src/app/sys-check/sys-check.module.ts | 10 +++++--
9 files changed, 67 insertions(+), 37 deletions(-)
diff --git a/src/app/start/start.component.html b/src/app/start/start.component.html
index c69261e9..144a80fb 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 04484579..4300c565 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 58060317..8de6b595 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 4c4af822..deb05797 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 04484579..c695f52c 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 52af00d7..91fe87db 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 274b5bc8..42194b5a 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 e512b8bb..b0ed894f 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 7f53a26f..6961f0c1 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,
--
GitLab