Changeset 76712b2 for trip-planner-front/src/app/explore/explore.component.ts

Timestamp:

01/28/22 18:45:54 (3 years ago)

Author:

Ema <ema_spirova@…>

Branches:

master

Children:

6fe77af

Parents:

b738035

Message:

search all locations by city or region

File:

• trip-planner-front/src/app/explore/explore.component.ts (modified) (3 diffs)

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

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
-import { City } from '../_models/city';
-import { CityService } from '../_services/city.service';
+import { FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { LocationService } from '../_services/location.service';
+import { RegionService } from '../_services/region.service';
 
 
@@ -11 +15 @@
 export class ExploreComponent implements OnInit {
 
-  cities: City[];
-  filteredCountries: any[];
   text: string;
   loading = [false, false, false, false];
+  regions: string[] = [];
+  filteredOptions: Observable<any[]> = new Observable<any[]>();
+  myControl = new FormControl();
+  cityName: string = '';
+  selectedPlace: string = '';
+  thirdSubscription: Subscription = new Subscription;
 
-  constructor(private cityService: CityService) {
-    this.cities = [];
-    this.filteredCountries = [];
+  constructor(private locationService: LocationService,
+    private regionService: RegionService, private router: Router) {
     this.text = '';
   }
 
   ngOnInit(): void {
-    this.cityService.getAllCities().subscribe(
-      cities => {
-        this.cities = cities;
+
+    this.regionService.getAllCitiesAndRegions().subscribe(
+      data => {
+        this.regions = data;
       }
+    );
+
+    this.filteredOptions = this.myControl.valueChanges.pipe(
+      startWith(''),
+      map(value => (typeof value === 'string' ? value : value.name)),
+      map(name => (name ? this._filter(name) : this.regions.slice())),
     );
   }
 
-  search(event) {
-    let filtered: any[] = [];
-    let query = event.query;
-    for (let i = 0; i < this.cities.length; i++) {
-      let city = this.cities[i];
-      if (city.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
-        filtered.push(city);
-      }
-    }
-    this.filteredCountries = filtered;
+  displayFn(city: string): string {
+    return city && city ? city : '';
+  }
+
+  private _filter(name: string): any[] {
+    const filterValue = name.toLowerCase();
+    return this.regions.filter(option => option.toLowerCase().includes(filterValue));
   }
 
@@ -45 +56 @@
     this.loading[index] = true;
     setTimeout(() => this.loading[index] = false, 1000);
+    this.locationService.getAllLocationsSearch(this.selectedPlace).subscribe(
+      data => {
+        this.router.navigate(['results'], { queryParams: { place: this.selectedPlace } });
+      }
+    );
+  }
+
+  onPlaceSelected(selectedPlace) {
+    console.log(this.selectedPlace); // get from view 
   }
 }