[b738035] | 1 | import { Component, OnInit } from '@angular/core';
|
---|
[76712b2] | 2 | import { FormControl } from '@angular/forms';
|
---|
| 3 | import { Router } from '@angular/router';
|
---|
| 4 | import { Observable, Subscription } from 'rxjs';
|
---|
| 5 | import { map, startWith } from 'rxjs/operators';
|
---|
| 6 | import { LocationService } from '../_services/location.service';
|
---|
| 7 | import { RegionService } from '../_services/region.service';
|
---|
[b738035] | 8 |
|
---|
| 9 |
|
---|
| 10 | @Component({
|
---|
| 11 | selector: 'app-explore',
|
---|
| 12 | templateUrl: './explore.component.html',
|
---|
| 13 | styleUrls: ['./explore.component.css']
|
---|
| 14 | })
|
---|
| 15 | export class ExploreComponent implements OnInit {
|
---|
| 16 |
|
---|
| 17 | text: string;
|
---|
| 18 | loading = [false, false, false, false];
|
---|
[76712b2] | 19 | regions: string[] = [];
|
---|
| 20 | filteredOptions: Observable<any[]> = new Observable<any[]>();
|
---|
| 21 | myControl = new FormControl();
|
---|
| 22 | cityName: string = '';
|
---|
| 23 | selectedPlace: string = '';
|
---|
| 24 | thirdSubscription: Subscription = new Subscription;
|
---|
[b738035] | 25 |
|
---|
[76712b2] | 26 | constructor(private locationService: LocationService,
|
---|
| 27 | private regionService: RegionService, private router: Router) {
|
---|
[b738035] | 28 | this.text = '';
|
---|
| 29 | }
|
---|
| 30 |
|
---|
| 31 | ngOnInit(): void {
|
---|
[76712b2] | 32 |
|
---|
| 33 | this.regionService.getAllCitiesAndRegions().subscribe(
|
---|
| 34 | data => {
|
---|
| 35 | this.regions = data;
|
---|
[b738035] | 36 | }
|
---|
| 37 | );
|
---|
[76712b2] | 38 |
|
---|
| 39 | this.filteredOptions = this.myControl.valueChanges.pipe(
|
---|
| 40 | startWith(''),
|
---|
| 41 | map(value => (typeof value === 'string' ? value : value.name)),
|
---|
| 42 | map(name => (name ? this._filter(name) : this.regions.slice())),
|
---|
| 43 | );
|
---|
[b738035] | 44 | }
|
---|
| 45 |
|
---|
[76712b2] | 46 | displayFn(city: string): string {
|
---|
| 47 | return city && city ? city : '';
|
---|
| 48 | }
|
---|
| 49 |
|
---|
| 50 | private _filter(name: string): any[] {
|
---|
| 51 | const filterValue = name.toLowerCase();
|
---|
| 52 | return this.regions.filter(option => option.toLowerCase().includes(filterValue));
|
---|
[b738035] | 53 | }
|
---|
| 54 |
|
---|
| 55 | load(index) {
|
---|
| 56 | this.loading[index] = true;
|
---|
| 57 | setTimeout(() => this.loading[index] = false, 1000);
|
---|
[76712b2] | 58 | this.locationService.getAllLocationsSearch(this.selectedPlace).subscribe(
|
---|
| 59 | data => {
|
---|
| 60 | this.router.navigate(['results'], { queryParams: { place: this.selectedPlace } });
|
---|
| 61 | }
|
---|
| 62 | );
|
---|
| 63 | }
|
---|
| 64 |
|
---|
| 65 | onPlaceSelected(selectedPlace) {
|
---|
| 66 | console.log(this.selectedPlace); // get from view
|
---|
[b738035] | 67 | }
|
---|
| 68 | }
|
---|