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

View File

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

View File

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

View File

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

View File

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