add first top5 table

api/routes/players.js

@@ -53,7 +53,7 @@ campaignPlayer.route('/ranking/:campaignId')
         }
 
         res.locals.items = {
-          kills: getTopFive('kill'),
+          kill: getTopFive('kill'),
           death: getTopFive('death'),
           friendlyFire: getTopFive('friendlyFire'),
           revive: getTopFive('revive'),

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

@@ -1,31 +1,5 @@
-.slide-chart-container {
+ngx-datatable {
-  width: 90%;
+  width: 320px;
-  min-width: 880px;
-  height: 650px;
   margin: auto;
-  padding-left: 5%;
+  height: 240px;
-}
-
-:host /deep/ .carousel-indicators {
-  display: none;
-}
-
-:host /deep/ .carousel-control {
-  width: 5%;
-  cursor: pointer;
-}
-
-:host /deep/ .chart-legend {
-  position: absolute;
-  margin-top: -60px;
-  margin-left: -220px;
-}
-
-:host /deep/ .chart-legend .legend-labels {
-  width: 200px;
-}
-
-:host /deep/ .chart-legend .legend-label {
-  float: left;
-  padding-left: 14px;
 }

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

@@ -1,5 +1,26 @@
-<div class="slide-chart-container" style="height: 150px;">
+<div class="highscore-container fade-in">
   <h2 style="margin-bottom: 20px">{{title}}</h2>
 
+  <ngx-datatable
+    [rows]="players.kill"
+    [sorts]="[{prop: 'kill', dir: 'desc'}]"
+    [reorderable]="reorderable"
+    [messages]="{emptyMessage: 'Loading...'}"
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'
+    [columnMode]="'force'"
+    [scrollbarV]="false"
+    [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 [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
+  </ngx-datatable>
 </div>
 

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

@@ -2,6 +2,7 @@ import {Component} from "@angular/core";
 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";
 
 
 @Component({
@@ -13,8 +14,20 @@ import {CampaignService} from "../../services/logs/campaign.service";
 export class StatisticHighScoreComponent {
 
   id = "";
+
   title = "";
 
+  players = {};
+
+  cellHeight = 40;
+
+  customClasses = {
+    sortAscending: 'glyphicon glyphicon-triangle-top',
+    sortDescending: 'glyphicon glyphicon-triangle-bottom',
+  };
+
+  readonly fraction = Fraction;
+
   constructor(private route: ActivatedRoute,
               private playerService: PlayerService,
               private campaignService: CampaignService) {
@@ -40,7 +53,7 @@ export class StatisticHighScoreComponent {
       .filter(camp => camp._id === this.id).pop().title;
 
     this.playerService.getCampaignHighscore(this.id).subscribe(players => {
-      console.log(players);
+      this.players = players;
     })
   }