init data on highscore
							parent
							
								
									d0bf863fb2
								
							
						
					
					
						commit
						651401787e
					
				| 
						 | 
					@ -14,5 +14,10 @@ export class PlayerService {
 | 
				
			||||||
      .map(res => res.json())
 | 
					      .map(res => res.json())
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  getCampaignHighscore(campaignId: string) {
 | 
				
			||||||
 | 
					    return this.http.get(this.config.apiPlayersPath + '/ranking/' + campaignId)
 | 
				
			||||||
 | 
					      .map(res => res.json())
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,45 +1,22 @@
 | 
				
			||||||
import {Component} from "@angular/core";
 | 
					import {Component} from "@angular/core";
 | 
				
			||||||
import {ActivatedRoute} from "@angular/router";
 | 
					import {ActivatedRoute} from "@angular/router";
 | 
				
			||||||
import {CarouselConfig} from "ngx-bootstrap";
 | 
					import {PlayerService} from "../../services/logs/player.service";
 | 
				
			||||||
import {CampaignService} from "../../services/logs/campaign.service";
 | 
					import {CampaignService} from "../../services/logs/campaign.service";
 | 
				
			||||||
import {ChartUtils} from "../../utils/chart-utils";
 | 
					 | 
				
			||||||
import {Fraction} from "../../utils/fraction.enum";
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@Component({
 | 
					@Component({
 | 
				
			||||||
  selector: 'stats-highscore',
 | 
					  selector: 'stats-highscore',
 | 
				
			||||||
  templateUrl: './highscore.component.html',
 | 
					  templateUrl: './highscore.component.html',
 | 
				
			||||||
  styleUrls: ['./highscore.component.css', '../../style/list-entry.css', '../../style/overview.css'],
 | 
					  styleUrls: ['./highscore.component.css', '../../style/list-entry.css', '../../style/overview.css'],
 | 
				
			||||||
  inputs: ['campaigns'],
 | 
					  inputs: ['campaigns']
 | 
				
			||||||
  providers: [{provide: CarouselConfig, useValue: {interval: false}}]
 | 
					 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
export class StatisticHighScoreComponent {
 | 
					export class StatisticHighScoreComponent {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  id = "";
 | 
					  id = "";
 | 
				
			||||||
  title = "";
 | 
					  title = "";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  pointData: any[] = [];
 | 
					 | 
				
			||||||
  pointSumData: any[] = [];
 | 
					 | 
				
			||||||
  playerData: any[] = [];
 | 
					 | 
				
			||||||
  currentData: any[] = [];
 | 
					 | 
				
			||||||
  activeSlideIndex;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  colorScheme = {
 | 
					 | 
				
			||||||
    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
 | 
					 | 
				
			||||||
  };
 | 
					 | 
				
			||||||
  gradient = false;
 | 
					 | 
				
			||||||
  xAxis = true;
 | 
					 | 
				
			||||||
  yAxis = true;
 | 
					 | 
				
			||||||
  roundDomains = true;
 | 
					 | 
				
			||||||
  legend = true;
 | 
					 | 
				
			||||||
  legendTitle = '';
 | 
					 | 
				
			||||||
  showXAxisLabel = true;
 | 
					 | 
				
			||||||
  showYAxisLabel = true;
 | 
					 | 
				
			||||||
  yAxisLabel = "";
 | 
					 | 
				
			||||||
  autoscale = true;
 | 
					 | 
				
			||||||
  timeline = false;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  constructor(private route: ActivatedRoute,
 | 
					  constructor(private route: ActivatedRoute,
 | 
				
			||||||
 | 
					              private playerService: PlayerService,
 | 
				
			||||||
              private campaignService: CampaignService) {
 | 
					              private campaignService: CampaignService) {
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -49,109 +26,22 @@ export class StatisticHighScoreComponent {
 | 
				
			||||||
      .subscribe((id) => {
 | 
					      .subscribe((id) => {
 | 
				
			||||||
        this.id = id;
 | 
					        this.id = id;
 | 
				
			||||||
        if (this.campaignService.campaigns) {
 | 
					        if (this.campaignService.campaigns) {
 | 
				
			||||||
          this.initWars(this.campaignService.campaigns);
 | 
					          this.initData();
 | 
				
			||||||
        } else {
 | 
					        } else {
 | 
				
			||||||
          this.campaignService.getAllCampaigns().subscribe(campaigns => {
 | 
					          this.campaignService.getAllCampaigns().subscribe(campaigns => {
 | 
				
			||||||
            this.initWars(campaigns);
 | 
					            this.initData()
 | 
				
			||||||
          })
 | 
					          })
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
      });
 | 
					      });
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  initWars(campaigns) {
 | 
					  initData() {
 | 
				
			||||||
    let wars = [];
 | 
					    this.title = this.campaignService.campaigns
 | 
				
			||||||
    let itemsProcessed = 0;
 | 
					      .filter(camp => camp._id === this.id).pop().title;
 | 
				
			||||||
    campaigns = campaigns.filter(campaign => this.id === 'all' || campaign._id === this.id);
 | 
					
 | 
				
			||||||
    campaigns.forEach(campaign => {
 | 
					    this.playerService.getCampaignHighscore(this.id).subscribe(players => {
 | 
				
			||||||
      wars = wars.concat(campaign.wars);
 | 
					      console.log(players);
 | 
				
			||||||
      itemsProcessed++;
 | 
					 | 
				
			||||||
      if (itemsProcessed === campaigns.length) {
 | 
					 | 
				
			||||||
        if (this.id === 'all') {
 | 
					 | 
				
			||||||
          this.title = "Gesamtübersicht";
 | 
					 | 
				
			||||||
          wars.sort((a, b) => {
 | 
					 | 
				
			||||||
            // sort by dates, because older campaign can contain newer war
 | 
					 | 
				
			||||||
            if (a['date'] > (b['date'])) return -1;
 | 
					 | 
				
			||||||
            if (a['date'] < (b['date'])) return 1;
 | 
					 | 
				
			||||||
            return 0;
 | 
					 | 
				
			||||||
          })
 | 
					 | 
				
			||||||
        } else {
 | 
					 | 
				
			||||||
          this.title = campaign.title;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        this.initChart(wars);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    })
 | 
					    })
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  goToSlide(index: number) {
 | 
					 | 
				
			||||||
    switch (index) {
 | 
					 | 
				
			||||||
      case 0:
 | 
					 | 
				
			||||||
        this.currentData = this.pointSumData;
 | 
					 | 
				
			||||||
        this.yAxisLabel = "Gesamtpunkte";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
      case 1:
 | 
					 | 
				
			||||||
        this.currentData = this.pointData;
 | 
					 | 
				
			||||||
        this.yAxisLabel = "Punkte";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
      case 2:
 | 
					 | 
				
			||||||
        this.currentData = this.playerData;
 | 
					 | 
				
			||||||
        this.yAxisLabel = "Anzahl Spieler";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    this.activeSlideIndex = index;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  initChart(wars: any[]) {
 | 
					 | 
				
			||||||
    const pointsObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
 | 
					 | 
				
			||||||
    const pointsSumObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
 | 
					 | 
				
			||||||
    const playersObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    for (let i = wars.length - 1; i >= 0; i--) {
 | 
					 | 
				
			||||||
      const j = wars.length - i - 1;
 | 
					 | 
				
			||||||
      const warDateString = ChartUtils.getShortDateString(wars[i].date);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      pointsObj[0].series.push({
 | 
					 | 
				
			||||||
        name: warDateString,
 | 
					 | 
				
			||||||
        value: wars[i].ptBlufor
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      pointsObj[1].series.push({
 | 
					 | 
				
			||||||
        name: warDateString,
 | 
					 | 
				
			||||||
        value: wars[i].ptOpfor
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      pointsSumObj[0].series.push({
 | 
					 | 
				
			||||||
        name: warDateString,
 | 
					 | 
				
			||||||
        value: pointsSumObj[0].series[j - 1] ?
 | 
					 | 
				
			||||||
          pointsSumObj[0].series[j - 1].value + wars[i].ptBlufor :
 | 
					 | 
				
			||||||
          wars[i].ptBlufor
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      pointsSumObj[1].series.push({
 | 
					 | 
				
			||||||
        name: warDateString,
 | 
					 | 
				
			||||||
        value: pointsSumObj[1].series[j - 1]
 | 
					 | 
				
			||||||
          ? pointsSumObj[1].series[j - 1].value + wars[i].ptOpfor :
 | 
					 | 
				
			||||||
          wars[i].ptOpfor
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      playersObj[0].series.push({
 | 
					 | 
				
			||||||
        name: warDateString,
 | 
					 | 
				
			||||||
        value: wars[i].playersBlufor
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      playersObj[1].series.push({
 | 
					 | 
				
			||||||
        name: warDateString,
 | 
					 | 
				
			||||||
        value: wars[i].playersOpfor
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    this.pointData = pointsObj;
 | 
					 | 
				
			||||||
    this.pointSumData = pointsSumObj;
 | 
					 | 
				
			||||||
    this.playerData = playersObj;
 | 
					 | 
				
			||||||
    if (this.id != 'all') {
 | 
					 | 
				
			||||||
      this.goToSlide(0);
 | 
					 | 
				
			||||||
    } else {
 | 
					 | 
				
			||||||
      this.goToSlide(1);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    Object.assign(this, this.currentData);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  isActiveSlide(index) {
 | 
					 | 
				
			||||||
    return this.activeSlideIndex === index ? '#d9edf7' : 'white'
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,6 +1,5 @@
 | 
				
			||||||
import {Component} from "@angular/core";
 | 
					import {Component} from "@angular/core";
 | 
				
			||||||
import {ActivatedRoute} from "@angular/router";
 | 
					import {ActivatedRoute} from "@angular/router";
 | 
				
			||||||
import {CarouselConfig} from "ngx-bootstrap";
 | 
					 | 
				
			||||||
import {CampaignService} from "../../services/logs/campaign.service";
 | 
					import {CampaignService} from "../../services/logs/campaign.service";
 | 
				
			||||||
import {ChartUtils} from "../../utils/chart-utils";
 | 
					import {ChartUtils} from "../../utils/chart-utils";
 | 
				
			||||||
import {Fraction} from "../../utils/fraction.enum";
 | 
					import {Fraction} from "../../utils/fraction.enum";
 | 
				
			||||||
| 
						 | 
					@ -10,8 +9,7 @@ import {Fraction} from "../../utils/fraction.enum";
 | 
				
			||||||
  selector: 'stats-overview',
 | 
					  selector: 'stats-overview',
 | 
				
			||||||
  templateUrl: './stats-overview.component.html',
 | 
					  templateUrl: './stats-overview.component.html',
 | 
				
			||||||
  styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css', '../../style/overview.css'],
 | 
					  styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css', '../../style/overview.css'],
 | 
				
			||||||
  inputs: ['campaigns'],
 | 
					  inputs: ['campaigns']
 | 
				
			||||||
  providers: [{provide: CarouselConfig, useValue: {interval: false}}]
 | 
					 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
export class StatisticOverviewComponent {
 | 
					export class StatisticOverviewComponent {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue