source: trip-planner-front/src/app/explore/explore.component.ts

Last change on this file was 76712b2, checked in by Ema <ema_spirova@…>, 3 years ago

search all locations by city or region

  • Property mode set to 100644
File size: 2.0 KB
Line 
1import { Component, OnInit } from '@angular/core';
2import { FormControl } from '@angular/forms';
3import { Router } from '@angular/router';
4import { Observable, Subscription } from 'rxjs';
5import { map, startWith } from 'rxjs/operators';
6import { LocationService } from '../_services/location.service';
7import { RegionService } from '../_services/region.service';
8
9
10@Component({
11 selector: 'app-explore',
12 templateUrl: './explore.component.html',
13 styleUrls: ['./explore.component.css']
14})
15export class ExploreComponent implements OnInit {
16
17 text: string;
18 loading = [false, false, false, false];
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;
25
26 constructor(private locationService: LocationService,
27 private regionService: RegionService, private router: Router) {
28 this.text = '';
29 }
30
31 ngOnInit(): void {
32
33 this.regionService.getAllCitiesAndRegions().subscribe(
34 data => {
35 this.regions = data;
36 }
37 );
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 );
44 }
45
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));
53 }
54
55 load(index) {
56 this.loading[index] = true;
57 setTimeout(() => this.loading[index] = false, 1000);
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
67 }
68}
Note: See TracBrowser for help on using the repository browser.