2017-07-29 12:59:51 +02:00
|
|
|
import {Component} from "@angular/core";
|
2017-08-12 21:37:31 +02:00
|
|
|
import {ActivatedRoute} from "@angular/router";
|
2017-09-02 13:08:54 +02:00
|
|
|
import {CarouselConfig} from "ngx-bootstrap";
|
2017-09-12 15:02:35 +02:00
|
|
|
import {CampaignService} from "../../services/campaign-service/campaign.service";
|
2017-10-02 14:41:17 +02:00
|
|
|
import {ChartUtils} from "../../utils/chart-utils";
|
2017-07-29 12:59:51 +02:00
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
2017-08-06 10:42:37 +02:00
|
|
|
selector: 'stats-overview',
|
|
|
|
templateUrl: './stats-overview.component.html',
|
2017-10-02 19:29:53 +02:00
|
|
|
styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css'],
|
2017-09-02 13:08:54 +02:00
|
|
|
inputs: ['campaigns'],
|
|
|
|
providers: [{provide: CarouselConfig, useValue: {interval: false}}]
|
2017-07-29 12:59:51 +02:00
|
|
|
})
|
2017-08-06 10:42:37 +02:00
|
|
|
export class StatisticOverviewComponent {
|
2017-07-29 12:59:51 +02:00
|
|
|
|
2017-09-02 13:08:54 +02:00
|
|
|
id = "";
|
2017-08-12 23:13:39 +02:00
|
|
|
title = "";
|
2017-09-02 13:08:54 +02:00
|
|
|
activeSlideIndex: number = 0;
|
2017-08-12 23:13:39 +02:00
|
|
|
|
2017-07-30 08:55:14 +02:00
|
|
|
pointData: any[] = [];
|
2017-09-02 10:43:23 +02:00
|
|
|
pointSumData: any[] = [];
|
2017-07-30 08:55:14 +02:00
|
|
|
playerData: any[] = [];
|
2017-07-29 12:59:51 +02:00
|
|
|
|
|
|
|
colorScheme = {
|
2017-07-30 08:55:14 +02:00
|
|
|
domain: ['#0000FF', '#B22222']
|
2017-07-29 12:59:51 +02:00
|
|
|
};
|
2017-09-24 12:04:48 +02:00
|
|
|
gradient = false;
|
|
|
|
xAxis = true;
|
|
|
|
yAxis = true;
|
|
|
|
roundDomains = true;
|
|
|
|
legend = true;
|
|
|
|
legendTitle = '';
|
|
|
|
showXAxisLabel = true;
|
|
|
|
showYAxisLabel = true;
|
|
|
|
autoscale = true;
|
|
|
|
timeline = false;
|
2017-07-29 12:59:51 +02:00
|
|
|
|
2017-08-12 21:37:31 +02:00
|
|
|
constructor(private route: ActivatedRoute,
|
2017-09-12 15:02:35 +02:00
|
|
|
private campaignService: CampaignService) {
|
2017-07-29 12:59:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
ngOnInit() {
|
2017-08-12 21:37:31 +02:00
|
|
|
this.route.params
|
|
|
|
.map(params => params['id'])
|
|
|
|
.subscribe((id) => {
|
2017-09-02 13:08:54 +02:00
|
|
|
this.id = id;
|
2017-09-12 15:02:35 +02:00
|
|
|
if (this.campaignService.campaigns) {
|
|
|
|
this.initWars(this.campaignService.campaigns);
|
2017-08-12 21:37:31 +02:00
|
|
|
} else {
|
2017-09-12 15:02:35 +02:00
|
|
|
this.campaignService.getAllCampaigns().subscribe(campaigns => {
|
2017-09-02 13:08:54 +02:00
|
|
|
this.initWars(campaigns);
|
2017-08-12 21:37:31 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-09-02 13:08:54 +02:00
|
|
|
initWars(campaigns) {
|
2017-08-12 21:37:31 +02:00
|
|
|
let wars = [];
|
|
|
|
let itemsProcessed = 0;
|
2017-09-02 13:08:54 +02:00
|
|
|
campaigns = campaigns.filter(campaign => this.id === 'all' || campaign._id === this.id);
|
2017-08-12 22:27:23 +02:00
|
|
|
campaigns.forEach(campaign => {
|
2017-09-02 13:08:54 +02:00
|
|
|
if (this.id === 'all') {
|
|
|
|
this.title = "Gesamtübersicht";
|
2017-08-12 23:13:39 +02:00
|
|
|
} else {
|
|
|
|
this.title = campaign.title
|
2017-09-02 22:14:25 +02:00
|
|
|
setTimeout(() => {
|
|
|
|
this.activeSlideIndex = 2;
|
|
|
|
}, 10)
|
2017-08-12 23:13:39 +02:00
|
|
|
}
|
2017-08-12 22:27:23 +02:00
|
|
|
wars = wars.concat(campaign.wars);
|
|
|
|
itemsProcessed++;
|
|
|
|
if (itemsProcessed === campaigns.length) {
|
|
|
|
this.initChart(wars);
|
|
|
|
}
|
|
|
|
})
|
2017-07-29 18:00:21 +02:00
|
|
|
}
|
|
|
|
|
2017-09-02 13:08:54 +02:00
|
|
|
goToSlide(index: number) {
|
|
|
|
this.activeSlideIndex = index;
|
|
|
|
}
|
|
|
|
|
2017-07-29 18:00:21 +02:00
|
|
|
initChart(wars: any[]) {
|
2017-07-30 08:55:14 +02:00
|
|
|
let pointsObj = [
|
2017-07-29 18:00:21 +02:00
|
|
|
{
|
|
|
|
"name": "NATO",
|
|
|
|
"series": []
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"name": "CSAT",
|
|
|
|
"series": []
|
2017-07-30 08:55:14 +02:00
|
|
|
}];
|
2017-09-24 12:38:57 +02:00
|
|
|
let pointsSumObj = JSON.parse(JSON.stringify(pointsObj));
|
|
|
|
let playersObj = JSON.parse(JSON.stringify(pointsObj));
|
|
|
|
|
2017-07-29 18:00:21 +02:00
|
|
|
for (let i = wars.length - 1; i >= 0; i--) {
|
2017-09-02 10:43:23 +02:00
|
|
|
let j = wars.length - i - 1;
|
2017-10-02 14:41:17 +02:00
|
|
|
const warDateString = ChartUtils.getShortDateString(wars[i].date);
|
2017-07-30 08:55:14 +02:00
|
|
|
|
2017-09-02 10:43:23 +02:00
|
|
|
pointsObj[0].series.push({
|
2017-07-29 18:00:21 +02:00
|
|
|
name: warDateString,
|
|
|
|
value: wars[i].ptBlufor
|
2017-09-02 10:43:23 +02:00
|
|
|
});
|
|
|
|
pointsObj[1].series.push({
|
2017-07-29 18:00:21 +02:00
|
|
|
name: warDateString,
|
|
|
|
value: wars[i].ptOpfor
|
2017-09-02 10:43:23 +02:00
|
|
|
});
|
|
|
|
pointsSumObj[0].series.push({
|
|
|
|
name: warDateString,
|
|
|
|
value: pointsSumObj[0].series[j - 1] ?
|
|
|
|
pointsSumObj[0].series[j - 1].value + wars[i].ptBlufor :
|
|
|
|
wars[i].ptBlufor
|
|
|
|
});
|
|
|
|
pointsSumObj[1].series.push({
|
|
|
|
name: warDateString,
|
|
|
|
value: pointsSumObj[1].series[j - 1]
|
|
|
|
? pointsSumObj[1].series[j - 1].value + wars[i].ptOpfor :
|
|
|
|
wars[i].ptOpfor
|
|
|
|
});
|
|
|
|
playersObj[0].series.push({
|
2017-07-29 18:00:21 +02:00
|
|
|
name: warDateString,
|
2017-07-30 08:55:14 +02:00
|
|
|
value: wars[i].playersBlufor
|
2017-09-02 10:43:23 +02:00
|
|
|
});
|
|
|
|
playersObj[1].series.push({
|
2017-07-29 18:00:21 +02:00
|
|
|
name: warDateString,
|
2017-07-30 08:55:14 +02:00
|
|
|
value: wars[i].playersOpfor
|
2017-09-02 10:43:23 +02:00
|
|
|
});
|
2017-07-29 18:00:21 +02:00
|
|
|
}
|
2017-07-30 08:55:14 +02:00
|
|
|
|
|
|
|
this.pointData = pointsObj;
|
2017-09-02 10:43:23 +02:00
|
|
|
this.pointSumData = pointsSumObj;
|
2017-07-30 08:55:14 +02:00
|
|
|
this.playerData = playersObj;
|
2017-09-24 12:38:57 +02:00
|
|
|
Object.assign(this, [this.pointData, this.pointSumData, this.playerData]);
|
2017-07-29 18:00:21 +02:00
|
|
|
}
|
2017-07-29 12:59:51 +02:00
|
|
|
|
|
|
|
}
|