File

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

Implements

OnInit

Metadata

selector unit-menu
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

isArray
isArray(obj)
Parameters :
Name Optional
obj No
Returns : boolean
ngOnInit
ngOnInit()
Returns : void
terminateTest
terminateTest()
Returns : void

Properties

menu
Type : Array<string | []>
Default value : []
Public tcs
Type : TestControllerService
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>



./unit-menu.component.css

: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
Component
Html element with directive

results matching ""

    No results matching ""