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

///<reference path="../../utils/chart-utils.ts"/>
import {Component, ElementRef, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {WarService} from "../../services/logs/war.service";
import {War} from "../../models/model-interfaces";
import {LogsService} from "../../services/logs/logs.service";
import {TabsetComponent} from "ngx-bootstrap";
import * as d3 from "d3";
import {ChartUtils} from "../../utils/chart-utils";


@Component({
  selector: 'war-detail',
  templateUrl: './war-detail.component.html',
  styleUrls: ['./war-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
})
export class WarDetailComponent {

  @ViewChild('overview') private overviewContainer: ElementRef;

  @ViewChild('staticTabs') staticTabs: TabsetComponent;

  war: War = {players: []};

  public chartSelectModel: string;

  fractionRadioSelect: string;

  playerChart: any[] = [];

  cellHeight = 40;

  rows = [];

  reorderable: boolean = false;

  customClasses = {
    sortAscending: 'glyphicon glyphicon-triangle-top',
    sortDescending: 'glyphicon glyphicon-triangle-bottom',
  };

  lineChartData: any[] = [];
  areaChartData: any[] = [];

  tmpPointData;
  tmpBudgetData;
  tmpKillData;
  tmpFrienlyFireData;
  tmpTransportData;
  tmpReviveData;
  tmpStabilizeData;
  tmpFlagCaptureData;

  colorScheme = {
    domain: ['#0000FF', '#B22222']
  };

  labelPoints = 'Punkte';
  labelBudget = 'Budget';
  labelKill = 'Kills';
  labelFriendlyFire = 'FriendlyFire';
  labelTransport = 'Lufttransport';
  labelRevive = 'Revive';
  labelStabilize = 'Stabilisiert';
  labelFlag = 'Flaggenbesitz';
  lineChartLabel = this.labelPoints;

  showLineChart = true;
  stepCurve = d3.curveStepAfter;
  gradient = false;
  yAxis = true;
  xAxis = true;
  legend = false;
  legendTitle = false;
  showXAxisLabel = false;
  showYAxisLabel = true;
  autoscale = true;
  timeline = false;
  roundDomains = true;
  fractionChartsInitialized: boolean = false;

  constructor(private route: ActivatedRoute,
              private router: Router,
              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.rows = war.players;
        this.playerChart = ChartUtils.getSingleDataArray('CSAT', war.playersOpfor, 'NATO', war.playersBlufor);

        this.fractionChartsInitialized = false;
        Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
        this.chartSelectModel = this.labelPoints;

        this.staticTabs.tabs[0].active = true;
        this.scrollOverviewTop();
      });
  }

  filterPlayersByFraction(fraction?: string) {
    if (fraction) {
      this.rows = this.war.players.filter((player) => {
        return player.fraction === fraction;
      })
    } else {
      this.rows = this.war.players;
    }
  }

  selectChart() {
    if (this.chartSelectModel !== this.labelFlag) {
      this.showLineChart = true;
      this.lineChartLabel = this.chartSelectModel;
      switch (this.chartSelectModel) {
        case this.labelPoints:
          this.lineChartData = this.tmpPointData;
          break;
        case this.labelBudget:
          this.lineChartData = this.tmpBudgetData;
          break;
        case this.labelKill:
          this.lineChartData = this.tmpKillData;
          break;
        case this.labelFriendlyFire:
          this.lineChartData = this.tmpFrienlyFireData;
          break;
        case this.labelRevive:
          this.lineChartData = this.tmpReviveData;
          break;
        case this.labelStabilize:
          this.lineChartData = this.tmpStabilizeData;
          break;
        case this.labelTransport:
          this.lineChartData = this.tmpTransportData;
          break;
      }
    } else {
      this.showLineChart = false;
      this.areaChartData = this.tmpFlagCaptureData;
    }
  }

  selectPlayerDetail(player) {
    if (player && player.selected && player.selected.length > 0) {
      this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name],
        {relativeTo: this.route});
    }
  }

  scrollOverviewTop() {
    try {
      this.overviewContainer.nativeElement.scrollTop = 0;
    } catch (err) {
    }
  }

  loadFractionData() {
    if (this.fractionChartsInitialized) {
      return;
    }

    this.tmpPointData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
    this.tmpBudgetData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
    this.tmpKillData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
    this.tmpFrienlyFireData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
    this.tmpTransportData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
    this.tmpReviveData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
    this.tmpStabilizeData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
    this.tmpFlagCaptureData = ChartUtils.getMultiDataArray('NATO', 'CSAT');

    const newFractionGraphEntry = (entry: any, val1: any, val2: any) => {
      return ChartUtils.getSeriesEntry(new Date(entry.time), entry.fraction === 'BLUFOR' ? val1 : val2);
    };

    const startDateObj = new Date(this.war.date);
    startDateObj.setHours(0);
    startDateObj.setMinutes(1);

    [this.tmpKillData, this.tmpFrienlyFireData, this.tmpReviveData, this.tmpStabilizeData, this.tmpTransportData].forEach(tmp => {
      [0, 1].forEach(index => {
        tmp[index].series.push(ChartUtils.getSeriesEntry(startDateObj, 0));
      })
    });

    let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0, reviveCountBlufor = 0,
      reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0, transportCountBlufor = 0,
      transportCountOpfor = 0;

    this.logsService.getFullLog(this.war._id).subscribe((data) => {
      // POINTS
      data.points.forEach(pointEntry => {
        this.tmpPointData[0].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptBlufor));
        this.tmpPointData[1].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptOpfor));
      });

      // BUDGET
      this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(startDateObj, this.war.budgetBlufor));
      this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(startDateObj, this.war.budgetOpfor));
      // This adds an entry for both fractions on every event
      for (let i = 0; i < data.budget.length; i++) {
        const budgetEntry = data.budget[i];
        const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
        const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;

        this.tmpBudgetData[fractionChange].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time), budgetEntry.newBudget));
        this.tmpBudgetData[fractionOld].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time),
          this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length - 1].value));
      }

      // KILLS & FRIENDLY FIRE
      data.kill.forEach(killEntry => {
        if (killEntry.friendlyFire === false) {
          if (killEntry.fraction === 'BLUFOR') {
            killCountBlufor++;
          } else {
            killCountOpfor++;
          }
          this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), killCountBlufor));
          this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), killCountOpfor));
        } else {
          if (killEntry.fraction === 'BLUFOR') {
            ffKillCountBlufor++;
          } else {
            ffKillCountOpfor++;
          }
          this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), ffKillCountBlufor));
          this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), ffKillCountOpfor));
        }
      });


      // REVIVE & STABILIZE
      data.revive.forEach(reviveEntry => {
        if (reviveEntry.stabilized === false) {
          if (reviveEntry.fraction === 'BLUFOR') {
            reviveCountBlufor++;
          } else {
            reviveCountOpfor++;
          }
          this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), reviveCountBlufor));
          this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), reviveCountOpfor));
        } else {
          if (reviveEntry.fraction === 'BLUFOR') {
            stabilizeCountBlufor++;
          } else {
            stabilizeCountOpfor++;
          }
          this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), stabilizeCountBlufor));
          this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), stabilizeCountOpfor));
        }
      });

      // TRANSPORT
      data.transport.forEach(transportEntry => {
        if (transportEntry.fraction === 'BLUFOR') {
          transportCountBlufor++;
        } else {
          transportCountOpfor++;
        }
        this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(new Date(transportEntry.time), transportCountBlufor));
        this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(new Date(transportEntry.time), transportCountOpfor));
      });

      // FLAG
      let flagStatusBlufor = true;
      let flagStatusOpfor = true;
      this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(startDateObj, flagStatusBlufor));
      this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(startDateObj, flagStatusOpfor));

      data.flag.forEach(flagEntry => {
        if (flagEntry.flagFraction === 'BLUFOR') {
          flagStatusBlufor = !flagEntry.capture
        } else {
          flagStatusOpfor = !flagEntry.capture;
        }
        this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push(
          newFractionGraphEntry(flagEntry, flagStatusBlufor, flagStatusOpfor)
        );
      });

      this.addFinalTimeDataEntriesAndPopulate(new Date(this.war.endDate));

      this.fractionChartsInitialized = true;
    });
  }

  addFinalTimeDataEntriesAndPopulate(endDate) {
    [this.tmpPointData, this.tmpBudgetData, this.tmpTransportData, this.tmpReviveData, this.tmpStabilizeData,
      this.tmpKillData, this.tmpFrienlyFireData, this.tmpFlagCaptureData].forEach(tmp => {
      for (let j in [0, 1]) {
        if (tmp[j].series[tmp[j].series.length - 1].name < endDate) {
          tmp[j].series.push(ChartUtils.getSeriesEntry(endDate, tmp[j].series[tmp[j].series.length - 1].value));
        }
      }
    });

    this.showLineChart = true;
    this.lineChartLabel = this.labelPoints;
    this.lineChartData = this.tmpPointData;
  }

}