Apply new page title (application name) and subtitle to all components

src/app/app-root/admin-starter/admin-starter.component.html

 <div fxLayout="row wrap" fxLayoutAlign="center stretch">
   <mat-card fxFlex="0 0 400px" fxLayout="column">
-    <mat-card-title>Verwaltung: Bitte Studie wählen</mat-card-title>
+    <mat-card-title>Verwaltung</mat-card-title>
+    <mat-card-subtitle>Bitte Arbeitsbereich wählen</mat-card-subtitle>
     <mat-card-content>
       <div fxLayoutGap="10px" fxLayout="column">
         <p *ngIf="workspaces.length === 0">
@@ -19,7 +20,7 @@
   </mat-card>
 
   <mat-card fxFlex="0 0 400px" class="mat-card-gray">
-    <mat-card-title>{{ 'app_title' | customtext:'app_title' | async }}</mat-card-title>
+    <mat-card-title>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</mat-card-title>
 
     <mat-card-content>
 

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

@@ -2,7 +2,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { from, Subscription } from 'rxjs';
 import { concatMap } from 'rxjs/operators';
-import { CustomtextService } from 'iqb-components';
 import { BackendService } from '../../backend.service';
 import { AuthAccessKeyType, AuthData, WorkspaceData } from '../../app.interfaces';
 import { MainDataService } from '../../maindata.service';
