diff --git a/api/routes/players.js b/api/routes/players.js
index f0943b3..d9b917f 100644
--- a/api/routes/players.js
+++ b/api/routes/players.js
@@ -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();
})
diff --git a/static/src/app/statistic/highscore/highscore.component.css b/static/src/app/statistic/highscore/highscore.component.css
index f5eba27..7392fa2 100644
--- a/static/src/app/statistic/highscore/highscore.component.css
+++ b/static/src/app/statistic/highscore/highscore.component.css
@@ -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 */
diff --git a/static/src/app/statistic/highscore/highscore.component.html b/static/src/app/statistic/highscore/highscore.component.html
index 396ae44..775fe7b 100644
--- a/static/src/app/statistic/highscore/highscore.component.html
+++ b/static/src/app/statistic/highscore/highscore.component.html
@@ -1,18 +1,32 @@
-
{{title}}
+
{{title}} ⟶ Highscore
+
+
+
+
+
+
+
-
+
+
@@ -20,7 +34,117 @@
-
+
+
+
+
+
+
+
+ {{value}}
+
+
+
+
+
+
+
+
+
+
+ {{value}}
+
+
+
+
+
+
+
+
+
+
+
+ {{value}}
+
+
+
+
+
+
+
+
+
+
+
+ {{value}}
+
+
+
+
+
+
+
+
+
+
+
+ {{value}}
+
+
+
+
+
+
diff --git a/static/src/app/statistic/highscore/highscore.component.ts b/static/src/app/statistic/highscore/highscore.component.ts
index fd97cf5..348be6c 100644
--- a/static/src/app/statistic/highscore/highscore.component.ts
+++ b/static/src/app/statistic/highscore/highscore.component.ts
@@ -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))
+ }
+
}
diff --git a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css
index 4fa0a59..9d6dfd4 100644
--- a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css
+++ b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css
@@ -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;
diff --git a/static/src/app/statistic/war-detail/war-detail.component.css b/static/src/app/statistic/war-detail/war-detail.component.css
index be9f74a..d104953 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.css
+++ b/static/src/app/statistic/war-detail/war-detail.component.css
@@ -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);
-}