Changeset eed0bf8 for trip-planner-front/src/app
- Timestamp:
- 10/18/21 00:19:16 (3 years ago)
- Branches:
- master
- Children:
- 188ee53
- Parents:
- fa375fe
- Location:
- trip-planner-front/src/app
- Files:
-
- 3 added
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trip-planner-front/src/app/locations-form/locations-form.component.html
rfa375fe reed0bf8 1 1 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 2 2 3 <form class="example-form"> 4 <label><h5>Please select a place</h5></label> 3 <div class="example-form"> 4 5 <div class="d-block"> 6 <button class="btn" (click)="chooseCityOption()" > 7 City 8 </button> 9 <button class="btn" (click)="chooseRegionOption()"> 10 Region 11 </button> 12 </div> 13 <br> 14 <br> 15 <!-- 5 16 <mat-form-field class="example-full-width" appearance="fill"> 6 17 <mat-label>Please select a place</mat-label> … … 17 28 </mat-autocomplete> 18 29 </mat-form-field> 30 --> 31 32 33 <div *ngIf="cityOption"> 34 <label><h5>Please select a city</h5></label> 35 <mat-form-field appearance="fill" class="example-full-width"> 36 <mat-label>Please select a city</mat-label> 37 <mat-select [(ngModel)]="locationId" placeholder="Select city"> 38 <mat-option [value]="city.id" *ngFor="let city of cities" [value]="city.id"> {{city.name}}</mat-option> 39 </mat-select> 40 </mat-form-field> 41 </div> 42 43 <div *ngIf="regionOption"> 44 <label><h5>Please select a region</h5></label> 45 <mat-form-field appearance="fill" class="example-full-width"> 46 <mat-label>Please select a region</mat-label> 47 <mat-select [(ngModel)]="regionId" placeholder="Select region"> 48 <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}</mat-option> 49 </mat-select> 50 </mat-form-field> 51 </div> 19 52 20 53 <h5>Who are you travelling with? </h5> 21 54 <mat-form-field appearance="fill" class="example-full-width"> 22 55 <mat-label>Please select a companion</mat-label> 23 <mat-select [ disabled]="disableSelect.value">24 <mat-option value="option1" *ngFor="let companion of companions">{{companion.type}}</mat-option>56 <mat-select [(ngModel)]="companionId" placeholder="Please select a companion"> 57 <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option> 25 58 </mat-select> 26 59 </mat-form-field> … … 29 62 <mat-form-field class="example-full-width" appearance="fill"> 30 63 <mat-label>Please select a number of days</mat-label> 31 <input matInput placeholder="No. D ys" type="number">64 <input matInput placeholder="No. Days" type="number" [(ngModel)]="lengthOfStay"> 32 65 </mat-form-field> 33 66 34 67 <h5>What are your priorities to visit?</h5> 35 68 <mat-chip-list selectable multiple> 36 <mat-chip #c="matChip" color="accent"selected *ngFor="let category of categories"37 (click)="toggleSelection(c )">38 <mat-icon *ngIf=" c.selected">check</mat-icon>69 <mat-chip #c="matChip" selected *ngFor="let category of categories" 70 (click)="toggleSelection(c, category)" > 71 <mat-icon *ngIf="!c.selected" >check</mat-icon> 39 72 {{category.name}} 40 73 </mat-chip> 41 74 </mat-chip-list> 42 <button mat-raised-button color="primary">Create my planner</button> 43 </form> 75 <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button> 76 77 78 </div> 79 -
trip-planner-front/src/app/locations-form/locations-form.component.ts
rfa375fe reed0bf8 13 13 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; 14 14 import { MatChip } from '@angular/material/chips'; 15 import { LocationService } from '../_services/location.service'; 16 import { Region } from '../_models/region'; 17 import { RegionService } from '../_services/region.service'; 15 18 16 19 @Component({ … … 23 26 myControl = new FormControl(); 24 27 cities: City[]; 25 countries: Country[];28 regions: Region[]; 26 29 companions: Companion[]; 27 30 categories: Category[]; 28 31 filteredOptions: Observable<City[]>; 29 32 disableSelect = new FormControl(false); 33 chipsSeletion: number[]; 34 categoryIds: string; 35 locationId: number; 36 regionId: number; 37 companionId: number; 38 lengthOfStay: number; 39 cityOption: boolean = false; 40 regionOption: boolean = false; 30 41 31 constructor(private cityService : CityService, private countryService : CountryService, 32 private companionService : CompanionService, private categoryService : CategoryService){ 42 constructor(private cityService : CityService, private regionService: RegionService, 43 private companionService : CompanionService, private categoryService : CategoryService, 44 private locationService: LocationService){ 33 45 this.filteredOptions = new Observable<City[]>(); 34 46 this.cities = []; 35 this. countries = [];47 this.regions = []; 36 48 this.companions = []; 37 49 this.categories = []; 50 this.chipsSeletion = []; 51 this.locationId = 0; 52 this.companionId = 0; 53 this.lengthOfStay = 1; 54 this.categoryIds = ''; 55 this.regionId = 0; 38 56 } 39 57 … … 45 63 return this.filter(val || '') 46 64 }) 65 ); 66 67 this.cityService.getAllCities().subscribe( 68 data => { 69 this.cities = data; 70 } 71 ); 72 73 this.regionService.getAllRegions().subscribe( 74 data => { 75 this.regions = data; 76 } 47 77 ); 48 78 … … 71 101 } 72 102 73 toggleSelection(chip: MatChip){ 74 chip.toggleSelected(); 103 toggleSelection(chip: MatChip, category: Category){ 104 chip.toggleSelected(); 105 if(this.chipsSeletion.length > 0){ 106 if(this.chipsSeletion.indexOf(category.id) <= -1){ 107 this.chipsSeletion.push(category.id); 108 }else{ 109 const index = this.chipsSeletion.indexOf(category.id); 110 this.chipsSeletion.splice(index, 1); 111 } 112 }else{ 113 this.chipsSeletion.push(category.id); 114 } 115 console.log(this.chipsSeletion); 75 116 } 76 117 118 119 createMyPlanner(){ 120 this.categoryIds = this.chipsSeletion.join(','); 121 console.log(this.companionId); 122 this.locationService.getAllPlaces(this.locationId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe( 123 result => { 124 console.log(result); 125 } 126 ); 127 } 128 chooseCityOption(){ 129 this.cityOption = true; 130 this.regionOption = false; 131 } 132 chooseRegionOption() { 133 this.regionOption = true; 134 this.cityOption = false; 135 } 77 136 }
Note:
See TracChangeset
for help on using the changeset viewer.