import {Component, Input, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {PlayerService} from '../../../services/logs/player.service'; import {CampaignService} from '../../../services/logs/campaign.service'; import {Fraction} from '../../../utils/fraction.enum'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; import {Player} from '../../../models/model-interfaces'; @Component({ selector: 'stats-highscore', templateUrl: './highscore.component.html', styleUrls: ['./highscore.component.css', '../../../style/list-entry.css', '../../../style/overview.css'] }) export class StatisticHighScoreComponent implements OnInit { @Input() campaigns; id = ''; title = ''; searchTerm = new FormControl(); players: Player = {}; playersStored = {}; cellHeight = 40; numberColWidth = 60; nameColWidth = 210; valueColWidth = 110; emptyMessage = {emptyMessage: 'Keine Einträge'}; customClasses = { sortAscending: 'glyphicon glyphicon-triangle-top', sortDescending: 'glyphicon glyphicon-triangle-bottom', }; readonly fraction = Fraction; constructor(private route: ActivatedRoute, private playerService: PlayerService, private campaignService: CampaignService) { } ngOnInit() { this.route.params .map(params => params['id']) .subscribe((id) => { this.id = id; if (this.campaignService.campaigns) { this.initData(); } else { this.campaignService.getAllCampaigns().subscribe(campaigns => { this.initData(); }); } }); const searchTermStream = this.searchTerm.valueChanges.debounceTime(400); Observable.merge(searchTermStream) .distinctUntilChanged().map(query => this.filterPlayers()) .subscribe(); } initData() { this.title = this.campaignService.campaigns .filter(camp => camp._id === this.id).pop().title; this.playerService.getCampaignHighscore(this.id).subscribe(players => { this.players = players; this.playersStored = players; }); } filterPlayers() { if (!this.searchTerm.value || this.searchTerm.value === '') { this.players = this.playersStored; } else { this.players = { kill: this.filterPlayerAttribute('kill'), friendlyFire: this.filterPlayerAttribute('friendlyFire'), vehicleLight: this.filterPlayerAttribute('vehicleLight'), vehicleHeavy: this.filterPlayerAttribute('vehicleLight'), vehicleAir: this.filterPlayerAttribute('vehicleLight'), death: this.filterPlayerAttribute('death'), respawn: this.filterPlayerAttribute('respawn'), revive: this.filterPlayerAttribute('revive'), flagTouch: this.filterPlayerAttribute('flagTouch') }; } } private filterPlayerAttribute(attribute) { const query = this.searchTerm.value.toLowerCase().split('&'); return this.playersStored[attribute].filter(player => { for (let i = 0; i < query.length; i++) { if (query[i].trim() !== '' && player.name.toLowerCase().includes(query[i].trim())) { return true; } } return false; }); } }