Use material toggle in campaign overview

static/src/app/statistic/campaign/overview/campaign-overview.component.css

@@ -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 {

static/src/app/statistic/campaign/overview/campaign-overview.component.html

@@ -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

static/src/app/statistic/campaign/overview/campaign-overview.component.ts

@@ -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';
-  }
 }

static/src/app/statistic/stats.routing.ts

@@ -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 = [