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;

  initialized;

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

  labelPoints = 'Punkte';
  labelBudget = 'Budget';
  labelKill = 'Kills';
  labelFriendlyFire = 'FriendlyFire';
  labelTransport = 'Lufttransport';
  labelRevive = 'Revive';
  labelStabilize = 'Stabilisiert';
  labelFlag = 'Flaggenbesitz';
  lineChartLabel: string = 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;

  startDateObj;

  dataMode: string = 'Summe';
  dataInterval: number = 0;
  logData;

  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.initialized = {
          basic: false,
          budget: false,
          kill: false,
          revive: false,
          transport: false,
          flag: false
        };
        Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
        this.chartSelectModel = this.labelPoints;

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

        this.fractionRadioSelect = undefined;
        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.initBudgetData();
          this.lineChartData = this.tmpBudgetData;
          break;
        case this.labelKill:
          this.initKillData();
          this.lineChartData = this.tmpKillData;
          break;
        case this.labelFriendlyFire:
          this.initKillData();
          this.lineChartData = this.tmpFrienlyFireData;
          break;
        case this.labelRevive:
          this.initRevive();
          this.lineChartData = this.tmpReviveData;
          break;
        case this.labelStabilize:
          this.initRevive();
          this.lineChartData = this.tmpStabilizeData;
          break;
        case this.labelTransport:
          this.initTransportData();
          this.lineChartData = this.tmpTransportData;
          break;
      }
    } else {
      this.initFlagHoldData();
      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) {
    }
  }

  toggleDataMode(interval, entryString) {
    this.dataInterval = interval;
    this.dataMode = entryString;
    this.initTransportData();
    this.lineChartData = this.tmpTransportData;
  }

  loadFractionData() {
    if (this.initialized.basic) {
      return;
    }

    this.initializeTempCollections();

    this.logsService.getFullLog(this.war._id).subscribe((data) => {
      this.logData = data;
      this.initPointData();
      this.showLineChart = true;
      this.lineChartLabel = this.labelPoints;
      this.lineChartData = this.tmpPointData;
      this.initialized.basic = true;
    });
  }

  initPointData() {
    this.logData.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));
    });
    this.addFinalTimeData(this.tmpPointData);
  }

  initBudgetData() {
    if (this.initialized.budget) {
      return;
    }
    this.logData.budget.forEach(budgetEntry => {
      const budgetEntryDate = new Date(budgetEntry.time);
      const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
      const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;

      if (WarDetailComponent.isTwoMinutesAhead(budgetEntryDate, this.tmpBudgetData)) {
        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));
      }
    });
    this.addFinalTimeData(this.tmpBudgetData);
    this.initialized.budget = true;
  }

  initKillData() {
    if (!this.initialized.kill) {
      return;
    }
    let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0;

    for (const {killEntry, index} of this.logData.kill.map((killEntry, index) => ({killEntry, index}))) {
      const killEntryDate = new Date(killEntry.time);
      if (killEntry.friendlyFire === false) {
        if (killEntry.fraction === 'BLUFOR') {
          killCountBlufor++;
        }
        if (killEntry.fraction === 'OPFOR') {
          killCountOpfor++;
        }
        if (WarDetailComponent.isTwoMinutesAhead(killEntryDate, this.tmpKillData)) {
          this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
          this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
        }
      } else {
        if (killEntry.fraction === 'BLUFOR') {
          ffKillCountBlufor++;
        }
        if (killEntry.fraction === 'OPFOR') {
          ffKillCountOpfor++;
        }
        if (WarDetailComponent.isTwoMinutesAhead(killEntryDate, this.tmpFrienlyFireData)) {
          this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
          this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
        }
      }
      if (index === this.logData.kill.length - 1) {
        this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
        this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
        this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
        this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
      }
    }

    this.addFinalTimeData(this.tmpKillData);
    this.addFinalTimeData(this.tmpFrienlyFireData)
    this.initialized.kill = true;
  }

  initRevive() {
    if (this.initialized.revive) {
      return;
    }
    let reviveCountBlufor = 0, reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0;
    for (const {reviveEntry, index} of this.logData.revive.map((reviveEntry, index) => ({reviveEntry, index}))) {
      const reviveEntryDate = new Date(reviveEntry.time);
      if (reviveEntry.stabilized === false) {
        if (reviveEntry.fraction === 'BLUFOR') {
          reviveCountBlufor++;
        } else {
          reviveCountOpfor++;
        }
        if (WarDetailComponent.isTwoMinutesAhead(reviveEntryDate, this.tmpReviveData)) {
          this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
          this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
        }
      } else {
        if (reviveEntry.fraction === 'BLUFOR') {
          stabilizeCountBlufor++;
        } else {
          stabilizeCountOpfor++;
        }
        if (WarDetailComponent.isTwoMinutesAhead(reviveEntryDate, this.tmpStabilizeData)) {
          this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
          this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
        }
      }
      if (index === this.logData.revive.length - 1) {
        this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
        this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
        this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
        this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
      }
    }
    this.addFinalTimeData(this.tmpReviveData);
    this.addFinalTimeData(this.tmpStabilizeData);
    this.initialized.revive = true;
  }

  initTransportData() {
    if (this.initialized.transport) {
      return;
    }
    let transportCountBlufor = 0, transportCountOpfor = 0;
    for (const {transportEntry, index} of this.logData.transport.map((transportEntry, index) => ({
      transportEntry,
      index
    }))) {
      const transportEntryDate = new Date(transportEntry.time);
      if (transportEntry.fraction === 'BLUFOR') {
        transportCountBlufor++;
      } else {
        transportCountOpfor++;
      }
      if (WarDetailComponent.isTwoMinutesAhead(transportEntryDate, this.tmpTransportData) || index === this.logData.transport.length - 1) {
        this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountBlufor));
        this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountOpfor));
      }
    }
    this.addFinalTimeData(this.tmpTransportData);
    this.initialized.transport = true;

  }

  initFlagHoldData() {
    if (this.initialized.flag) {
      return;
    }
    let flagStatusBlufor = true;
    let flagStatusOpfor = true;
    this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusBlufor));
    this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusOpfor));

    this.logData.flag.forEach(flagEntry => {
      if (flagEntry.flagFraction === 'BLUFOR') {
        flagStatusBlufor = !flagEntry.capture;
      } else {
        flagStatusOpfor = !flagEntry.capture;
      }
      this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push(
        ChartUtils.getSeriesEntry(new Date(flagEntry.time), flagEntry.flagFraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor)
      )
    });

    this.addFinalTimeData(this.tmpFlagCaptureData);
    this.initialized.flag = true;
  }

  private static isTwoMinutesAhead(entryDate: Date, tmpData: any): boolean {
    return entryDate.getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + (1.5 * 60000)
  }

  initializeTempCollections() {
    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');

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

  addFinalTimeData(tmpCollection) {
    const endDate = new Date(this.war.endDate);
    if (tmpCollection === this.tmpBudgetData) {
      this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetBlufor));
      this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetOpfor));
    } else {
      for (let j in [0, 1]) {
        if (tmpCollection[j].series[tmpCollection[j].series.length - 1].name < endDate) {
          tmpCollection[j].series.push(ChartUtils.getSeriesEntry(endDate, tmpCollection[j].series[tmpCollection[j].series.length - 1].value));
        }
      }
    }
  }

}