opt-cc/static/src/app/statistic/campaign/highscore/highscore.component.html

52 lines
1.9 KiB
HTML

<div class="highscore-container fade-in">
<div class="input-group search-field">
<input id="search-tasks"
markForCheck
placeholder="{{'stats.highscore.filter.placholder' | translate}}"
type="text" #query class="form-control"
(keyup.enter)="filterPlayers()"
[formControl]="searchTerm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"
(click)="filterPlayers()">
{{'stats.highscore.filter.button' | translate}}
</button>
</span>
</div>
<div *ngFor="let attributeMap of playerAttributeDisplayNames">
<div class="highscore-table-container">
<table mat-table matSort
[dataSource]="players[attributeMap.prop]"
class="mat-elevation-z8 highscore-table">
<ng-container matColumnDef="num">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let element">{{element.num}}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>{{'stats.highscore.header.name' | translate}}</th>
<td mat-cell *matCellDef="let element"
[style.color]="fractionHelpers.getFractionColor(element['fraction'])">
{{element.name}}
</td>
</ng-container>
<ng-container matColumnDef="{{attributeMap.prop}}">
<th mat-header-cell *matHeaderCellDef>
<mat-icon svgIcon="{{attributeMap.prop}}"
matTooltip="{{attributeMap.head | translate}}">
</mat-icon>
</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>