299 lines
10 KiB
TypeScript
299 lines
10 KiB
TypeScript
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: []};
|
|
|
|
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';
|
|
|
|
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) {
|
|
return;
|
|
}
|
|
|
|
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.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;
|
|
}
|
|
|
|
}
|