File

src/app/test-controller/components/test-status/test-status.component.ts

Implements

OnInit OnDestroy

Metadata

styleUrls ./test-status.component.css
templateUrl ./test-status.component.html

Index

Properties
Methods

Constructor

constructor(tcs: TestControllerService, mds: MainDataService)
Parameters :
Name Type Optional
tcs TestControllerService No
mds MainDataService No

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
terminateTest
terminateTest()
Returns : void
toggleErrorDetails
toggleErrorDetails()
Returns : void

Properties

Private appErrorSubscription
Type : Subscription
error
Type : AppError
errorDetailsOpen
Default value : false
loginName
Type : string
Default value : '??'
Public mds
Type : MainDataService
Public tcs
Type : TestControllerService
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { TestControllerService } from '../../services/test-controller.service';
import { MainDataService } from '../../../maindata.service';
import { AppError } from '../../../app.interfaces';

@Component({
  templateUrl: './test-status.component.html',
  styleUrls: ['./test-status.component.css']
})

export class TestStatusComponent implements OnInit, OnDestroy {
  loginName = '??';
  error: AppError;
  errorDetailsOpen = false;
  private appErrorSubscription: Subscription;

  constructor(
    public tcs: TestControllerService,
    public mds: MainDataService
  ) { }

  ngOnInit(): void {
    setTimeout(() => {
      const authData = MainDataService.getAuthData();
      if (authData) {
        this.loginName = authData.displayName;
      }
      this.appErrorSubscription = this.mds.appError$
        .pipe(filter(error => !!error))
        .subscribe(error => {
          // This happens, when in lazy-loading-mode, an error occurred during the loading of the unit's content.
          // The error is caught here because
          // a) it can not get caught in testcontroller.component oder test-loader.service,
          // because the test-loading-promise is already completed when the unit's content gets loaded.
          // b) the error becomes visible when the units has been entered, not when it occurred.
          this.errorDetailsOpen = false;
          this.error = error;
        });
    });
  }

  ngOnDestroy(): void {
    this.appErrorSubscription.unsubscribe();
  }

  toggleErrorDetails(): void {
    this.errorDetailsOpen = !this.errorDetailsOpen;
  }

  terminateTest(): void {
    this.tcs.terminateTest('BOOKLETLOCKEDbyTESTEE', true);
  }
}
<div class="status-body">
  <div fxLayout="row wrap" fxLayoutAlign="center stretch" [ngSwitch]="(tcs.testStatus$ | async)">

    <mat-card fxFlex="0 0 400px" fxLayout="column" class="mat-card-box" *ngSwitchDefault>
      <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.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>

    <mat-card fxFlex="0 0 400px" fxLayout="column" class="mat-card-box" *ngSwitchCase="tcs.testStatusEnum.PAUSED">
      <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 style="color: chocolate">
          <b>{{ 'Testpause' | customtext:'booklet_pausedmessage' | async }} </b>
        </p>
      </mat-card-content>
    </mat-card>

    <mat-card fxFlex="0 0 400px" fxLayout="column" class="mat-card-box" *ngSwitchCase="tcs.testStatusEnum.ERROR">
      <mat-card-title >{{error?.label}}</mat-card-title>
      <mat-card-content>
        <p><b>Angemeldet als "{{loginName}}"</b></p>
        <p><b>{{tcs.testMode.modeLabel}}</b></p>
        <p style="color: chocolate">
          <b>{{ 'Es ist ein Fehler aufgetreten.' | customtext:'booklet_errormessage' | async }} </b>
        </p>
        <div id="errorDetails" *ngIf="errorDetailsOpen">
          <b>{{error?.label}}</b><br>
          {{error?.description}}
        </div>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" (click)="terminateTest()">
          {{ 'Test beenden'  | customtext:'login_testEndButtonLabel' | async}}
        </button>
        <button mat-raised-button color="none" (click)="toggleErrorDetails()">Fehlerdetails</button>
      </mat-card-actions>
    </mat-card>

    <mat-card *ngSwitchCase="tcs.testStatusEnum.LOADING" class="progress-bar">
      <mat-card-title>{{ tcs.rootTestlet?.title || 'Test' }}</mat-card-title>
      <mat-card-subtitle>{{'bitte warten' | customtext:'booklet_loading' | async }}</mat-card-subtitle>
      <mat-card-content fxLayout="column">
        <mat-progress-bar
          color="primary"
          mode="determinate"
          [value]="tcs.totalLoadingProgress">
        </mat-progress-bar>
        {{tcs.totalLoadingProgress.toFixed(2)}}%
      </mat-card-content>
    </mat-card>

  </div>
</div>

./test-status.component.css

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

mat-card {
  margin: 10px;
}

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

.progress-bar {
  position: absolute;
  right: 150px;
  top: 300px;
  left: 150px;
  z-index: 999;
}

#errorDetails {
  background: white;
  font-family: monospace;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""