From 99482625a25d8a9c3e82dcfb892264623a98ec7a Mon Sep 17 00:00:00 2001 From: HardiReady Date: Thu, 12 Jul 2018 21:48:08 +0200 Subject: [PATCH] Add scoreboard table sorting --- static/src/app/statistic/stats.module.ts | 4 +- .../war/scoreboard/scoreboard.component.css | 22 ++- .../war/scoreboard/scoreboard.component.html | 140 ++++++++++-------- .../war/scoreboard/scoreboard.component.ts | 28 +++- 4 files changed, 125 insertions(+), 69 deletions(-) diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index 8a10d57..cd69cec 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/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 { diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.css b/static/src/app/statistic/war/scoreboard/scoreboard.component.css index b2acb6d..0563308 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.css +++ b/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; - 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; } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index 0f9e603..28f2082 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -1,73 +1,91 @@
- +
- - - - + + + + - - - - + + + + - - - - + + + + - - -
{{tableHead[0].head}} - {{element.name}} - {{tableHead[0].head}} + {{element.name}} + {{tableHead[1].head}} {{element.fraction}} {{tableHead[1].head}} {{element.fraction}} {{column.head}} {{element[column.prop]}} + {{column.head}} + {{element[column.prop]}}
+ + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts index a24d698..d56de14 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts +++ b/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']; - 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')); } - }