Ignore:
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

Location:
trip-planner-front/src/app/explore
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trip-planner-front/src/app/explore/explore-result/explore-result.component.css

    rb738035 r76712b2  
     1.container {
     2    background-color: #F9F2E8;
     3}
  • trip-planner-front/src/app/explore/explore-result/explore-result.component.html

    rb738035 r76712b2  
    1414  </header>
    1515
    16   <main role="main" style="background-color: #F9F2E8;">
     16  <main role="main">
     17    <h1 style="color: #F77D62; display: inline; ">Explore </h1>
     18    <h1 style=" display: inline;">{{place}}</h1>
     19    <div class="lightbox" *ngFor="let l of allLocation">
     20      <div class="row">
     21        <div class="col-lg-6">
     22          <img src="data:image/png;base64,{{l.photo}}"
     23          class="w-100 mb-2 mb-md-4 shadow-1-strong rounded"/>
     24      </div>
     25      </div>
     26    </div>
     27    <div class="container">
     28      <li *ngFor="let location of allLocation">
     29        <ol>{{location.name}}</ol>
     30      </li>
     31    </div>
    1732  </main>
    1833  <br>
  • trip-planner-front/src/app/explore/explore-result/explore-result.component.ts

    rb738035 r76712b2  
    11import { Component, OnInit } from '@angular/core';
     2import { ActivatedRoute } from '@angular/router';
     3import { LocationService } from 'src/app/_services/location.service';
    24
    35@Component({
     
    810export class ExploreResultComponent implements OnInit {
    911
    10   constructor() { }
     12  place: string;
     13  allLocation: any[] = [];
     14
     15  constructor(private route: ActivatedRoute, private locationService : LocationService) {
     16    this.place = '';
     17  }
    1118
    1219  ngOnInit(): void {
     20    this.route.queryParams
     21      .subscribe(params => {
     22        this.place = params.place;
     23      }
     24    );
     25
     26      this.locationService.getAllLocationsSearch(this.place).subscribe(
     27        data => {
     28          this.allLocation = data;
     29        }
     30    )
    1331  }
    1432
  • trip-planner-front/src/app/explore/explore.component.html

    rb738035 r76712b2  
    1414      <ul class="navbar-nav ml-auto">
    1515        <li class="nav-item">
    16           <p-autoComplete [(ngModel)]="text" [suggestions]="filteredCountries" (completeMethod)="search($event)"
    17             field="name" [minLength]="1">
    18             <mat-option *ngFor="let cityName of cities"
    19             [value]="cityName.name">
    20                 {{cityName.name}}
    21             </mat-option></p-autoComplete>
    22           <p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" id="button"></p-button>
    23         </li>
    24         <li class="nav-item">
     16
     17          <form class="example-form">
     18            <mat-form-field class="example-full-width" appearance="fill">
     19              <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto"
     20                [(ngModel)]="selectedPlace">
     21              <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
     22                <mat-option *ngFor="let option of filteredOptions | async" [value]="option"
     23                  (click)="onPlaceSelected(selectedPlace)">
     24                  {{option}}
     25                </mat-option>
     26              </mat-autocomplete>
     27            </mat-form-field>
     28            <p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" id="button">
     29            </p-button>
     30          </form>
    2531        </li>
    2632      </ul>
    2733    </nav>
    2834  </header>
     35
    2936</body>
    3037
  • trip-planner-front/src/app/explore/explore.component.ts

    rb738035 r76712b2  
    11import { Component, OnInit } from '@angular/core';
    2 import { City } from '../_models/city';
    3 import { CityService } from '../_services/city.service';
     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';
    48
    59
     
    1115export class ExploreComponent implements OnInit {
    1216
    13   cities: City[];
    14   filteredCountries: any[];
    1517  text: string;
    1618  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;
    1725
    18   constructor(private cityService: CityService) {
    19     this.cities = [];
    20     this.filteredCountries = [];
     26  constructor(private locationService: LocationService,
     27    private regionService: RegionService, private router: Router) {
    2128    this.text = '';
    2229  }
    2330
    2431  ngOnInit(): void {
    25     this.cityService.getAllCities().subscribe(
    26       cities => {
    27         this.cities = cities;
     32
     33    this.regionService.getAllCitiesAndRegions().subscribe(
     34      data => {
     35        this.regions = data;
    2836      }
     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())),
    2943    );
    3044  }
    3145
    32   search(event) {
    33     let filtered: any[] = [];
    34     let query = event.query;
    35     for (let i = 0; i < this.cities.length; i++) {
    36       let city = this.cities[i];
    37       if (city.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
    38         filtered.push(city);
    39       }
    40     }
    41     this.filteredCountries = filtered;
     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));
    4253  }
    4354
     
    4556    this.loading[index] = true;
    4657    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
    4767  }
    4868}
Note: See TracChangeset for help on using the changeset viewer.