File
Implements
Metadata
styleUrls |
./test-status.component.css |
templateUrl |
./test-status.component.html |
Methods
ngOnDestroy
|
ngOnDestroy()
|
|
|
terminateTest
|
terminateTest()
|
|
|
toggleErrorDetails
|
toggleErrorDetails()
|
|
|
Private
appErrorSubscription
|
Type : Subscription
|
|
errorDetailsOpen
|
Default value : false
|
|
loginName
|
Type : string
|
Default value : '??'
|
|
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>
.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 with directive