Finish basic modulized war detail components
parent
c6d55011b6
commit
cb71464462
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;*/
|
||||
/*}*/
|
||||
|
|
|
|||
|
|
@ -18,14 +18,16 @@
|
|||
<!--</div>-->
|
||||
|
||||
<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">
|
||||
<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="{{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"
|
||||
|
|
@ -35,6 +37,7 @@
|
|||
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
|
||||
btnRadio="{{labelFlag}}">{{labelFlag}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="showLineChart" class="chart-container">
|
||||
<ngx-charts-line-chart
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
<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>
|
||||
|
||||
<!--<war-detail *ngIf="war"-->
|
||||
<!--[war]="war"-->
|
||||
<!--[fractionFilterSelected]="fractionFilterSelected">-->
|
||||
<!--</war-detail>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -104,5 +104,5 @@
|
|||
}
|
||||
|
||||
/*.dropdown-menu > li > a {*/
|
||||
/*cursor: pointer;*/
|
||||
/*cursor: pointer;*/
|
||||
/*}*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue