remove datatable html for scoreboard

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

@@ -8,13 +8,13 @@ import {CampaignService} from '../services/logs/campaign.service';
 import {NgxDatatableModule} from '@swimlane/ngx-datatable';
 import {PlayerService} from '../services/logs/player.service';
 import {LogsService} from '../services/logs/logs.service';
-import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule} from '@angular/material';
+import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule, MatSortModule} from '@angular/material';
 
 
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, NgxDatatableModule,
-    MatButtonModule, MatExpansionModule, MatButtonToggleModule, MatTableModule],
+    MatButtonModule, MatExpansionModule, MatButtonToggleModule, MatTableModule, MatSortModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

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

@@ -75,6 +75,10 @@ table.mat-table {
   margin: auto;
 }
 
+table.mat-table img {
+  filter: invert(60%);
+}
+
 .mat-column-name {
   width: 200px;
 }
@@ -84,6 +88,20 @@ table.mat-table {
 
 .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: 62px;
+  width: 67px;
-  text-align: center;
+  text-indent: 9px;
+}
+
+/* MAT FAB BUTTON */
+
+button.mat-mini-fab {
+  color: #7b7b7b;
+  background: #ffffff;
+  width: 60px;
+  height: 35px;
+  font-size: 12px;
+}
+
+:host/deep/span.mat-button-wrapper {
+  padding: 0;
 }

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

@@ -1,73 +1,45 @@
 <div class="fade-in" style="overflow-x: auto">
 
-    <table mat-table [dataSource]="rows" class="mat-elevation-z8">
+  <table mat-table matSort
+         [dataSource]="sortedRows"
+         matSortActive="{{tableHead[2].prop}}" matSortDirection="desc" matSortDisableClear
+         (matSortChange)="sortData($event)"
+         class="mat-elevation-z8">
 
-      <ng-container matColumnDef="{{tableHead[0].prop}}">
+    <ng-container matColumnDef="{{tableHead[0].prop}}">
-        <th mat-header-cell *matHeaderCellDef> {{tableHead[0].head}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head}}</th>
-        <td mat-cell *matCellDef="let element"
+      <td mat-cell *matCellDef="let element"
-            [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+          [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
-          {{element.name}}
+        {{element.name}}
-        </td>
+      </td>
-      </ng-container>
+    </ng-container>
 
-      <ng-container matColumnDef="{{tableHead[1].prop}}">
+    <ng-container matColumnDef="{{tableHead[1].prop}}">
-        <th mat-header-cell *matHeaderCellDef> {{tableHead[1].head}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head}}</th>
-        <td mat-cell *matCellDef="let element"> {{element.fraction}} </td>
+      <td mat-cell *matCellDef="let element"> {{element.fraction}}</td>
-      </ng-container>
+    </ng-container>
 
-      <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
+    <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
-        <th mat-header-cell *matHeaderCellDef> <img src="../../../../assets/scoreboard/{{column.prop}}.png" alt="{{column.head}}"> </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}">
-        <td mat-cell *matCellDef="let element"> {{element[column.prop]}} </td>
+        <img src="../../../../assets/scoreboard/{{column.prop}}.png"
-      </ng-container>
+             matTooltip="{{column.head}}"
+             alt="{{column.head}}">
+      </th>
+      <td mat-cell *matCellDef="let element"> {{element[column.prop]}}</td>
+    </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <ng-container matColumnDef="interact">
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <th mat-header-cell *matHeaderCellDef></th>
-    </table>
+      <td mat-cell *matCellDef="let element">
+        <button mat-mini-fab color="primary"
+                (click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
+                 element['steamUUID'] : element['name'])">
+          Gesamt
+        </button>
+      </td>
+    </ng-container>
 