@@ -23,11 +22,12 @@ export class AdminStarterComponent implements OnInit, OnDestroy {
   constructor(
     private router: Router,
     private bs: BackendService,
-    private mds: MainDataService
+    public mds: MainDataService
   ) { }
 
   ngOnInit(): void {
     setTimeout(() => {
+      this.mds.appSubTitle$.next('Verwaltung: Bitte Arbeitsbereich wählen');
       this.mds.setSpinnerOn();
       this.bs.getSessionData().subscribe(authDataUntyped => {
         if (this.getWorkspaceDataSubscription !== null) {

src/app/app-root/code-input/code-input.component.html

@@ -17,7 +17,7 @@
   </mat-card>
 
   <mat-card fxFlex="0 0 400px" class="mat-card-gray">
-    <mat-card-title>{{ 'app_title' | customtext:'app_title' | async }}</mat-card-title>
+    <mat-card-title>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</mat-card-title>
 
     <mat-card-content>
 

src/app/app-root/code-input/code-input.component.ts

@@ -35,6 +35,7 @@ export class CodeInputComponent implements OnInit {
   // eslint-disable-next-line class-methods-use-this
   ngOnInit(): void {
     setTimeout(() => {
+      this.mds.appSubTitle$.next('Bitte Code eingeben');
       const element = <HTMLElement>document.querySelector('.mat-input-element[formControlName="code"]');
       if (element) {
         element.focus();

src/app/app-root/login/login.component.html

@@ -27,7 +27,7 @@
   </mat-card>
 
   <mat-card fxFlex="0 0 400px" class="mat-card-gray">
-    <mat-card-title>{{ 'IQB-Testcenter' | customtext:'app_title' | async }}</mat-card-title>
+    <mat-card-title>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</mat-card-title>
 
     <mat-card-content>
       <div [innerHTML]="mds.appConfig?.trusted_intro_html"></div>

src/app/app-root/login/login.component.ts

@@ -41,6 +41,7 @@ export class LoginComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.mds.setSpinnerOff();
+    this.mds.appSubTitle$.next('Bitte Anmelden');
     this.routingSubscription = this.route.params
       .subscribe(params => { this.returnTo = params.returnTo; });
     this.systemAnnouncementSubscription = <Subscription> this.cts.getCustomText$('system_announcement')

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

@@ -31,7 +31,7 @@
   </mat-card>
 
   <mat-card fxFlex="0 0 400px" class="mat-card-gray">
-    <mat-card-title>{{ 'app_title' | customtext:'app_title' | async }}</mat-card-title>
+    <mat-card-title>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</mat-card-title>
 
     <mat-card-content>
 

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

@@ -16,18 +16,19 @@ import {
 export class MonitorStarterComponent implements OnInit, OnDestroy {
   accessObjects: { [accessType: string]: (AccessObject|BookletData)[] } = {};
   private getMonitorDataSubscription: Subscription = null;
-  public AuthAccessKeyType = AuthAccessKeyType;
-  public problemText: string;
+  AuthAccessKeyType = AuthAccessKeyType;
+  problemText: string;
 
   constructor(
     private router: Router,
     private bs: BackendService,
     public cts: CustomtextService,
-    private mds: MainDataService
+    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') {

src/app/app-root/privacy/privacy.component.html

 <div class="root-body">
   <div fxLayout="row" fxLayoutAlign="center start">
     <mat-card fxFlex="0 0 500px">
-      <mat-card-title>{{ 'app_title' | customtext:'app_title' | async }} - Impressum/Datenschutz</mat-card-title>
+      <mat-card-title>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</mat-card-title>
 
       <!-- - - - - - - - - - - - - - - - - -->
       <mat-card-content>

src/app/app-root/privacy/privacy.component.ts

-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { MainDataService } from '../../maindata.service';
 
 @Component({
@@ -7,7 +7,7 @@ import { MainDataService } from '../../maindata.service';
     'mat-card {margin: 10px}'
   ]
 })
-export class PrivacyComponent {
+export class PrivacyComponent implements OnInit {
   constructor(
     @Inject('APP_NAME') public appName: string,
     @Inject('APP_PUBLISHER') public appPublisher: string,
@@ -16,4 +16,8 @@ export class PrivacyComponent {
     @Inject('IS_PRODUCTION_MODE') public isProductionMode: boolean,
     public mds: MainDataService
   ) { }
+
+  ngOnInit(): void {
+    setTimeout(() => this.mds.appSubTitle$.next('Impressum/Datenschutz'));
+  }
 }

src/app/app-root/sys-check-starter/sys-check-starter.component.html

 <div fxLayout="row wrap" fxLayoutAlign="center stretch">
   <mat-card fxFlex="0 2 500px">
-    <mat-card-title>{{ 'app_title' | customtext:'app_title' | async }}: System-Check</mat-card-title>
+    <mat-card-title>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</mat-card-title>
     <mat-card-content>
       <p>Hier können Sie ermitteln, ob das Computersystem, das Sie gerade benutzen, für
         die hier vorgesehenen Testungen geeignet ist.</p>

src/app/app-root/sys-check-starter/sys-check-starter.component.ts

@@ -20,6 +20,7 @@ export class SysCheckStarterComponent implements OnInit {
 
   ngOnInit(): void {
     setTimeout(() => {
+      this.mds.appSubTitle$.next('System-Check Auswahl');
       this.loading = true;
       this.mds.setSpinnerOn();
       this.bs.getSysCheckInfo().subscribe(myConfigs => {

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

@@ -17,7 +17,7 @@
   </mat-card>
 
   <mat-card fxFlex="0 0 400px" class="mat-card-gray">
-    <mat-card-title>{{ 'app_title' | customtext:'app_title' | async }}</mat-card-title>
+    <mat-card-title>{{mds.appTitle$ | async}}</mat-card-title>
 
     <mat-card-content>
       <p *ngIf="openTestletsCount === 0">{{ 'login_bookletSelectPromptNull' | customtext: 'login_bookletSelectPromptNull' | async}}</p>

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

@@ -15,17 +15,19 @@ export class TestStarterComponent implements OnInit, OnDestroy {
   booklets: BookletData[] = [];
   openTestletsCount = 0;
   private getBookletDataSubscription: Subscription = null;
-  public bookletSelectTitle = 'Bitte wählen';
+  bookletSelectTitle = 'Bitte wählen';
   problemText = '';
 
   constructor(
     private router: Router,
     private bs: BackendService,
-    private mds: MainDataService
+    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') {
@@ -53,6 +55,13 @@ export class TestStarterComponent implements OnInit, OnDestroy {
                     },
                     () => {
                       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();
                     }
                   );

src/app/app.component.ts

 import {
   Component, OnDestroy, OnInit
 } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Subscription, combineLatest } from 'rxjs';
 import { CustomtextService } from 'iqb-components';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, Title } from '@angular/platform-browser';
 import { MainDataService } from './maindata.service';
 import { BackendService } from './backend.service';
 import { AppError } from './app.interfaces';
@@ -16,6 +16,7 @@ import { AppConfig } from './config/app.config';
 
 export class AppComponent implements OnInit, OnDestroy {
   private appErrorSubscription: Subscription = null;
+  private appTitleSubscription: Subscription = null;
   showError = false;
 
   errorData: AppError;
@@ -24,6 +25,7 @@ export class AppComponent implements OnInit, OnDestroy {
     public mds: MainDataService,
     private bs: BackendService,
     private cts: CustomtextService,
+    private titleService: Title,
     private sanitizer: DomSanitizer
   ) { }
 
@@ -39,6 +41,16 @@ export class AppComponent implements OnInit, OnDestroy {
           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;
@@ -54,6 +66,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
       this.bs.getSysConfig().subscribe(sysConfig => {
         this.mds.appConfig = new AppConfig(sysConfig, this.cts, this.mds.expectedApiVersion, this.sanitizer);
+        this.mds.appTitle$.next(this.mds.appConfig.app_title);
         if (!sysConfig) {
           this.mds.appError$.next({
             label: 'Server-Problem: Konnte Konfiguration nicht laden',
@@ -122,5 +135,8 @@ export class AppComponent implements OnInit, OnDestroy {
     if (this.appErrorSubscription !== null) {
       this.appErrorSubscription.unsubscribe();
     }
+    if (this.appTitleSubscription !== null) {
+      this.appTitleSubscription.unsubscribe();
+    }
   }
 }

src/app/config/custom-texts.json

@@ -118,7 +118,7 @@
 
   "gm_headline": {
     "label": "Überschrift: Gruppenmonitor",
-    "defaultvalue": "IQB-Testcenter Gruppenüberwachung"
+    "defaultvalue": "Gruppenüberwachung"
   },
   "gm_menu_filter": {
     "label": "Meinueintrag: Sitzungen ausblenden",

src/app/group-monitor/group-monitor.component.html

 <div class="page-header">
   <p>
-    {{'IQB-Testcenter Gruppenüberwachung' | customtext:'gm_headline' | async}} -
+    {{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}} -
     <span *ngIf="ownGroup$ | async as ownGroup">{{ownGroup.label}}</span>
   </p>
   <span class="fill-remaining-space"></span>

src/app/group-monitor/group-monitor.component.ts

@@ -19,6 +19,7 @@ import {
 import { TestSessionManager } from './test-session-manager/test-session-manager.service';
 import { ConnectionStatus } from '../shared/websocket-backend.service';
 import { BookletUtil } from './booklet/booklet.util';
+import { MainDataService } from '../maindata.service';
 
 @Component({
   selector: 'app-group-monitor',
@@ -60,7 +61,8 @@ export class GroupMonitorComponent implements OnInit, OnDestroy {
     private bs: BackendService,
     public tsm: TestSessionManager,
     private router: Router,
-    private cts: CustomtextService
+    private cts: CustomtextService,
+    public mds: MainDataService
   ) {}
 
   ngOnInit(): void {
@@ -85,6 +87,7 @@ export class GroupMonitorComponent implements OnInit, OnDestroy {
     ];
 
     this.connectionStatus$ = this.bs.connectionStatus$;
+    this.mds.appSubTitle$.next(this.cts.getCustomText('gm_headline'));
   }
 
   private commandResponseToMessage(commandResponse: CommandResponse): UIMessage {

src/app/maindata.service.ts

@@ -20,6 +20,8 @@ export class MainDataService {
   progressVisualEnabled = true;
   appConfig: AppConfig = null;
   sysCheckAvailable = false;
+  appTitle$ = new BehaviorSubject<string>('IQB-Testcenter');
+  appSubTitle$ = new BehaviorSubject<string>('');
 
   defaultTcHeaderHeight = document.documentElement.style.getPropertyValue('--tc-header-height');
   defaultTcUnitTitleHeight = document.documentElement.style.getPropertyValue('--tc-unit-title-height');

src/app/superadmin/superadmin.component.html

 <div class="page-header">
-  <p>IQB-Testcenter Systemverwaltung</p>
+  <p>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</p>
 </div>
 
 <div class="page-body">