Refactor war detail components; Fix styles; Add Scoreboard additional btns
parent
cb71464462
commit
a74f1bd673
|
|
@ -1,5 +1,5 @@
|
|||
<div class="overview fade-in" style="padding: 70px 1% 0 1%;" 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>
|
||||
|
||||
<span class="btn btn-default btn-back" (click)="navigateBack()">< Zurück</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
|
|||
import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
|
||||
import {WarService} from "../services/logs/war.service";
|
||||
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 {NgxDatatableModule} from "@swimlane/ngx-datatable";
|
||||
import {PlayerService} from "../services/logs/player.service";
|
||||
|
|
@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
|
|||
@NgModule({
|
||||
declarations: statsRoutingComponents,
|
||||
imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
|
||||
AccordionModule.forRoot(), BsDropdownModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
|
||||
AccordionModule.forRoot(), ButtonsModule.forRoot(), NgxDatatableModule],
|
||||
providers: [WarService, CampaignService, PlayerService, LogsService]
|
||||
})
|
||||
export class StatsModule {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import {RouterModule, Routes} from "@angular/router";
|
||||
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 {StatisticOverviewComponent} from "./overview/stats-overview.component";
|
||||
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";
|
||||
import {WarDetailFractionComponent} from "./war-detail-fraction/war-detail-fraction.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 = [{
|
||||
|
|
@ -38,7 +38,7 @@ export const statsRoutes: Routes = [{
|
|||
},
|
||||
{
|
||||
path: 'war/:id',
|
||||
component: WarDetailHeaderComponent,
|
||||
component: WarDetailComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
{
|
||||
|
|
@ -50,6 +50,6 @@ export const statsRoutes: Routes = [{
|
|||
export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
|
||||
|
||||
export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
|
||||
WarListComponent, WarSubmitComponent, WarDetailHeaderComponent, WarDetailComponent, WarDetailFractionComponent,
|
||||
WarListComponent, WarSubmitComponent, WarDetailComponent, ScoreboardComponent, FractionStatsComponent,
|
||||
CampaignPlayerDetailComponent, WarItemComponent];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > a {
|
||||
background: #222222;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
background: #4b4b4b;
|
||||
}
|
||||
|
||||
.nav-tabs > li:not(.active) > a:hover {
|
||||
background: #afafaf;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
cursor: pointer !important;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<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" [ngClass]="{active :tab === 0}" (click)="tab = 0">
|
||||
<a class="nav-link"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
|
||||
</li>
|
||||
<li class="nav-item" [ngClass]="{active :tab === 1}" (click)="tab = 1">
|
||||
<a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div *ngIf="war">
|
||||
<war-detail
|
||||
*ngIf="tab===0"
|
||||
[war]="war"
|
||||
[fractionFilterSelected]="fractionFilterSelected">
|
||||
</war-detail>
|
||||
<war-detail-fraction
|
||||
*ngIf="tab===1"
|
||||
[war]="war">
|
||||
</war-detail-fraction>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
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;
|
||||
|
||||
tab: number;
|
||||
|
||||
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.tab = 0;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,18 +1,17 @@
|
|||
import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
|
||||
import {LogsService} from "../../services/logs/logs.service";
|
||||
import * as d3 from "d3";
|
||||
import {ChartUtils} from "../../utils/chart-utils";
|
||||
import {Fraction} from "../../utils/fraction.enum";
|
||||
import {War} from "../../models/model-interfaces";
|
||||
import {ChartUtils} from "../../../utils/chart-utils";
|
||||
import {Fraction} from "../../../utils/fraction.enum";
|
||||
import {War} from "../../../models/model-interfaces";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'war-detail-fraction',
|
||||
templateUrl: './war-detail-fraction.component.html',
|
||||
inputs: ['war'],
|
||||
styleUrls: ['./war-detail-fraction.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
|
||||
templateUrl: './fraction-stats.component.html',
|
||||
inputs: ['war', 'logData'],
|
||||
styleUrls: ['./fraction-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
|
||||
})
|
||||
export class WarDetailFractionComponent {
|
||||
export class FractionStatsComponent {
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
|
|
@ -67,14 +66,14 @@ export class WarDetailFractionComponent {
|
|||
timeline = false;
|
||||
roundDomains = true;
|
||||
|
||||
constructor(private logsService: LogsService) {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes.war) {
|
||||
if (changes.war || changes.logData) {
|
||||
this.initialized = {
|
||||
budget: false,
|
||||
kill: false,
|
||||
|
|
@ -134,14 +133,10 @@ export class WarDetailFractionComponent {
|
|||
|
||||
loadFractionData() {
|
||||
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.initPointData();
|
||||
this.showLineChart = true;
|
||||
this.lineChartLabel = this.labelPoints;
|
||||
this.lineChartData = this.tmpPointData;
|
||||
}
|
||||
|
||||
initPointData() {
|
||||
|
|
@ -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 #overview 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(value)">Gesamt</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {War} from "../../../models/model-interfaces";
|
||||
import {Fraction} from "../../../utils/fraction.enum";
|
||||
|
||||
@Component({
|
||||
selector: 'scoreboard',
|
||||
templateUrl: './scoreboard.component.html',
|
||||
inputs: ['war', 'fractionFilterSelected'],
|
||||
styleUrls: ['./scoreboard.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
|
||||
})
|
||||
export class ScoreboardComponent {
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
@ViewChild('overview') private overviewContainer: ElementRef;
|
||||
|
||||
war: War;
|
||||
|
||||
fractionFilterSelected: string;
|
||||
|
||||
cellHeight = 40;
|
||||
|
||||
rows = [];
|
||||
|
||||
reorderable: boolean = false;
|
||||
|
||||
customClasses = {
|
||||
sortAscending: 'glyphicon glyphicon-triangle-top',
|
||||
sortDescending: 'glyphicon glyphicon-triangle-bottom',
|
||||
};
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private router: Router) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
selectPlayerDetail(playerName: string) {
|
||||
this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + playerName],
|
||||
{relativeTo: this.route});
|
||||
}
|
||||
|
||||
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) {
|
||||
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 {
|
||||
height: 205px;
|
||||
float: left;
|
||||
width: 4%;
|
||||
.war-header-container {
|
||||
width: 920px;
|
||||
min-height: 205px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.head-field {
|
||||
|
|
@ -10,99 +10,28 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1500px) {
|
||||
.vertical-spacer {
|
||||
width: 15%;
|
||||
}
|
||||
.war-header {
|
||||
border-bottom: thin solid lightgrey;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2000px) {
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ########### DATATABLE ########### */
|
||||
|
||||
:host /deep/ .datatable-header {
|
||||
.nav-tabs > li.active > a {
|
||||
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;
|
||||
.nav-tabs {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
: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 {
|
||||
.nav-tabs > li > a {
|
||||
background: #4b4b4b;
|
||||
color: #f5f5f5;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
.nav-tabs > li:not(.active) > a:hover {
|
||||
background: #afafaf;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.btn-dark.active {
|
||||
background: #222222;
|
||||
.nav-link {
|
||||
cursor: pointer !important;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 95%;
|
||||
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,33 +1,75 @@
|
|||
<div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
|
||||
<ngx-datatable
|
||||
style="width:980px; margin:auto"
|
||||
[rows]="rows"
|
||||
[sorts]="[{prop: 'kill', dir: 'desc'}]"
|
||||
[reorderable]="reorderable"
|
||||
[messages]="{emptyMessage: 'Loading...'}"
|
||||
[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>
|
||||
<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" *ngIf="tab === 0">
|
||||
<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" [ngClass]="{active :tab === 0}" (click)="switchTab(0)">
|
||||
<a class="nav-link"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
|
||||
</li>
|
||||
<li class="nav-item" [ngClass]="{active :tab === 1}" (click)="switchTab(1)">
|
||||
<a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--Sub-Components (=TABS)-->
|
||||
<div *ngIf="war">
|
||||
<scoreboard
|
||||
*ngIf="tab === 0"
|
||||
[war]="war"
|
||||
[fractionFilterSelected]="fractionFilterSelected">
|
||||
</scoreboard>
|
||||
<war-detail-fraction
|
||||
*ngIf="tab === 1 && logData"
|
||||
[war]="war"
|
||||
[logData]="logData">
|
||||
</war-detail-fraction>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,75 +1,71 @@
|
|||
import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
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";
|
||||
import {LogsService} from "../../services/logs/logs.service";
|
||||
|
||||
|
||||
@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 {
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
@ViewChild('overview') private overviewContainer: ElementRef;
|
||||
|
||||
war: War;
|
||||
|
||||
logData;
|
||||
|
||||
tab: number;
|
||||
|
||||
fractionStatsInitialized: boolean;
|
||||
|
||||
fractionFilterSelected: string;
|
||||
|
||||
cellHeight = 40;
|
||||
playerChart: any[] = [];
|
||||
|
||||
rows = [];
|
||||
|
||||
reorderable: boolean = false;
|
||||
|
||||
customClasses = {
|
||||
sortAscending: 'glyphicon glyphicon-triangle-top',
|
||||
sortDescending: 'glyphicon glyphicon-triangle-bottom',
|
||||
colorScheme = {
|
||||
domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR]
|
||||
};
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private router: Router) {
|
||||
private warService: WarService,
|
||||
private logsService: LogsService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.params
|
||||
.map(params => params['id'])
|
||||
.filter(id => id != undefined)
|
||||
.flatMap(id => this.warService.getWar(id))
|
||||
.subscribe(war => {
|
||||
this.war = war;
|
||||
|
||||
this.tab = 0;
|
||||
this.fractionStatsInitialized = false;
|
||||
this.fractionFilterSelected = undefined;
|
||||
|
||||
this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
|
||||
Object.assign(this, [this.playerChart]);
|
||||
})
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
switchTab(index: number) {
|
||||
this.tab = index;
|
||||
if (index === 1 && !this.fractionStatsInitialized) {
|
||||
this.logsService.getFullLog(this.war._id).subscribe(log => {
|
||||
this.logData = log;
|
||||
this.fractionStatsInitialized = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
filterPlayersByFraction(fraction?: string) {
|
||||
if (fraction) {
|
||||
this.rows = this.war.players.filter((player) => {
|
||||
return player.fraction === fraction;
|
||||
})
|
||||
} else {
|
||||
this.rows = this.war.players;
|
||||
}
|
||||
this.fractionFilterSelected = fraction;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue