Add scoreboard table sorting
parent
9a0cd3544e
commit
99482625a2
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
text-align: center;
|
||||
width: 67px;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,91 @@
|
|||
<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}}">
|
||||
<th mat-header-cell *matHeaderCellDef> {{tableHead[0].head}} </th>
|
||||
<td mat-cell *matCellDef="let element"
|
||||
[style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
|
||||
{{element.name}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="{{tableHead[0].prop}}">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head}}</th>
|
||||
<td mat-cell *matCellDef="let element"
|
||||
[style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
|
||||
{{element.name}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="{{tableHead[1].prop}}">
|
||||
<th mat-header-cell *matHeaderCellDef> {{tableHead[1].head}} </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.fraction}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="{{tableHead[1].prop}}">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head}}</th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.fraction}}</td>
|
||||
</ng-container>
|
||||
|
||||
<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>
|
||||
<td mat-cell *matCellDef="let element"> {{element[column.prop]}} </td>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}">
|
||||
<img src="../../../../assets/scoreboard/{{column.prop}}.png"
|
||||
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>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<ng-container matColumnDef="interact">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<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>
|
||||
<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>-->
|
||||
<!--[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>-->
|
||||
<!--<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>
|
||||
|
|
|
|||
|
|
@ -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'];
|
||||
this.tableHead.map(head => head.prop);
|
||||
sortedRows = [];
|
||||
|
||||
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'));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue