/// 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"; import {Fraction} from "../../utils/fraction.enum"; @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 { readonly fraction = Fraction; @ViewChild('overview') private overviewContainer: ElementRef; @ViewChild('staticTabs') staticTabs: TabsetComponent; war: War = {players: []}; logData: any; initialized: any; startDateObj: Date; 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: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR] }; 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; 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(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, 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) { } } 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(Fraction.BLUFOR, Fraction.OPFOR); this.tmpBudgetData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); this.tmpKillData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); this.tmpFrienlyFireData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); this.tmpTransportData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); this.tmpReviveData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); this.tmpStabilizeData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); this.tmpFlagCaptureData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); [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)); } } } } }