* Use mat-table in highscores

* Fix fraction filter for scoreboard

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

@@ -11,71 +11,53 @@ h2 {
   margin: 20px 0 0 10%;
 }
 
-ngx-datatable {
+.highscore-table-container {
-  width: 345px;
+  width: 320px;
-  margin: 3% 5% 0 5%;
+  max-height: 394px;
-  height: 310px;
+  margin: 100px 0 0 8%;
   float: left;
-  border: solid #dfdfdf 1px;
-  border-radius: 10px 10px 2px 2px;
-}
-
-:host /deep/ .datatable-header {
-  width: 350px !important;
-  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 {
   overflow-x: hidden;
+  overflow-y: auto;
+  border: solid #dfdfdf 1px;
+  box-shadow: 3px 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
 }
 
-:host /deep/ .datatable-body-row {
+.highscore-table {
-  color: #222222;
+  width: 100%;
-  border-bottom: 1px solid grey;
 }
 
-:host /deep/ .datatable-body-row:hover {
+table.mat-table img {
-  background-color: #f7f7f7;
+  filter: invert(60%);
+  margin-left: -15px;
 }
 
-:host /deep/ .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
+:host /deep/ table.mat-table > thead {
-  margin: auto;
+  position: absolute;
+  width: 320px;
+  display: inherit;
+  margin-left: -1px;
+  margin-top: -57px;
+  border: 1px solid #dadada;
+}
+
+.mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch,
+.mat-column-vehicleLight, .mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn {
+  width: 67px;
+  text-indent: 14px;
 }
 
 /* Table Scrollbar BEGIN */
 
-:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar {
+.highscore-table-container::-webkit-scrollbar {
   width: 12px;
 }
 
-:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track {
+.highscore-table-container::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-left: 1px solid #f1f1f1;
-  border-radius: 10px;
 }
 
-:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb {
+.highscore-table-container::-webkit-scrollbar-thumb {
-  border-radius: 10px;
+  background: rgb(234, 234, 234);
-  background: #4b4b4b;
-  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
 }
 
 /* Table Scrollbar END */

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

@@ -3,6 +3,7 @@
 
   <div class="input-group search-field">
     <input id="search-tasks"
+           markForCheck
            placeholder="Spielername (mehrere mit '&' trennen)"
            type="text" #query class="form-control"
            (keyup.enter)="filterPlayers()"
@@ -16,41 +17,74 @@
   </div>
 
   <div *ngFor="let attributeMap of playerAttributeDisplayNames">
-    <ngx-datatable
+    <div class="highscore-table-container">
-      [rows]="players[attributeMap.prop]"
+      <table mat-table matSort
-      [messages]="emptyMessage"
+             [dataSource]="players[attributeMap.prop]"
-      [headerHeight]="cellHeight"
+             class="mat-elevation-z8 highscore-table">
-      [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" prop="{{attributeMap.prop}}">
+        <ng-container matColumnDef="num">
-        <ng-template ngx-datatable-header-template let-sort="sortFn">
+          <th mat-header-cell *matHeaderCellDef>#</th>
-        <span class="datatable-header-cell-wrapper">
+          <td mat-cell *matCellDef="let element">{{element.num}}</td>
-          <span class="datatable-header-cell-label text-truncate" matTooltip="{{attributeMap.head}}" (click)="sort()">
+        </ng-container>
-            <img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png" alt="{{attributeMap.head}}">
+
-          </span>
+        <ng-container matColumnDef="name">
-        </span>
+          <th mat-header-cell *matHeaderCellDef>Name</th>
-        </ng-template>
+          <td mat-cell *matCellDef="let element"
-        <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+              [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
-        <span style="padding-left: 7px;">
+            {{element.name}}
-          {{value}}
+          </td>
-        </span>
+        </ng-container>
-        </ng-template>
+
-      </ngx-datatable-column>
+        <ng-container matColumnDef="{{attributeMap.prop}}">
-    </ngx-datatable>
+          <th mat-header-cell *matHeaderCellDef>
+            <img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png"
+                 matTooltip="{{attributeMap.head}}"
+                 alt="{{attributeMap.head}}">
+          </th>
+          <td mat-cell *matCellDef="let element"> {{element[attributeMap.prop]}}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="['num', 'name', attributeMap.prop];"></tr>
+        <tr mat-row *matRowDef="let row; columns: ['num', 'name', attributeMap.prop];"></tr>
+      </table>
     </div>
+  </div>
+
+    <!--<ngx-datatable-->
+      <!--[rows]="players[attributeMap.prop]"-->
+      <!--[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" prop="{{attributeMap.prop}}">-->
+        <!--<ng-template ngx-datatable-header-template let-sort="sortFn">-->
+        <!--<span class="datatable-header-cell-wrapper">-->
+          <!--<span class="datatable-header-cell-label text-truncate" matTooltip="{{attributeMap.head}}" (click)="sort()">-->
+            <!--<img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png" alt="{{attributeMap.head}}">-->
+          <!--</span>-->
+        <!--</span>-->
+        <!--</ng-template>-->
+        <!--<ng-template ngx-datatable-cell-template let-row="row" let-value="value">-->
+        <!--<span style="padding-left: 7px;">-->
+          <!--{{value}}-->
+        <!--</span>-->
+        <!--</ng-template>-->
+      <!--</ngx-datatable-column>-->
+    <!--</ngx-datatable>-->
+  <!--</div>-->
 
 </div>
 

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

@@ -30,21 +30,6 @@ export class StatisticHighScoreComponent implements OnInit {
 
   playerAttributeDisplayNames = PlayerUtils.attributeDisplayNames.slice(2, PlayerUtils.attributeDisplayNames.length);
 
-  cellHeight = 40;
-
-  numberColWidth = 60;
-
-  nameColWidth = 210;
-
-  valueColWidth = 55;
-
-  emptyMessage = {emptyMessage: 'Keine Einträge'};
-
-  customClasses = {
-    sortAscending: 'glyphicon glyphicon-triangle-top',
-    sortDescending: 'glyphicon glyphicon-triangle-bottom',
-  };
-
   readonly fraction = Fraction;
 
   constructor(private route: ActivatedRoute,
@@ -97,7 +82,6 @@ export class StatisticHighScoreComponent implements OnInit {
 
   private filterPlayerAttribute(attribute) {
     const query = this.searchTerm.value.toLowerCase().split('&');
-
     return this.playersStored[attribute].filter(player => {
       for (let i = 0; i < query.length; i++) {
         if (query[i].trim() !== '' && player.name.toLowerCase().includes(query[i].trim())) {
@@ -107,5 +91,4 @@ export class StatisticHighScoreComponent implements OnInit {
       return false;
     });
   }
-
 }

static/src/app/statistic/war/scoreboard/scoreboard.component.css

@@ -1,3 +1,11 @@
+.scoreboard-table {
+  height: 68vh;
+  width:fit-content;
+  border: 1px solid #dadada;
+  overflow-x: auto;
+  margin:auto;
+}
+
 .in-table-btn {
   position: absolute;
   margin-top: -5px;

static/src/app/statistic/war/scoreboard/scoreboard.component.html

@@ -1,9 +1,9 @@
-<div class="fade-in" style="border-top: 1px solid #dadada; overflow-x: auto">
+<div class="fade-in scoreboard-table">
 
   <table mat-table matSort
          [dataSource]="sortedRows"
          matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
-         (matSortChange)="sortData($event)"
+         (matSortChange)="sortScoreboardData($event)"
          class="mat-elevation-z8">
 
     <ng-container matColumnDef="{{tableHead[0].prop}}">

static/src/app/statistic/war/scoreboard/scoreboard.component.ts

@@ -4,6 +4,7 @@ import {Fraction} from '../../../utils/fraction.enum';
 import {PlayerUtils} from '../../../utils/player-utils';
 import {saveAs} from 'file-saver/FileSaver';
 import {MatSort, Sort} from '@angular/material';
+import {SortUtils} from '../../../utils/sort-utils';
 
 @Component({
   selector: 'cc-scoreboard',
@@ -32,6 +33,8 @@ export class ScoreboardComponent implements OnChanges {
 
   sortedRows = [];
 
+  currentSort = new MatSort();
+
   displayedColumns = this.tableHead.map(head => head.prop);
 
   reorderable = false;
@@ -55,10 +58,8 @@ export class ScoreboardComponent implements OnChanges {
   ngOnChanges(changes: SimpleChanges) {
     if (changes.war) {
       this.rows = changes.war.currentValue.players;
-
+      this.currentSort.active = 'kill';
-      const sort = new MatSort();
+      this.sortScoreboardData(this.currentSort);
-      sort.active = 'kill';
-      this.sortData(sort);
 //      this.elRef.nativeElement
 //          .querySelector('.datatable-body')
 //          .scrollTo(0, 0);
@@ -76,9 +77,13 @@ export class ScoreboardComponent implements OnChanges {
     } else {
       this.rows = this.war.players;
     }
+    this.sortScoreboardData(this.currentSort);
   }
 
-  sortData(sort: Sort) {
+  sortScoreboardData(sort: MatSort) {
+    if (sort) {
+      this.currentSort = sort;
+    }
     const data = this.rows.slice();
     if (!sort.active || sort.direction === '') {
       this.sortedRows = data;
@@ -88,14 +93,10 @@ export class ScoreboardComponent implements OnChanges {
     this.sortedRows = data.sort((a, b) => {
       const isAsc = sort.direction === 'desc';
       const sortProperty = sort.active;
-      return this.compare(a[sortProperty], b[sortProperty], isAsc);
+      return SortUtils.compare(a[sortProperty], b[sortProperty], isAsc);
     });
   }
 
-  compare(a, b, isAsc) {
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-  }
-
   exportCSV() {
     let csvOut = '';
     for (let i = 0; i < this.tableHead.length; i++) {

static/src/app/utils/sort-utils.ts

@@ -0,0 +1,6 @@
+export class SortUtils {
+
+  public static compare(a, b, isAsc) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+}