Use custom table header for scoreboard

pull/34/head
HardiReady 2018-04-22 13:31:38 +02:00
parent f4917941a6
commit bd0489d6c2
5 changed files with 86 additions and 12 deletions

View File

@ -5,7 +5,7 @@
/* ########### DATATABLE ########### */
ngx-datatable {
width: 1040px;
width: 940px;
margin: auto;
height: 68vh;
}

View File

@ -18,20 +18,92 @@
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="{{tableHead[1]}}" prop="fraction" [width]="100">
<ngx-datatable-column name="{{tableHead[1]}}" prop="fraction" [width]="90">
<ng-template ngx-datatable-cell-template let-value="value">
{{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[2]}}" prop="kill"></ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[3]}}" prop="friendlyFire"></ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[4]}}" prop="vehicleLight"></ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[5]}}" prop="vehicleHeavy"></ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[6]}}" prop="vehicleAir"></ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[7]}}" prop="revive"></ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[8]}}" prop="flagTouch"></ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[9]}}" prop="death"></ngx-datatable-column>
<ngx-datatable-column [width]="70" name="{{tableHead[10]}}" prop="respawn"></ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="kill">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[2]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="friendlyFire">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[3]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="vehicleLight">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[4]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="vehicleHeavy">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[5]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="vehicleAir">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[6]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="revive">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[7]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="flagTouch">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[8]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="death">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[9]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="columnWidth" prop="respawn">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{tableHead[10]}}" (click)="sort()">
<img src="../../../../assets/tank.png">
</span>
</span>
</ng-template>
</ngx-datatable-column>
<!--<ngx-datatable-column [width]="80" name="" prop="name">-->
<!--<ng-template ngx-datatable-cell-template let-value="value">-->
<!--<span class="btn btn-sm btn-default in-table-btn disabled">Detail</span>-->

View File

@ -26,6 +26,8 @@ export class ScoreboardComponent implements OnChanges {
cellHeight = 40;
columnWidth = 65;
rows = [];
reorderable = false;

View File

@ -28,7 +28,7 @@ span.tab-control {
}
.nav-tabs {
width: 980px;
width: 920px;
margin: auto;
clear: both;
border-bottom: 0;

BIN
static/src/assets/tank.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 B