File

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

Implements

OnInit OnDestroy

Metadata

styleUrls ./test-starter.component.css
templateUrl ./test-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

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

booklets
Type : BookletData[]
Default value : []
bookletSelectTitle
Type : string
Default value : 'Bitte wählen'
Private getBookletDataSubscription
Type : Subscription
Default value : null
Public mds
Type : MainDataService
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>

./test-starter.component.css

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

result-matching ""

    No results matching ""