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 **/
// {
// path: '404',
// component: NotFoundComponent
// },
// {
// path: '**',
// redirectTo: '/404'
// } // always configure this last - first matching route gets processed
{
path: '404',
component: NotFoundComponent
},
{
path: '**',
redirectTo: '/404'
} // always configure this last - first matching route gets processed
];
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 {
background: #4b4b4b;
color: #f5f5f5;
@ -117,13 +23,10 @@
}
.chart-select-group {
width: 50%;
width: 980px;
margin: auto;
position: inherit;
display: block;
vertical-align: middle;
}
/*.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 class="fade-in" xmlns="http://www.w3.org/1999/html">
<div class="chart-select-group btn-group" (click)="selectChart()">
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelPoints}}">{{labelPoints}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelBudget}}">{{labelBudget}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelKill}}">{{labelKill}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelRevive}}">{{labelRevive}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelTransport}}">{{labelTransport}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelFlag}}">{{labelFlag}}</label>
<div class="chart-select-group">
<div class="btn-group" (click)="selectChart()">
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelPoints}}">{{labelPoints}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelBudget}}">{{labelBudget}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelKill}}">{{labelKill}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelRevive}}">{{labelRevive}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelTransport}}">{{labelTransport}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelFlag}}">{{labelFlag}}</label>
</div>
</div>
<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;
}
.nav-tabs > li:not(.active) > a:hover {
background: #afafaf;
color: #f5f5f5;
}
.nav-link {
cursor: pointer !important;
color: #FFF !important;

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

@ -50,21 +50,24 @@
</div>
<ul class="nav nav-tabs" style="width:980px; margin:auto">
<li class="nav-item active">
<a class="nav-link active"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
<li class="nav-item" [ngClass]="{active :tab === 0}" (click)="tab = 0">
<a class="nav-link"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
</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>
</li>
</ul>
<war-detail-fraction *ngIf="war"
[war]="war">
</war-detail-fraction>
<!--<war-detail *ngIf="war"-->
<!--[war]="war"-->
<!--[fractionFilterSelected]="fractionFilterSelected">-->
<!--</war-detail>-->
<div *ngIf="war">
<war-detail
*ngIf="tab===0"
[war]="war"
[fractionFilterSelected]="fractionFilterSelected">
</war-detail>
<war-detail-fraction
*ngIf="tab===1"
[war]="war">
</war-detail-fraction>
</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;
tab: number;
fractionFilterSelected: string;
playerChart: any[] = [];
@ -35,6 +37,7 @@ export class WarDetailHeaderComponent {
.filter(id => id != undefined)
.flatMap(id => this.warService.getWar(id))
.subscribe(war => {
this.tab = 0;
this.war = war;
this.fractionFilterSelected = undefined;
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 {*/
/*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">
<ngx-datatable
style="width:980px; margin:auto"
[rows]="rows"
[sorts]="[{prop: 'kill', dir: 'desc'}]"
[reorderable]="reorderable"
[messages]="{emptyMessage: 'Loading...'}"
[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">
<ngx-datatable
style="width:980px; margin:auto"
[rows]="rows"
[sorts]="[{prop: 'kill', dir: 'desc'}]"
[reorderable]="reorderable"
[messages]="{emptyMessage: 'Loading...'}"
[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"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
<ng-template ngx-datatable-cell-template let-value="value">
{{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
</ng-template>
</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]="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="Tod" prop="death"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
</ngx-datatable>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
<ng-template ngx-datatable-cell-template let-value="value">
{{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
</ng-template>
</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]="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="Tod" prop="death"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
</ngx-datatable>
</div>