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

Finish basic modulized war detail components

pull/19/head
HardiReady 2017-11-13 00:06:39 +01:00
parent c6d55011b6
commit cb71464462
8 changed files with 79 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
static/src/app/app.routing.ts
View File

@ -58,14 +58,14 @@ export const appRoutes: Routes = [
}, },
/** Redirect Configuration **/ /** Redirect Configuration **/
// { {
// path: '404', path: '404',
// component: NotFoundComponent component: NotFoundComponent
// }, },
// { {
// path: '**', path: '**',
// redirectTo: '/404' redirectTo: '/404'
// } // always configure this last - first matching route gets processed } // always configure this last - first matching route gets processed
]; ];
export const appRouting = RouterModule.forRoot(appRoutes); export const appRouting = RouterModule.forRoot(appRoutes);

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

@ -1,97 +1,3 @@
.vertical-spacer {
height: 205px;
float: left;
width: 4%;
}
.head-field {
font-size: 24px;
margin-top: 10px;
margin-bottom: 10px;
}
@media screen and (min-width: 1500px) {
.vertical-spacer {
width: 15%;
}
}
@media screen and (min-width: 2000px) {
.vertical-spacer {
width: 20%;
}
}
.overview {
overflow-y: scroll;
overflow-x: hidden;
border-left: thin solid lightgrey;
bottom: 20px;
height: 100vh;
}
.player-name {
font-weight: bold;
}
/* ########### TABS ########### */
:host /deep/ .nav-tabs {
padding-left: 35% !important;
}
:host /deep/ .nav-link {
background: #4b4b4b;
color: white;
}
:host /deep/ .nav-link:hover {
background: #afafaf;
color: #000;
}
:host /deep/ .nav-tabs > li.active > a {
background: #222222;
color: white;
}
/* ########### DATATABLE ########### */
:host /deep/ .datatable-header {
background: #222222;
font-weight: 700;
border-radius: 10px 10px 0 0;
color: white;
}
:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label {
padding-left: 8px;
}
:host /deep/ .ngx-datatable .datatable-header {
/*vertical center alignment*/
display: table-cell;
vertical-align: middle;
}
:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > div {
/*vertical alignment*/
position: relative;
top: 10px;
}
:host /deep/ .datatable-body-row {
color: #222222;
border-bottom: 1px solid grey;
cursor: pointer;
}
:host /deep/ .datatable-body-row:hover {
background-color: #f7f7f7;
}
/* ########### CHART-TAB ######## */
.btn-dark { .btn-dark {
background: #4b4b4b; background: #4b4b4b;
color: #f5f5f5; color: #f5f5f5;
@ -117,13 +23,10 @@
} }
.chart-select-group { .chart-select-group {
width: 50%; width: 980px;
margin: auto; margin: auto;
position: inherit;
display: block;
vertical-align: middle;
} }
/*.dropdown-menu > li > a {*/ /*.dropdown-menu > li > a {*/
/*cursor: pointer;*/ /*cursor: pointer;*/
/*}*/ /*}*/

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

@ -18,22 +18,25 @@
<!--</div>--> <!--</div>-->
<div class="fade-in" xmlns="http://www.w3.org/1999/html"> <div class="fade-in" xmlns="http://www.w3.org/1999/html">
<div class="chart-select-group btn-group" (click)="selectChart()"> <div class="chart-select-group">
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" <div class="btn-group" (click)="selectChart()">
btnRadio="{{labelPoints}}">{{labelPoints}}</label> <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
btnRadio="{{labelBudget}}">{{labelBudget}}</label> <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
btnRadio="{{labelKill}}">{{labelKill}}</label> <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label> btnRadio="{{labelKill}}">{{labelKill}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelRevive}}">{{labelRevive}}</label> btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelStabilize}}">{{labelStabilize}}</label> btnRadio="{{labelRevive}}">{{labelRevive}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelTransport}}">{{labelTransport}}</label> btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelFlag}}">{{labelFlag}}</label> btnRadio="{{labelTransport}}">{{labelTransport}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelFlag}}">{{labelFlag}}</label>
</div>
</div> </div>
<div *ngIf="showLineChart" class="chart-container"> <div *ngIf="showLineChart" class="chart-container">

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

@ -22,6 +22,11 @@
background: #4b4b4b; background: #4b4b4b;
} }
.nav-tabs > li:not(.active) > a:hover {
background: #afafaf;
color: #f5f5f5;
}
.nav-link { .nav-link {
cursor: pointer !important; cursor: pointer !important;
color: #FFF !important; color: #FFF !important;

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

@ -50,21 +50,24 @@
</div> </div>
<ul class="nav nav-tabs" style="width:980px; margin:auto"> <ul class="nav nav-tabs" style="width:980px; margin:auto">
<li class="nav-item active"> <li class="nav-item" [ngClass]="{active :tab === 0}" (click)="tab = 0">
<a class="nav-link active"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a> <a class="nav-link"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
</li> </li>
<li class="nav-item"> <li class="nav-item" [ngClass]="{active :tab === 1}" (click)="tab = 1">
<a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a> <a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a>
</li> </li>
</ul> </ul>
<war-detail-fraction *ngIf="war" <div *ngIf="war">
[war]="war"> <war-detail
</war-detail-fraction> *ngIf="tab===0"
[war]="war"
<!--<war-detail *ngIf="war"--> [fractionFilterSelected]="fractionFilterSelected">
<!--[war]="war"--> </war-detail>
<!--[fractionFilterSelected]="fractionFilterSelected">--> <war-detail-fraction
<!--</war-detail>--> *ngIf="tab===1"
[war]="war">
</war-detail-fraction>
</div>
</div> </div>

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

@ -17,6 +17,8 @@ export class WarDetailHeaderComponent {
war: War; war: War;
tab: number;
fractionFilterSelected: string; fractionFilterSelected: string;
playerChart: any[] = []; playerChart: any[] = [];
@ -35,6 +37,7 @@ export class WarDetailHeaderComponent {
.filter(id => id != undefined) .filter(id => id != undefined)
.flatMap(id => this.warService.getWar(id)) .flatMap(id => this.warService.getWar(id))
.subscribe(war => { .subscribe(war => {
this.tab = 0;
this.war = war; this.war = war;
this.fractionFilterSelected = undefined; this.fractionFilterSelected = undefined;
this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor); this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);

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

@ -104,5 +104,5 @@
} }
/*.dropdown-menu > li > a {*/ /*.dropdown-menu > li > a {*/
/*cursor: pointer;*/ /*cursor: pointer;*/
/*}*/ /*}*/

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

@ -1,33 +1,33 @@
<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">
<ngx-datatable <ngx-datatable
style="width:980px; margin:auto" style="width:980px; margin:auto"
[rows]="rows" [rows]="rows"
[sorts]="[{prop: 'kill', dir: 'desc'}]" [sorts]="[{prop: 'kill', dir: 'desc'}]"
[reorderable]="reorderable" [reorderable]="reorderable"
[messages]="{emptyMessage: 'Loading...'}" [messages]="{emptyMessage: 'Loading...'}"
[headerHeight]="cellHeight" [headerHeight]="cellHeight"
[rowHeight]="cellHeight" [rowHeight]="cellHeight"
[cssClasses]='customClasses' [cssClasses]='customClasses'
[selectionType]="'single'" [selectionType]="'single'"
(select)="selectPlayerDetail($event)"> (select)="selectPlayerDetail($event)">
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px"> <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"> <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name" <span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"> [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_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' ? fraction.BLUFOR : fraction.OPFOR}} {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
</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> </div>