Changeset 76712b2 for trip-planner-front


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
Files:
328 added
9 edited

Legend:

Unmodified
Added
Removed

  • trip-planner-front/src/app/_services/location.service.ts

    rb738035 r76712b2  
    6161    }
    6262   
     63    getAllLocationsSearch(place : string) : Observable<Location[]>{
     64        let url="http://localhost:8080/api/all";
     65        return this.httpClient.get<Location[]>(url + "?place=" + place);
     66    }
    6367}

  • trip-planner-front/src/app/_services/region.service.ts

    rb738035 r76712b2  
    1515        return this.httpClient.get<Region[]>(url);
    1616    }
     17
     18    getAllCitiesAndRegions() :Observable<string[]>{
     19        let url = "http://localhost:8080/api/places";
     20        return this.httpClient.get<string[]>(url);
     21    }
    1722}

  • trip-planner-front/src/app/app-routing.module.ts

    rb738035 r76712b2  
    11import { NgModule } from '@angular/core';
    22import { RouterModule, Routes } from '@angular/router';
     3import { ExploreResultComponent } from './explore/explore-result/explore-result.component';
    34import { ExploreComponent } from './explore/explore.component';
    45import { HomepageComponent } from './homepage/homepage.component';
    … …  
    1819  {path: '', component:LoginComponent},
    1920  {path: 'location', component: LocationDetailsComponent},
    20   {path: 'explore', component: ExploreComponent}
     21  {path: 'explore', component: ExploreComponent},
     22  {path: 'results', component: ExploreResultComponent}
    2123];
    2224

  • 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}

  • trip-planner-front/src/app/locations-form/locations-form.component.html

    rb738035 r76712b2  
    33
    44
    5     <div class="example-form">
     5<div class="example-form">
    66
    7       <div class="form-group">
    8         <button class="btn" (click)="chooseCityOption()">
    9           City
    10         </button>
    11         <button class="btn" (click)="chooseRegionOption()">
    12           Region
    13         </button>
    14       </div>
    15       <br>
    16       <br>
    17  
    18       <div *ngIf="cityOption">
    19         <label>
    20           <h5>Please select a city</h5>
    21         </label>
    22         <mat-form-field appearance="fill" class="example-full-width">
    23           <mat-label>Please select a city</mat-label>
    24           <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city" >
    25             <mat-option [value]="city.id" *ngFor="let city of cities" > {{city.name}}</mat-option>
    26           </mat-select>
    27         </mat-form-field>
    28       </div>
    29  
    30       <div *ngIf="regionOption">
    31         <label>
    32           <h5>Please select a region</h5>
    33         </label>
    34         <mat-form-field appearance="fill" class="example-full-width">
    35           <mat-label>Please select a region</mat-label>
    36           <mat-select [(ngModel)]="regionId" placeholder="Select region" name="region">
    37             <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}
    38             </mat-option>
    39           </mat-select>
    40         </mat-form-field>
    41       </div>
    42  
    43       <h5>Who are you travelling with? </h5>
    44       <mat-form-field appearance="fill" class="example-full-width">
    45         <mat-label>Please select a companion</mat-label>
    46         <mat-select [(ngModel)]="companionId" placeholder="Please select a companion" name="company">
    47           <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
    48         </mat-select>
    49       </mat-form-field>
    50  
    51       <h5>How many days are you willing to stay ?</h5>
    52       <mat-form-field class="example-full-width" appearance="fill">
    53         <mat-label>Please select a number of days</mat-label>
    54         <input matInput placeholder="No. Days" type="number" min="1" value="0" max="30" [constraintMaxNumberDays()]
    55           [(ngModel)]="lengthOfStay" name="nomdays" [value] = "lengthOfStay">
    56       </mat-form-field>
    57  
    58       <h5>What are your priorities to visit?</h5>
    59       <mat-chip-list selectable multiple>
    60         <mat-chip #c="matChip" selected *ngFor="let category of categories" (click)="toggleSelection(c, category)"
    61           [ngClass]="{'yellow' : toggle}" name="chips">
    62           <mat-icon *ngIf="!c.selected">check</mat-icon>
    63           {{category.name}}
    64         </mat-chip>
    65       </mat-chip-list>
    66       <br>
    67       <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
    68  
    69     </div>
     7  <div class="form-group">
     8    <button class="btn" (click)="chooseCityOption()">
     9      City
     10    </button>
     11    <button class="btn" (click)="chooseRegionOption()">
     12      Region
     13    </button>
     14  </div>
     15  <br>
     16  <br>
    7017
     18  <div *ngIf="cityOption">
     19    <label>
     20      <h5>Please select a city</h5>
     21    </label>
     22    <mat-form-field appearance="fill" class="example-full-width">
     23      <mat-label>Please select a city</mat-label>
     24      <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city">
     25        <mat-option [value]="city.id" *ngFor="let city of cities"> {{city.name}}</mat-option>
     26      </mat-select>
     27    </mat-form-field>
     28  </div>
    7129
    72  
     30  <div *ngIf="regionOption">
     31    <label>
     32      <h5>Please select a region</h5>
     33    </label>
     34    <mat-form-field appearance="fill" class="example-full-width">
     35      <mat-label>Please select a region</mat-label>
     36      <mat-select [(ngModel)]="regionId" placeholder="Select region" name="region">
     37        <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}
     38        </mat-option>
     39      </mat-select>
     40    </mat-form-field>
     41  </div>
     42
     43  <h5>Who are you travelling with? </h5>
     44  <mat-form-field appearance="fill" class="example-full-width">
     45    <mat-label>Please select a companion</mat-label>
     46    <mat-select [(ngModel)]="companionId" placeholder="Please select a companion" name="company">
     47      <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
     48    </mat-select>
     49  </mat-form-field>
     50
     51  <h5>How many days are you willing to stay ?</h5>
     52  <mat-form-field class="example-full-width" appearance="fill">
     53    <mat-label>Please select a number of days</mat-label>
     54    <input matInput placeholder="No. Days" type="number" min="1" value="0" max="30" [constraintMaxNumberDays()]
     55      [(ngModel)]="lengthOfStay" name="nomdays" [value]="lengthOfStay">
     56  </mat-form-field>
     57
     58  <h5>What are your priorities to visit?</h5>
     59  <mat-chip-list selectable multiple>
     60    <mat-chip #c="matChip" selected *ngFor="let category of categories" (click)="toggleSelection(c, category)"
     61      [ngClass]="{'yellow' : toggle}" name="chips">
     62      <mat-icon *ngIf="!c.selected">check</mat-icon>
     63      {{category.name}}
     64    </mat-chip>
     65  </mat-chip-list>
     66  <br>
     67  <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
     68
     69</div>
Note: See TracChangeset for help on using the changeset viewer.