54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import {Component, OnInit} from "@angular/core";
|
|
import {UsageStatsService} from "../services/usage-stats.service";
|
|
import {UsageStat} from "../entities/usage-stat";
|
|
import {countries} from "../services/countries";
|
|
import {FormControl} from "@angular/forms";
|
|
import {Observable} from "rxjs";
|
|
import {map, startWith} from "rxjs/operators";
|
|
import {ActivatedRoute} from "@angular/router";
|
|
|
|
@Component({
|
|
selector: 'home',
|
|
templateUrl: 'home.component.html',
|
|
styleUrls: ['home.component.css'],
|
|
})
|
|
export class HomeComponent implements OnInit{
|
|
|
|
public stats: UsageStat[] = [];
|
|
public countryFb: FormControl = new FormControl();
|
|
public countries: Observable<string[]>;
|
|
public country: String;
|
|
public display: UsageStat;
|
|
public initSlide: number = 1;
|
|
|
|
constructor(private usageStatsService: UsageStatsService,
|
|
private route: ActivatedRoute) {}
|
|
|
|
ngOnInit() {
|
|
this.route.queryParams.subscribe(params => {
|
|
if(params['slide']) {
|
|
this.initSlide = params['slide'];
|
|
}
|
|
});
|
|
this.usageStatsService.getUsageStats().subscribe(stats => {
|
|
this.stats = stats;
|
|
this.search();
|
|
});
|
|
this.countries = this.countryFb.valueChanges
|
|
.pipe(
|
|
startWith(''),
|
|
map(value => this._filter(value))
|
|
);
|
|
}
|
|
|
|
public search() {
|
|
this.country = this.countryFb.value;
|
|
this.display = this.stats.filter(stat => !this.country || stat.country === this.country)[0];
|
|
}
|
|
|
|
private _filter(value: string): string[] {
|
|
const filterValue = value.toLowerCase();
|
|
return countries.map(value => value.name).filter(option => option.toLowerCase().includes(filterValue));
|
|
}
|
|
}
|