opt-cc/static/src/app/app.component.ts

import {Component, Inject, OnInit} from '@angular/core';
import {NavigationEnd, NavigationStart, Router} from '@angular/router';
import {DOCUMENT} from '@angular/common';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material';
import {SpinnerService} from './services/user-interface/spinner/spinner.service';
import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
import {Observable} from 'rxjs';
import {LoginService} from './services/app-user-service/login-service';
import {RouteConfig} from './app.config';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {

  loading = false;

  scrollTopVisible = false;

  scrollBtnVisibleVal = 100;

  currentUrl = '';

  // a map of svgIcon names and associated svg file names
  // to load from assets/icon folder
  svgIcons = {
    'opt-logo': 'general/opt-logo',
    'opt-logo-core': 'general/opt-logo-core',
    'menu': 'baseline-menu-24px',
    'add': 'outline-add_box-24px',
    'add-user': 'twotone-person_add-24px',
    'award': 'award',
    'arrow-up': 'baseline-arrow_upward-24px',
    'chevron-left': 'baseline-chevron_left-24px',
    'chevron-right': 'baseline-chevron_right-24px',
    'delete': 'baseline-delete-24px',
    'edit': 'baseline-edit-24px',
    'more-vert': 'baseline-more_vert-24px',
    // --------STATISTICS---------
    'battle': 'stats/battle',
    'highscore': 'stats/highscore',
    'stats-chart': 'stats/stats-chart',
    'stats-fraction': 'stats/fraction-btn',
    'stats-player': 'stats/player-stats-btn',
    'stats-scoreboard': 'stats/scoreboard-btn',
    'stats-performance': 'stats/performance-stats-btn',
    // --SCOREBOARD--
    'death': 'stats/scoreboard/death',
    'flagTouch': 'stats/scoreboard/flag-touch',
    'friendlyFire': 'stats/scoreboard/friendly-fire',
    'kill': 'stats/scoreboard/kill',
    'respawn': 'stats/scoreboard/respawn',
    'revive': 'stats/scoreboard/revive',
    'stats-detail': 'stats/scoreboard/round-assessment-24px',
    'vehicleAir': 'stats/scoreboard/vehicle-air',
    'vehicleHeavy': 'stats/scoreboard/vehicle-heavy',
    'vehicleLight': 'stats/scoreboard/vehicle-light',
    'travelDistance': 'stats/scoreboard/travel-distance',
    'driverDistance': 'stats/scoreboard/driver-distance',
    'warCount': 'stats/scoreboard/war-count',
    // --------LOCALE---------
    'flag-de': 'locale/de',
    'flag-en': 'locale/en',
  };

  constructor(private router: Router,
              private loginService: LoginService,
              private iconRegistry: MatIconRegistry,
              private sanitizer: DomSanitizer,
              private spinnerService: SpinnerService,
              private snackBarService: SnackBarService,
              @Inject(DOCUMENT) private document) {
    this.initMaterialSvgIcons();

    this.spinnerService.spinnerActive.subscribe(active => this.toggleSpinner(active));

    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.spinnerService.activate();
        this.snackBarService.dismiss();
      }
      if (event instanceof NavigationEnd) {
        this.spinnerService.deactivate();
        this.currentUrl = this.router.url;

        // scroll to top on route from army overview to user detail and back
        if (this.currentUrl.includes('/overview') || this.currentUrl.includes('/public')) {
          this.scrollToTop();
        }
      }
    });
  }

  ngOnInit() {
    Observable.fromEvent(this.document, 'scroll').subscribe(e => {
      this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
        || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
    });
  }

  toggleSpinner(active) {
    this.loading = active;
  }

  initMaterialSvgIcons() {
    Object.keys(this.svgIcons).forEach(key => {
      const fileUri = '../assets/icon/'.concat(this.svgIcons[key]).concat('.svg');
      this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(fileUri));
    });
  }

  logout() {
    this.loginService.logout();
    setTimeout(() => {
      this.router.navigate([RouteConfig.overviewPath]);
    }, 500);
  }


  scrollToTop() {
    this.document.body.scrollTop = 0; // For Safari
    this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
  }
}