File
Implements
Metadata
styleUrls |
./unit-menu.component.css |
templateUrl |
./unit-menu.component.html |
Methods
terminateTest
|
terminateTest()
|
|
|
loginName
|
Type : string
|
Default value : '??'
|
|
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>
.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 with directive