add plazer highscore tables with filter

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) {
+        function getSortedField(fieldName) {
-          return rankingItems.sort((a, b) => b[fieldName] - a[fieldName]).slice(0, 5)
+          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'),
+          kill: getSortedField('kill'),
-          death: getTopFive('death'),
+          death: getSortedField('death'),
-          friendlyFire: getTopFive('friendlyFire'),
+          friendlyFire: getSortedField('friendlyFire'),
-          revive: getTopFive('revive'),
+          revive: getSortedField('revive'),
-          respawn: getTopFive('respawn'),
+          respawn: getSortedField('respawn'),
-          flagTouch: getTopFive('flagTouch')
+          flagTouch: getSortedField('flagTouch')
         };
         next();
       })

static/src/app/statistic/highscore/highscore.component.css

@@ -1,5 +1,71 @@
-ngx-datatable {
+h2 {
-  width: 320px;
+  margin-left: 10%;
-  margin: auto;
-  height: 240px;
 }
+
+.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 */

static/src/app/statistic/highscore/highscore.component.html

@@ -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>
 

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))
+  }
+
 }

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;

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);
-}