File

src/app/test-controller/unlock-input/unlock-input.component.ts

Implements

OnInit

Metadata

styleUrls ./unlock-input.component.css
templateUrl ./unlock-input.component.html

Index

Properties
Methods

Constructor

constructor(router: Router, route: ActivatedRoute, cts: CustomtextService, tcs: TestControllerService, snackBar: MatSnackBar)
Parameters :
Name Type Optional
router Router No
route ActivatedRoute No
cts CustomtextService No
tcs TestControllerService No
snackBar MatSnackBar No

Methods

continue
continue()
Returns : void
ngOnInit
ngOnInit()
Returns : void
return
return()
Returns : void

Properties

codes
Type : CodeInputData[]
Default value : []
Public cts
Type : CustomtextService
formControls
Type : object
Default value : {}
newUnit
Type : UnitControllerData
returnTo
Type : string
startkeyform
Type : FormGroup
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-input.component.css

.unlock-body {
  position: absolute;
  width: 100%;
}

mat-card {
  margin: 10px;
}

.prompt {
  margin-bottom: 20px;
  margin-top: 20px;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""