* Use mat-table in highscores

* Fix fraction filter for scoreboard
pull/39/head
HardiReady 2018-07-15 12:27:41 +02:00
parent 42cfadb9e9
commit dfaddfa992
7 changed files with 124 additions and 110 deletions

View File

@ -11,71 +11,53 @@ h2 {
margin: 20px 0 0 10%; margin: 20px 0 0 10%;
} }
ngx-datatable { .highscore-table-container {
width: 345px; width: 320px;
margin: 3% 5% 0 5%; max-height: 394px;
height: 310px; margin: 100px 0 0 8%;
float: left; float: left;
border: solid #dfdfdf 1px;
border-radius: 10px 10px 2px 2px;
}
:host /deep/ .datatable-header {
width: 350px !important;
background: #222222;
font-weight: 700;
border-radius: 10px 10px 0 0;
color: white;
}
:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label {
padding-left: 8px;
}
:host /deep/ .ngx-datatable .datatable-header {
/*vertical center alignment*/
display: table-cell;
vertical-align: middle;
}
:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > div {
/*vertical alignment*/
position: relative;
top: 10px;
}
:host /deep/ .datatable-body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto;
border: solid #dfdfdf 1px;
box-shadow: 3px 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
} }
:host /deep/ .datatable-body-row { .highscore-table {
color: #222222; width: 100%;
border-bottom: 1px solid grey;
} }
:host /deep/ .datatable-body-row:hover { table.mat-table img {
background-color: #f7f7f7; filter: invert(60%);
margin-left: -15px;
} }
:host /deep/ .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell { :host /deep/ table.mat-table > thead {
margin: auto; position: absolute;
width: 320px;
display: inherit;
margin-left: -1px;
margin-top: -57px;
border: 1px solid #dadada;
}
.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: 67px;
text-indent: 14px;
} }
/* Table Scrollbar BEGIN */ /* Table Scrollbar BEGIN */
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar { .highscore-table-container::-webkit-scrollbar {
width: 12px; width: 12px;
} }
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track { .highscore-table-container::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-left: 1px solid #f1f1f1;
border-radius: 10px;
} }
:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb { .highscore-table-container::-webkit-scrollbar-thumb {
border-radius: 10px; background: rgb(234, 234, 234);
background: #4b4b4b;
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
} }
/* Table Scrollbar END */ /* Table Scrollbar END */

View File

