381 lines
12 KiB
TypeScript
381 lines
12 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";
|
|
|
|
|
|
@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
|
|
});
|
|
// 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({
|
|
"name": new Date(budgetEntry.time),
|
|
"value": budgetEntry.newBudget
|
|
});
|
|
|
|
this.tmpBudgetData[fractionOld].series.push({
|
|
"name": new Date(budgetEntry.time),
|
|
"value": this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length-1].value
|
|
});
|
|
}
|
|
|
|
// 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 {
|
|
stabilizeCountBlufor++;
|
|
}
|
|
} else {
|
|
if (reviveEntry.stabilized === false) {
|
|
reviveCountOpfor++;
|
|
} 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]) {
|
|
console.log(new Date(tmp[j].series[tmp[j].series.length - 1].name) + '... ' + endDate)
|
|
console.log(new Date(tmp[j].series[tmp[j].series.length - 1].name) < endDate)
|
|
if (new Date(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
|
|
}
|
|
)
|
|
}
|
|
}
|
|
});
|
|
// console.log(this.tmpKillData[0].series[this.tmpKillData[0].series.length-1])
|
|
// console.log(this.tmpKillData[1].series[this.tmpKillData[1].series.length-1])
|
|
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;
|
|
}
|
|
|
|
}
|