Fix design for campaign overview

pull/6/head
Florian Hartwich 2017-08-12 22:27:23 +02:00
parent 7890ef76fb
commit b86f5394d6
5 changed files with 45 additions and 28 deletions

View File

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

View File

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

View File

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

View File

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

View File

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