File
Implements
Metadata
styleUrls |
./unlock-input.component.css |
templateUrl |
./unlock-input.component.html |
Public
cts
|
Type : CustomtextService
|
|
formControls
|
Type : object
|
Default value : {}
|
|
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CustomtextService } from 'iqb-components';
import { MatSnackBar } from '@angular/material/snack-bar';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { CodeInputData } from '../test-controller.interfaces';
import { UnitControllerData } from '../test-controller.classes';
import { TestControllerService } from '../test-controller.service';
@Component({
templateUrl: './unlock-input.component.html',
styleUrls: ['./unlock-input.component.css']
})
export class UnlockInputComponent implements OnInit {
startkeyform: FormGroup;
returnTo: string;
newUnit: UnitControllerData;
codes: CodeInputData[] = [];
formControls = {};
constructor(
private router: Router,
private route: ActivatedRoute,
public cts: CustomtextService,
private tcs: TestControllerService,
private snackBar: MatSnackBar
) {
const routerStateObject = this.router.getCurrentNavigation();
if (routerStateObject.extras.state) {
this.returnTo = routerStateObject.extras.state.returnTo;
this.newUnit = routerStateObject.extras.state.newUnit;
this.codes = routerStateObject.extras.state.codes;
}
}
ngOnInit(): void {
// TODO set focus and handle keydown.enter
this.codes.forEach(c => {
this.formControls[c.testletId] = new FormControl(c.value, [Validators.required, Validators.minLength(3)]);
});
this.startkeyform = new FormGroup(this.formControls);
}
return(): void {
if (this.returnTo) {
this.router.navigate([this.returnTo]);
}
}
continue(): void {
if (this.newUnit) {
let codesOk = true;
const codeInputs = this.startkeyform.value;
for (const c of this.codes) {
const testeeInput = codeInputs[c.testletId];
if (testeeInput) {
if (c.code.toUpperCase().trim() !== testeeInput.toUpperCase().trim()) {
codesOk = false;
break;
}
} else {
codesOk = false;
break;
}
}
if (codesOk) {
this.newUnit.codeRequiringTestlets.forEach(t => {
t.codeToEnter = '';
this.tcs.addClearedCodeTestlet(t.id);
});
this.router.navigate([`/t/${this.tcs.testId}/u/${this.newUnit.unitDef.sequenceId}`]);
} else {
this.snackBar.open(
'Die Eingabe war nicht korrekt.', this.cts.getCustomText('booklet_codeToEnterTitle'),
{duration: 3000}
);
}
}
}
}
<div class="unlock-body">
<div fxLayout="row wrap" fxLayoutAlign="center stretch">
<mat-card>
<form [formGroup]="startkeyform" fxLayout="column" (ngSubmit)="continue()">
<mat-card-header>{{ 'Freigabewort' | customtext:'booklet_codeToEnterTitle' | async }}</mat-card-header>
<mat-card-content>
<div class="prompt">{{ 'Bitte Freigabewort eingeben!' | customtext:'booklet_codeToEnterPrompt' | async }}</div>
<mat-form-field *ngFor="let c of codes" fxLayout="column">
<label>{{ c.prompt }}
<input matInput [formControlName]="c.testletId">
</label>
</mat-form-field>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit"
[disabled]="!startkeyform.valid"
*ngIf="newUnit">Weiter</button>
<button mat-raised-button *ngIf="returnTo" (click)="return()">Zurück</button>
</mat-card-actions>
</form>
</mat-card>
</div>
</div>
.unlock-body {
position: absolute;
width: 100%;
}
mat-card {
margin: 10px;
}
.prompt {
margin-bottom: 20px;
margin-top: 20px;
}
Legend
Html element with directive