File
Implements
Metadata
selector |
unit-menu |
styleUrls |
./unit-menu.component.css |
templateUrl |
./unit-menu.component.html |
Methods
terminateTest
|
terminateTest()
|
|
|
menu
|
Type : Array<string | []>
|
Default value : []
|
|
import { Component, OnInit } from '@angular/core';
import { TestControllerService } from '../../services/test-controller.service';
import { UnitNaviButtonData } from '../../interfaces/test-controller.interfaces';
@Component({
selector: 'unit-menu',
templateUrl: './unit-menu.component.html',
styleUrls: ['./unit-menu.component.css']
})
export class UnitMenuComponent implements OnInit {
menu: Array<string|UnitNaviButtonData[]> = [];
constructor(
public tcs: TestControllerService
) { }
ngOnInit(): void {
this.tcs.currentUnitSequenceId$.subscribe(() => {
if (this.tcs.rootTestlet == null) {
return;
}
this.menu = [];
let prevBlockLabel = '';
let blockUnitList: UnitNaviButtonData[] = [];
const unitCount = this.tcs.rootTestlet.getMaxSequenceId() - 1;
for (let sequenceId = 1; sequenceId <= unitCount; sequenceId++) {
const unitData = this.tcs.rootTestlet.getUnitAt(sequenceId);
const unitButtonData: UnitNaviButtonData = {
sequenceId,
shortLabel: unitData.unitDef.naviButtonLabel,
longLabel: unitData.unitDef.title,
testletLabel: unitData.testletLabel,
disabled: unitData.unitDef.locked,
isCurrent: sequenceId === this.tcs.currentUnitSequenceId
};
const blockLabel = unitData.testletLabel || '';
if (blockLabel !== prevBlockLabel) {
this.menu.push(prevBlockLabel, blockUnitList);
blockUnitList = [];
}
blockUnitList.push(unitButtonData);
prevBlockLabel = blockLabel;
}
this.menu.push(prevBlockLabel, blockUnitList);
});
}
// eslint-disable-next-line class-methods-use-this
isArray(obj: unknown): boolean {
return Array.isArray(obj);
}
terminateTest(): void {
this.tcs.terminateTest('BOOKLETLOCKEDbyTESTEE', false);
}
}
<div class="sidebar-main">
<h3>{{ 'Aufgaben' | customtext:'booklet_tasklisttitle' | async }}</h3>
<ng-container *ngFor="let blockLabelOrUnitList of menu; let i = index">
<div
*ngIf="isArray(blockLabelOrUnitList); else testLetLabel"
style="width: 100%"
>
<a mat-raised-button
*ngFor="let u of blockLabelOrUnitList"
[class]="{'current': u.isCurrent}"
(click)="tcs.setUnitNavigationRequest(u.sequenceId.toString())"
[disabled]="u.disabled"
>
<mat-icon *ngIf="!tcs.isUnitContentLoaded(u.sequenceId)" matTooltip="wird geladen">
hourglass_empty
</mat-icon>
{{u.longLabel}}
</a>
</div>
<ng-template #testLetLabel>
<h4 *ngIf="blockLabelOrUnitList || i > 0" class='testlet-label'>
{{blockLabelOrUnitList}}
</h4>
</ng-template>
</ng-container>
</div>
<div class="sidebar-bottom">
<a mat-raised-button color="primary" (click)="terminateTest()">
{{ 'Test beenden' | customtext:'login_testEndButtonLabel' | async}}
</a>
</div>
:host {
display: flex;
flex-direction: column;
height: 100%;
}
.sidebar-main {
padding: 15px;
margin-bottom: 1em;
flex: 1;
}
.sidebar-bottom {
padding: 15px;
}
.testlet-label {
text-align: center;
margin-bottom: 4px;
width: 100%;
}
h3 {
text-align: center;
margin-bottom: 1em;
width: 100%;
}
a {
width: 100%;
margin-bottom: 0.4em;
overflow: hidden;
}
a:last-of-type {
margin-bottom: 0;
}
.current {
background: var(--accent);
}
Legend
Html element with directive