Mudulize war detail view
parent
3dc348e5a5
commit
58bb5071a5
|
|
@ -44,7 +44,8 @@ Thumbs.db
|
|||
.directory
|
||||
|
||||
# Internal Data
|
||||
/public
|
||||
public/
|
||||
mongodb-data/
|
||||
resource/
|
||||
backup/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "opt-cc",
|
||||
"version": "1.6.3",
|
||||
"version": "1.6.4",
|
||||
"license": "MIT",
|
||||
"author": "Florian Hartwich <hardi@noarch.de>",
|
||||
"private": true,
|
||||
|
|
|
|||
|
|
@ -96,6 +96,6 @@
|
|||
<router-outlet name="right"></router-outlet>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<router-outlet name="bottom"></router-outlet>
|
||||
<router-outlet name="footer"></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,14 +58,14 @@ export const appRoutes: Routes = [
|
|||
},
|
||||
|
||||
/** Redirect Configuration **/
|
||||
{
|
||||
path: '404',
|
||||
component: NotFoundComponent
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: '/404'
|
||||
} // always configure this last - first matching route gets processed
|
||||
// {
|
||||
// path: '404',
|
||||
// component: NotFoundComponent
|
||||
// },
|
||||
// {
|
||||
// path: '**',
|
||||
// redirectTo: '/404'
|
||||
// } // always configure this last - first matching route gets processed
|
||||
];
|
||||
|
||||
export const appRouting = RouterModule.forRoot(appRoutes);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {WarItemComponent} from "./war-list/war-item.component";
|
|||
import {ModuleWithProviders} from "@angular/core";
|
||||
import {CampaignSubmitComponent} from "./campaign-submit/campaign-submit.component";
|
||||
import {CampaignPlayerDetailComponent} from "./campaign-player-detail/campaign-player-detail.component";
|
||||
import {WarDetailHeaderComponent} from "./war-detail-header/war-detail-header.component";
|
||||
|
||||
|
||||
export const statsRoutes: Routes = [{
|
||||
|
|
@ -36,7 +37,7 @@ export const statsRoutes: Routes = [{
|
|||
},
|
||||
{
|
||||
path: 'war/:id',
|
||||
component: WarDetailComponent,
|
||||
component: WarDetailHeaderComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
{
|
||||
|
|
@ -48,5 +49,6 @@ export const statsRoutes: Routes = [{
|
|||
export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
|
||||
|
||||
export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
|
||||
WarListComponent, WarSubmitComponent, WarDetailComponent, CampaignPlayerDetailComponent, WarItemComponent];
|
||||
WarListComponent, WarSubmitComponent, WarDetailHeaderComponent, WarDetailComponent, CampaignPlayerDetailComponent,
|
||||
WarItemComponent];
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
.war-header-container {
|
||||
width: 920px;
|
||||
min-height: 205px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.head-field {
|
||||
font-size: 24px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.war-header {
|
||||
border-bottom: thin solid lightgrey;
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
|
||||
<div class="war-header-container">
|
||||
<h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
|
||||
<div class="pull-left head-field" style="width: 250px">
|
||||
<h4>Endpunktestand:</h4>
|
||||
<span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
|
||||
<span style="font-size: x-large">|</span>
|
||||
<span [style.color]="fraction.COLOR_OPFOR" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
|
||||
</div>
|
||||
|
||||
<div class="pull-left head-field " style="padding-left: 140px;">
|
||||
<h4 style="margin-bottom: 0;">Teilnehmer:</h4>
|
||||
<ngx-charts-pie-chart
|
||||
[view]="[120, 120]"
|
||||
[scheme]="colorScheme"
|
||||
[results]="playerChart"
|
||||
[legend]="false"
|
||||
[explodeSlices]="false"
|
||||
[labels]="false"
|
||||
[doughnut]="false"
|
||||
[gradient]="false">
|
||||
</ngx-charts-pie-chart>
|
||||
</div>
|
||||
|
||||
<div class="pull-left " style="padding-left: 150px; padding-top:15px">
|
||||
<a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
|
||||
anzeigen</a>
|
||||
<form class="form-group">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect"
|
||||
[checked]="(fractionFilterSelected == undefined) ? 'true' : 'false'"
|
||||
[(ngModel)]="fractionFilterSelected"
|
||||
(change)="filterPlayersByFraction()">Alle
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="BLUFOR"
|
||||
[(ngModel)]="fractionFilterSelected"
|
||||
#fractRadioBufor
|
||||
(change)="filterPlayersByFraction(fractRadioBufor.value)">{{fraction.BLUFOR}}
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="OPFOR"
|
||||
[(ngModel)]="fractionFilterSelected"
|
||||
#fractRadioOpfor
|
||||
(change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
|
||||
</label>
|
||||
<br>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="nav nav-tabs" style="width:980px; margin:auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link active"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<war-detail *ngIf="war"
|
||||
[war]="war"
|
||||
[fractionFilterSelected]="fractionFilterSelected">
|
||||
</war-detail>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import {Component} from "@angular/core";
|
||||
import {ActivatedRoute} from "@angular/router";
|
||||
import {WarService} from "../../services/logs/war.service";
|
||||
import {War} from "../../models/model-interfaces";
|
||||
import {ChartUtils} from "../../utils/chart-utils";
|
||||
import {Fraction} from "../../utils/fraction.enum";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'war-detail-header',
|
||||
templateUrl: './war-detail-header.component.html',
|
||||
styleUrls: ['./war-detail-header.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
|
||||
})
|
||||
export class WarDetailHeaderComponent {
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
war: War;
|
||||
|
||||
fractionFilterSelected: string;
|
||||
|
||||
playerChart: any[] = [];
|
||||
|
||||
colorScheme = {
|
||||
domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR]
|
||||
};
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private warService: WarService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.params
|
||||
.map(params => params['id'])
|
||||
.filter(id => id != undefined)
|
||||
.flatMap(id => this.warService.getWar(id))
|
||||
.subscribe(war => {
|
||||
this.war = war;
|
||||
this.fractionFilterSelected = undefined;
|
||||
this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
|
||||
Object.assign(this, [this.playerChart]);
|
||||
})
|
||||
}
|
||||
|
||||
filterPlayersByFraction(fraction?: string) {
|
||||
this.fractionFilterSelected = fraction;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -34,27 +34,6 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ########### TABS ########### */
|
||||
|
||||
:host /deep/ .nav-tabs {
|
||||
padding-left: 35% !important;
|
||||
}
|
||||
|
||||
:host /deep/ .nav-link {
|
||||
background: #4b4b4b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host /deep/ .nav-link:hover {
|
||||
background: #afafaf;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:host /deep/ .nav-tabs > li.active > a {
|
||||
background: #222222;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ########### DATATABLE ########### */
|
||||
|
||||
:host /deep/ .datatable-header {
|
||||
|
|
|
|||
|
|
@ -1,63 +1,7 @@
|
|||
<div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
|
||||
<div class=vertical-spacer></div>
|
||||
<div style="overflow:hidden">
|
||||
<div style="width: 920px;min-height: 205px;">
|
||||
<h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
|
||||
<div class="pull-left head-field" style="width: 250px">
|
||||
<h4>Endpunktestand:</h4>
|
||||
<span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
|
||||
<span style="font-size: x-large">|</span>
|
||||
<span [style.color]="fraction.COLOR_OPFOR" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
|
||||
</div>
|
||||
|
||||
<div class="pull-left head-field " style="padding-left: 140px;">
|
||||
<h4 style="margin-bottom: 0;">Teilnehmer:</h4>
|
||||
<ngx-charts-pie-chart
|
||||
[view]="[120, 120]"
|
||||
[scheme]="{domain: [fraction.COLOR_OPFOR, fraction.COLOR_BLUFOR]}"
|
||||
[results]="playerChart"
|
||||
[legend]="false"
|
||||
[explodeSlices]="false"
|
||||
[labels]="false"
|
||||
[doughnut]="false"
|
||||
[gradient]="false">
|
||||
</ngx-charts-pie-chart>
|
||||
</div>
|
||||
|
||||
<div class="pull-left " style="padding-left: 150px; padding-top:15px">
|
||||
<a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile anzeigen</a>
|
||||
<form *ngIf="staticTabs.tabs[0].active" class="form-group">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect"
|
||||
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
(change)="filterPlayersByFraction()">Alle
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="BLUFOR"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioBufor
|
||||
(change)="filterPlayersByFraction(fractRadioBufor.value)">{{fraction.BLUFOR}}
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="OPFOR"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioOpfor
|
||||
(change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
|
||||
</label>
|
||||
<br>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tabset #staticTabs>
|
||||
<tab>
|
||||
<ng-template tabHeading>
|
||||
<img src="../../../assets/scoreboard-btn.png"> Scoreboard
|
||||
</ng-template>
|
||||
<div class=vertical-spacer></div>
|
||||
<ngx-datatable
|
||||
style="width:980px; margin:auto"
|
||||
[rows]="rows"
|
||||
[sorts]="[{prop: 'kill', dir: 'desc'}]"
|
||||
[reorderable]="reorderable"
|
||||
|
|
@ -87,89 +31,56 @@
|
|||
<ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
|
||||
<ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</tab>
|
||||
|
||||
<tab (select)="loadFractionData()">
|
||||
<ng-template tabHeading>
|
||||
<img src="../../../assets/fraction-btn.png"> Fraktionen
|
||||
</ng-template>
|
||||
|
||||
<!--<div class="btn-group" style="position: absolute; margin-left: 5%;" dropdown>-->
|
||||
<!--<button dropdownToggle type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split">-->
|
||||
<!--{{dataMode}} <span class="caret"></span>-->
|
||||
<!--</button>-->
|
||||
<!--<ul *dropdownMenu class="dropdown-menu" role="menu">-->
|
||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(0, 'Summe')">Summe</a></li>-->
|
||||
<!--<li class="divider dropdown-divider"></li>-->
|
||||
<!--<li class="disabled" role="menuitem">-->
|
||||
<!--<a class="dropdown-item" style="cursor: default!important;">Interval:</a>-->
|
||||
<!--</li>-->
|
||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(1, '1 Minute')">1 Minute</a></li>-->
|
||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(5, '5 Minuten')">5 Minuten</a></li>-->
|
||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(10, '10 Minuten')">10 Minuten</a>-->
|
||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(20, '20 Minuten')">20 Minuten</a>-->
|
||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(40, '40 Minuten')">40 Minuten</a>-->
|
||||
<!--</li>-->
|
||||
<!--</ul>-->
|
||||
<!--<div class="chart-select-group btn-group" (click)="selectChart()">-->
|
||||
<!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>-->
|
||||
<!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>-->
|
||||
<!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"-->
|
||||
<!--btnRadio="{{labelKill}}">{{labelKill}}</label>-->
|
||||
<!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>-->
|
||||
<!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>-->
|
||||
<!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"-->
|
||||
<!--btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>-->
|
||||
<!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"-->
|
||||
<!--btnRadio="{{labelTransport}}">{{labelTransport}}</label>-->
|
||||
<!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"-->
|
||||
<!--btnRadio="{{labelFlag}}">{{labelFlag}}</label>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div class="chart-select-group btn-group" (click)="selectChart()">
|
||||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
|
||||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
|
||||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
|
||||
btnRadio="{{labelKill}}">{{labelKill}}</label>
|
||||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
|
||||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
|
||||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
|
||||
btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
|
||||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
|
||||
btnRadio="{{labelTransport}}">{{labelTransport}}</label>
|
||||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
|
||||
btnRadio="{{labelFlag}}">{{labelFlag}}</label>
|
||||
</div>
|
||||
<!--<div *ngIf="showLineChart" class="chart-container">-->
|
||||
<!--<ngx-charts-line-chart-->
|
||||
<!--[scheme]="colorScheme"-->
|
||||
<!--[results]="lineChartData"-->
|
||||
<!--[gradient]="gradient"-->
|
||||
<!--[xAxis]="xAxis"-->
|
||||
<!--[yAxis]="yAxis"-->
|
||||
<!--[legend]="legend"-->
|
||||
<!--[legendTitle]="legendTitle"-->
|
||||
<!--[showXAxisLabel]="showXAxisLabel"-->
|
||||
<!--[showYAxisLabel]="showYAxisLabel"-->
|
||||
<!--[yAxisLabel]="lineChartLabel"-->
|
||||
<!--[autoScale]="autoscale"-->
|
||||
<!--[timeline]="timeline"-->
|
||||
<!--[roundDomains]="roundDomains">-->
|
||||
<!--</ngx-charts-line-chart>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div *ngIf="showLineChart" class="chart-container">
|
||||
<ngx-charts-line-chart
|
||||
[scheme]="colorScheme"
|
||||
[results]="lineChartData"
|
||||
[gradient]="gradient"
|
||||
[xAxis]="xAxis"
|
||||
[yAxis]="yAxis"
|
||||
[legend]="legend"
|
||||
[legendTitle]="legendTitle"
|
||||
[showXAxisLabel]="showXAxisLabel"
|
||||
[showYAxisLabel]="showYAxisLabel"
|
||||
[yAxisLabel]="lineChartLabel"
|
||||
[autoScale]="autoscale"
|
||||
[timeline]="timeline"
|
||||
[roundDomains]="roundDomains">
|
||||
</ngx-charts-line-chart>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!showLineChart" class="chart-container">
|
||||
<ngx-charts-area-chart
|
||||
[scheme]="colorScheme"
|
||||
[results]="areaChartData"
|
||||
[xAxis]="xAxis"
|
||||
[yAxis]="yAxis"
|
||||
[curve]="stepCurve"
|
||||
[legend]="legend"
|
||||
[legendTitle]="legendTitle"
|
||||
[showXAxisLabel]="showXAxisLabel"
|
||||
[showYAxisLabel]="showYAxisLabel"
|
||||
[yAxisLabel]="labelFlag"
|
||||
[autoScale]="autoscale"
|
||||
[timeline]="timeline"
|
||||
[roundDomains]="false">
|
||||
</ngx-charts-area-chart>
|
||||
</div>
|
||||
</tab>
|
||||
|
||||
<!--<tab>-->
|
||||
<!--<ng-template tabHeading>-->
|
||||
<!--<img src="../../../assets/player-stats-btn.png"> Player-->
|
||||
<!--</ng-template>-->
|
||||
<!--</tab>-->
|
||||
</tabset>
|
||||
<!--<div *ngIf="!showLineChart" class="chart-container">-->
|
||||
<!--<ngx-charts-area-chart-->
|
||||
<!--[scheme]="colorScheme"-->
|
||||
<!--[results]="areaChartData"-->
|
||||
<!--[xAxis]="xAxis"-->
|
||||
<!--[yAxis]="yAxis"-->
|
||||
<!--[curve]="stepCurve"-->
|
||||
<!--[legend]="legend"-->
|
||||
<!--[legendTitle]="legendTitle"-->
|
||||
<!--[showXAxisLabel]="showXAxisLabel"-->
|
||||
<!--[showYAxisLabel]="showYAxisLabel"-->
|
||||
<!--[yAxisLabel]="labelFlag"-->
|
||||
<!--[autoScale]="autoscale"-->
|
||||
<!--[timeline]="timeline"-->
|
||||
<!--[roundDomains]="false">-->
|
||||
<!--</ngx-charts-area-chart>-->
|
||||
<!--</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,13 @@
|
|||
///<reference path="../../utils/chart-utils.ts"/>
|
||||
import {Component, ElementRef, ViewChild} from "@angular/core";
|
||||
import {Component, ElementRef, SimpleChanges, 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";
|
||||
import {Fraction} from "../../utils/fraction.enum";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'war-detail',
|
||||
templateUrl: './war-detail.component.html',
|
||||
inputs: ['war', 'fractionFilterSelected'],
|
||||
styleUrls: ['./war-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
|
||||
})
|
||||
export class WarDetailComponent {
|
||||
|
|
@ -21,21 +16,9 @@ export class WarDetailComponent {
|
|||
|
||||
@ViewChild('overview') private overviewContainer: ElementRef;
|
||||
|
||||
@ViewChild('staticTabs') staticTabs: TabsetComponent;
|
||||
war: War;
|
||||
|
||||
war: War = {players: []};
|
||||
|
||||
logData: any;
|
||||
|
||||
initialized: any;
|
||||
|
||||
startDateObj: Date;
|
||||
|
||||
public chartSelectModel: string;
|
||||
|
||||
fractionRadioSelect: string;
|
||||
|
||||
playerChart: any[] = [];
|
||||
fractionFilterSelected: string;
|
||||
|
||||
cellHeight = 40;
|
||||
|
||||
|
|
@ -48,80 +31,35 @@ export class WarDetailComponent {
|
|||
sortDescending: 'glyphicon glyphicon-triangle-bottom',
|
||||
};
|
||||
|
||||
lineChartData: any[] = [];
|
||||
areaChartData: any[] = [];
|
||||
|
||||
tmpPointData;
|
||||
tmpBudgetData;
|
||||
tmpKillData;
|
||||
tmpFrienlyFireData;
|
||||
tmpTransportData;
|
||||
tmpReviveData;
|
||||
tmpStabilizeData;
|
||||
tmpFlagCaptureData;
|
||||
|
||||
colorScheme = {
|
||||
domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
|
||||
};
|
||||
|
||||
labelPoints = 'Punkte';
|
||||
labelBudget = 'Budget';
|
||||
labelKill = 'Kills';
|
||||
labelFriendlyFire = 'FriendlyFire';
|
||||
labelTransport = 'Lufttransport';
|
||||
labelRevive = 'Revive';
|
||||
labelStabilize = 'Stabilisiert';
|
||||
labelFlag = 'Flaggenbesitz';
|
||||
lineChartLabel: string = this.labelPoints;
|
||||
|
||||
showLineChart = true;
|
||||
stepCurve = d3.curveStepAfter;
|
||||
gradient = false;
|
||||
yAxis = true;
|
||||
xAxis = true;
|
||||
legend = false;
|
||||
legendTitle = false;
|
||||
showXAxisLabel = false;
|
||||
showYAxisLabel = true;
|
||||
autoscale = true;
|
||||
timeline = false;
|
||||
roundDomains = true;
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private warService: WarService,
|
||||
private logsService: LogsService) {
|
||||
private router: Router) {
|
||||
}
|
||||
|
||||
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 = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
|
||||
}
|
||||
|
||||
this.initialized = {
|
||||
basic: false,
|
||||
budget: false,
|
||||
kill: false,
|
||||
revive: false,
|
||||
transport: false,
|
||||
flag: false
|
||||
};
|
||||
Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
|
||||
this.chartSelectModel = this.labelPoints;
|
||||
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});
|
||||
}
|
||||
}
|
||||
|
||||
this.startDateObj = new Date(this.war.date);
|
||||
this.startDateObj.setHours(0);
|
||||
this.startDateObj.setMinutes(1);
|
||||
|
||||
this.fractionRadioSelect = undefined;
|
||||
this.staticTabs.tabs[0].active = true;
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes.war) {
|
||||
this.rows = changes.war.currentValue.players;
|
||||
}
|
||||
if (changes.fractionFilterSelected) {
|
||||
this.filterPlayersByFraction(this.fractionFilterSelected)
|
||||
}
|
||||
this.scrollOverviewTop();
|
||||
});
|
||||
}
|
||||
|
||||
scrollOverviewTop() {
|
||||
try {
|
||||
this.overviewContainer.nativeElement.scrollTop = 0;
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
|
||||
filterPlayersByFraction(fraction?: string) {
|
||||
|
|
@ -134,272 +72,4 @@ export class WarDetailComponent {
|
|||
}
|
||||
}
|
||||
|
||||
selectChart() {
|
||||
if (this.chartSelectModel !== this.labelFlag) {
|
||||
this.showLineChart = true;
|
||||
this.lineChartLabel = this.chartSelectModel;
|
||||
switch (this.chartSelectModel) {
|
||||
case this.labelPoints:
|
||||
this.lineChartData = this.tmpPointData;
|
||||
break;
|
||||
case this.labelBudget:
|
||||
this.initBudgetData();
|
||||
this.lineChartData = this.tmpBudgetData;
|
||||
break;
|
||||
case this.labelKill:
|
||||
this.initKillData();
|
||||
this.lineChartData = this.tmpKillData;
|
||||
break;
|
||||
case this.labelFriendlyFire:
|
||||
this.initKillData();
|
||||
this.lineChartData = this.tmpFrienlyFireData;
|
||||
break;
|
||||
case this.labelRevive:
|
||||
this.initRevive();
|
||||
this.lineChartData = this.tmpReviveData;
|
||||
break;
|
||||
case this.labelStabilize:
|
||||
this.initRevive();
|
||||
this.lineChartData = this.tmpStabilizeData;
|
||||
break;
|
||||
case this.labelTransport:
|
||||
this.initTransportData();
|
||||
this.lineChartData = this.tmpTransportData;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
this.initFlagHoldData();
|
||||
this.showLineChart = false;
|
||||
this.areaChartData = this.tmpFlagCaptureData;
|
||||
}
|
||||
}
|
||||
|
||||
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.initialized.basic) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.initializeTempCollections();
|
||||
|
||||
this.logsService.getFullLog(this.war._id).subscribe((data) => {
|
||||
this.logData = data;
|
||||
this.initPointData();
|
||||
this.showLineChart = true;
|
||||
this.lineChartLabel = this.labelPoints;
|
||||
this.lineChartData = this.tmpPointData;
|
||||
this.initialized.basic = true;
|
||||
});
|
||||
}
|
||||
|
||||
initPointData() {
|
||||
this.logData.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));
|
||||
});
|
||||
this.addFinalTimeData(this.tmpPointData);
|
||||
}
|
||||
|
||||
initBudgetData() {
|
||||
if (this.initialized.budget) {
|
||||
return;
|
||||
}
|
||||
this.logData.budget.forEach(budgetEntry => {
|
||||
const budgetEntryDate = new Date(budgetEntry.time);
|
||||
const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
|
||||
const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;
|
||||
|
||||
if (WarDetailComponent.isTwoMinutesAhead(budgetEntryDate, this.tmpBudgetData)) {
|
||||
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));
|
||||
}
|
||||
});
|
||||
this.addFinalTimeData(this.tmpBudgetData);
|
||||
this.initialized.budget = true;
|
||||
}
|
||||
|
||||
initKillData() {
|
||||
if (this.initialized.kill) {
|
||||
return;
|
||||
}
|
||||
let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0;
|
||||
|
||||
for (const {killEntry, index} of this.logData.kill.map((killEntry, index) => ({killEntry, index}))) {
|
||||
const killEntryDate = new Date(killEntry.time);
|
||||
if (killEntry.friendlyFire === false) {
|
||||
if (killEntry.fraction === 'BLUFOR') {
|
||||
killCountBlufor++;
|
||||
}
|
||||
if (killEntry.fraction === 'OPFOR') {
|
||||
killCountOpfor++;
|
||||
}
|
||||
if (WarDetailComponent.isTwoMinutesAhead(killEntryDate, this.tmpKillData)) {
|
||||
this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
|
||||
this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
|
||||
}
|
||||
} else {
|
||||
if (killEntry.fraction === 'BLUFOR') {
|
||||
ffKillCountBlufor++;
|
||||
}
|
||||
if (killEntry.fraction === 'OPFOR') {
|
||||
ffKillCountOpfor++;
|
||||
}
|
||||
if (WarDetailComponent.isTwoMinutesAhead(killEntryDate, this.tmpFrienlyFireData)) {
|
||||
this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
|
||||
this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
|
||||
}
|
||||
}
|
||||
if (index === this.logData.kill.length - 1) {
|
||||
this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
|
||||
this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
|
||||
this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
|
||||
this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
|
||||
}
|
||||
}
|
||||
|
||||
this.addFinalTimeData(this.tmpKillData);
|
||||
this.addFinalTimeData(this.tmpFrienlyFireData)
|
||||
this.initialized.kill = true;
|
||||
}
|
||||
|
||||
initRevive() {
|
||||
if (this.initialized.revive) {
|
||||
return;
|
||||
}
|
||||
let reviveCountBlufor = 0, reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0;
|
||||
for (const {reviveEntry, index} of this.logData.revive.map((reviveEntry, index) => ({reviveEntry, index}))) {
|
||||
const reviveEntryDate = new Date(reviveEntry.time);
|
||||
if (reviveEntry.stabilized === false) {
|
||||
if (reviveEntry.fraction === 'BLUFOR') {
|
||||
reviveCountBlufor++;
|
||||
} else {
|
||||
reviveCountOpfor++;
|
||||
}
|
||||
if (WarDetailComponent.isTwoMinutesAhead(reviveEntryDate, this.tmpReviveData)) {
|
||||
this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
|
||||
this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
|
||||
}
|
||||
} else {
|
||||
if (reviveEntry.fraction === 'BLUFOR') {
|
||||
stabilizeCountBlufor++;
|
||||
} else {
|
||||
stabilizeCountOpfor++;
|
||||
}
|
||||
if (WarDetailComponent.isTwoMinutesAhead(reviveEntryDate, this.tmpStabilizeData)) {
|
||||
this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
|
||||
this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
|
||||
}
|
||||
}
|
||||
if (index === this.logData.revive.length - 1) {
|
||||
this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
|
||||
this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
|
||||
this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
|
||||
this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
|
||||
}
|
||||
}
|
||||
this.addFinalTimeData(this.tmpReviveData);
|
||||
this.addFinalTimeData(this.tmpStabilizeData);
|
||||
this.initialized.revive = true;
|
||||
}
|
||||
|
||||
initTransportData() {
|
||||
if (this.initialized.transport) {
|
||||
return;
|
||||
}
|
||||
let transportCountBlufor = 0, transportCountOpfor = 0;
|
||||
for (const {transportEntry, index} of this.logData.transport.map((transportEntry, index) => ({
|
||||
transportEntry,
|
||||
index
|
||||
}))) {
|
||||
const transportEntryDate = new Date(transportEntry.time);
|
||||
if (transportEntry.fraction === 'BLUFOR') {
|
||||
transportCountBlufor++;
|
||||
} else {
|
||||
transportCountOpfor++;
|
||||
}
|
||||
if (WarDetailComponent.isTwoMinutesAhead(transportEntryDate, this.tmpTransportData) || index === this.logData.transport.length - 1) {
|
||||
this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountBlufor));
|
||||
this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountOpfor));
|
||||
}
|
||||
}
|
||||
this.addFinalTimeData(this.tmpTransportData);
|
||||
this.initialized.transport = true;
|
||||
|
||||
}
|
||||
|
||||
initFlagHoldData() {
|
||||
if (this.initialized.flag) {
|
||||
return;
|
||||
}
|
||||
let flagStatusBlufor = true;
|
||||
let flagStatusOpfor = true;
|
||||
this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusBlufor));
|
||||
this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusOpfor));
|
||||
|
||||
this.logData.flag.forEach(flagEntry => {
|
||||
if (flagEntry.flagFraction === 'BLUFOR') {
|
||||
flagStatusBlufor = !flagEntry.capture;
|
||||
} else {
|
||||
flagStatusOpfor = !flagEntry.capture;
|
||||
}
|
||||
this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push(
|
||||
ChartUtils.getSeriesEntry(new Date(flagEntry.time), flagEntry.flagFraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor)
|
||||
)
|
||||
});
|
||||
|
||||
this.addFinalTimeData(this.tmpFlagCaptureData);
|
||||
this.initialized.flag = true;
|
||||
}
|
||||
|
||||
private static isTwoMinutesAhead(entryDate: Date, tmpData: any): boolean {
|
||||
return entryDate.getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + (1.5 * 60000)
|
||||
}
|
||||
|
||||
initializeTempCollections() {
|
||||
this.tmpPointData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
||||
this.tmpBudgetData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
||||
this.tmpKillData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
||||
this.tmpFrienlyFireData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
||||
this.tmpTransportData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
||||
this.tmpReviveData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
||||
this.tmpStabilizeData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
||||
this.tmpFlagCaptureData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
||||
|
||||
[this.tmpKillData, this.tmpFrienlyFireData, this.tmpReviveData, this.tmpStabilizeData, this.tmpTransportData].forEach(tmp => {
|
||||
[0, 1].forEach(index => {
|
||||
tmp[index].series.push(ChartUtils.getSeriesEntry(this.startDateObj, 0));
|
||||
})
|
||||
});
|
||||
this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetBlufor));
|
||||
this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetOpfor));
|
||||
}
|
||||
|
||||
addFinalTimeData(tmpCollection) {
|
||||
const endDate = new Date(this.war.endDate);
|
||||
if (tmpCollection === this.tmpBudgetData) {
|
||||
this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetBlufor));
|
||||
this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetOpfor));
|
||||
} else {
|
||||
for (let j in [0, 1]) {
|
||||
if (tmpCollection[j].series[tmpCollection[j].series.length - 1].name < endDate) {
|
||||
tmpCollection[j].series.push(ChartUtils.getSeriesEntry(endDate, tmpCollection[j].series[tmpCollection[j].series.length - 1].value));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,6 @@ export class WarListComponent implements OnInit {
|
|||
if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
|
||||
this.campaignService.deleteCampaign(campaign._id)
|
||||
.subscribe((res) => {
|
||||
console.log(res)
|
||||
if (this.selectedWarId === campaign._id) {
|
||||
this.selectOverview('all');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,3 +47,11 @@ form {
|
|||
#right {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#right-top {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#right-bottom {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue