report started

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>

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;
+}

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>

src/app/sys-check/questionnaire/questionnaire.component.ts

+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);
+        });
       }
     });
   }

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;

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>

src/app/sys-check/report/report.component.ts

-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() {
-
-  }
 }

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;
       }
     }
 

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,