Merge branch 'release/v1.6.4' of hardi/opt-cc into master
HardiReady
commit
407ed7b526
|
|
@ -44,7 +44,8 @@ Thumbs.db
|
||||||
.directory
|
.directory
|
||||||
|
|
||||||
# Internal Data
|
# Internal Data
|
||||||
/public
|
public/
|
||||||
|
mongodb-data/
|
||||||
resource/
|
resource/
|
||||||
backup/
|
backup/
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "opt-cc",
|
"name": "opt-cc",
|
||||||
"version": "1.6.3",
|
"version": "1.6.4",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"author": "Florian Hartwich <hardi@noarch.de>",
|
"author": "Florian Hartwich <hardi@noarch.de>",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|
|
||||||
|
|
@ -96,6 +96,6 @@
|
||||||
<router-outlet name="right"></router-outlet>
|
<router-outlet name="right"></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<router-outlet name="bottom"></router-outlet>
|
<router-outlet name="footer"></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
|
.player-campaign-detail-container {
|
||||||
|
padding: 0 1% 0 1%;
|
||||||
|
border-top: thin solid lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
<div class="overview fade-in" style="padding: 70px 1% 0 1%;" xmlns="http://www.w3.org/1999/html">
|
<div class="fade-in player-campaign-detail-container" xmlns="http://www.w3.org/1999/html">
|
||||||
<h2 class="pull-left">Spielerstatistik - {{campaignPlayer.name}}</h2>
|
<h2 class="pull-left">Kampagnendetails - {{campaignPlayer.name}}</h2>
|
||||||
<h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
|
<h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
|
||||||
|
|
||||||
<span class="btn btn-default btn-back" (click)="navigateBack()">< Zurück</span>
|
<span class="btn btn-default btn-back" (click)="navigateBack()">< Zurück</span>
|
||||||
|
|
||||||
|
|
||||||
<div class="sum-container">
|
<div class="sum-container">
|
||||||
<div class="gauge-container pull-left">
|
<div class="gauge-container pull-left">
|
||||||
<ngx-charts-linear-gauge
|
<ngx-charts-linear-gauge
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,25 @@
|
||||||
import {Component} from "@angular/core";
|
import {Component, EventEmitter} from "@angular/core";
|
||||||
import {ActivatedRoute} from "@angular/router";
|
|
||||||
import {CampaignPlayer} from "../../models/model-interfaces";
|
import {CampaignPlayer} from "../../models/model-interfaces";
|
||||||
import {PlayerService} from "../../services/logs/player.service";
|
import {PlayerService} from "../../services/logs/player.service";
|
||||||
import {ChartUtils} from "../../utils/chart-utils";
|
import {ChartUtils} from "../../utils/chart-utils";
|
||||||
import {Location} from '@angular/common';
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'campaign-player-detail',
|
selector: 'campaign-player-detail',
|
||||||
templateUrl: './campaign-player-detail.component.html',
|
templateUrl: './campaign-player-detail.component.html',
|
||||||
|
inputs: ['campaignId', 'playerName'],
|
||||||
|
outputs: ['switchTab'],
|
||||||
styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css',
|
styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css',
|
||||||
'../../style/hide-scrollbar.css', '../../style/overview.css']
|
'../../style/hide-scrollbar.css', '../../style/overview.css']
|
||||||
})
|
})
|
||||||
export class CampaignPlayerDetailComponent {
|
export class CampaignPlayerDetailComponent {
|
||||||
|
|
||||||
|
campaignId: string;
|
||||||
|
|
||||||
|
playerName: string;
|
||||||
|
|
||||||
|
switchTab = new EventEmitter();
|
||||||
|
|
||||||
campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
|
campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
|
||||||
|
|
||||||
sumData: any[] = [];
|
sumData: any[] = [];
|
||||||
|
|
@ -73,15 +79,11 @@ export class CampaignPlayerDetailComponent {
|
||||||
maxRespawnDeathRatio = 1;
|
maxRespawnDeathRatio = 1;
|
||||||
|
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute,
|
constructor(private playerService: PlayerService) {
|
||||||
private location: Location,
|
|
||||||
private playerService: PlayerService) {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.route.params
|
this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
|
||||||
.map(params => [params['id'], params['playerName']])
|
|
||||||
.flatMap(id => this.playerService.getCampaignPlayer(id[0], encodeURIComponent(id[1])))
|
|
||||||
.subscribe(campaignPlayer => {
|
.subscribe(campaignPlayer => {
|
||||||
this.campaignPlayer = campaignPlayer;
|
this.campaignPlayer = campaignPlayer;
|
||||||
this.killData = this.assignData(this.yAxisKill, "kill");
|
this.killData = this.assignData(this.yAxisKill, "kill");
|
||||||
|
|
@ -91,14 +93,10 @@ export class CampaignPlayerDetailComponent {
|
||||||
this.reviveData = this.assignData(this.yAxisRevive, "revive");
|
this.reviveData = this.assignData(this.yAxisRevive, "revive");
|
||||||
this.captureData = this.assignData(this.yAxisCapture, "flagTouch");
|
this.captureData = this.assignData(this.yAxisCapture, "flagTouch");
|
||||||
|
|
||||||
if (this.totalDeath === 0) {
|
this.kdRatio = parseFloat((this.totalKills / (this.totalDeath === 0 ? 1 : this.totalDeath)).toFixed(2));
|
||||||
// avoid infinite or NaN with no death
|
|
||||||
this.totalDeath = 1;
|
|
||||||
}
|
|
||||||
this.kdRatio = parseFloat((this.totalKills / this.totalDeath).toFixed(2));
|
|
||||||
if (this.kdRatio > 1) this.maxKd = this.kdRatio * 1.7;
|
if (this.kdRatio > 1) this.maxKd = this.kdRatio * 1.7;
|
||||||
|
|
||||||
this.respawnDeathRatio = parseFloat((this.totalRespawn / this.totalDeath).toFixed(2));
|
this.respawnDeathRatio = parseFloat((this.totalRespawn / (this.totalDeath === 0 ? 1 : this.totalDeath)).toFixed(2));
|
||||||
|
|
||||||
this.sumData = [
|
this.sumData = [
|
||||||
{
|
{
|
||||||
|
|
@ -177,7 +175,7 @@ export class CampaignPlayerDetailComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
navigateBack() {
|
navigateBack() {
|
||||||
this.location.back();
|
this.switchTab.emit(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
|
||||||
import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
|
import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
|
||||||
import {WarService} from "../services/logs/war.service";
|
import {WarService} from "../services/logs/war.service";
|
||||||
import {NgxChartsModule} from "@swimlane/ngx-charts";
|
import {NgxChartsModule} from "@swimlane/ngx-charts";
|
||||||
import {AccordionModule, BsDropdownModule, ButtonsModule, TabsModule} from "ngx-bootstrap";
|
import {AccordionModule, ButtonsModule} from "ngx-bootstrap";
|
||||||
import {CampaignService} from "../services/logs/campaign.service";
|
import {CampaignService} from "../services/logs/campaign.service";
|
||||||
import {NgxDatatableModule} from "@swimlane/ngx-datatable";
|
import {NgxDatatableModule} from "@swimlane/ngx-datatable";
|
||||||
import {PlayerService} from "../services/logs/player.service";
|
import {PlayerService} from "../services/logs/player.service";
|
||||||
|
|
@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: statsRoutingComponents,
|
declarations: statsRoutingComponents,
|
||||||
imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
|
imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
|
||||||
AccordionModule.forRoot(), BsDropdownModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
|
AccordionModule.forRoot(), ButtonsModule.forRoot(), NgxDatatableModule],
|
||||||
providers: [WarService, CampaignService, PlayerService, LogsService]
|
providers: [WarService, CampaignService, PlayerService, LogsService]
|
||||||
})
|
})
|
||||||
export class StatsModule {
|
export class StatsModule {
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,15 @@
|
||||||
import {RouterModule, Routes} from "@angular/router";
|
import {RouterModule, Routes} from "@angular/router";
|
||||||
import {StatisticComponent} from "./stats.component";
|
import {StatisticComponent} from "./stats.component";
|
||||||
import {WarDetailComponent} from "./war-detail/war-detail.component";
|
|
||||||
import {WarSubmitComponent} from "./war-submit/war-submit.component";
|
|
||||||
import {WarListComponent} from "./war-list/war-list.component";
|
import {WarListComponent} from "./war-list/war-list.component";
|
||||||
import {StatisticOverviewComponent} from "./overview/stats-overview.component";
|
import {StatisticOverviewComponent} from "./overview/stats-overview.component";
|
||||||
import {WarItemComponent} from "./war-list/war-item.component";
|
import {WarItemComponent} from "./war-list/war-item.component";
|
||||||
import {ModuleWithProviders} from "@angular/core";
|
import {ModuleWithProviders} from "@angular/core";
|
||||||
import {CampaignSubmitComponent} from "./campaign-submit/campaign-submit.component";
|
import {CampaignSubmitComponent} from "./campaign-submit/campaign-submit.component";
|
||||||
import {CampaignPlayerDetailComponent} from "./campaign-player-detail/campaign-player-detail.component";
|
import {CampaignPlayerDetailComponent} from "./campaign-player-detail/campaign-player-detail.component";
|
||||||
|
import {WarDetailComponent} from "./war-detail/war-detail.component";
|
||||||
|
import {ScoreboardComponent} from "./war-detail/scoreboard/scoreboard.component";
|
||||||
|
import {WarSubmitComponent} from "./war-submit/war-submit.component";
|
||||||
|
import {FractionStatsComponent} from "./war-detail/fraction-stats/fraction-stats.component";
|
||||||
|
|
||||||
|
|
||||||
export const statsRoutes: Routes = [{
|
export const statsRoutes: Routes = [{
|
||||||
|
|
@ -48,5 +50,6 @@ export const statsRoutes: Routes = [{
|
||||||
export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
|
export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
|
||||||
|
|
||||||
export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
|
export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
|
||||||
WarListComponent, WarSubmitComponent, WarDetailComponent, CampaignPlayerDetailComponent, WarItemComponent];
|
WarListComponent, WarSubmitComponent, WarDetailComponent, ScoreboardComponent, FractionStatsComponent,
|
||||||
|
CampaignPlayerDetailComponent, WarItemComponent];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
.btn-dark {
|
||||||
|
background: #4b4b4b;
|
||||||
|
color: #f5f5f5;
|
||||||
|
border-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark:hover {
|
||||||
|
background: #afafaf;
|
||||||
|
color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark.active {
|
||||||
|
background: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
width: 95%;
|
||||||
|
margin: 2%;
|
||||||
|
min-width: 900px;
|
||||||
|
height: 600px;
|
||||||
|
padding: 15px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-select-group {
|
||||||
|
width: 980px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.dropdown-menu > li > a {*/
|
||||||
|
/*cursor: pointer;*/
|
||||||
|
/*}*/
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!--<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>-->
|
||||||
|
|
||||||
|
<div class="fade-in" xmlns="http://www.w3.org/1999/html">
|
||||||
|
<div class="chart-select-group">
|
||||||
|
<div class="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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,339 @@
|
||||||
|
import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
|
||||||
|
import * as d3 from "d3";
|
||||||
|
import {ChartUtils} from "../../../utils/chart-utils";
|
||||||
|
import {Fraction} from "../../../utils/fraction.enum";
|
||||||
|
import {War} from "../../../models/model-interfaces";
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'war-detail-fraction',
|
||||||
|
templateUrl: './fraction-stats.component.html',
|
||||||
|
inputs: ['war', 'logData'],
|
||||||
|
styleUrls: ['./fraction-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
|
||||||
|
})
|
||||||
|
export class FractionStatsComponent {
|
||||||
|
|
||||||
|
readonly fraction = Fraction;
|
||||||
|
|
||||||
|
@ViewChild('overview') private overviewContainer: ElementRef;
|
||||||
|
|
||||||
|
war: War;
|
||||||
|
|
||||||
|
logData: any;
|
||||||
|
|
||||||
|
startDateObj: Date;
|
||||||
|
|
||||||
|
initialized: any;
|
||||||
|
|
||||||
|
public chartSelectModel: string;
|
||||||
|
|
||||||
|
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() {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
if (changes.war || changes.logData) {
|
||||||
|
this.initialized = {
|
||||||
|
budget: false,
|
||||||
|
kill: false,
|
||||||
|
revive: false,
|
||||||
|
transport: false,
|
||||||
|
flag: false
|
||||||
|
};
|
||||||
|
Object.assign(this, [this.lineChartData, this.areaChartData]);
|
||||||
|
this.chartSelectModel = this.labelPoints;
|
||||||
|
|
||||||
|
this.startDateObj = new Date(this.war.date);
|
||||||
|
this.startDateObj.setHours(0);
|
||||||
|
this.startDateObj.setMinutes(1);
|
||||||
|
this.loadFractionData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadFractionData() {
|
||||||
|
this.initializeTempCollections();
|
||||||
|
this.initPointData();
|
||||||
|
this.showLineChart = true;
|
||||||
|
this.lineChartLabel = this.labelPoints;
|
||||||
|
this.lineChartData = this.tmpPointData;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 (this.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 (this.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 (this.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 (this.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 (this.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 (this.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected 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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
.player-name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ########### DATATABLE ########### */
|
||||||
|
|
||||||
|
:host /deep/ .datatable-header {
|
||||||
|
background: #222222;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host /deep/ .ngx-datatable .datatable-header {
|
||||||
|
/*vertical center alignment*/
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > div {
|
||||||
|
/*vertical alignment*/
|
||||||
|
position: relative;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host /deep/ .datatable-body-row {
|
||||||
|
color: #222222;
|
||||||
|
border-bottom: 1px solid grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host /deep/ .datatable-body-row:hover {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.in-table-btn {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<div class="fade-in" xmlns="http://www.w3.org/1999/html">
|
||||||
|
<ngx-datatable
|
||||||
|
style="width:1020px; margin:auto"
|
||||||
|
[rows]="rows"
|
||||||
|
[sorts]="[{prop: 'kill', dir: 'desc'}]"
|
||||||
|
[reorderable]="reorderable"
|
||||||
|
[messages]="{emptyMessage: 'Loading...'}"
|
||||||
|
[headerHeight]="cellHeight"
|
||||||
|
[rowHeight]="cellHeight"
|
||||||
|
[cssClasses]='customClasses'
|
||||||
|
[selectionType]="'single'">
|
||||||
|
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
|
||||||
|
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
|
||||||
|
<span class="player-name"
|
||||||
|
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
|
||||||
|
{{value}}
|
||||||
|
</span>
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
<ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
|
||||||
|
<ng-template ngx-datatable-cell-template let-value="value">
|
||||||
|
{{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
<ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
|
||||||
|
<ngx-datatable-column [width]="104" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
|
||||||
|
<ngx-datatable-column [width]="80" name="Revive" prop="revive"></ngx-datatable-column>
|
||||||
|
<ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
|
||||||
|
<ngx-datatable-column [width]="70" name="Tod" prop="death"></ngx-datatable-column>
|
||||||
|
<ngx-datatable-column [width]="90" name="Respawn" prop="respawn"></ngx-datatable-column>
|
||||||
|
<ngx-datatable-column [width]="80" name="" prop="name">
|
||||||
|
<ng-template ngx-datatable-cell-template let-value="value">
|
||||||
|
<span class="btn btn-sm btn-default in-table-btn disabled">Detail</span>
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
<ngx-datatable-column [width]="80" name="" prop="name">
|
||||||
|
<ng-template ngx-datatable-cell-template let-value="value">
|
||||||
|
<span class="btn btn-sm btn-default in-table-btn" (click)="selectPlayerDetail(1, value)">Gesamt</span>
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
</ngx-datatable>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
import {Component, ElementRef, EventEmitter, SimpleChanges, ViewChild} from "@angular/core";
|
||||||
|
import {War} from "../../../models/model-interfaces";
|
||||||
|
import {Fraction} from "../../../utils/fraction.enum";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'scoreboard',
|
||||||
|
templateUrl: './scoreboard.component.html',
|
||||||
|
inputs: ['war', 'fractionFilterSelected'],
|
||||||
|
outputs: ['playerTabSwitch'],
|
||||||
|
styleUrls: ['./scoreboard.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
|
||||||
|
})
|
||||||
|
export class ScoreboardComponent {
|
||||||
|
|
||||||
|
readonly fraction = Fraction;
|
||||||
|
|
||||||
|
playerTabSwitch = new EventEmitter();
|
||||||
|
|
||||||
|
war: War;
|
||||||
|
|
||||||
|
fractionFilterSelected: string;
|
||||||
|
|
||||||
|
cellHeight = 40;
|
||||||
|
|
||||||
|
rows = [];
|
||||||
|
|
||||||
|
reorderable: boolean = false;
|
||||||
|
|
||||||
|
customClasses = {
|
||||||
|
sortAscending: 'glyphicon glyphicon-triangle-top',
|
||||||
|
sortDescending: 'glyphicon glyphicon-triangle-bottom',
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
selectPlayerDetail(view: number, playerName: string) {
|
||||||
|
this.playerTabSwitch.emit({view: view, player: playerName})
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
if (changes.war) {
|
||||||
|
this.rows = changes.war.currentValue.players;
|
||||||
|
}
|
||||||
|
if (changes.fractionFilterSelected) {
|
||||||
|
this.filterPlayersByFraction(this.fractionFilterSelected)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
filterPlayersByFraction(fraction?: string) {
|
||||||
|
if (fraction) {
|
||||||
|
this.rows = this.war.players.filter((player) => {
|
||||||
|
return player.fraction === fraction;
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.rows = this.war.players;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.vertical-spacer {
|
.war-header-container {
|
||||||
height: 205px;
|
width: 920px;
|
||||||
float: left;
|
min-height: 205px;
|
||||||
width: 4%;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.head-field {
|
.head-field {
|
||||||
|
|
@ -10,120 +10,32 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1500px) {
|
.war-header {
|
||||||
.vertical-spacer {
|
border-bottom: thin solid lightgrey;
|
||||||
width: 15%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 2000px) {
|
.nav-tabs > li.active > a {
|
||||||
.vertical-spacer {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview {
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
border-left: thin solid lightgrey;
|
|
||||||
bottom: 20px;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-name {
|
|
||||||
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;
|
background: #222222;
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ########### DATATABLE ########### */
|
.nav-tabs {
|
||||||
|
border-bottom: 0;
|
||||||
:host /deep/ .datatable-header {
|
|
||||||
background: #222222;
|
|
||||||
font-weight: 700;
|
|
||||||
border-radius: 10px 10px 0 0;
|
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label {
|
.nav-tabs > li > a {
|
||||||
padding-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host /deep/ .ngx-datatable .datatable-header {
|
|
||||||
/*vertical center alignment*/
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > div {
|
|
||||||
/*vertical alignment*/
|
|
||||||
position: relative;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host /deep/ .datatable-body-row {
|
|
||||||
color: #222222;
|
|
||||||
border-bottom: 1px solid grey;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host /deep/ .datatable-body-row:hover {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ########### CHART-TAB ######## */
|
|
||||||
|
|
||||||
.btn-dark {
|
|
||||||
background: #4b4b4b;
|
background: #4b4b4b;
|
||||||
color: #f5f5f5;
|
|
||||||
border-color: #000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-dark:hover {
|
.nav-tabs > li:not(.active) > a:hover {
|
||||||
background: #afafaf;
|
background: #afafaf;
|
||||||
color: #f5f5f5;
|
color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-dark.active {
|
.nav-link {
|
||||||
background: #222222;
|
cursor: pointer !important;
|
||||||
|
color: #FFF !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-container {
|
.nav-tabs > li.deactivated > a.nav-link {
|
||||||
width: 95%;
|
cursor: not-allowed !important;
|
||||||
margin: 2%;
|
|
||||||
min-width: 900px;
|
|
||||||
height: 600px;
|
|
||||||
padding: 15px;
|
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-select-group {
|
|
||||||
width: 50%;
|
|
||||||
margin: auto;
|
|
||||||
position: inherit;
|
|
||||||
display: block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.dropdown-menu > li > a {*/
|
|
||||||
/*cursor: pointer;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
|
||||||
|
|
@ -1,175 +1,85 @@
|
||||||
<div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
|
<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
|
||||||
<div class=vertical-spacer></div>
|
<div class="war-header-container">
|
||||||
<div style="overflow:hidden">
|
<h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
|
||||||
<div style="width: 920px;min-height: 205px;">
|
<div class="pull-left head-field" style="width: 250px">
|
||||||
<h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
|
<h4>Endpunktestand:</h4>
|
||||||
<div class="pull-left head-field" style="width: 250px">
|
<span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
|
||||||
<h4>Endpunktestand:</h4>
|
<span style="font-size: x-large">|</span>
|
||||||
<span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
|
<span [style.color]="fraction.COLOR_OPFOR" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
|
||||||
<span style="font-size: x-large">|</span>
|
</div>
|
||||||
<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;">
|
<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: [fraction.COLOR_OPFOR, fraction.COLOR_BLUFOR]}"
|
[scheme]="colorScheme"
|
||||||
[results]="playerChart"
|
[results]="playerChart"
|
||||||
[legend]="false"
|
[legend]="false"
|
||||||
[explodeSlices]="false"
|
[explodeSlices]="false"
|
||||||
[labels]="false"
|
[labels]="false"
|
||||||
[doughnut]="false"
|
[doughnut]="false"
|
||||||
[gradient]="false">
|
[gradient]="false">
|
||||||
</ngx-charts-pie-chart>
|
</ngx-charts-pie-chart>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pull-left " style="padding-left: 150px; padding-top:15px">
|
<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>
|
<a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
|
||||||
<form *ngIf="staticTabs.tabs[0].active" class="form-group">
|
anzeigen</a>
|
||||||
<label class="radio-inline">
|
<form class="form-group" *ngIf="tab === 0">
|
||||||
<input type="radio" name="fractSelect"
|
<label class="radio-inline">
|
||||||
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
|
<input type="radio" name="fractSelect"
|
||||||
[(ngModel)]="fractionRadioSelect"
|
[checked]="(fractionFilterSelected == undefined) ? 'true' : 'false'"
|
||||||
(change)="filterPlayersByFraction()">Alle
|
[(ngModel)]="fractionFilterSelected"
|
||||||
</label>
|
(change)="filterPlayersByFraction()">Alle
|
||||||
<label class="radio-inline">
|
</label>
|
||||||
<input type="radio" name="fractSelect" value="BLUFOR"
|
<label class="radio-inline">
|
||||||
[(ngModel)]="fractionRadioSelect"
|
<input type="radio" name="fractSelect" value="BLUFOR"
|
||||||
#fractRadioBufor
|
[(ngModel)]="fractionFilterSelected"
|
||||||
(change)="filterPlayersByFraction(fractRadioBufor.value)">{{fraction.BLUFOR}}
|
#fractRadioBufor
|
||||||
</label>
|
(change)="filterPlayersByFraction(fractRadioBufor.value)">{{fraction.BLUFOR}}
|
||||||
<label class="radio-inline">
|
</label>
|
||||||
<input type="radio" name="fractSelect" value="OPFOR"
|
<label class="radio-inline">
|
||||||
[(ngModel)]="fractionRadioSelect"
|
<input type="radio" name="fractSelect" value="OPFOR"
|
||||||
#fractRadioOpfor
|
[(ngModel)]="fractionFilterSelected"
|
||||||
(change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
|
#fractRadioOpfor
|
||||||
</label>
|
(change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
|
||||||
<br>
|
</label>
|
||||||
</form>
|
<br>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<tabset #staticTabs>
|
<ul class="nav nav-tabs" style="width:980px; margin:auto">
|
||||||
<tab>
|
<li class="nav-item" [ngClass]="{active :tab === 0}" (click)="switchTab(0)">
|
||||||
<ng-template tabHeading>
|
<a class="nav-link"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
|
||||||
<img src="../../../assets/scoreboard-btn.png"> Scoreboard
|
</li>
|
||||||
</ng-template>
|
<li class="nav-item" [ngClass]="{active :tab === 1}" (click)="switchTab(1)">
|
||||||
<div class=vertical-spacer></div>
|
<a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a>
|
||||||
<ngx-datatable
|
</li>
|
||||||
[rows]="rows"
|
<li class="nav-item" [ngClass]="{active :tab === 2, deactivated :tab !== 2} ">
|
||||||
[sorts]="[{prop: 'kill', dir: 'desc'}]"
|
<a class="nav-link"><img src="../../../assets/player-stats-btn.png"> Player</a>
|
||||||
[reorderable]="reorderable"
|
</li>
|
||||||
[messages]="{emptyMessage: 'Loading...'}"
|
</ul>
|
||||||
[headerHeight]="cellHeight"
|
|
||||||
[rowHeight]="cellHeight"
|
|
||||||
[cssClasses]='customClasses'
|
|
||||||
[selectionType]="'single'"
|
|
||||||
(select)="selectPlayerDetail($event)">
|
|
||||||
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
|
|
||||||
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
|
|
||||||
<span class="player-name"
|
|
||||||
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
|
|
||||||
{{value}}
|
|
||||||
</span>
|
|
||||||
</ng-template>
|
|
||||||
</ngx-datatable-column>
|
|
||||||
<ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
|
|
||||||
<ng-template ngx-datatable-cell-template let-value="value">
|
|
||||||
{{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
|
|
||||||
</ng-template>
|
|
||||||
</ngx-datatable-column>
|
|
||||||
<ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
|
|
||||||
<ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
|
|
||||||
<ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
|
|
||||||
<ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
|
|
||||||
<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()">
|
<!--Sub-Components (=TABS)-->
|
||||||
<ng-template tabHeading>
|
<div *ngIf="war">
|
||||||
<img src="../../../assets/fraction-btn.png"> Fraktionen
|
<scoreboard
|
||||||
</ng-template>
|
*ngIf="tab === 0"
|
||||||
|
[war]="war"
|
||||||
<!--<div class="btn-group" style="position: absolute; margin-left: 5%;" dropdown>-->
|
[fractionFilterSelected]="fractionFilterSelected"
|
||||||
<!--<button dropdownToggle type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split">-->
|
(playerTabSwitch)="switchToPlayerTab($event)">
|
||||||
<!--{{dataMode}} <span class="caret"></span>-->
|
</scoreboard>
|
||||||
<!--</button>-->
|
<war-detail-fraction
|
||||||
<!--<ul *dropdownMenu class="dropdown-menu" role="menu">-->
|
*ngIf="tab === 1 && logData"
|
||||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(0, 'Summe')">Summe</a></li>-->
|
[war]="war"
|
||||||
<!--<li class="divider dropdown-divider"></li>-->
|
[logData]="logData">
|
||||||
<!--<li class="disabled" role="menuitem">-->
|
</war-detail-fraction>
|
||||||
<!--<a class="dropdown-item" style="cursor: default!important;">Interval:</a>-->
|
<campaign-player-detail
|
||||||
<!--</li>-->
|
*ngIf="tab === 2 && singlePlayerView === 1"
|
||||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(1, '1 Minute')">1 Minute</a></li>-->
|
[campaignId]="war.campaign"
|
||||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(5, '5 Minuten')">5 Minuten</a></li>-->
|
[playerName]="playerDetailName"
|
||||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(10, '10 Minuten')">10 Minuten</a>-->
|
(switchTab)="switchTab($event)">
|
||||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(20, '20 Minuten')">20 Minuten</a>-->
|
</campaign-player-detail>
|
||||||
<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(40, '40 Minuten')">40 Minuten</a>-->
|
</div>
|
||||||
<!--</li>-->
|
|
||||||
<!--</ul>-->
|
|
||||||
<!--</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-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>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,10 @@
|
||||||
///<reference path="../../utils/chart-utils.ts"/>
|
import {Component} from "@angular/core";
|
||||||
import {Component, ElementRef, ViewChild} from "@angular/core";
|
import {ActivatedRoute} from "@angular/router";
|
||||||
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 {TabsetComponent} from "ngx-bootstrap";
|
|
||||||
import * as d3 from "d3";
|
|
||||||
import {ChartUtils} from "../../utils/chart-utils";
|
import {ChartUtils} from "../../utils/chart-utils";
|
||||||
import {Fraction} from "../../utils/fraction.enum";
|
import {Fraction} from "../../utils/fraction.enum";
|
||||||
|
import {LogsService} from "../../services/logs/logs.service";
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
|
@ -19,76 +16,27 @@ export class WarDetailComponent {
|
||||||
|
|
||||||
readonly fraction = Fraction;
|
readonly fraction = Fraction;
|
||||||
|
|
||||||
@ViewChild('overview') private overviewContainer: ElementRef;
|
war: War;
|
||||||
|
|
||||||
@ViewChild('staticTabs') staticTabs: TabsetComponent;
|
logData;
|
||||||
|
|
||||||
war: War = {players: []};
|
singlePlayerView: number;
|
||||||
|
|
||||||
logData: any;
|
playerDetailName: string;
|
||||||
|
|
||||||
initialized: any;
|
tab: number;
|
||||||
|
|
||||||
startDateObj: Date;
|
fractionStatsInitialized: boolean;
|
||||||
|
|
||||||
public chartSelectModel: string;
|
fractionFilterSelected: string;
|
||||||
|
|
||||||
fractionRadioSelect: string;
|
|
||||||
|
|
||||||
playerChart: any[] = [];
|
playerChart: any[] = [];
|
||||||
|
|
||||||
cellHeight = 40;
|
|
||||||
|
|
||||||
rows = [];
|
|
||||||
|
|
||||||
reorderable: boolean = false;
|
|
||||||
|
|
||||||
customClasses = {
|
|
||||||
sortAscending: 'glyphicon glyphicon-triangle-top',
|
|
||||||
sortDescending: 'glyphicon glyphicon-triangle-bottom',
|
|
||||||
};
|
|
||||||
|
|
||||||
lineChartData: any[] = [];
|
|
||||||
areaChartData: any[] = [];
|
|
||||||
|
|
||||||
tmpPointData;
|
|
||||||
tmpBudgetData;
|
|
||||||
tmpKillData;
|
|
||||||
tmpFrienlyFireData;
|
|
||||||
tmpTransportData;
|
|
||||||
tmpReviveData;
|
|
||||||
tmpStabilizeData;
|
|
||||||
tmpFlagCaptureData;
|
|
||||||
|
|
||||||
colorScheme = {
|
colorScheme = {
|
||||||
domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
|
domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR]
|
||||||
};
|
};
|
||||||
|
|
||||||
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,
|
constructor(private route: ActivatedRoute,
|
||||||
private router: Router,
|
|
||||||
private warService: WarService,
|
private warService: WarService,
|
||||||
private logsService: LogsService) {
|
private logsService: LogsService) {
|
||||||
}
|
}
|
||||||
|
|
@ -100,306 +48,39 @@ export class WarDetailComponent {
|
||||||
.flatMap(id => this.warService.getWar(id))
|
.flatMap(id => this.warService.getWar(id))
|
||||||
.subscribe(war => {
|
.subscribe(war => {
|
||||||
this.war = war;
|
this.war = war;
|
||||||
this.rows = war.players;
|
|
||||||
|
this.switchTab(0);
|
||||||
|
this.fractionStatsInitialized = false;
|
||||||
|
this.fractionFilterSelected = undefined;
|
||||||
|
|
||||||
this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
|
this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
|
||||||
|
Object.assign(this, [this.playerChart]);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
this.initialized = {
|
switchTab(index: number) {
|
||||||
basic: false,
|
this.tab = index;
|
||||||
budget: false,
|
if (index === 1 && !this.fractionStatsInitialized) {
|
||||||
kill: false,
|
this.logsService.getFullLog(this.war._id).subscribe(log => {
|
||||||
revive: false,
|
this.logData = log;
|
||||||
transport: false,
|
this.fractionStatsInitialized = true;
|
||||||
flag: false
|
|
||||||
};
|
|
||||||
Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
|
|
||||||
this.chartSelectModel = this.labelPoints;
|
|
||||||
|
|
||||||
this.startDateObj = new Date(this.war.date);
|
|
||||||
this.startDateObj.setHours(0);
|
|
||||||
this.startDateObj.setMinutes(1);
|
|
||||||
|
|
||||||
this.fractionRadioSelect = undefined;
|
|
||||||
this.staticTabs.tabs[0].active = true;
|
|
||||||
this.scrollOverviewTop();
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
window.scroll({left: 0, top: 0, behavior: 'smooth'});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* called by EventEmitter,
|
||||||
|
* @param event with fields: 'view' (0 = war-detail, 1 = campaign-detail); 'player' = player name
|
||||||
|
*/
|
||||||
|
switchToPlayerTab(event) {
|
||||||
|
this.singlePlayerView = event.view;
|
||||||
|
this.playerDetailName = event.player;
|
||||||
|
this.switchTab(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
filterPlayersByFraction(fraction?: string) {
|
filterPlayersByFraction(fraction?: string) {
|
||||||
if (fraction) {
|
this.fractionFilterSelected = fraction;
|
||||||
this.rows = this.war.players.filter((player) => {
|
|
||||||
return player.fraction === fraction;
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.rows = this.war.players;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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?')) {
|
if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
|
||||||
this.campaignService.deleteCampaign(campaign._id)
|
this.campaignService.deleteCampaign(campaign._id)
|
||||||
.subscribe((res) => {
|
.subscribe((res) => {
|
||||||
console.log(res)
|
|
||||||
if (this.selectedWarId === campaign._id) {
|
if (this.selectedWarId === campaign._id) {
|
||||||
this.selectOverview('all');
|
this.selectOverview('all');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
[user]="user"
|
[user]="user"
|
||||||
(userDelete)="deleteUser(user)"
|
(userDelete)="deleteUser(user)"
|
||||||
(userSelected)="selectUser($event)"
|
(userSelected)="selectUser($event)"
|
||||||
(userAward)="awardUser($event, $event)"
|
(userAward)="awardUser($event)"
|
||||||
[selected]="user._id == selectedUserId">
|
[selected]="user._id == selectedUserId">
|
||||||
</pjm-user-item>
|
</pjm-user-item>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,29 +4,6 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||||
import {AppModule} from './app/app.module';
|
import {AppModule} from './app/app.module';
|
||||||
import {environment} from './environments/environment';
|
import {environment} from './environments/environment';
|
||||||
|
|
||||||
|
|
||||||
import 'rxjs/add/observable/of';
|
|
||||||
import 'rxjs/add/operator/retryWhen';
|
|
||||||
import 'rxjs/add/observable/fromEvent';
|
|
||||||
import 'rxjs/add/observable/from';
|
|
||||||
import 'rxjs/add/observable/range';
|
|
||||||
import 'rxjs/add/observable/timer';
|
|
||||||
import 'rxjs/add/observable/merge';
|
|
||||||
import 'rxjs/add/observable/interval';
|
|
||||||
|
|
||||||
import 'rxjs/add/operator/filter';
|
|
||||||
import 'rxjs/add/operator/debounceTime';
|
|
||||||
import 'rxjs/add/operator/distinctUntilChanged';
|
|
||||||
import 'rxjs/add/operator/mergeMap';
|
|
||||||
import 'rxjs/add/operator/switchMap';
|
|
||||||
import 'rxjs/add/operator/do';
|
|
||||||
import 'rxjs/add/operator/map';
|
|
||||||
import 'rxjs/add/operator/retry';
|
|
||||||
import 'rxjs/add/operator/bufferCount';
|
|
||||||
import 'rxjs/add/operator/bufferTime';
|
|
||||||
import 'rxjs/add/operator/take';
|
|
||||||
import 'rxjs/add/operator/delay';
|
|
||||||
|
|
||||||
if (environment.production) {
|
if (environment.production) {
|
||||||
enableProdMode();
|
enableProdMode();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue