Finish basic fraction war stats page
parent
07b1c0534a
commit
efbc078aea
10
README.md
10
README.md
|
@ -6,6 +6,14 @@ _MEAN Application_
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
## Development
|
### Setup mongoDB
|
||||||
|
|
||||||
|
### Setup node and npm
|
||||||
|
|
||||||
|
## Development and Execution
|
||||||
|
|
||||||
|
### First run in dev mode
|
||||||
|
|
||||||
|
### Run in Prodction
|
||||||
|
|
||||||
## License Information
|
## License Information
|
||||||
|
|
|
@ -10,7 +10,7 @@ const LogBudgetSchema = new Schema({
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
time: {
|
time: {
|
||||||
type: Number,
|
type: Date,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
fraction: {
|
fraction: {
|
||||||
|
|
|
@ -10,7 +10,7 @@ const LogFlagSchema = new Schema({
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
time: {
|
time: {
|
||||||
type: Number,
|
type: Date,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
player: {
|
player: {
|
||||||
|
|
|
@ -10,7 +10,7 @@ const LogKillSchema = new Schema({
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
time: {
|
time: {
|
||||||
type: Number,
|
type: Date,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
shooter: {
|
shooter: {
|
||||||
|
|
|
@ -10,7 +10,7 @@ const LogKillSchema = new Schema({
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
time: {
|
time: {
|
||||||
type: Number,
|
type: Date,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
ptBlufor: {
|
ptBlufor: {
|
||||||
|
|
|
@ -10,7 +10,7 @@ const LogRespawnSchema = new Schema({
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
time: {
|
time: {
|
||||||
type: Number,
|
type: Date,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
player: {
|
player: {
|
||||||
|
|
|
@ -10,7 +10,7 @@ const LogReviveSchema = new Schema({
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
time: {
|
time: {
|
||||||
type: Number,
|
type: Date,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
medic: {
|
medic: {
|
||||||
|
|
|
@ -10,7 +10,7 @@ const LogTransportSchema = new Schema({
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
time: {
|
time: {
|
||||||
type: Number,
|
type: Date,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
driver: {
|
driver: {
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
// modules
|
// modules
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
|
const async = require('async');
|
||||||
const logger = require('debug')('cc:logs');
|
const logger = require('debug')('cc:logs');
|
||||||
|
|
||||||
const routerHandling = require('../middleware/router-handling');
|
const routerHandling = require('../middleware/router-handling');
|
||||||
|
@ -26,18 +27,47 @@ function processLogRequest(model, filter, res, next) {
|
||||||
err.status = require('./http-codes').notfound;
|
err.status = require('./http-codes').notfound;
|
||||||
return next(err)
|
return next(err)
|
||||||
}
|
}
|
||||||
const updatedTimeItems = [];
|
res.locals.items = log;
|
||||||
for (let i =0; i <log.length; i++) {
|
|
||||||
let item = log[i].toObject();
|
|
||||||
item.time = decimalToTimeString(item.time);
|
|
||||||
updatedTimeItems.push(item);
|
|
||||||
}
|
|
||||||
res.locals.items = updatedTimeItems;
|
|
||||||
next();
|
next();
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// routes **********************
|
// routes **********************
|
||||||
|
logsRouter.route('/:warId')
|
||||||
|
.get((req, res, next) => {
|
||||||
|
const filter = {war: req.params.warId};
|
||||||
|
const sort = {sort: {time: 1}};
|
||||||
|
|
||||||
|
const pointsObjects = LogPointsModel.find(filter, {}, sort);
|
||||||
|
const budgetObjects = LogBudgetModel.find(filter, {}, sort);
|
||||||
|
const respawnObjects = LogRespawnModel.find(filter, {}, sort);
|
||||||
|
const reviveObjects = LogReviveModel.find(filter, {}, sort);
|
||||||
|
const killObjects = LogKillModel.find(filter, {}, sort);
|
||||||
|
const transportObjects = LogTransportModel.find(filter, {}, sort);
|
||||||
|
const flagObjects = LogFlagModel.find(filter, {}, sort);
|
||||||
|
const resources = {
|
||||||
|
points: pointsObjects.exec.bind(pointsObjects),
|
||||||
|
budget: budgetObjects.exec.bind(budgetObjects),
|
||||||
|
respawn: respawnObjects.exec.bind(respawnObjects),
|
||||||
|
revive: reviveObjects.exec.bind(reviveObjects),
|
||||||
|
kill: killObjects.exec.bind(killObjects),
|
||||||
|
transport: transportObjects.exec.bind(transportObjects),
|
||||||
|
flag: flagObjects.exec.bind(flagObjects)
|
||||||
|
};
|
||||||
|
|
||||||
|
async.parallel(resources, function (error, results){
|
||||||
|
if (error) {
|
||||||
|
res.status(500).send(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
res.locals.items = results;
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.all(
|
||||||
|
routerHandling.httpMethodNotAllowed
|
||||||
|
);
|
||||||
|
|
||||||
logsRouter.route('/:warId/budget')
|
logsRouter.route('/:warId/budget')
|
||||||
.get((req, res, next) => {
|
.get((req, res, next) => {
|
||||||
const filter = {war: req.params.warId};
|
const filter = {war: req.params.warId};
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const timeStringToDecimal = require('../tools/util').timeStringToDecimal;
|
|
||||||
const playerArrayContains = require('./util').playerArrayContains;
|
const playerArrayContains = require('./util').playerArrayContains;
|
||||||
|
|
||||||
const parseWarLog = (lineArray, war) => {
|
const parseWarLog = (lineArray, war) => {
|
||||||
|
@ -47,7 +46,7 @@ const parseWarLog = (lineArray, war) => {
|
||||||
|
|
||||||
stats.kills.push({
|
stats.kills.push({
|
||||||
war: war._id,
|
war: war._id,
|
||||||
time: timeStringToDecimal(line.split(' ')[5]),
|
time: getFullTimeDate(war.date, line.split(' ')[5]),
|
||||||
shooter: shooter ? shooter.name : null,
|
shooter: shooter ? shooter.name : null,
|
||||||
target: target.name,
|
target: target.name,
|
||||||
friendlyFire: shooter ? target.fraction === shooter.fraction : false,
|
friendlyFire: shooter ? target.fraction === shooter.fraction : false,
|
||||||
|
@ -71,7 +70,7 @@ const parseWarLog = (lineArray, war) => {
|
||||||
stats.war['budgetBlufor'] = transformMoneyString(budg[11]);
|
stats.war['budgetBlufor'] = transformMoneyString(budg[11]);
|
||||||
stats.war['budgetOpfor'] = transformMoneyString(budg[14]);
|
stats.war['budgetOpfor'] = transformMoneyString(budg[14]);
|
||||||
} else {
|
} else {
|
||||||
stats.budget.push(getBudgetEntry(budg, war._id));
|
stats.budget.push(getBudgetEntry(budg, war._id, war.date));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -86,7 +85,7 @@ const parseWarLog = (lineArray, war) => {
|
||||||
|
|
||||||
stats.flag.push({
|
stats.flag.push({
|
||||||
war: war._id,
|
war: war._id,
|
||||||
time: timeStringToDecimal(line.split(' ')[5]),
|
time: getFullTimeDate(war.date, line.split(' ')[5]),
|
||||||
player: playerName,
|
player: playerName,
|
||||||
flagFraction: flagFraction,
|
flagFraction: flagFraction,
|
||||||
capture: capture
|
capture: capture
|
||||||
|
@ -105,7 +104,7 @@ const parseWarLog = (lineArray, war) => {
|
||||||
stats.war['ptOpfor'] = parseInt(pt[14].slice(0, -1));
|
stats.war['ptOpfor'] = parseInt(pt[14].slice(0, -1));
|
||||||
return true;
|
return true;
|
||||||
} else {
|
} else {
|
||||||
stats.points.push(getPointsEntry(pt, line, war._id))
|
stats.points.push(getPointsEntry(pt, line, war._id, war.date))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -116,7 +115,7 @@ const parseWarLog = (lineArray, war) => {
|
||||||
stats.clean.push(line);
|
stats.clean.push(line);
|
||||||
const resp = line.split(' ');
|
const resp = line.split(' ');
|
||||||
const playerName = line.substring(line.lastIndexOf('Spieler:') + 9, line.lastIndexOf('-') - 1);
|
const playerName = line.substring(line.lastIndexOf('Spieler:') + 9, line.lastIndexOf('-') - 1);
|
||||||
stats.respawn.push(getRespawnEntry(resp, playerName, war._id));
|
stats.respawn.push(getRespawnEntry(resp, playerName, war._id, war.date));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -133,7 +132,7 @@ const parseWarLog = (lineArray, war) => {
|
||||||
|
|
||||||
stats.revive.push({
|
stats.revive.push({
|
||||||
war: war._id,
|
war: war._id,
|
||||||
time: timeStringToDecimal(line.split(' ')[5]),
|
time: getFullTimeDate(war.date, line.split(' ')[5]),
|
||||||
stabilized: stabilized,
|
stabilized: stabilized,
|
||||||
medic: medic.name,
|
medic: medic.name,
|
||||||
patient: patient.name,
|
patient: patient.name,
|
||||||
|
@ -156,7 +155,7 @@ const parseWarLog = (lineArray, war) => {
|
||||||
|
|
||||||
stats.transport.push({
|
stats.transport.push({
|
||||||
war: war._id,
|
war: war._id,
|
||||||
time: timeStringToDecimal(line.split(' ')[5]),
|
time: getFullTimeDate(war.date, line.split(' ')[5]),
|
||||||
driver: driver.name,
|
driver: driver.name,
|
||||||
passenger: passenger ? passenger.name : null,
|
passenger: passenger ? passenger.name : null,
|
||||||
fraction: driver.fraction,
|
fraction: driver.fraction,
|
||||||
|
@ -185,28 +184,28 @@ const parseWarLog = (lineArray, war) => {
|
||||||
return stats;
|
return stats;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getRespawnEntry = (respawn, playerName, warId) => {
|
const getRespawnEntry = (respawn, playerName, warId, warDate) => {
|
||||||
return {
|
return {
|
||||||
war: warId,
|
war: warId,
|
||||||
time: timeStringToDecimal(respawn[5]),
|
time: getFullTimeDate(warDate, respawn[5]),
|
||||||
player: playerName
|
player: playerName
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPointsEntry = (pt, line, warId) => {
|
const getPointsEntry = (pt, line, warId, warDate) => {
|
||||||
return {
|
return {
|
||||||
war: warId,
|
war: warId,
|
||||||
time: timeStringToDecimal(pt[5]),
|
time: getFullTimeDate(warDate, pt[5]),
|
||||||
ptBlufor: parseInt(pt[12]),
|
ptBlufor: parseInt(pt[12]),
|
||||||
ptOpfor: parseInt(pt[15].slice(0, -1)),
|
ptOpfor: parseInt(pt[15].slice(0, -1)),
|
||||||
fraction: line.includes('no Domination') ? 'NONE' : line.includes('NATO +1') ? 'BLUFOR' : 'OPFOR'
|
fraction: line.includes('no Domination') ? 'NONE' : line.includes('NATO +1') ? 'BLUFOR' : 'OPFOR'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getBudgetEntry = (budg, warId) => {
|
const getBudgetEntry = (budg, warId, warDate) => {
|
||||||
return {
|
return {
|
||||||
war: warId,
|
war: warId,
|
||||||
time: timeStringToDecimal(budg[5]),
|
time: getFullTimeDate(warDate, budg[5]),
|
||||||
fraction: budg[9] === 'NATO' ? 'BLUFOR' : 'OPFOR',
|
fraction: budg[9] === 'NATO' ? 'BLUFOR' : 'OPFOR',
|
||||||
oldBudget: transformMoneyString(budg[11]),
|
oldBudget: transformMoneyString(budg[11]),
|
||||||
newBudget: transformMoneyString(budg[14])
|
newBudget: transformMoneyString(budg[14])
|
||||||
|
@ -229,7 +228,14 @@ const transformMoneyString = (budgetString) => {
|
||||||
}
|
}
|
||||||
const budget = budgetString.split('e+');
|
const budget = budgetString.split('e+');
|
||||||
return Math.round(parseFloat(budget[0]) * Math.pow(10, parseInt(budget[1])));
|
return Math.round(parseFloat(budget[0]) * Math.pow(10, parseInt(budget[1])));
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFullTimeDate = (date, timeString) => {
|
||||||
|
const returnDate = new Date(date);
|
||||||
|
const time = timeString.split(':');
|
||||||
|
returnDate.setHours(time[0]);
|
||||||
|
returnDate.setMinutes(time[1]);
|
||||||
|
return returnDate;
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = parseWarLog;
|
module.exports = parseWarLog;
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
"@angular/platform-browser": "^4.4.4",
|
"@angular/platform-browser": "^4.4.4",
|
||||||
"@angular/platform-browser-dynamic": "^4.4.4",
|
"@angular/platform-browser-dynamic": "^4.4.4",
|
||||||
"@angular/router": "^4.4.4",
|
"@angular/router": "^4.4.4",
|
||||||
"@swimlane/ngx-charts": "^6.0.2",
|
"@swimlane/ngx-charts": "^6.1.0",
|
||||||
"@swimlane/ngx-datatable": "^10.2.3",
|
"@swimlane/ngx-datatable": "^10.2.3",
|
||||||
"bootstrap": "^3.3.7",
|
"bootstrap": "^3.3.7",
|
||||||
"core-js": "^2.4.1",
|
"core-js": "^2.4.1",
|
||||||
|
@ -31,6 +31,7 @@
|
||||||
"jquery": "^3.1.0",
|
"jquery": "^3.1.0",
|
||||||
"jquery-ui": "^1.12.0",
|
"jquery-ui": "^1.12.0",
|
||||||
"jquery-ui-bundle": "^1.11.4",
|
"jquery-ui-bundle": "^1.11.4",
|
||||||
|
"ngx-bootstrap": "^1.9.3",
|
||||||
"ngx-clipboard": "^8.1.0",
|
"ngx-clipboard": "^8.1.0",
|
||||||
"ngx-cookie-service": "^1.0.9",
|
"ngx-cookie-service": "^1.0.9",
|
||||||
"ngx-infinite-scroll": "^0.5.2",
|
"ngx-infinite-scroll": "^0.5.2",
|
||||||
|
|
|
@ -10,6 +10,11 @@ export class LogsService {
|
||||||
private config: AppConfig) {
|
private config: AppConfig) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getFullLog(warId: string) {
|
||||||
|
return this.http.get(this.config.apiLogsPath + '/' + warId)
|
||||||
|
.map(res => res.json())
|
||||||
|
}
|
||||||
|
|
||||||
getBudgetLogs(warId: string, fraction = '') {
|
getBudgetLogs(warId: string, fraction = '') {
|
||||||
const params = new URLSearchParams();
|
const params = new URLSearchParams();
|
||||||
params.append('fraction', fraction);
|
params.append('fraction', fraction);
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
width: 80%;
|
width: 95%;
|
||||||
min-width: 500px;
|
min-width: 500px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
|
@ -10,11 +10,11 @@
|
||||||
<span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
|
<span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pull-left head-field " style="padding-left: 150px;">
|
<div class="pull-left head-field " style="padding-left: 140px;">
|
||||||
<h4 style="margin-bottom: 0;">Teilnehmer:</h4>
|
<h4 style="margin-bottom: 0;">Teilnehmer:</h4>
|
||||||
<ngx-charts-pie-chart
|
<ngx-charts-pie-chart
|
||||||
[view]="[120, 120]"
|
[view]="[120, 120]"
|
||||||
[scheme]="{domain: ['#B22222', '#0000FF']}"
|
[scheme]="colorScheme"
|
||||||
[results]="playerChart"
|
[results]="playerChart"
|
||||||
[legend]="false"
|
[legend]="false"
|
||||||
[explodeSlices]="false"
|
[explodeSlices]="false"
|
||||||
|
@ -52,7 +52,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<tabset>
|
<tabset #staticTabs>
|
||||||
<tab>
|
<tab>
|
||||||
<ng-template tabHeading>
|
<ng-template tabHeading>
|
||||||
<img src="../../../assets/scoreboard-btn.png"> Scoreboard
|
<img src="../../../assets/scoreboard-btn.png"> Scoreboard
|
||||||
|
@ -101,6 +101,7 @@
|
||||||
[gradient]="gradient"
|
[gradient]="gradient"
|
||||||
[xAxis]="xAxis"
|
[xAxis]="xAxis"
|
||||||
[yAxis]="yAxis"
|
[yAxis]="yAxis"
|
||||||
|
[curve]="monotoneYCurve"
|
||||||
[legend]="legend"
|
[legend]="legend"
|
||||||
[legendTitle]="legendTitle"
|
[legendTitle]="legendTitle"
|
||||||
[showXAxisLabel]="showXAxisLabel"
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
|
@ -118,6 +119,7 @@
|
||||||
[gradient]="gradient"
|
[gradient]="gradient"
|
||||||
[xAxis]="xAxis"
|
[xAxis]="xAxis"
|
||||||
[yAxis]="yAxis"
|
[yAxis]="yAxis"
|
||||||
|
[curve]="monotoneYCurve"
|
||||||
[legend]="legend"
|
[legend]="legend"
|
||||||
[legendTitle]="legendTitle"
|
[legendTitle]="legendTitle"
|
||||||
[showXAxisLabel]="showXAxisLabel"
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
|
@ -128,6 +130,113 @@
|
||||||
[roundDomains]="roundDomains">
|
[roundDomains]="roundDomains">
|
||||||
</ngx-charts-line-chart>
|
</ngx-charts-line-chart>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="fade-in chart-container">
|
||||||
|
<ngx-charts-line-chart
|
||||||
|
[scheme]="colorScheme"
|
||||||
|
[results]="killData"
|
||||||
|
[gradient]="gradient"
|
||||||
|
[xAxis]="xAxis"
|
||||||
|
[yAxis]="yAxis"
|
||||||
|
[curve]="monotoneYCurve"
|
||||||
|
[legend]="legend"
|
||||||
|
[legendTitle]="legendTitle"
|
||||||
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
|
[showYAxisLabel]="showYAxisLabel"
|
||||||
|
[yAxisLabel]="yAxisLabelKill"
|
||||||
|
[autoScale]="autoscale"
|
||||||
|
[timeline]="timeline"
|
||||||
|
[roundDomains]="roundDomains">
|
||||||
|
</ngx-charts-line-chart>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in chart-container">
|
||||||
|
<ngx-charts-line-chart
|
||||||
|
[scheme]="colorScheme"
|
||||||
|
[results]="friendlyFireData"
|
||||||
|
[gradient]="gradient"
|
||||||
|
[xAxis]="xAxis"
|
||||||
|
[yAxis]="yAxis"
|
||||||
|
[curve]="monotoneYCurve"
|
||||||
|
[legend]="legend"
|
||||||
|
[legendTitle]="legendTitle"
|
||||||
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
|
[showYAxisLabel]="showYAxisLabel"
|
||||||
|
[yAxisLabel]="yAxisLabelFriendlyFire"
|
||||||
|
[autoScale]="autoscale"
|
||||||
|
[timeline]="timeline"
|
||||||
|
[roundDomains]="roundDomains">
|
||||||
|
</ngx-charts-line-chart>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in chart-container">
|
||||||
|
<ngx-charts-line-chart
|
||||||
|
[scheme]="colorScheme"
|
||||||
|
[results]="transportData"
|
||||||
|
[gradient]="gradient"
|
||||||
|
[xAxis]="xAxis"
|
||||||
|
[yAxis]="yAxis"
|
||||||
|
[curve]="monotoneYCurve"
|
||||||
|
[legend]="legend"
|
||||||
|
[legendTitle]="legendTitle"
|
||||||
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
|
[showYAxisLabel]="showYAxisLabel"
|
||||||
|
[yAxisLabel]="yAxisLabelTransport"
|
||||||
|
[autoScale]="autoscale"
|
||||||
|
[timeline]="timeline"
|
||||||
|
[roundDomains]="roundDomains">
|
||||||
|
</ngx-charts-line-chart>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in chart-container">
|
||||||
|
<ngx-charts-line-chart
|
||||||
|
[scheme]="colorScheme"
|
||||||
|
[results]="reviveData"
|
||||||
|
[gradient]="gradient"
|
||||||
|
[xAxis]="xAxis"
|
||||||
|
[yAxis]="yAxis"
|
||||||
|
[curve]="monotoneYCurve"
|
||||||
|
[legend]="legend"
|
||||||
|
[legendTitle]="legendTitle"
|
||||||
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
|
[showYAxisLabel]="showYAxisLabel"
|
||||||
|
[yAxisLabel]="yAxisLabelRevive"
|
||||||
|
[autoScale]="autoscale"
|
||||||
|
[timeline]="timeline"
|
||||||
|
[roundDomains]="roundDomains">
|
||||||
|
</ngx-charts-line-chart>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in chart-container">
|
||||||
|
<ngx-charts-line-chart
|
||||||
|
[scheme]="colorScheme"
|
||||||
|
[results]="stabilizedData"
|
||||||
|
[gradient]="gradient"
|
||||||
|
[xAxis]="xAxis"
|
||||||
|
[yAxis]="yAxis"
|
||||||
|
[curve]="monotoneYCurve"
|
||||||
|
[legend]="legend"
|
||||||
|
[legendTitle]="legendTitle"
|
||||||
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
|
[showYAxisLabel]="showYAxisLabel"
|
||||||
|
[yAxisLabel]="yAxisLabelStabilize"
|
||||||
|
[autoScale]="autoscale"
|
||||||
|
[timeline]="timeline"
|
||||||
|
[roundDomains]="roundDomains">
|
||||||
|
</ngx-charts-line-chart>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in chart-container">
|
||||||
|
<ngx-charts-line-chart
|
||||||
|
[scheme]="colorScheme"
|
||||||
|
[results]="flagData"
|
||||||
|
[xAxis]="xAxis"
|
||||||
|
[yAxis]="yAxis"
|
||||||
|
[curve]="stepCurve"
|
||||||
|
[legend]="legend"
|
||||||
|
[legendTitle]="legendTitle"
|
||||||
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
|
[showYAxisLabel]="showYAxisLabel"
|
||||||
|
[yAxisLabel]="yAxisLabelFlag"
|
||||||
|
[autoScale]="autoscale"
|
||||||
|
[timeline]="timeline"
|
||||||
|
[roundDomains]="roundDomains">
|
||||||
|
</ngx-charts-line-chart>
|
||||||
|
</div>
|
||||||
</tab>
|
</tab>
|
||||||
</tabset>
|
</tabset>
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,8 @@ import {ActivatedRoute, Router} from "@angular/router";
|
||||||
import {WarService} from "../../services/logs/war.service";
|
import {WarService} from "../../services/logs/war.service";
|
||||||
import {War} from "../../models/model-interfaces";
|
import {War} from "../../models/model-interfaces";
|
||||||
import {LogsService} from "../../services/logs/logs.service";
|
import {LogsService} from "../../services/logs/logs.service";
|
||||||
|
import {TabsetComponent} from "ngx-bootstrap";
|
||||||
|
import * as d3 from "d3";
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -12,14 +14,16 @@ import {LogsService} from "../../services/logs/logs.service";
|
||||||
})
|
})
|
||||||
export class WarDetailComponent {
|
export class WarDetailComponent {
|
||||||
|
|
||||||
|
@ViewChild('overview') private overviewContainer: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild('staticTabs') staticTabs: TabsetComponent;
|
||||||
|
|
||||||
war: War = {players: []};
|
war: War = {players: []};
|
||||||
|
|
||||||
fractionRadioSelect: string;
|
fractionRadioSelect: string;
|
||||||
|
|
||||||
playerChart: any[] = [];
|
playerChart: any[] = [];
|
||||||
|
|
||||||
@ViewChild('overview') private overviewContainer: ElementRef;
|
|
||||||
|
|
||||||
cellHeight = 40;
|
cellHeight = 40;
|
||||||
|
|
||||||
rows = [];
|
rows = [];
|
||||||
|
@ -33,6 +37,21 @@ export class WarDetailComponent {
|
||||||
|
|
||||||
pointData: any[] = [];
|
pointData: any[] = [];
|
||||||
budgetData: any[] = [];
|
budgetData: any[] = [];
|
||||||
|
killData: any[] = [];
|
||||||
|
friendlyFireData: any[] = [];
|
||||||
|
transportData: any[] = [];
|
||||||
|
reviveData: any[] = [];
|
||||||
|
stabilizedData: any[] = [];
|
||||||
|
flagData: any[] = [];
|
||||||
|
|
||||||
|
tmpPointData;
|
||||||
|
tmpBudgetData;
|
||||||
|
tmpKillData;
|
||||||
|
tmpFrienlyFireData;
|
||||||
|
tmpTransportData;
|
||||||
|
tmpReviveData;
|
||||||
|
tmpStabilizeData;
|
||||||
|
tmpFlagCaptureData;
|
||||||
|
|
||||||
colorScheme = {
|
colorScheme = {
|
||||||
domain: ['#0000FF', '#B22222']
|
domain: ['#0000FF', '#B22222']
|
||||||
|
@ -40,7 +59,15 @@ export class WarDetailComponent {
|
||||||
|
|
||||||
yAxisLabelPoints = 'Punkte';
|
yAxisLabelPoints = 'Punkte';
|
||||||
yAxisLabelBudget = 'Budget';
|
yAxisLabelBudget = 'Budget';
|
||||||
|
yAxisLabelKill = 'Kills';
|
||||||
|
yAxisLabelFriendlyFire = 'FriendlyFire';
|
||||||
|
yAxisLabelTransport = 'Lufttransport';
|
||||||
|
yAxisLabelRevive = 'Revive';
|
||||||
|
yAxisLabelStabilize = 'Stabilisiert';
|
||||||
|
yAxisLabelFlag = 'Flaggenbesitz';
|
||||||
|
|
||||||
|
monotoneYCurve = d3.curveMonotoneY;
|
||||||
|
stepCurve = d3.curveStepAfter;
|
||||||
gradient = false;
|
gradient = false;
|
||||||
yAxis = true;
|
yAxis = true;
|
||||||
xAxis = true;
|
xAxis = true;
|
||||||
|
@ -51,7 +78,7 @@ export class WarDetailComponent {
|
||||||
autoscale = true;
|
autoscale = true;
|
||||||
timeline = false;
|
timeline = false;
|
||||||
roundDomains = true;
|
roundDomains = true;
|
||||||
fractionInitialized: boolean = false;
|
fractionChartsInitialized: boolean = false;
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute,
|
constructor(private route: ActivatedRoute,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
|
@ -77,7 +104,29 @@ export class WarDetailComponent {
|
||||||
"value": war.playersBlufor
|
"value": war.playersBlufor
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
Object.assign(this, [this.playerChart, this.pointData, this.budgetData]);
|
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();
|
this.scrollOverviewTop();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -107,71 +156,194 @@ export class WarDetailComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
loadFractionData() {
|
loadFractionData() {
|
||||||
if (!this.fractionInitialized) {
|
if (!this.fractionChartsInitialized) {
|
||||||
const tmpPointData = [
|
const startDateObj = new Date(this.war.date);
|
||||||
{
|
startDateObj.setHours(0);
|
||||||
"name": "NATO",
|
startDateObj.setMinutes(1);
|
||||||
"series": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "CSAT",
|
|
||||||
"series": []
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const tmpBudgetData = JSON.parse(JSON.stringify(tmpPointData));
|
|
||||||
const tmpKillData = JSON.parse(JSON.stringify(tmpPointData));
|
|
||||||
const tmpFrienlyFireData = JSON.parse(JSON.stringify(tmpPointData));
|
|
||||||
const tmpTransportData = JSON.parse(JSON.stringify(tmpPointData));
|
|
||||||
const tmpReviveData = JSON.parse(JSON.stringify(tmpPointData));
|
|
||||||
const tmpStabilizeData = JSON.parse(JSON.stringify(tmpPointData));
|
|
||||||
const tmpFlagCaptureData = JSON.parse(JSON.stringify(tmpPointData));
|
|
||||||
|
|
||||||
|
this.logsService.getFullLog(this.war._id).subscribe((data) => {
|
||||||
// POINTS
|
// POINTS
|
||||||
this.logsService.getPointsLogs(this.war._id).subscribe((data) => {
|
data.points.forEach(pointEntry => {
|
||||||
data.forEach(pointEntry => {
|
|
||||||
const dateObj = new Date(this.war.date);
|
const dateObj = new Date(this.war.date);
|
||||||
const time = pointEntry.time.split(':');
|
const time = pointEntry.time.split(':');
|
||||||
dateObj.setHours(time[0]);
|
dateObj.setHours(time[0]);
|
||||||
dateObj.setMinutes(time[1]);
|
dateObj.setMinutes(time[1]);
|
||||||
tmpPointData[0].series.push({
|
this.tmpPointData[0].series.push({
|
||||||
"name": dateObj,
|
"name": new Date(pointEntry.time),
|
||||||
"value": pointEntry.ptBlufor
|
"value": pointEntry.ptBlufor
|
||||||
});
|
});
|
||||||
tmpPointData[1].series.push({
|
this.tmpPointData[1].series.push({
|
||||||
"name": dateObj,
|
"name": new Date(pointEntry.time),
|
||||||
"value": pointEntry.ptOpfor
|
"value": pointEntry.ptOpfor
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.pointData = tmpPointData;
|
this.pointData = this.tmpPointData;
|
||||||
});
|
|
||||||
|
|
||||||
// BUDGET
|
// BUDGET
|
||||||
this.logsService.getBudgetLogs(this.war._id).subscribe((data) => {
|
this.tmpBudgetData[0].series.push({
|
||||||
const dateObj = new Date(this.war.date);
|
"name": startDateObj,
|
||||||
dateObj.setHours(0);
|
|
||||||
dateObj.setMinutes(0);
|
|
||||||
tmpBudgetData[0].series.push({
|
|
||||||
"name": dateObj,
|
|
||||||
"value": this.war.budgetBlufor
|
"value": this.war.budgetBlufor
|
||||||
});
|
});
|
||||||
tmpBudgetData[1].series.push({
|
this.tmpBudgetData[1].series.push({
|
||||||
"name": dateObj,
|
"name": startDateObj,
|
||||||
"value": this.war.budgetOpfor
|
"value": this.war.budgetOpfor
|
||||||
});
|
});
|
||||||
data.forEach(budgetEntry => {
|
data.budget.forEach(budgetEntry => {
|
||||||
const time = budgetEntry.time.split(':');
|
this.tmpBudgetData[budgetEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
|
||||||
const dateObj = new Date(this.war.date);
|
"name": new Date(budgetEntry.time),
|
||||||
dateObj.setHours(time[0]);
|
|
||||||
dateObj.setMinutes(time[1]);
|
|
||||||
tmpBudgetData[budgetEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
|
|
||||||
"name": dateObj,
|
|
||||||
"value": budgetEntry.newBudget
|
"value": budgetEntry.newBudget
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.budgetData = tmpBudgetData;
|
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
|
||||||
});
|
});
|
||||||
|
|
||||||
this.fractionInitialized = true;
|
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;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in New Issue