Fix design for campaign overview

api/routes/wars.js

@@ -41,7 +41,7 @@ wars.route('/')
             }
             if (wars) {
               campaigns.forEach(campaign => {
-                let entry = {title: campaign.title, wars: []};
+                let entry = {_id: campaign._id, title: campaign.title, wars: []};
                 wars.forEach((war) => {
                   if (String(campaign._id) === String(war.campaign)) {
                     entry.wars.push(war);

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

@@ -28,8 +28,6 @@ export class StatisticOverviewComponent {
     this.route.params
       .map(params => params['id'])
       .subscribe((id) => {
-        console.log(id);
-
         if (this.warService.campaigns) {
           this.initWars(this.warService.campaigns, id);
         } else {
@@ -41,18 +39,17 @@ export class StatisticOverviewComponent {
   }
 
   initWars(campaigns, id) {
+
     let wars = [];
     let itemsProcessed = 0;
-
-    campaigns
-      .filter(campaign => id === 'all' || campaign._id === id)
-      .forEach(campaign => {
-        wars = wars.concat(campaign.wars);
-        itemsProcessed++;
-        if (itemsProcessed === campaigns.length) {
-          this.initChart(wars);
-        }
-      })
+    campaigns = campaigns.filter(campaign => id === 'all' || campaign._id === id);
+    campaigns.forEach(campaign => {
+      wars = wars.concat(campaign.wars);
+      itemsProcessed++;
+      if (itemsProcessed === campaigns.length) {
+        this.initChart(wars);
+      }
+    })
   }
 
   initChart(wars: any[]) {

static/src/app/statistic/war-list/war-list.component.css

@@ -6,3 +6,10 @@
 .rank-list {
   width: 100%;
 }
+
+:host /deep/ .card-header {
+  background-color: slategray;
+  padding: 15px;
+  color: white;
+  font-weight: 600;
+}

static/src/app/statistic/war-list/war-list.component.html

@@ -6,22 +6,34 @@
   </div>
 
   <div class="fade-in list-entry" style="margin-top: 30px; margin-bottom: 30px;"
-       [ngClass]="{selected : selectedWarId == '0'}" (click)="selectOverview()">
+       [ngClass]="{selected : selectedWarId == 'all'}" (click)="selectOverview('all')">
     <div class="row">
       <div class="col-xs-9">
       <span style="margin:auto">
-        <a>Zusammenfassung</a>
+        <a>Gesamtübersicht</a>
       </span>
       </div>
     </div>
   </div>
 
-  <accordion [closeOthers]="oneAtATime" *ngFor="let campaign of campaigns">
+  <accordion *ngFor="let campaign of campaigns">
     <accordion-group>
-      <div accordion-heading>
+      <div accordion-heading (click)="selectOverview(campaign._id)">
         {{campaign.title}}
         <span class="pull-right">▼</span>
       </div>
+
+      <div class="fade-in list-entry" style="margin-top: -16px; margin-bottom: 10px;"
+           [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
+        <div class="row">
+          <div class="col-xs-9">
+      <span style="margin:auto">
+        <a>Kampagnenübersicht</a>
+      </span>
+          </div>
+        </div>
+      </div>
+
       <div *ngFor="let war of campaign.wars">
         <pjm-war-item
           [war]="war"

static/src/app/statistic/war-list/war-list.component.ts

@@ -11,7 +11,7 @@ import {LoginService} from "../../services/login-service/login-service";
 })
 export class WarListComponent implements OnInit {
 
-  selectedWarId: string | number = '0';
+  selectedWarId: string | number = 'all';
 
   campaigns: Campaign[] = [];
 
@@ -36,14 +36,18 @@ export class WarListComponent implements OnInit {
     this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
   }
 
-  selectWar(warId: string | number) {
-    this.selectedWarId = warId;
-    this.router.navigate([{outlets: {'right': ['war', warId]}}], {relativeTo: this.route});
+  selectWar(warId) {
+    if (this.selectedWarId != warId) {
+      this.selectedWarId = warId;
+      this.router.navigate([{outlets: {'right': ['war', warId]}}], {relativeTo: this.route});
+    }
   }
 
-  selectOverview() {
-    this.selectedWarId = '0';
-    this.router.navigate([{outlets: {'right': ['overview']}}], {relativeTo: this.route});
+  selectOverview(overviewId) {
+    if (this.selectedWarId != overviewId) {
+      this.selectedWarId = overviewId;
+      this.router.navigate([{outlets: {'right': ['overview', overviewId]}}], {relativeTo: this.route});
+    }
   }
 
   deleteWar(war: War) {
@@ -51,14 +55,11 @@ export class WarListComponent implements OnInit {
       this.warService.deleteWar(war._id)
         .subscribe((res) => {
           if (this.selectedWarId === war._id) {
-            this.selectOverview();
+            this.selectOverview('all');
           }
           this.campaigns.splice(this.campaigns.indexOf(war), 1);
         })
     }
   }
 
-  open(event) {
-    console.log(event);
-  }
 }