Add single template datatable

api/routes/wars.js

@@ -149,7 +149,7 @@ wars.route('/:id')
         err.status = codes.notfound;
         return next(err);
       }
-      PlayerModel.find({warId: item._id}, {'_id': 0, 'warId': 0, '__v': 0, 'updatedAt': 0, 'timestamp': 0}, (err, items) => {
+      PlayerModel.find({warId: item._id}, {}, {sort: {kill: 'desc'}}, (err, items) => {
         if (err) {
           return next(err);
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "license": "MIT",
   "private": true,
   "scripts": {

static/src/app/statistic/war-detail/war-detail.component.css

@@ -10,31 +10,8 @@
   height: 100vh;
 }
 
-:host /deep/ mfDefaultSorter > a {
+.player-name {
-  color: white;
+  font-weight: bold;
-}
-
-.table {
-  overflow-wrap: break-word;
-  table-layout: fixed;
-}
-
-.scoreboard-table-container {
-  min-width: 920px;
-  max-width: 920px;
-}
-
-.table-container {
-  overflow-x: auto;
-}
-
-.table-head {
-  background: #222222;
-  color: white;
-}
-
-.cell-outline {
-  outline: 1px solid #D4D4D4;
 }
 
 .text-opfor {
@@ -45,3 +22,37 @@
   color: blue;
 }
 
+/* ########### 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;
+}
+

static/src/app/statistic/war-detail/war-detail.component.html

@@ -50,11 +50,32 @@
     </div>
   </div>
 
-  <div class="pull-left">
+  <ngx-datatable
-    <ngx-datatable
+    [rows]="rows"
-      [rows]="rows"
+    [reorderable]="reorderable"
-      [columns]="columns">
+    [sorts]="[{prop: 'kill', dir: 'desc'}]"
-    </ngx-datatable>
+    [messages]="{emptyMessage: 'Loading...'}"
-  </div>
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'>
+    <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" [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-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' ? 'NATO' : 'CSAT'}}
+      </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>

static/src/app/statistic/war-detail/war-detail.component.ts

@@ -1,7 +1,7 @@
 import {Component} from "@angular/core";
 import {ActivatedRoute} from "@angular/router";
 import {WarService} from "../../services/war-service/war.service";
-import {Player, War} from "../../models/model-interfaces";
+import {War} from "../../models/model-interfaces";
 
 
 @Component({
@@ -13,15 +13,20 @@ export class WarDetailComponent {
 
   war: War = {players: []};
 
-  players: Player[] = [];
-
   fractionRadioSelect: string;
 
   playerChart: any[] = [];
 
+  cellHeight = 40;
+
   rows = [];
 
-  columns = [];
+  reorderable: boolean = false;
+
+  customClasses = {
+    sortAscending: 'glyphicon glyphicon-triangle-top',
+    sortDescending: 'glyphicon glyphicon-triangle-bottom',
+  };
 
   constructor(private route: ActivatedRoute,
               private warService: WarService) {
@@ -47,26 +52,15 @@ export class WarDetailComponent {
           }
         ];
       });
-
-    this.columns = [
-      {prop: 'name', name: 'Spieler'},
-      {prop: 'fraction', name: 'Fraktion'},
-      {prop: 'kill', name: 'Kills'},
-      {prop: 'friendlyFire', name: 'FriendlyFire'},
-      {prop: 'revive', name: 'Revive'},
-      {prop: 'flagTouch', name: 'Eroberung'},
-      {prop: 'death', name: 'Tod'},
-      {prop: 'respawn', name: 'Respawn'}
-    ];
   }
 
   filterPlayersByFraction(fraction: string) {
     if (fraction) {
-      this.players = this.war.players.filter((player) => {
+      this.rows = this.war.players.filter((player) => {
         return player.fraction === fraction;
       })
     } else {
-      this.players = this.war.players;
+      this.rows = this.war.players;
     }
   }