File

src/app/app.component.ts

Implements

OnInit OnDestroy

Metadata

selector tc-root
templateUrl ./app.component.html

Index

Properties
Methods

Constructor

constructor(mds: MainDataService, bs: BackendService, cts: CustomtextService, titleService: Title, sanitizer: DomSanitizer)
Parameters :
Name Type Optional
mds MainDataService No
bs BackendService No
cts CustomtextService No
titleService Title No
sanitizer DomSanitizer No

Methods

closeErrorBox
closeErrorBox()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Private setupFocusListeners
setupFocusListeners()
Returns : void

Properties

Private appErrorSubscription
Type : Subscription
Default value : null
Private appTitleSubscription
Type : Subscription
Default value : null
errorData
Type : AppError
Public mds
Type : MainDataService
showError
Default value : false
import {
  Component, OnDestroy, OnInit
} from '@angular/core';
import { Subscription, combineLatest } from 'rxjs';
import { CustomtextService } from 'iqb-components';
import { DomSanitizer, Title } from '@angular/platform-browser';
import { MainDataService } from './maindata.service';
import { BackendService } from './backend.service';
import { AppError } from './app.interfaces';
import { AppConfig } from './config/app.config';

@Component({
  selector: 'tc-root',
  templateUrl: './app.component.html'
})

export class AppComponent implements OnInit, OnDestroy {
  private appErrorSubscription: Subscription = null;
  private appTitleSubscription: Subscription = null;
  showError = false;

  errorData: AppError;

  constructor(
    public mds: MainDataService,
    private bs: BackendService,
    private cts: CustomtextService,
    private titleService: Title,
    private sanitizer: DomSanitizer
  ) { }

  closeErrorBox(): void {
    this.showError = false;
  }

  ngOnInit(): void {
    setTimeout(() => {
      this.appErrorSubscription = this.mds.appError$.subscribe(err => {
        if (err && !this.mds.errorReportingSilent) {
          this.errorData = err;
          this.showError = true;
        }
      });
      this.appTitleSubscription = combineLatest([this.mds.appTitle$, this.mds.appSubTitle$, this.mds.isSpinnerOn$])
        .subscribe(titles => {
          if (titles[2]) {
            this.titleService.setTitle(`${titles[0]} | Bitte warten}`);
          } else if (titles[1]) {
            this.titleService.setTitle(`${titles[0]} | ${titles[1]}`);
          } else {
            this.titleService.setTitle(titles[0]);
          }
        });

      window.addEventListener('message', (event: MessageEvent) => {
        const msgData = event.data;
        const msgType = msgData.type;
        if ((msgType !== undefined) && (msgType !== null)) {
          if (msgType.substr(0, 2) === 'vo') {
            this.mds.postMessage$.next(event);
          }
        }
      });

      this.setupFocusListeners();

      this.bs.getSysConfig().subscribe(sysConfig => {
        if (!sysConfig) {
          this.mds.appError$.next({
            label: 'Server-Problem: Konnte Konfiguration nicht laden',
            description: 'getSysConfig ist fehlgeschlagen',
            category: 'FATAL'
          });
          return;
        }
        this.mds.appConfig = new AppConfig(sysConfig, this.cts, this.mds.expectedApiVersion, this.sanitizer);
        this.mds.appTitle$.next(this.mds.appConfig.appTitle);
        this.mds.appConfig.applyBackgroundColors();
        this.mds.globalWarning = this.mds.appConfig.warningMessage;

        const authData = MainDataService.getAuthData();
        if (authData) {
          this.cts.addCustomTexts(authData.customTexts);
        }

        if (!this.mds.appConfig.isValidApiVersion) {
          this.mds.appError$.next({
            label: 'Server-Problem: API-Version ungültig',
            description:
              `erwartet: ${this.mds.expectedApiVersion}, gefunden: ${this.mds.appConfig.detectedApiVersion}`,
            category: 'FATAL'
          });
        }
      });

      this.bs.getSysCheckInfo().subscribe(sysCheckConfigs => {
        this.mds.sysCheckAvailable = !!sysCheckConfigs;
      });
    });
  }

  private setupFocusListeners() {
    let hidden = '';
    let visibilityChange = '';
    if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
      hidden = 'hidden';
      visibilityChange = 'visibilitychange';
      // eslint-disable-next-line @typescript-eslint/dot-notation
    } else if (typeof document['msHidden'] !== 'undefined') {
      hidden = 'msHidden';
      visibilityChange = 'msvisibilitychange';
      // eslint-disable-next-line @typescript-eslint/dot-notation
    } else if (typeof document['mozHidden'] !== 'undefined') {
      hidden = 'mozHidden';
      visibilityChange = 'mozHidden';
      // eslint-disable-next-line @typescript-eslint/dot-notation
    } else if (typeof document['webkitHidden'] !== 'undefined') {
      hidden = 'webkitHidden';
      visibilityChange = 'webkitvisibilitychange';
    }
    if (hidden && visibilityChange) {
      document.addEventListener(visibilityChange, () => {
        this.mds.appWindowHasFocus$.next(!document[hidden]);
      }, false);
    }
    window.addEventListener('blur', () => {
      this.mds.appWindowHasFocus$.next(document.hasFocus());
    });
    window.addEventListener('focus', () => {
      this.mds.appWindowHasFocus$.next(document.hasFocus());
    });
    window.addEventListener('unload', () => {
      this.mds.appWindowHasFocus$.next(!document[hidden]);
    });
  }

  ngOnDestroy(): void {
    if (this.appErrorSubscription !== null) {
      this.appErrorSubscription.unsubscribe();
    }
    if (this.appTitleSubscription !== null) {
      this.appTitleSubscription.unsubscribe();
    }
  }
}
<div class="logo">
  <a [routerLink]="['/']">
    <img [src]="mds.appConfig?.mainLogo" matTooltip="Zur Startseite" alt="IQB-logo"/>
  </a>
</div>

<div id="shield" *ngIf="showError"></div>

<mat-card *ngIf="showError" class="main-alert" (click)="closeErrorBox()">
  <mat-card-title>
    <alert *ngIf="errorData?.category === 'FATAL'" text="Fehler: {{ errorData?.label }}" level="error"></alert>
    <alert *ngIf="errorData?.category === 'PROBLEM'" text="Fehler: {{ errorData?.label }}" level="error"></alert>
    <alert *ngIf="errorData?.category === 'WARNING'" text="Warnung: {{ errorData?.label }}" level="warning"></alert>
  </mat-card-title>
  <mat-card-content>
    {{ errorData?.description }}
  </mat-card-content>
</mat-card>

<div class="spinner" *ngIf="mds.isSpinnerOn$ | async">
  <mat-spinner></mat-spinner>
</div>
<router-outlet></router-outlet>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""