hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

add plazer highscore tables with filter

pull/22/head
Florian Hartwich 2017-12-26 17:09:49 +01:00
parent 23f1a61092
commit 7239995ce3
6 changed files with 273 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
api/routes/players.js
View File

@ -34,7 +34,7 @@ campaignPlayer.route('/ranking/:campaignId')
const rankingItems = [];
new Set(items.map(x => x.name)).forEach(playerName => {
const playerInstances = items.filter(p => p.name === playerName)
const playerInstances = items.filter(p => p.name === playerName);
const resItem = {name: playerName, kill: 0, death: 0, friendlyFire: 0, revive: 0, respawn: 0, flagTouch: 0};
for (let i = 0; i < playerInstances.length; i++) {
resItem.kill += playerInstances[i].kill;
@ -48,17 +48,23 @@ campaignPlayer.route('/ranking/:campaignId')
rankingItems.push(resItem);
});
function getTopFive(fieldName) {
return rankingItems.sort((a, b) => b[fieldName] - a[fieldName]).slice(0, 5)
function getSortedField(fieldName) {
let num = 1;
rankingItems.sort((a, b) => b[fieldName] - a[fieldName])
const res = JSON.parse(JSON.stringify(rankingItems));
for (const entity of res) {
entity.num = num++;
}
return res;
}
res.locals.items = {
kill: getTopFive('kill'),
death: getTopFive('death'),
friendlyFire: getTopFive('friendlyFire'),
revive: getTopFive('revive'),
respawn: getTopFive('respawn'),
flagTouch: getTopFive('flagTouch')
kill: getSortedField('kill'),
death: getSortedField('death'),
friendlyFire: getSortedField('friendlyFire'),
revive: getSortedField('revive'),
respawn: getSortedField('respawn'),
flagTouch: getSortedField('flagTouch')
};
next();
})

74
static/src/app/statistic/highscore/highscore.component.css
View File

@ -1,5 +1,71 @@
ngx-datatable {
width: 320px;
margin: auto;
height: 240px;
h2 {
margin-left: 10%;
}
.player-name {
font-weight: bold;
}
.search-field {
width: 30%;
margin: 20px 0 0 10%;
}
ngx-datatable {
width: 345px;
margin: 3% 5% 0 5%;
height: 310px;
float: left;
border: solid #dfdfdf 1px;
border-radius: 10px 10px 2px 2px;
}
: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;
}
/* Table Scrollbar BEGIN */
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar {
width: 12px;
}
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #4b4b4b;
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}
/* Table Scrollbar END */

136
static/src/app/statistic/highscore/highscore.component.html
View File

@ -1,18 +1,32 @@
<div class="highscore-container fade-in">
<h2 style="margin-bottom: 20px">{{title}}</h2>
<h2>{{title}} ⟶ Highscore</h2>
<div class="input-group search-field">
<input id="search-tasks"
placeholder="Spielername"
type="text" #query class="form-control"
(keyup.enter)="filterPlayers()"
[formControl]="searchTerm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"
(click)="filterPlayers()">
Filter
</button>
</span>
</div>
<ngx-datatable
[rows]="players.kill"
[sorts]="[{prop: 'kill', dir: 'desc'}]"
[reorderable]="reorderable"
[messages]="{emptyMessage: 'Loading...'}"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="false"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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">
@ -20,7 +34,117 @@
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Kills" prop="kill"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.death"
[reorderable]="reorderable"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Tode" prop="death"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.respawn"
[reorderable]="reorderable"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Respawn" prop="respawn"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.friendlyFire"
[reorderable]="reorderable"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.revive"
[reorderable]="reorderable"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Revive" prop="revive"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.flagTouch"
[reorderable]="reorderable"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
</ngx-datatable>
</div>

40
static/src/app/statistic/highscore/highscore.component.ts
View File

@ -3,6 +3,7 @@ import {ActivatedRoute} from "@angular/router";
import {PlayerService} from "../../services/logs/player.service";
import {CampaignService} from "../../services/logs/campaign.service";
import {Fraction} from "../../utils/fraction.enum";
import {FormControl} from "@angular/forms";
@Component({
@ -13,14 +14,28 @@ import {Fraction} from "../../utils/fraction.enum";
})
export class StatisticHighScoreComponent {
id = "";
id = '';
title = "";
title = '';
searchTerm = new FormControl();
players = {};
playersStored = {};
cellHeight = 40;
numberColWidth = 60;
nameColWidth = 210;
valueColWidth = 110;
emptyMessage = {emptyMessage: 'Keine Einträge'};
reorderable = false;
customClasses = {
sortAscending: 'glyphicon glyphicon-triangle-top',
sortDescending: 'glyphicon glyphicon-triangle-bottom',
@ -54,7 +69,28 @@ export class StatisticHighScoreComponent {
this.playerService.getCampaignHighscore(this.id).subscribe(players => {
this.players = players;
this.playersStored = players;
})
}
filterPlayers() {
if (!this.searchTerm.value || this.searchTerm.value === '') {
this.players = this.playersStored;
} else {
this.players = {
kill: this.filterPlayerAttribute('kill'),
friendlyFire: this.filterPlayerAttribute('friendlyFire'),
death: this.filterPlayerAttribute('death'),
respawn: this.filterPlayerAttribute('respawn'),
revive: this.filterPlayerAttribute('revive'),
flagTouch: this.filterPlayerAttribute('flagTouch')
}
}
}
private filterPlayerAttribute(attribute) {
const query = this.searchTerm.value.toLowerCase();
return this.playersStored[attribute].filter(p => p.name.toLowerCase().includes(query))
}
}

20
static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css
View File

@ -42,6 +42,26 @@ ngx-datatable {
background-color: #f7f7f7;
}
/* Table Scrollbar BEGIN */
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar {
width: 12px;
}
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #4b4b4b;
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}
/* Table Scrollbar END */
.in-table-btn {
position: absolute;
margin-top: -5px;

15
static/src/app/statistic/war-detail/war-detail.component.css
View File

@ -39,18 +39,3 @@
.nav-tabs > li.deactivated > a.nav-link {
cursor: not-allowed !important;
}
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar {
width: 12px;
}
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #4b4b4b;
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}