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

57 lines
2.1 KiB
HTML

<div class="highscore-container fade-in">
<h2>{{title}} ⟶ Highscore</h2>
<div class="input-group search-field">
<input id="search-tasks"
placeholder="Spielername (mehrere mit '&' trennen)"
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()">
Filter
</button>
</span>
</div>
<div *ngFor="let attributeMap of playerAttributeDisplayNames">
<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>