Add simple ngx.datatable

api/routes/wars.js

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

static/package.json

@@ -23,7 +23,7 @@
     "@angular/platform-browser-dynamic": "^4.3.2",
     "@angular/router": "^4.3.2",
     "@swimlane/ngx-charts": "^6.0.1",
-    "angular2-datatable": "^0.6.0",
+    "@swimlane/ngx-datatable": "^10.2.3",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
     "d3": "^4.10.0",

static/src/app/statistic/stats.module.ts

@@ -3,14 +3,14 @@ import {CommonModule} from "@angular/common";
 import {SharedModule} from "../shared.module";
 import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
 import {WarService} from "../services/war-service/war.service";
-import {DataTableModule} from "angular2-datatable";
 import {LineChartModule, PieChartModule} from "@swimlane/ngx-charts";
 import {AccordionModule, CarouselModule} from "ngx-bootstrap";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
 
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule,
-    AccordionModule.forRoot(), CarouselModule.forRoot(), DataTableModule],
+    AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule],
   providers: [WarService]
 })
 export class StatsModule {

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

@@ -51,67 +51,10 @@
   </div>
 
   <div class="pull-left">
-    <div class="table-container scoreboard-table-container">
+    <ngx-datatable
-      <table class="table table-hover" [mfData]="players" #mf="mfDataTable" [(mfSortBy)]="sortBy"
+      [rows]="rows"
-             [(mfSortOrder)]="sortOrder">
+      [columns]="columns">
-        <thead>
+    </ngx-datatable>
-        <tr class="table-head">
-          <th class="col-sm-2" style="border-radius: 10px 0 0 0;">
-            <mfDefaultSorter by="name">Spieler</mfDefaultSorter>
-          </th>
-          <th class="col-sm-1">
-            <mfDefaultSorter by="fraction">Fraktion</mfDefaultSorter>
-          </th>
-          <th class="col-sm-1">
-            <mfDefaultSorter by="kill">Kills</mfDefaultSorter>
-          </th>
-          <th class="col-sm-1">
-            <mfDefaultSorter by="friendlyFire">FriendlyFire</mfDefaultSorter>
-          </th>
-          <th class="col-sm-1">
-            <mfDefaultSorter by="revive">Revive</mfDefaultSorter>
-          </th>
-          <th class="col-sm-1">
-            <mfDefaultSorter by="flagTouch">Eroberung</mfDefaultSorter>
-          </th>
-          <th class="col-sm-1">
-            <mfDefaultSorter by="death">Tod</mfDefaultSorter>
-          </th>
-          <th class="col-sm-1" style="border-radius: 0 10px 0 0;">
-            <mfDefaultSorter by="respawn">Respawn</mfDefaultSorter>
-          </th>
-        </tr>
-        </thead>
-        <tbody *ngFor="let player of mf.data">
-        <tr class="cell-outline">
-          <td style="font-weight: bold" [ngClass]="player.fraction === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
-            {{player.name}}
-          </td>
-          <td>
-            {{player.fraction === 'BLUFOR' ? 'NATO' : 'CSAT'}}
-          </td>
-          <td>
-            {{player.kill}}
-          </td>
-          <td>
-            {{player.friendlyFire}}
-          </td>
-          <td>
-            {{player.revive}}
-          </td>
-          <td>
-            {{player.flagTouch}}
-          </td>
-          <td>
-            {{player.death}}
-          </td>
-          <td>
-            {{player.respawn}}
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
   </div>
 
 </div>

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

@@ -17,12 +17,12 @@ export class WarDetailComponent {
 
   fractionRadioSelect: string;
 
-  sortBy = "kill";
-
-  sortOrder = "desc";
-
   playerChart: any[] = [];
 
+  rows = [];
+
+  columns = [];
+
   constructor(private route: ActivatedRoute,
               private warService: WarService) {
     Object.assign(this, this.playerChart)
@@ -35,7 +35,7 @@ export class WarDetailComponent {
       .flatMap(id => this.warService.getWar(id))
       .subscribe(war => {
         this.war = war;
-        this.players = war.players;
+        this.rows = war.players;
         this.playerChart = [
           {
             "name": "CSAT",
@@ -47,6 +47,17 @@ 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) {