File

src/app/test-controller/unit-menu/unit-menu.component.ts

Implements

OnInit

Metadata

styleUrls ./unit-menu.component.css
templateUrl ./unit-menu.component.html

Index

Properties
Methods

Constructor

constructor(tcs: TestControllerService)
Parameters :
Name Type Optional
tcs TestControllerService No

Methods

ngOnInit
ngOnInit()
Returns : void
terminateTest
terminateTest()
Returns : void

Properties

loginName
Type : string
Default value : '??'
Public tcs
Type : TestControllerService
unitMenuButtonList
Type : UnitMenuButtonData[]
Default value : []
import { Component, OnInit } from '@angular/core';
import { TestControllerService } from '../test-controller.service';
import { UnitMenuButtonData } from '../test-controller.interfaces';
import { MainDataService } from '../../maindata.service';

@Component({
  templateUrl: './unit-menu.component.html',
  styleUrls: ['./unit-menu.component.css']
})
export class UnitMenuComponent implements OnInit {
  unitMenuButtonList: UnitMenuButtonData[] = [];
  loginName = '??';

  constructor(
    public tcs: TestControllerService
  ) { }

  ngOnInit(): void {
    this.unitMenuButtonList = [];
    setTimeout(() => {
      const authData = MainDataService.getAuthData();
      if (authData) {
        this.loginName = authData.displayName;
      }

      let testletMarkerSwitch = true;
      let prevTestletLabel = '';
      if (this.tcs.bookletConfig.unit_menu !== 'OFF' || this.tcs.testMode.showUnitMenu) {
        for (let unitIndex = 0; unitIndex < this.tcs.unitListForNaviButtons.length; unitIndex++) {
          if (this.tcs.unitListForNaviButtons[unitIndex].longLabel.trim()
            && (!this.tcs.unitListForNaviButtons[unitIndex].disabled || this.tcs.bookletConfig.unit_menu === 'FULL')) {
            const testletLabel = this.tcs.unitListForNaviButtons[unitIndex].testletLabel;
            let testletMarker = 'testlet-marker-non';
            if (testletLabel) {
              if (testletLabel !== prevTestletLabel) {
                testletMarkerSwitch = !testletMarkerSwitch;
                prevTestletLabel = testletLabel;
              }
              testletMarker = testletMarkerSwitch ? 'testlet-marker-a' : 'testlet-marker-b';
            }
            this.unitMenuButtonList.push({
              sequenceId: this.tcs.unitListForNaviButtons[unitIndex].sequenceId,
              label: this.tcs.unitListForNaviButtons[unitIndex].longLabel,
              isCurrent: this.tcs.unitListForNaviButtons[unitIndex].isCurrent,
              isDisabled: this.tcs.unitListForNaviButtons[unitIndex].disabled,
              testletLabel,
              testletMarker
            });
          }
        }
      }
    });
  }

  terminateTest(): void {
    this.tcs.terminateTest('BOOKLETLOCKEDbyTESTEE');
  }
}
<div class="menu-body">
  <div fxLayout="row wrap" fxLayoutAlign="center stretch">
    <mat-card fxFlex="0 0 400px" fxLayout="column" *ngIf="unitMenuButtonList.length > 0">
      <mat-card-title>{{ 'Aufgaben' | customtext:'booklet_tasklisttitle' | async }}</mat-card-title>
      <mat-card-content>
        <div fxLayout="column" fxLayoutAlign="center stretch">
          <div *ngFor="let u of unitMenuButtonList" fxLayout="column" fxLayoutAlign="center stretch">
            <div fxLayout="row" fxLayoutAlign="space-between stretch">
              <div [class]="u.testletMarker" [matTooltip]="u.testletLabel" fxFlex="0 0 10px"></div>
              <div [class]="u.isCurrent ? 'active-unit' : 'non-active-unit'" fxFlex fxLayout="column">
                <button mat-flat-button (click)="tcs.setUnitNavigationRequest(u.sequenceId.toString())" [disabled]="u.isDisabled">
                  {{u.label}}
                </button>
              </div>
            </div>
          </div>
        </div>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" (click)="terminateTest()">
          {{ 'Test beenden'  | customtext:'login_testEndButtonLabel' | async}}
        </button>
      </mat-card-actions>
    </mat-card>

    <mat-card fxFlex="0 0 400px" fxLayout="column" *ngIf="unitMenuButtonList.length === 0" class="mat-card-box">
      <mat-card-title>{{ tcs.rootTestlet?.title }}</mat-card-title>
      <mat-card-content>
        <p><b>Angemeldet als "{{loginName}}"</b></p>
        <p><b>{{tcs.testMode.modeLabel}}</b></p>
        <p *ngIf="(tcs.testStatus$ | async) === tcs.testStatusEnum.ERROR" style="color: chocolate">
          <b>{{ 'Es ist ein Fehler aufgetreten.' | customtext:'booklet_errormessage' | async }} </b>
        </p>
        <p *ngIf="(tcs.testStatus$ | async) === tcs.testStatusEnum.PAUSED" style="color: chocolate">
          <b>{{ 'Testpause' | customtext:'booklet_pausedmessage' | async }} </b>
        </p>
        <p *ngIf="(tcs.testStatus$ | async) === tcs.testStatusEnum.RUNNING" style="color: chocolate">
          <b>Der Test ist aktiv.</b>
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" (click)="terminateTest()">
          {{ 'Test beenden'  | customtext:'login_testEndButtonLabel' | async}}
        </button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

./unit-menu.component.css

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

mat-card {
  margin: 10px;
}

.mat-card-box {
  background-color: var(--tc-box-background)
}

.active-unit {
  background-color: #b2ff59;
  padding: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.non-active-unit {
  background-color: transparent;
  padding: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testlet-marker-non {
  background-color: transparent;
}

.testlet-marker-a {
  background-color: royalblue;
}

.testlet-marker-b {
  background-color: mediumorchid;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""