Merge branch 'task/update-datatable-module' of hardi/opt-cc into master

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}, {}, {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/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.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,68 +50,32 @@
     </div>
   </div>
 
-  <div class="pull-left">
+  <ngx-datatable
-    <div class="table-container scoreboard-table-container">
+    [rows]="rows"
-      <table class="table table-hover" [mfData]="players" #mf="mfDataTable" [(mfSortBy)]="sortBy"
+    [reorderable]="reorderable"
-             [(mfSortOrder)]="sortOrder">
+    [sorts]="[{prop: 'kill', dir: 'desc'}]"
-        <thead>
+    [messages]="{emptyMessage: 'Loading...'}"
-        <tr class="table-head">
+    [headerHeight]="cellHeight"
-          <th class="col-sm-2" style="border-radius: 10px 0 0 0;">
+    [rowHeight]="cellHeight"
-            <mfDefaultSorter by="name">Spieler</mfDefaultSorter>
+    [cssClasses]='customClasses'>
-          </th>
+    <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
-          <th class="col-sm-1">
+      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
-            <mfDefaultSorter by="fraction">Fraktion</mfDefaultSorter>
+        <span class="player-name" [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
-          </th>
+          {{value}}
-          <th class="col-sm-1">
+        </span>
-            <mfDefaultSorter by="kill">Kills</mfDefaultSorter>
+      </ng-template>
-          </th>
+    </ngx-datatable-column>
-          <th class="col-sm-1">
+    <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
-            <mfDefaultSorter by="friendlyFire">FriendlyFire</mfDefaultSorter>
+      <ng-template ngx-datatable-cell-template let-value="value">
-          </th>
+        {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
-          <th class="col-sm-1">
+      </ng-template>
-            <mfDefaultSorter by="revive">Revive</mfDefaultSorter>
+    </ngx-datatable-column>
-          </th>
+    <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
-          <th class="col-sm-1">
+    <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
-            <mfDefaultSorter by="flagTouch">Eroberung</mfDefaultSorter>
+    <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
-          </th>
+    <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
-          <th class="col-sm-1">
+    <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
-            <mfDefaultSorter by="death">Tod</mfDefaultSorter>
+    <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
-          </th>
+  </ngx-datatable>
-          <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

@@ -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,16 +13,21 @@ export class WarDetailComponent {
 
   war: War = {players: []};
 
-  players: Player[] = [];
-
   fractionRadioSelect: string;
 
-  sortBy = "kill";
-
-  sortOrder = "desc";
-
   playerChart: any[] = [];
 
+  cellHeight = 40;
+
+  rows = [];
+
+  reorderable: boolean = false;
+
+  customClasses = {
+    sortAscending: 'glyphicon glyphicon-triangle-top',
+    sortDescending: 'glyphicon glyphicon-triangle-bottom',
+  };
+
   constructor(private route: ActivatedRoute,
               private warService: WarService) {
     Object.assign(this, this.playerChart)
@@ -35,7 +40,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",
@@ -51,11 +56,11 @@ export class WarDetailComponent {
 
   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;
     }
   }