migrate to basic material table

pull/39/head
HardiReady 2018-07-11 21:10:55 +02:00
parent ed238e311e
commit 9a0cd3544e
4 changed files with 99 additions and 50 deletions

View File

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

View File

@ -69,3 +69,21 @@ ngx-datatable {
position: absolute; position: absolute;
margin-top: -5px; 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;
}

View File

@ -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> </div>

View File

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