Changeset 76712b2 for trip-planner-front/src
- Timestamp:
- 01/28/22 18:45:54 (3 years ago)
- Branches:
- master
- Children:
- 6fe77af
- Parents:
- b738035
- Location:
- trip-planner-front/src/app
- Files:
-
- 9 edited
Legend:
- Unmodified
- Added
- Removed
-
trip-planner-front/src/app/_services/location.service.ts
rb738035 r76712b2 61 61 } 62 62 63 getAllLocationsSearch(place : string) : Observable<Location[]>{ 64 let url="http://localhost:8080/api/all"; 65 return this.httpClient.get<Location[]>(url + "?place=" + place); 66 } 63 67 } -
trip-planner-front/src/app/_services/region.service.ts
rb738035 r76712b2 15 15 return this.httpClient.get<Region[]>(url); 16 16 } 17 18 getAllCitiesAndRegions() :Observable<string[]>{ 19 let url = "http://localhost:8080/api/places"; 20 return this.httpClient.get<string[]>(url); 21 } 17 22 } -
trip-planner-front/src/app/app-routing.module.ts
rb738035 r76712b2 1 1 import { NgModule } from '@angular/core'; 2 2 import { RouterModule, Routes } from '@angular/router'; 3 import { ExploreResultComponent } from './explore/explore-result/explore-result.component'; 3 4 import { ExploreComponent } from './explore/explore.component'; 4 5 import { HomepageComponent } from './homepage/homepage.component'; … … 18 19 {path: '', component:LoginComponent}, 19 20 {path: 'location', component: LocationDetailsComponent}, 20 {path: 'explore', component: ExploreComponent} 21 {path: 'explore', component: ExploreComponent}, 22 {path: 'results', component: ExploreResultComponent} 21 23 ]; 22 24 -
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 14 14 </header> 15 15 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> 17 32 </main> 18 33 <br> -
trip-planner-front/src/app/explore/explore-result/explore-result.component.ts
rb738035 r76712b2 1 1 import { Component, OnInit } from '@angular/core'; 2 import { ActivatedRoute } from '@angular/router'; 3 import { LocationService } from 'src/app/_services/location.service'; 2 4 3 5 @Component({ … … 8 10 export class ExploreResultComponent implements OnInit { 9 11 10 constructor() { } 12 place: string; 13 allLocation: any[] = []; 14 15 constructor(private route: ActivatedRoute, private locationService : LocationService) { 16 this.place = ''; 17 } 11 18 12 19 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 ) 13 31 } 14 32 -
trip-planner-front/src/app/explore/explore.component.html
rb738035 r76712b2 14 14 <ul class="navbar-nav ml-auto"> 15 15 <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> 25 31 </li> 26 32 </ul> 27 33 </nav> 28 34 </header> 35 29 36 </body> 30 37 -
trip-planner-front/src/app/explore/explore.component.ts
rb738035 r76712b2 1 1 import { Component, OnInit } from '@angular/core'; 2 import { City } from '../_models/city'; 3 import { CityService } from '../_services/city.service'; 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'; 4 8 5 9 … … 11 15 export class ExploreComponent implements OnInit { 12 16 13 cities: City[];14 filteredCountries: any[];15 17 text: string; 16 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; 17 25 18 constructor(private cityService: CityService) { 19 this.cities = []; 20 this.filteredCountries = []; 26 constructor(private locationService: LocationService, 27 private regionService: RegionService, private router: Router) { 21 28 this.text = ''; 22 29 } 23 30 24 31 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; 28 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())), 29 43 ); 30 44 } 31 45 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)); 42 53 } 43 54 … … 45 56 this.loading[index] = true; 46 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 47 67 } 48 68 } -
trip-planner-front/src/app/locations-form/locations-form.component.html
rb738035 r76712b2 3 3 4 4 5 5 <div class="example-form"> 6 6 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> 70 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> 71 29 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.