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

Use material toggle in campaign overview

pull/38/head
HardiReady 2018-08-04 12:54:37 +02:00
parent ae7dd6afaf
commit cdc2fb35ae
4 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/src/app/statistic/campaign/overview/stats-overview.component.css → static/src/app/statistic/campaign/overview/campaign-overview.component.css
View File

@ -6,13 +6,13 @@
padding-left: 5%;
}
:host /deep/ .carousel-indicators {
display: none;
mat-button-toggle.mat-button-toggle-checked {
background: #ffffff;
}
:host /deep/ .carousel-control {
width: 5%;
cursor: pointer;
mat-button-toggle {
color: #666666;
background: #e7e7e7;
}
:host /deep/ .chart-legend {

23
static/src/app/statistic/campaign/overview/stats-overview.component.html → static/src/app/statistic/campaign/overview/campaign-overview.component.html
View File

@ -1,14 +1,19 @@
<div class="slide-chart-container" style="height: 100px;padding-top: 20px; margin-top: 10px;">
<div class="btn btn-default" [style.background]="isActiveSlide(0)"
(click)="goToSlide(0)" *ngIf="id != 'all'">Gesamtpunktzahl
</div>
<div class="btn btn-default" [style.background]="isActiveSlide(1)"
(click)="goToSlide(1)">Punkte je Schlacht
</div>
<div class="btn btn-default" [style.background]="isActiveSlide(2)"
(click)="goToSlide(2)">Spielerzahlen
</div>
<mat-button-toggle-group #viewToggle="matButtonToggleGroup"
[value]="this.id !== 'all' ? '0' : '1'"
(change)="goToSlide(viewToggle.value)">
<mat-button-toggle *ngIf="id != 'all'" value="0">
Gesamtpunktzahl
</mat-button-toggle>
<mat-button-toggle value="1">
Punkte je Schlacht
</mat-button-toggle>
<mat-button-toggle value="2">
Spielerzahlen
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div class="fade-in">
<div class="slide-chart-container">
<ngx-charts-line-chart

16
static/src/app/statistic/campaign/overview/stats-overview.component.ts → static/src/app/statistic/campaign/overview/campaign-overview.component.ts
View File

@ -6,9 +6,9 @@ import {Fraction} from '../../../utils/fraction.enum';
@Component({
selector: 'stats-overview',
templateUrl: './stats-overview.component.html',
styleUrls: ['./stats-overview.component.css', '../../../style/list-entry.css', '../../../style/overview.css']
selector: 'cc-campaign-overview',
templateUrl: './campaign-overview.component.html',
styleUrls: ['./campaign-overview.component.css']
})
export class StatisticOverviewComponent implements OnInit {
@ -21,7 +21,6 @@ export class StatisticOverviewComponent implements OnInit {
pointSumData: any[] = [];
playerData: any[] = [];
currentData: any[] = [];
activeSlideIndex;
colorScheme = {
domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
@ -86,8 +85,8 @@ export class StatisticOverviewComponent implements OnInit {
});
}
goToSlide(index: number) {
switch (index) {
goToSlide(index) {
switch (parseInt(index, 10)) {
case 0:
this.currentData = this.pointSumData;
this.yAxisLabel = 'Gesamtpunkte';
@ -101,7 +100,6 @@ export class StatisticOverviewComponent implements OnInit {
this.yAxisLabel = 'Anzahl Spieler';
break;
}
this.activeSlideIndex = index;
}
initChart(wars: any[]) {
@ -153,8 +151,4 @@ export class StatisticOverviewComponent implements OnInit {
}
Object.assign(this, this.currentData);
}
isActiveSlide(index) {
return this.activeSlideIndex === index ? '#d9edf7' : 'white';
}
}

2
static/src/app/statistic/stats.routing.ts
View File

@ -1,7 +1,6 @@
import {RouterModule, Routes} from '@angular/router';
import {StatisticComponent} from './stats.component';
import {WarListComponent} from './war/war-list/war-list.component';
import {StatisticOverviewComponent} from './campaign/overview/stats-overview.component';
import {WarItemComponent} from './war/war-list/war-item.component';
import {ModuleWithProviders} from '@angular/core';
import {CampaignSubmitComponent} from './campaign/campaign-submit/campaign-submit.component';
@ -14,6 +13,7 @@ import {WarHeaderComponent} from './war/war-header/war-header.component';
import {WarEditComponent} from './war/war-edit/war-edit.component';
import {LoginGuardMT} from '../login';
import {CampaignNavigationComponent} from './campaign/campaign-navigation/campaign-navigation.component';
import {StatisticOverviewComponent} from './campaign/overview/campaign-overview.component';
export const statsRoutes: Routes = [