Ignore:
Timestamp:
11/04/21 23:10:39 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
ceaed42
Parents:
6a80231
Message:

edit planner form with angular

Location:
trip-planner-front/src/app/locations-form
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r6a80231 r6c1585f  
    1313  <br>
    1414  <br>
    15   <!--
    16   <mat-form-field class="example-full-width" appearance="fill">
    17     <mat-label>Please select a place</mat-label>
    18     <input type="text"
    19            placeholder="Pick one"
    20            aria-label="Place"
    21            matInput
    22            [formControl]="myControl"
    23            [matAutocomplete]="auto">
    24     <mat-autocomplete autoActiveFirstOption  #auto="matAutocomplete">
    25       <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
    26         {{option.name}}
    27       </mat-option>
    28     </mat-autocomplete>
    29   </mat-form-field>
    30   -->
    31 
    3215
    3316  <div *ngIf="cityOption">
    … …  
    4023    </mat-form-field>
    4124  </div>
    42 
    4325
    4426  <div *ngIf="regionOption">

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

    r6a80231 r6c1585f  
    1616import { Region } from '../_models/region';
    1717import { RegionService } from '../_services/region.service';
     18import { Router } from '@angular/router';
    1819
    1920@Component({
    … …  
    4748  constructor(private cityService : CityService, private regionService: RegionService,
    4849              private companionService : CompanionService, private categoryService : CategoryService,
    49               private locationService: LocationService){
     50              private locationService: LocationService, private router : Router){
    5051    this.filteredOptions = new Observable<City[]>();
    5152    this.cities = [];
    … …  
    99100 
    100101  filter(val: string): Observable<City[]> {
    101   // call the service which makes the http-request
     102    // call the service which makes the http-request
    102103    return this.cityService.getAllCities()
    103     .pipe(
    104     map(response => response.filter(option => {
    105       return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
    106     }))
    107   )
    108  
    109  } 
     104      .pipe(
     105        map(response => response.filter(option => {
     106          return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
     107        }))
     108      )
     109
     110  }
    110111
    111112 toggleSelection(chip: MatChip, category: Category){
    112113  chip.toggleSelected();
    113114 
    114   if(this.chipsSeletion.length > 0){
    115     if(this.chipsSeletion.indexOf(category.id) <= -1){
    116       this.chipsSeletion.push(category.id);
    117     }else{
    118       const index = this.chipsSeletion.indexOf(category.id);
    119       this.chipsSeletion.splice(index, 1);
    120     }
    121   }else{
    122     this.chipsSeletion.push(category.id);
    123   }
    124   console.log(this.chipsSeletion);
     115   if (this.chipsSeletion.length > 0) {
     116     if (this.chipsSeletion.indexOf(category.id) <= -1) {
     117       this.chipsSeletion.push(category.id);
     118     } else {
     119       const index = this.chipsSeletion.indexOf(category.id);
     120       this.chipsSeletion.splice(index, 1);
     121     }
     122   } else {
     123     this.chipsSeletion.push(category.id);
     124   }
     125   console.log(this.chipsSeletion);
    125126 }
    126127
    127128
    128  createMyPlanner(){
    129    this.categoryIds = this.chipsSeletion.join(',');
    130    console.log(this.categoryIds);
    131    
    132    if(this.cityOption){
    133     this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
    134       result => {
    135         console.log(result);
    136       }
    137     );
    138    }else if(this.regionOption){
    139  
    140     this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
    141       result => {
    142         console.log(result);
    143       }
    144     );
    145    }
    146  }
    147  
    148  chooseCityOption(){
    149    this.cityOption = true;
    150    this.regionOption = false;
    151  }
     129  createMyPlanner() {
     130    this.categoryIds = this.chipsSeletion.join(',');
     131    console.log(this.categoryIds);
     132
     133    if (this.cityOption) {
     134      this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
     135        result => {
     136          console.log(result);
     137          this.router.navigate(['locations']);
     138        }
     139      );
     140    } else if (this.regionOption) {
     141      this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
     142        result => {
     143          console.log(result);
     144          this.router.navigate(['locations']);
     145        }
     146      );
     147    }
     148
     149
     150
     151  }
     152
     153  chooseCityOption() {
     154    this.cityOption = true;
     155    this.regionOption = false;
     156  }
    152157  chooseRegionOption() {
    153158    this.regionOption = true;
    … …  
    155160  }
    156161
    157   constraintMaxNumberDays(){
    158      if(this.value > this.max){
    159        this.value = this.max;
    160      }
     162  constraintMaxNumberDays() {
     163    if (this.value > this.max) {
     164      this.value = this.max;
     165    }
    161166  }
    162167
Note: See TracChangeset for help on using the changeset viewer.