-
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <!--<ngx-datatable-->
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    <!--[rows]="rows"-->
+  </table>
-    <!--[sorts]="[{prop: 'kill', dir: 'desc'}]"-->
-    <!--[reorderable]="reorderable"-->
-    <!--[messages]="{emptyMessage: 'Loading...'}"-->
-    <!--[headerHeight]="cellHeight"-->
-    <!--[rowHeight]="cellHeight"-->
-    <!--[cssClasses]='customClasses'-->
-    <!--[columnMode]="'force'"-->
-    <!--[scrollbarV]="true"-->
-    <!--[selectionType]="'single'">-->
-    <!--<ngx-datatable-column name="{{tableHead[0].head}}" 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 name="{{tableHead[1].head}}" prop="fraction" [width]="90">-->
-      <!--<ng-template ngx-datatable-cell-template let-value="value">-->
-        <!--{{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}-->
-      <!--</ng-template>-->
-    <!--</ngx-datatable-column>-->
-
-    <!--<div *ngFor="let column of tableHead.slice(2, tableHead.length) ">-->
-      <!--<ngx-datatable-column [width]="columnWidth" prop="{{column.prop}}">-->
-        <!--<ng-template ngx-datatable-header-template let-sort="sortFn">-->
-        <!--<span class="datatable-header-cell-wrapper">-->
-          <!--<span class="datatable-header-cell-label text-truncate" title="{{column.head}}" (click)="sort()">-->
-            <!--<img src="../../../../assets/scoreboard/{{column.prop}}.png" alt="{{column.head}}">-->
-          <!--</span>-->
-        <!--</span>-->
-        <!--</ng-template>-->
-      <!--</ngx-datatable-column>-->
-    <!--</div>-->
-    <!--<ngx-datatable-column [width]="80">-->
-      <!--<ng-template ngx-datatable-cell-template let-row="row">-->
-        <!--<span class="btn btn-sm btn-default in-table-btn"-->
-              <!--(click)="selectPlayerDetail(1, isSteamUUID(row['steamUUID']) ? row['steamUUID'] : row['name'])">-->
-          <!--Gesamt-->
-        <!--</span>-->
-      <!--</ng-template>-->
-    <!--</ngx-datatable-column>-->
-  <!--</ngx-datatable>-->
 </div>

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

@@ -3,6 +3,7 @@ import {War} from '../../../models/model-interfaces';
 import {Fraction} from '../../../utils/fraction.enum';
 import {PlayerUtils} from '../../../utils/player-utils';
 import {saveAs} from 'file-saver/FileSaver';
+import {Sort} from '@angular/material';
 
 @Component({
   selector: 'cc-scoreboard',
@@ -29,8 +30,9 @@ export class ScoreboardComponent implements OnChanges {
 
   rows = [];
 
-  displayedColumns = //['name', 'fraction', 'kill', 'friendlyFire', 'revive', 'flagTouch', 'vehicleLight', 'vehicleHeavy', 'vehicleAir'];
+  sortedRows = [];
-    this.tableHead.map(head => head.prop);
+
+  displayedColumns = this.tableHead.map(head => head.prop);
 
   reorderable = false;
 
@@ -40,7 +42,7 @@ export class ScoreboardComponent implements OnChanges {
   };
 
   constructor(private elRef: ElementRef) {
-    console.log(this.displayedColumns)
+    this.displayedColumns.push('interact');
   }
 
   selectPlayerDetail(view: number, player) {
@@ -53,6 +55,7 @@ export class ScoreboardComponent implements OnChanges {
   ngOnChanges(changes: SimpleChanges) {
     if (changes.war) {
       this.rows = changes.war.currentValue.players;
+      this.sortedRows = this.rows.slice();
 //      this.elRef.nativeElement
 //          .querySelector('.datatable-body')
 //          .scrollTo(0, 0);
@@ -72,6 +75,24 @@ export class ScoreboardComponent implements OnChanges {
     }
   }
 
+  sortData(sort: Sort) {
+    const data = this.rows.slice();
+    if (!sort.active || sort.direction === '') {
+      this.sortedRows = data;
+      return;
+    }
+
+    this.sortedRows = data.sort((a, b) => {
+      const isAsc = sort.direction === 'desc';
+      const sortProperty = sort.active;
+      return this.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++) {
@@ -100,5 +121,4 @@ export class ScoreboardComponent implements OnChanges {
     const blob = new Blob([csvOut], {type: 'text/plain'});
     saveAs(blob, this.war.title.toLowerCase().replace(' ', '_').concat('.csv'));
   }
-
 }