opt-cc/static/src/app/statistic/war/war-header/war-header.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {WarService} from '../../../services/logs/war.service';
import {War} from '../../../models/model-interfaces';
import {ChartUtils} from '../../../utils/chart-utils';
import {Fraction} from '../../../utils/fraction.enum';
import {LogsService} from '../../../services/logs/logs.service';
import {ScoreboardComponent} from '../scoreboard/scoreboard.component';
import {BaseConfig} from '../../../app.config';
import {Observable} from 'rxjs';
import {FractionHelpers} from '../../../utils/global.helpers';


@Component({
  selector: 'war-detail',
  templateUrl: './war-header.component.html',
  styleUrls: ['./war-header.component.scss']
})
export class WarHeaderComponent implements OnInit {

  readonly fraction = Fraction;

  readonly fractionHelpers = FractionHelpers;

  war: War;

  @ViewChild('scoreboard') scoreBoardComponent: ScoreboardComponent;

  logData;

  fractionStatsInitialized: boolean;

  performanceData;

  performanceStatsInitialized: boolean;

  singlePlayerView: number;

  playerDetailName: string;

  tab: number;

  fractionFilterSelected: string;

  isSmallLayout = false;

  playerChart: any[] = [];

  colorScheme;

  constructor(private route: ActivatedRoute,
              private warService: WarService,
              private logsService: LogsService) {
  }

  ngOnInit() {
    this.route.params
        .map(params => params['id'])
        .filter(id => id !== undefined)
        .flatMap(id => this.warService.getWar(id))
        .subscribe(war => {
          this.war = war;

          this.switchTab(0);
          this.fractionStatsInitialized = false;
          this.fractionFilterSelected = undefined;

          this.colorScheme = {
            domain: [
              FractionHelpers.getFractionColor('OPFOR', war),
              FractionHelpers.getFractionColor('BLUFOR', war)
            ]
          };

          this.playerChart =
            ChartUtils.getSingleDataArray(
              FractionHelpers.getFractionName(war, 'OPFOR'), war.playersOpfor,
              FractionHelpers.getFractionName(war, 'BLUFOR'), war.playersBlufor
            );
          Object.assign(this, [this.playerChart]);
        });

    this.isSmallLayout = window.innerWidth <= BaseConfig.responsive.breakpointPx;
    Observable.fromEvent(window, 'resize').subscribe(event => {
      this.isSmallLayout = event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx;
    });
  }

  switchTab(index: number) {
    this.tab = index;
    if (index === 1 && !this.fractionStatsInitialized) {
      this.logsService.getFullLog(this.war._id).subscribe(log => {
        this.logData = log;
        this.fractionStatsInitialized = true;
      });
    }
    if (index === 3 && !this.performanceStatsInitialized) {
      this.logsService.getPerformanceLogs(this.war._id).subscribe(log => {
        this.performanceData = log;
        this.performanceStatsInitialized = true;
      });
    }
  }

  /**
   * called by EventEmitter,
   * @param event with fields: 'view' (0 = war-detail, 1 = campaign-detail); 'player' = player name
   */
  switchToPlayerTab(event) {
    this.singlePlayerView = event.view;
    this.playerDetailName = event.player;
    this.switchTab(2);
  }

  filterPlayersByFraction(fraction?: string) {
    this.fractionFilterSelected = fraction;
  }
}