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 ########### */ /* ########### DATATABLE ########### */
ngx-datatable { ngx-datatable {
width: 1040px; width: 940px;
margin: auto; margin: auto;
height: 68vh; height: 68vh;
} }

View File

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

View File

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 B