From b86f5394d6d6f18e422ec56759034a18faa4d052 Mon Sep 17 00:00:00 2001
From: Florian Hartwich <hardi@noarch.de>
Date: Sat, 12 Aug 2017 22:27:23 +0200
Subject: [PATCH] Fix design for campaign overview

---
 api/routes/wars.js                            |  2 +-
 .../overview/stats-overview.component.ts      | 21 ++++++++---------
 .../statistic/war-list/war-list.component.css |  7 ++++++
 .../war-list/war-list.component.html          | 20 ++++++++++++----
 .../statistic/war-list/war-list.component.ts  | 23 ++++++++++---------
 5 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/api/routes/wars.js b/api/routes/wars.js
index e98ca43..d50277c 100644
--- a/api/routes/wars.js
+++ b/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);
diff --git a/static/src/app/statistic/overview/stats-overview.component.ts b/static/src/app/statistic/overview/stats-overview.component.ts
index 9187fa5..2243779 100644
--- a/static/src/app/statistic/overview/stats-overview.component.ts
+++ b/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[]) {
diff --git a/static/src/app/statistic/war-list/war-list.component.css b/static/src/app/statistic/war-list/war-list.component.css
index c072fcd..3a4d680 100644
--- a/static/src/app/statistic/war-list/war-list.component.css
+++ b/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;
+}
diff --git a/static/src/app/statistic/war-list/war-list.component.html b/static/src/app/statistic/war-list/war-list.component.html
index be9b7e2..d1e440c 100644
--- a/static/src/app/statistic/war-list/war-list.component.html
+++ b/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"
diff --git a/static/src/app/statistic/war-list/war-list.component.ts b/static/src/app/statistic/war-list/war-list.component.ts
index 0b8c99d..cb95e0e 100644
--- a/static/src/app/statistic/war-list/war-list.component.ts
+++ b/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);
-  }
 }