File

src/app/app-root/monitor-starter/monitor-starter.component.ts

Implements

OnInit OnDestroy

Metadata

styleUrls ./monitor-starter.component.css
templateUrl ./monitor-starter.component.html

Index

Properties
Methods

Constructor

constructor(router: Router, bs: BackendService, cts: CustomtextService, mds: MainDataService)
Parameters :
Name Type Optional
router Router No
bs BackendService No
cts CustomtextService No
mds MainDataService No

Methods

buttonGotoMonitor
buttonGotoMonitor(accessObject: AccessObject)
Parameters :
Name Type Optional
accessObject AccessObject No
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
resetLogin
resetLogin()
Returns : void
startTest
startTest(b: BookletData)
Parameters :
Name Type Optional
b BookletData No
Returns : void

Properties

accessObjects
Type : literal type
Default value : {}
AuthAccessKeyType
Default value : AuthAccessKeyType
Public cts
Type : CustomtextService
Private getMonitorDataSubscription
Type : Subscription
Default value : null
Public mds
Type : MainDataService
problemText
Type : string
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>

./monitor-starter.component.css

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

result-matching ""

    No results matching ""