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 }); }); // 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 }); }); // 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 }); }); // 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 }); }); // 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 }); }); // FLAG let flagStatusBlufor = true; let flagStatusOpfor = true; 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 } else { flagStatusOpfor = !flagEntry.capture; } this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push({ "name": new Date(flagEntry.time), "value": flagEntry.flagFraction === 'BLUFOR' ? 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({ 'name': endDate, 'value': tmp[j].series[tmp[j].series.length - 1].value } ) } } }); this.pointData = this.tmpPointData; this.budgetData = this.tmpBudgetData; this.transportData = this.tmpTransportData; this.reviveData = this.tmpReviveData; this.stabilizedData = this.tmpStabilizeData; this.killData = this.tmpKillData; this.friendlyFireData = this.tmpFrienlyFireData; this.flagData = this.tmpFlagCaptureData; } }