File
Implements
Metadata
styleUrls |
./test-starter.component.css |
templateUrl |
./test-starter.component.html |
Methods
ngOnDestroy
|
ngOnDestroy()
|
|
|
booklets
|
Type : BookletData[]
|
Default value : []
|
|
bookletSelectTitle
|
Type : string
|
Default value : 'Bitte wählen'
|
|
Private
getBookletDataSubscription
|
Type : Subscription
|
Default value : null
|
|
openTestletsCount
|
Type : number
|
Default value : 0
|
|
problemText
|
Type : string
|
Default value : ''
|
|
import { Component, OnDestroy, OnInit } from '@angular/core';
import { from, Subscription } from 'rxjs';
import { concatMap } from 'rxjs/operators';
import { Router } from '@angular/router';
import { CustomtextService } from 'iqb-components';
import { BackendService } from '../../backend.service';
import { MainDataService } from '../../maindata.service';
import { AuthAccessKeyType, AuthData, BookletData } from '../../app.interfaces';
@Component({
templateUrl: './test-starter.component.html',
styleUrls: ['./test-starter.component.css']
})
export class TestStarterComponent implements OnInit, OnDestroy {
booklets: BookletData[] = [];
openTestletsCount = 0;
private getBookletDataSubscription: Subscription = null;
bookletSelectTitle = 'Bitte wählen';
problemText = '';
constructor(
private router: Router,
private bs: BackendService,
private cts: CustomtextService,
public mds: MainDataService
) { }
ngOnInit(): void {
setTimeout(() => {
this.mds.appSubTitle$.next('');
this.mds.setSpinnerOn();
this.bs.getSessionData().subscribe(authDataUntyped => {
if (typeof authDataUntyped !== 'number') {
const authData = authDataUntyped as AuthData;
if (authData) {
if (authData.token) {
if (authData.access[AuthAccessKeyType.TEST]) {
this.booklets = [];
if (this.getBookletDataSubscription !== null) {
this.getBookletDataSubscription.unsubscribe();
}
this.getBookletDataSubscription = from(authData.access[AuthAccessKeyType.TEST])
.pipe(
concatMap(bookletId => this.bs.getBookletData(bookletId))
).subscribe(
bData => {
this.booklets.push(bData);
if (!(bData as BookletData).locked) {
this.openTestletsCount += 1;
}
},
e => {
this.problemText = `Fehler in der Netzwerkverbindung (${e}).`;
this.mds.setSpinnerOff();
},
() => {
this.problemText = this.booklets.length ? '' : 'Für diese Anmeldung wurde kein Test gefunden.';
if (this.openTestletsCount <= 0) {
this.mds.appSubTitle$.next(this.cts.getCustomText('login_bookletSelectPromptNull'));
} else if (this.openTestletsCount === 1) {
this.mds.appSubTitle$.next(this.cts.getCustomText('login_bookletSelectPromptOne'));
} else {
this.mds.appSubTitle$.next(this.cts.getCustomText('login_bookletSelectPromptMany'));
}
this.mds.setSpinnerOff();
}
);
}
this.mds.setAuthData(authData);
} else {
this.mds.setAuthData();
this.mds.setSpinnerOff();
}
} else {
this.mds.setAuthData();
this.mds.setSpinnerOff();
}
} else {
this.mds.setSpinnerOff();
}
});
});
}
startTest(b: BookletData): void {
this.bs.startTest(b.id).subscribe(testId => {
if (typeof testId === 'number') {
const errCode = testId as number;
if (errCode === 423) {
this.problemText = 'Dieser Test ist gesperrt';
} else if (errCode === 403) {
this.problemText = 'Das Starten dieses Tests ist mit dieser Anmeldung nicht erlaubt.';
} else {
this.problemText = `Problem beim Start (${errCode})`;
}
} else {
this.router.navigate(['/t', testId]);
}
});
}
resetLogin(): void {
this.mds.setAuthData();
this.router.navigate(['/']);
}
ngOnDestroy(): void {
if (this.getBookletDataSubscription !== null) {
this.getBookletDataSubscription.unsubscribe();
}
}
}
<div fxLayout="row wrap" fxLayoutAlign="center stretch">
<mat-card fxFlex="0 0 400px" fxLayout="column">
<mat-card-title>{{ bookletSelectTitle }}</mat-card-title>
<mat-card-content>
<div fxLayoutGap="10px" fxLayout="column">
<p style="color: chocolate"><b>{{ problemText }}</b></p>
<button mat-raised-button color="primary" (click)="startTest(b)"
[disabled]="b.locked" *ngFor="let b of booklets">
<div class="booklet_title">{{b.label}}</div>
<div class="booklet_status">{{b.locked ? 'gesperrt' : (b.running ? 'Fortsetzen' : 'Starten')}}</div>
</button>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="foreground" (click)="resetLogin()">Neu anmelden</button>
</mat-card-actions>
</mat-card>
<mat-card fxFlex="0 0 400px" class="mat-card-box">
<mat-card-title>{{mds.appTitle$ | async}}</mat-card-title>
<mat-card-content>
<p *ngIf="openTestletsCount === 0">{{ 'login_bookletSelectPromptNull' | customtext: 'login_bookletSelectPromptNull' | async}}</p>
<p *ngIf="openTestletsCount === 1">{{ 'login_bookletSelectPromptOne' | customtext: 'login_bookletSelectPromptOne' | async}}</p>
<p *ngIf="openTestletsCount > 1">{{ 'login_bookletSelectPromptMany' | customtext: 'login_bookletSelectPromptMany' | async}}</p>
<status-card></status-card>
</mat-card-content>
</mat-card>
</div>
div.booklet_title {
font-size: 16pt;
margin-top: 4px;
margin-bottom: 0;
white-space: pre-wrap;
word-break: break-word;
line-height: 130%;
}
div.booklet_status {
font-size: 8pt;
margin-top: 0;
color: mediumturquoise;
height: 24px;
margin-bottom: 18px;
}
mat-card {
margin: 10px;
}
.mat-card-box {
background-color: var(--tc-box-background)
}
Legend
Html element with directive