migrate to basic material table

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

@@ -8,12 +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} from '@angular/material';
+import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule} from '@angular/material';
+
 
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, NgxDatatableModule,
-    MatButtonModule, MatExpansionModule, MatButtonToggleModule],
+    MatButtonModule, MatExpansionModule, MatButtonToggleModule, MatTableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

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

@@ -69,3 +69,21 @@ ngx-datatable {
   position: absolute;
   margin-top: -5px;
 }
+
+/* MATERIAL TABLE */
+table.mat-table {
+  margin: auto;
+}
+
+.mat-column-name {
+  width: 200px;
+}
+.mat-column-fraction {
+  width: 90px;
+}
+
+.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;
+  text-align: center;
+}

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

@@ -1,47 +1,73 @@
-<div class="fade-in" style="overflow-x: auto" xmlns="http://www.w3.org/1999/html">
+<div class="fade-in" style="overflow-x: auto">
-  <ngx-datatable
-    [rows]="rows"
-    [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) ">
+    <table mat-table [dataSource]="rows" class="mat-elevation-z8">
-      <ngx-datatable-column [width]="columnWidth" prop="{{column.prop}}">
+
-        <ng-template ngx-datatable-header-template let-sort="sortFn">
+      <ng-container matColumnDef="{{tableHead[0].prop}}">
-        <span class="datatable-header-cell-wrapper">
+        <th mat-header-cell *matHeaderCellDef> {{tableHead[0].head}} </th>
-          <span class="datatable-header-cell-label text-truncate" title="{{column.head}}" (click)="sort()">
+        <td mat-cell *matCellDef="let element"
-            <img src="../../../../assets/scoreboard/{{column.prop}}.png" alt="{{column.head}}">
+            [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
-          </span>
+          {{element.name}}
-        </span>
+        </td>
-        </ng-template>
+      </ng-container>
-      </ngx-datatable-column>
+
-    </div>
+      <ng-container matColumnDef="{{tableHead[1].prop}}">
-    <ngx-datatable-column [width]="80">
+        <th mat-header-cell *matHeaderCellDef> {{tableHead[1].head}} </th>
-      <ng-template ngx-datatable-cell-template let-row="row">
+        <td mat-cell *matCellDef="let element"> {{element.fraction}} </td>
-        <span class="btn btn-sm btn-default in-table-btn"
+      </ng-container>
-              (click)="selectPlayerDetail(1, isSteamUUID(row['steamUUID']) ? row['steamUUID'] : row['name'])">
+
-          Gesamt
+      <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
-        </span>
+        <th mat-header-cell *matHeaderCellDef> <img src="../../../../assets/scoreboard/{{column.prop}}.png" alt="{{column.head}}"> </th>
-      </ng-template>
+        <td mat-cell *matCellDef="let element"> {{element[column.prop]}} </td>
-    </ngx-datatable-column>
+      </ng-container>
-  </ngx-datatable>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+
+  <!--<ngx-datatable-->
+    <!--[rows]="rows"-->
+    <!--[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

@@ -29,6 +29,9 @@ export class ScoreboardComponent implements OnChanges {
 
   rows = [];
 
+  displayedColumns = //['name', 'fraction', 'kill', 'friendlyFire', 'revive', 'flagTouch', 'vehicleLight', 'vehicleHeavy', 'vehicleAir'];
+    this.tableHead.map(head => head.prop);
+
   reorderable = false;
 
   customClasses = {
@@ -37,6 +40,7 @@ export class ScoreboardComponent implements OnChanges {
   };
 
   constructor(private elRef: ElementRef) {
+    console.log(this.displayedColumns)
   }
 
   selectPlayerDetail(view: number, player) {
@@ -49,9 +53,9 @@ export class ScoreboardComponent implements OnChanges {
   ngOnChanges(changes: SimpleChanges) {
     if (changes.war) {
       this.rows = changes.war.currentValue.players;
-      this.elRef.nativeElement
+//      this.elRef.nativeElement
-          .querySelector('.datatable-body')
+//          .querySelector('.datatable-body')
-          .scrollTo(0, 0);
+//          .scrollTo(0, 0);
     }
     if (changes.fractionFilterSelected) {
       this.filterPlayersByFraction(this.fractionFilterSelected);