UI-Prototype/src/app/app.component.ts

import { Component, HostListener, OnInit } from '@angular/core';
import { Router, RouterModule, RouterOutlet, RoutesRecognized } from '@angular/router';
import { MatModule } from '../dependencies/angularlib/mat.module';
import { Store } from '@ngxs/store'
import { Angularlib } from 'angularlib/angularlib.module';
import { BaseComponent, untilDestroy } from 'angularlib/base.component';
import { Subject, filter, map, repeat, takeUntil, timer } from 'rxjs';
import { Title } from '@angular/platform-browser';
import { LoginService } from 'angularlib/login/login.service';
import { CommonModule, DatePipe } from '@angular/common';
import { ChangeTheme } from 'angularlib/ui.state/ui.state.actions';
import { ChangeLanguage } from 'angularlib/labels/label.actions';
import { ComponentService } from 'angularlib/component.service';
import { NotificationModule } from 'angularlib/notification/notification.module';
import { NotificationState } from 'angularlib/notification/notification.state';
import { Notification } from 'angularlib/notification/notification.actions';
import { generateId } from 'angularlib/base.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet, 
    MatModule, 
    RouterModule,
    Angularlib,
    NotificationModule
  ],
  providers:[DatePipe],
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.scss'
  ]
})
export class AppComponent extends BaseComponent implements OnInit {
  title = 'FIS App';

  /**current date */
  protected currentDate = new Date();

  /**login timeout duration in milliseconds
     * @default 5 minutes
    */
  private duration: number = 300000;
  private startTimeout$ = new Subject();
  private stopTimeout$ = new Subject();
  private timeout = timer(this.duration).pipe(
      map(() => {if(this.loginService.user)this.loginService.logout();console.warn('session inactive timeout, logging out...');}),
      takeUntil(this.stopTimeout$),
      repeat({delay:() => this.startTimeout$})
  );

  /**current theme of application */
  protected theme;

  /**number of notifications */
  protected notificationCount: number = 0;

  constructor(
    private router: Router,
    private store: Store,
    protected loginService: LoginService,
    /**Platform Browser title */
    protected pbTitle: Title,
    protected cs: ComponentService
  ) {
    super(store,cs);
  }

  @HostListener('window:mousedown')
  private refreshTimeout() {
    this.stopTimeout$.next(null);
    this.startTimeout$.next(null);
  }

  ngOnInit(): void {
    this.setDefaultTheme();
    this.router.events.pipe(untilDestroy(this),
    filter((event) => event instanceof RoutesRecognized),
    map((res:any) => {
      const data = res.state.root.firstChild.firstChild || res.state.root.firstChild;
      return data.data?.title;
    })
    ).subscribe(title => {
      if (typeof title === 'string')
        this.title = title;
      else this.title = this.getLabel(title.key,title.default);
      this.pbTitle.setTitle(this.title);
    });

    /**subsribe user changes and initiate timeout timer */
    this.loginService.user$.pipe(untilDestroy(this)).subscribe(user => {
      if (user) {
        this.timeout.pipe(untilDestroy(this),takeUntil(this.loginService.loggedOut)).subscribe();
      }
    });

    this.store.select(NotificationState).pipe(untilDestroy(this)).subscribe({
      next: (state:any) => {
        this.notificationCount = state.notifications.length;
      }
    });
  }

  /**
   * change application language
   * @param {string} language
   */
  protected changeLanguage(language: string) {
    this.store.dispatch(new ChangeLanguage(language));
  }

  protected setDefaultTheme() {
    if (localStorage.getItem('theme')) {
      this.theme = localStorage.getItem('theme') as string;
      const body = document.getElementsByTagName('body')[0];
      body.classList.add(this.theme);
    }
  }

  /**
   * change application theme
   * @param {string} theme theme name 
   */
  protected changeTheme(theme: string) {
    const body = document.getElementsByTagName('body')[0];
    body.classList.remove(this.theme);
    this.theme = theme;
    body.classList.add(this.theme);
    localStorage.setItem('theme',this.theme);
    this.store.dispatch(new ChangeTheme(this.theme));
  }

  protected addNotification() {
    this.store.dispatch(new Notification.Add({
      message:{title:generateId(),desc:generateId(),timestamp: new Date()}
    }));
  }
}