hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Add tabs

pull/15/head
HardiReady 2017-10-28 20:25:58 +02:00
parent 55a4662b40
commit e294e3212e
4 changed files with 70 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/src/app/statistic/stats.module.ts
View File

@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
import {statsRouterModule, statsRoutingComponents} from "./stats.routing"; import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
import {WarService} from "../services/logs/war.service"; import {WarService} from "../services/logs/war.service";
import {NgxChartsModule} from "@swimlane/ngx-charts"; import {NgxChartsModule} from "@swimlane/ngx-charts";
import {AccordionModule, CarouselModule} from "ngx-bootstrap"; import {AccordionModule, TabsModule} from "ngx-bootstrap";
import {CampaignService} from "../services/logs/campaign.service"; import {CampaignService} from "../services/logs/campaign.service";
import {NgxDatatableModule} from "@swimlane/ngx-datatable"; import {NgxDatatableModule} from "@swimlane/ngx-datatable";
import {PlayerService} from "../services/logs/player.service"; import {PlayerService} from "../services/logs/player.service";
@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
@NgModule({ @NgModule({
declarations: statsRoutingComponents, declarations: statsRoutingComponents,
imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule], AccordionModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
providers: [WarService, CampaignService, PlayerService, LogsService] providers: [WarService, CampaignService, PlayerService, LogsService]
}) })
export class StatsModule { export class StatsModule {

23
static/src/app/statistic/war-detail/war-detail.component.css
View File

@ -1,5 +1,5 @@
.vertical-spacer { .vertical-spacer {
height: 100vh; height: 205px;
float: left; float: left;
width: 4%; width: 4%;
} }
@ -42,6 +42,27 @@
color: blue; color: blue;
} }
/* ########### TABS ########### */
:host /deep/ .nav-tabs {
padding-left: 35%!important;
}
:host /deep/ .nav-link {
background: #4b4b4b;
color: white;
}
:host /deep/ .nav-link:hover {
background: aliceblue;
color: #000;
}
:host /deep/ .nav-tabs>li.active>a{
background: #222222;
color: white;
}
/* ########### DATATABLE ########### */ /* ########### DATATABLE ########### */
:host /deep/ .datatable-header { :host /deep/ .datatable-header {

71
static/src/app/statistic/war-detail/war-detail.component.html
View File

@ -1,6 +1,5 @@
<div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html"> <div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
<div class=vertical-spacer> <div class=vertical-spacer></div>
</div>
<div style="overflow:hidden"> <div style="overflow:hidden">
<div style="width: 920px;min-height: 205px;"> <div style="width: 920px;min-height: 205px;">
<h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2> <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
@ -51,38 +50,52 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<ngx-datatable <tabset>
[rows]="rows" <tab>
[sorts]="[{prop: 'kill', dir: 'desc'}]" <template tabHeading>
[reorderable]="reorderable" <img src="../../../assets/scoreboard-btn.png"> Scoreboard
[messages]="{emptyMessage: 'Loading...'}" </template>
[headerHeight]="cellHeight" <div class=vertical-spacer></div>
[rowHeight]="cellHeight" <ngx-datatable
[cssClasses]='customClasses' [rows]="rows"
[selectionType]="'single'" [sorts]="[{prop: 'kill', dir: 'desc'}]"
(select)="selectPlayerDetail($event)"> [reorderable]="reorderable"
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px"> [messages]="{emptyMessage: 'Loading...'}"
<ng-template ngx-datatable-cell-template let-row="row" let-value="value"> [headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[selectionType]="'single'"
(select)="selectPlayerDetail($event)">
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name" <span class="player-name"
[ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'"> [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
{{value}} {{value}}
</span> </span>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="Fraktion" prop="fraction" [width]="100"> <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
<ng-template ngx-datatable-cell-template let-value="value"> <ng-template ngx-datatable-cell-template let-value="value">
{{value === 'BLUFOR' ? 'NATO' : 'CSAT'}} {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column> <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
<ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column> <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column> <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column> <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column> <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column> <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
</ngx-datatable> </ngx-datatable>
</div> </tab>
<tab (select)="loadFractionData()">
<template tabHeading>
<img src="../../../assets/fraction-btn.png"> Fraktionen
</template>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
</div> </div>

4
static/src/app/statistic/war-detail/war-detail.component.ts
View File

@ -83,4 +83,8 @@ export class WarDetailComponent {
} }
} }
loadFractionData() {
console.log('load data from server')
}
} }