File
Implements
Metadata
styleUrls |
./monitor-starter.component.css |
templateUrl |
./monitor-starter.component.html |
Methods
buttonGotoMonitor
|
buttonGotoMonitor(accessObject: AccessObject)
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
accessObjects
|
Type : literal type
|
Default value : {}
|
|
AuthAccessKeyType
|
Default value : AuthAccessKeyType
|
|
Public
cts
|
Type : CustomtextService
|
|
Private
getMonitorDataSubscription
|
Type : Subscription
|
Default value : null
|
|
import { Component, OnDestroy, OnInit } from '@angular/core';
import { from, Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { concatMap, map } from 'rxjs/operators';
import { CustomtextService } from 'iqb-components';
import { BackendService } from '../../backend.service';
import { MainDataService } from '../../maindata.service';
import {
AccessObject, AuthAccessKeyType, AuthData, BookletData
} from '../../app.interfaces';
@Component({
templateUrl: './monitor-starter.component.html',
styleUrls: ['./monitor-starter.component.css']
})
export class MonitorStarterComponent implements OnInit, OnDestroy {
accessObjects: { [accessType: string]: (AccessObject|BookletData)[] } = {};
private getMonitorDataSubscription: Subscription = null;
AuthAccessKeyType = AuthAccessKeyType;
problemText: string;
constructor(
private router: Router,
private bs: BackendService,
public cts: CustomtextService,
public mds: MainDataService
) { }
ngOnInit(): void {
setTimeout(() => {
this.mds.appSubTitle$.next(this.cts.getCustomText('gm_headline'));
this.mds.setSpinnerOn();
this.bs.getSessionData().subscribe(authDataUntyped => {
if (typeof authDataUntyped === 'number') {
this.mds.setSpinnerOff();
return;
}
const authData = authDataUntyped as AuthData;
if (!authData || !authData.token) {
this.mds.setAuthData();
this.mds.setSpinnerOff();
return;
}
this.accessObjects = {};
const scopeIdList: { [id: string]: { id: string, type: AuthAccessKeyType } } = {};
[AuthAccessKeyType.TEST_GROUP_MONITOR, AuthAccessKeyType.TEST]
.forEach(accessType => {
this.accessObjects[accessType] = [];
(authData.access[accessType] || [])
.forEach(accessObjectId => {
scopeIdList[accessObjectId] = { id: accessObjectId, type: accessType };
});
});
if (this.getMonitorDataSubscription !== null) {
this.getMonitorDataSubscription.unsubscribe();
}
this.getMonitorDataSubscription =
from(Object.keys(scopeIdList))
.pipe(
map((accessType: AuthAccessKeyType) => scopeIdList[accessType]),
concatMap(accessIdAndType => {
if (accessIdAndType.type === AuthAccessKeyType.TEST_GROUP_MONITOR) {
return this.bs.getGroupData(accessIdAndType.id);
}
if (authData.access[AuthAccessKeyType.TEST]) {
return this.bs.getBookletData(accessIdAndType.id);
}
return null;
})
)
.subscribe(
(wsData: AccessObject) => {
if (wsData) {
this.accessObjects[scopeIdList[wsData.id].type].push(wsData);
}
},
() => this.mds.setSpinnerOff(),
() => this.mds.setSpinnerOff()
);
this.mds.setAuthData(authData);
});
});
}
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 {
this.problemText = `Problem beim Start (${errCode})`;
}
} else {
this.router.navigate(['/t', testId]);
}
});
}
buttonGotoMonitor(accessObject: AccessObject): void {
this.router.navigateByUrl(`/gm/${accessObject.id.toString()}`);
}
resetLogin(): void {
this.mds.setAuthData();
this.router.navigate(['/']);
}
ngOnDestroy(): void {
if (this.getMonitorDataSubscription !== null) {
this.getMonitorDataSubscription.unsubscribe();
}
}
}
<div fxLayout="row wrap" fxLayoutAlign="center stretch">
<mat-card fxFlex="0 0 400px" fxLayout="column">
<mat-card-title>Testdurchführung überwachen</mat-card-title>
<mat-card-content>
<div fxLayoutGap="10px" fxLayout="column">
<p *ngIf="problemText" style="color: chocolate"><b>{{ problemText }}</b></p>
<p *ngIf="!accessObjects[AuthAccessKeyType.TEST_GROUP_MONITOR] || accessObjects[AuthAccessKeyType.TEST_GROUP_MONITOR].length === 0">
Sie sind angemeldet. Aktuell sind keine Testgruppen zur Überwachung für Sie freigegeben.
</p>
<button mat-raised-button color="primary" (click)="buttonGotoMonitor(accessObject)"
*ngFor="let accessObject of accessObjects[AuthAccessKeyType.TEST_GROUP_MONITOR]">
<span class="booklet_title">{{accessObject.name}}</span>
<span class="booklet_status">Überwachung starten</span>
</button>
<h4>Folgende Testhefte stehen für Sie zur Ansicht bereit:</h4>
<button mat-raised-button color="primary" (click)="startTest(b)" [disabled]="b.locked"
*ngFor="let b of accessObjects[AuthAccessKeyType.TEST]">
<span class="booklet_title">{{b.label}}</span>
<span class="booklet_status">{{b.locked ? 'gesperrt' : (b.running ? 'Fortsetzen' : 'Ansehen')}}</span>
</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-subtitle>{{mds.appSubTitle$ | async}}</mat-card-subtitle>
<mat-card-content>
<status-card></status-card>
</mat-card-content>
</mat-card>
</div>
mat-card {
margin: 10px;
}
.mat-card-box {
background-color: var(--tc-box-background)
}
.booklet_title {
display: block;
font-size: 16pt;
margin-top: 4px;
margin-bottom: 0;
white-space: pre-wrap;
word-break: break-word;
line-height: 130%;
}
.booklet_status {
display: block;
font-size: 8pt;
margin-top: 0;
color: mediumturquoise;
height: 24px;
margin-bottom: 18px;
}
Legend
Html element with directive