opt-cc/static/src/app/statistic/war-detail/war-detail.component.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";


@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: []};

  fractionRadioSelect: string;

  playerChart: any[] = [];

  cellHeight = 40;

  rows = [];

  reorderable: boolean = false;

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

  pointData: any[] = [];
  budgetData: any[] = [];
  killData: any[] = [];
  friendlyFireData: any[] = [];
  transportData: any[] = [];
  reviveData: any[] = [];
  stabilizedData: any[] = [];
  flagData: any[] = [];

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

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

  yAxisLabelPoints = 'Punkte';
  yAxisLabelBudget = 'Budget';
  yAxisLabelKill = 'Kills';
  yAxisLabelFriendlyFire = 'FriendlyFire';
  yAxisLabelTransport = 'Lufttransport';
  yAxisLabelRevive = 'Revive';
  yAxisLabelStabilize = 'Stabilisiert';
  yAxisLabelFlag = 'Flaggenbesitz';

  monotoneYCurve = d3.curveMonotoneY;
  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 = [
          {
            "name": "CSAT",
            "value": war.playersOpfor
          },
          {
            "name": "NATO",
            "value": war.playersBlufor
          }
        ];
        this.tmpPointData = [
          {
            "name": "NATO",
            "series": []
          },
          {
            "name": "CSAT",
            "series": []
          }
        ];
        this.tmpBudgetData = JSON.parse(JSON.stringify(this.tmpPointData));
        this.tmpKillData = JSON.parse(JSON.stringify(this.tmpPointData));
        this.tmpFrienlyFireData = JSON.parse(JSON.stringify(this.tmpPointData));
        this.tmpTransportData = JSON.parse(JSON.stringify(this.tmpPointData));
        this.tmpReviveData = JSON.parse(JSON.stringify(this.tmpPointData));
        this.tmpStabilizeData = JSON.parse(JSON.stringify(this.tmpPointData));
        this.tmpFlagCaptureData = JSON.parse(JSON.stringify(this.tmpPointData));

        Object.assign(this, [this.playerChart, this.pointData, this.budgetData, this.killData,
          this.friendlyFireData, this.transportData, this.reviveData, this.stabilizedData, this.flagData]);

        this.fractionChartsInitialized = false;
        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;
    }
  }

  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) {
      const startDateObj = new Date(this.war.date);
      startDateObj.setHours(0);
      startDateObj.setMinutes(1);

      this.logsService.getFullLog(this.war._id).subscribe((data) => {
        // POINTS
        data.points.forEach(pointEntry => {
          const dateObj = new Date(this.war.date);
          const time = pointEntry.time.split(':');
          dateObj.setHours(time[0]);
          dateObj.setMinutes(time[1]);
          this.tmpPointData[0].series.push({
            "name": new Date(pointEntry.time),
            "value": pointEntry.ptBlufor
          });
          this.tmpPointData[1].series.push({
            "name": new Date(pointEntry.time),
            "value": pointEntry.ptOpfor
          });
        });
        this.pointData = this.tmpPointData;

        // BUDGET
        this.tmpBudgetData[0].series.push({
          "name": startDateObj,
          "value": this.war.budgetBlufor
        });
        this.tmpBudgetData[1].series.push({
          "name": startDateObj,
          "value": this.war.budgetOpfor
        });
        data.budget.forEach(budgetEntry => {
          this.tmpBudgetData[budgetEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
            "name": new Date(budgetEntry.time),
            "value": budgetEntry.newBudget
          });
        });
        this.budgetData = this.tmpBudgetData;

        // KILLS
        let killCountBlufor = 0;
        let killCountOpfor = 0;
        let ffKillCountBlufor = 0;
        let ffKillCountOpfor = 0;
        this.tmpKillData[0].series.push({
          "name": startDateObj,
          "value": killCountBlufor
        });
        this.tmpKillData[1].series.push({
          "name": startDateObj,
          "value": killCountOpfor
        });
        this.tmpFrienlyFireData[0].series.push({
          "name": startDateObj,
          "value": ffKillCountBlufor
        });
        this.tmpFrienlyFireData[1].series.push({
          "name": startDateObj,
          "value": ffKillCountOpfor
        });

        data.kill.forEach(killEntry => {
          if (killEntry.fraction === 'BLUFOR') {
            if (killEntry.friendlyFire === false) {
              killCountBlufor++;
            } else {
              ffKillCountBlufor++;
            }
          } else {
            if (killEntry.friendlyFire === false) {
              killCountOpfor++;
            } else {
              ffKillCountOpfor++;
            }
          }
          this.tmpKillData[killEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
            "name": new Date(killEntry.time),
            "value": killEntry.fraction === 'BLUFOR' ? killCountBlufor : killCountOpfor
          });
          this.tmpFrienlyFireData[killEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
            "name": new Date(killEntry.time),
            "value": killEntry.fraction === 'BLUFOR' ? ffKillCountBlufor : ffKillCountOpfor
          });
        });
        this.killData = this.tmpKillData;
        this.friendlyFireData = this.tmpFrienlyFireData;

        // TRANSPORT
        let transportCountBlufor = 0;
        let transportCountOpfor = 0;
        this.tmpTransportData[0].series.push({
          "name": startDateObj,
          "value": transportCountBlufor
        });
        this.tmpTransportData[1].series.push({
          "name": startDateObj,
          "value": transportCountOpfor
        });

        data.transport.forEach(transportEntry => {
          if (transportEntry.fraction === 'BLUFOR') {
            transportCountBlufor++;
          } else {
            transportCountOpfor++;
          }
          this.tmpTransportData[transportEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
            "name": new Date(transportEntry.time),
            "value": transportEntry.fraction === 'BLUFOR' ? transportCountBlufor : transportCountOpfor
          });
        });
        this.transportData = this.tmpTransportData;

        // REVIVE & STABILIZE
        let reviveCountBlufor = 0;
        let reviveCountOpfor = 0;
        let stabilizeCountBlufor = 0;
        let stabilizeCountOpfor = 0;
        this.tmpReviveData[0].series.push({
          "name": startDateObj,
          "value": reviveCountBlufor
        });
        this.tmpReviveData[1].series.push({
          "name": startDateObj,
          "value": reviveCountOpfor
        });
        this.tmpStabilizeData[0].series.push({
          "name": startDateObj,
          "value": stabilizeCountBlufor
        });
        this.tmpStabilizeData[1].series.push({
          "name": startDateObj,
          "value": stabilizeCountOpfor
        });
        data.revive.forEach(reviveEntry => {
          if (reviveEntry.fraction === 'BLUFOR') {
            if (reviveEntry.stabilized === false) {
              reviveCountBlufor++;
            } else {
              reviveCountOpfor++;
            }
          } else {
            if (reviveEntry.stabilized === false) {
              stabilizeCountBlufor++;
            } else {
              stabilizeCountOpfor++;
            }
          }
          this.tmpReviveData[reviveEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
            "name": new Date(reviveEntry.time),
            "value": reviveEntry.fraction === 'BLUFOR' ? reviveCountBlufor : reviveCountOpfor
          });
          this.tmpStabilizeData[reviveEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
            "name": new Date(reviveEntry.time),
            "value": reviveEntry.fraction === 'BLUFOR' ? stabilizeCountBlufor : stabilizeCountOpfor
          });
        });
        this.reviveData = this.tmpReviveData;
        this.stabilizedData = this.tmpStabilizeData;


        // FLAG
        let flagStatusBlufor = 1;
        let flagStatusOpfor = 1;
        this.tmpFlagCaptureData[0].series.push({
          "name": startDateObj,
          "value": flagStatusBlufor
        });
        this.tmpFlagCaptureData[1].series.push({
          "name": startDateObj,
          "value": flagStatusOpfor
        });

        data.flag.forEach(flagEntry => {
          if (flagEntry.flagFraction === 'BLUFOR') {
            flagStatusBlufor = flagEntry.capture ? 0 : 1
          } else {
            flagStatusOpfor = flagEntry.capture ? 0 : 1;
          }
          this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push({
            "name": new Date(flagEntry.time),
            "value": flagEntry.flagFraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor
          });
        });
        this.flagData = this.tmpFlagCaptureData;

        this.fractionChartsInitialized = true;
      });
    }
  }

}