src/app/app.component.ts
selector | tc-root |
templateUrl | ./app.component.html |
Properties |
|
Methods |
constructor(mds: MainDataService, bs: BackendService, cts: CustomtextService, titleService: Title, sanitizer: DomSanitizer)
|
||||||||||||||||||
Defined in src/app/app.component.ts:22
|
||||||||||||||||||
Parameters :
|
closeErrorBox |
closeErrorBox()
|
Defined in src/app/app.component.ts:32
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Defined in src/app/app.component.ts:138
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/app.component.ts:37
|
Returns :
void
|
Private setupFocusListeners |
setupFocusListeners()
|
Defined in src/app/app.component.ts:103
|
Returns :
void
|
Private appErrorSubscription |
Type : Subscription
|
Default value : null
|
Defined in src/app/app.component.ts:18
|
Private appTitleSubscription |
Type : Subscription
|
Default value : null
|
Defined in src/app/app.component.ts:19
|
errorData |
Type : AppError
|
Defined in src/app/app.component.ts:22
|
Public mds |
Type : MainDataService
|
Defined in src/app/app.component.ts:25
|
showError |
Default value : false
|
Defined in src/app/app.component.ts:21
|
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;
this.mds.appError$.next();
}
ngOnInit(): void {
setTimeout(() => {
this.appErrorSubscription = this.mds.appError$.subscribe(err => {
if (err) {
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>
<button mat-icon-button class="main-alert-close-button"><mat-icon>close</mat-icon></button>
</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>