@ -3,6 +3,7 @@
<div class="input-group search-field"> <div class="input-group search-field">
<input id="search-tasks" <input id="search-tasks"
markForCheck
placeholder="Spielername (mehrere mit '&' trennen)" placeholder="Spielername (mehrere mit '&' trennen)"
type="text" #query class="form-control" type="text" #query class="form-control"
(keyup.enter)="filterPlayers()" (keyup.enter)="filterPlayers()"
@ -16,41 +17,74 @@
</div> </div>
<div *ngFor="let attributeMap of playerAttributeDisplayNames"> <div *ngFor="let attributeMap of playerAttributeDisplayNames">
<ngx-datatable <div class="highscore-table-container">
[rows]="players[attributeMap.prop]" <table mat-table matSort
[messages]="emptyMessage" [dataSource]="players[attributeMap.prop]"
[headerHeight]="cellHeight" class="mat-elevation-z8 highscore-table">
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" prop="{{attributeMap.prop}}"> <ng-container matColumnDef="num">
<ng-template ngx-datatable-header-template let-sort="sortFn"> <th mat-header-cell *matHeaderCellDef>#</th>
<span class="datatable-header-cell-wrapper"> <td mat-cell *matCellDef="let element">{{element.num}}</td>
<span class="datatable-header-cell-label text-truncate" matTooltip="{{attributeMap.head}}" (click)="sort()"> </ng-container>
<img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png" alt="{{attributeMap.head}}">
</span> <ng-container matColumnDef="name">
</span> <th mat-header-cell *matHeaderCellDef>Name</th>
</ng-template> <td mat-cell *matCellDef="let element"
<ng-template ngx-datatable-cell-template let-row="row" let-value="value"> [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
<span style="padding-left: 7px;"> {{element.name}}
{{value}} </td>
</span> </ng-container>
</ng-template>
</ngx-datatable-column> <ng-container matColumnDef="{{attributeMap.prop}}">
</ngx-datatable> <th mat-header-cell *matHeaderCellDef>
<img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png"
matTooltip="{{attributeMap.head}}"
alt="{{attributeMap.head}}">
</th>
<td mat-cell *matCellDef="let element"> {{element[attributeMap.prop]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['num', 'name', attributeMap.prop];"></tr>
<tr mat-row *matRowDef="let row; columns: ['num', 'name', attributeMap.prop];"></tr>
</table>
</div>
</div> </div>
<!--<ngx-datatable-->
<!--[rows]="players[attributeMap.prop]"-->
<!--[messages]="emptyMessage"-->
<!--[headerHeight]="cellHeight"-->
<!--[rowHeight]="cellHeight"-->
<!--[cssClasses]='customClasses'-->
<!--[columnMode]="'force'"-->
<!--[scrollbarV]="true"-->
<!--[selectionType]="'single'">-->
<!--<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>-->
<!--<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" prop="{{attributeMap.prop}}">-->
<!--<ng-template ngx-datatable-header-template let-sort="sortFn">-->
<!--<span class="datatable-header-cell-wrapper">-->
<!--<span class="datatable-header-cell-label text-truncate" matTooltip="{{attributeMap.head}}" (click)="sort()">-->
<!--<img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png" alt="{{attributeMap.head}}">-->
<!--</span>-->
<!--</span>-->
<!--</ng-template>-->
<!--<ng-template ngx-datatable-cell-template let-row="row" let-value="value">-->
<!--<span style="padding-left: 7px;">-->
<!--{{value}}-->
<!--</span>-->
<!--</ng-template>-->
<!--</ngx-datatable-column>-->
<!--</ngx-datatable>-->
<!--</div>-->
</div> </div>

View File

@ -30,21 +30,6 @@ export class StatisticHighScoreComponent implements OnInit {
playerAttributeDisplayNames = PlayerUtils.attributeDisplayNames.slice(2, PlayerUtils.attributeDisplayNames.length); playerAttributeDisplayNames = PlayerUtils.attributeDisplayNames.slice(2, PlayerUtils.attributeDisplayNames.length);
cellHeight = 40;
numberColWidth = 60;
nameColWidth = 210;
valueColWidth = 55;
emptyMessage = {emptyMessage: 'Keine Einträge'};
customClasses = {
sortAscending: 'glyphicon glyphicon-triangle-top',
sortDescending: 'glyphicon glyphicon-triangle-bottom',
};
readonly fraction = Fraction; readonly fraction = Fraction;
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
@ -97,7 +82,6 @@ export class StatisticHighScoreComponent implements OnInit {
private filterPlayerAttribute(attribute) { private filterPlayerAttribute(attribute) {
const query = this.searchTerm.value.toLowerCase().split('&'); const query = this.searchTerm.value.toLowerCase().split('&');
return this.playersStored[attribute].filter(player => { return this.playersStored[attribute].filter(player => {
for (let i = 0; i < query.length; i++) { for (let i = 0; i < query.length; i++) {
if (query[i].trim() !== '' && player.name.toLowerCase().includes(query[i].trim())) { if (query[i].trim() !== '' && player.name.toLowerCase().includes(query[i].trim())) {
@ -107,5 +91,4 @@ export class StatisticHighScoreComponent implements OnInit {
return false; return false;
}); });
} }
} }

View File

@ -1,3 +1,11 @@
.scoreboard-table {
height: 68vh;
width:fit-content;
border: 1px solid #dadada;
overflow-x: auto;
margin:auto;
}
.in-table-btn { .in-table-btn {
position: absolute; position: absolute;
margin-top: -5px; margin-top: -5px;

View File

@ -1,9 +1,9 @@
<div class="fade-in" style="border-top: 1px solid #dadada; overflow-x: auto"> <div class="fade-in scoreboard-table">
<table mat-table matSort <table mat-table matSort
[dataSource]="sortedRows" [dataSource]="sortedRows"
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
(matSortChange)="sortData($event)" (matSortChange)="sortScoreboardData($event)"
class="mat-elevation-z8"> class="mat-elevation-z8">
<ng-container matColumnDef="{{tableHead[0].prop}}"> <ng-container matColumnDef="{{tableHead[0].prop}}">

View File

@ -4,6 +4,7 @@ import {Fraction} from '../../../utils/fraction.enum';
import {PlayerUtils} from '../../../utils/player-utils'; import {PlayerUtils} from '../../../utils/player-utils';
import {saveAs} from 'file-saver/FileSaver'; import {saveAs} from 'file-saver/FileSaver';
import {MatSort, Sort} from '@angular/material'; import {MatSort, Sort} from '@angular/material';
import {SortUtils} from '../../../utils/sort-utils';
@Component({ @Component({
selector: 'cc-scoreboard', selector: 'cc-scoreboard',
@ -32,6 +33,8 @@ export class ScoreboardComponent implements OnChanges {
sortedRows = []; sortedRows = [];
currentSort = new MatSort();
displayedColumns = this.tableHead.map(head => head.prop); displayedColumns = this.tableHead.map(head => head.prop);
reorderable = false; reorderable = false;
@ -55,10 +58,8 @@ 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.currentSort.active = 'kill';
const sort = new MatSort(); this.sortScoreboardData(this.currentSort);
sort.active = 'kill';
this.sortData(sort);
// this.elRef.nativeElement // this.elRef.nativeElement
// .querySelector('.datatable-body') // .querySelector('.datatable-body')
// .scrollTo(0, 0); // .scrollTo(0, 0);
@ -76,9 +77,13 @@ export class ScoreboardComponent implements OnChanges {
} else { } else {
this.rows = this.war.players; this.rows = this.war.players;
} }
this.sortScoreboardData(this.currentSort);
} }
sortData(sort: Sort) { sortScoreboardData(sort: MatSort) {
if (sort) {
this.currentSort = sort;
}
const data = this.rows.slice(); const data = this.rows.slice();
if (!sort.active || sort.direction === '') { if (!sort.active || sort.direction === '') {
this.sortedRows = data; this.sortedRows = data;
@ -88,14 +93,10 @@ export class ScoreboardComponent implements OnChanges {
this.sortedRows = data.sort((a, b) => { this.sortedRows = data.sort((a, b) => {
const isAsc = sort.direction === 'desc'; const isAsc = sort.direction === 'desc';
const sortProperty = sort.active; const sortProperty = sort.active;
return this.compare(a[sortProperty], b[sortProperty], isAsc); return SortUtils.compare(a[sortProperty], b[sortProperty], isAsc);
}); });
} }
compare(a, b, isAsc) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
exportCSV() { exportCSV() {
let csvOut = ''; let csvOut = '';
for (let i = 0; i < this.tableHead.length; i++) { for (let i = 0; i < this.tableHead.length; i++) {

View File

@ -0,0 +1,6 @@
export class SortUtils {
public static compare(a, b, isAsc) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
}