Ignore:
Timestamp:
11/11/21 12:59:26 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
59329aa
Parents:
6c1585f
Message:

add location to planner

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

    r6c1585f rceaed42  
    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">
     1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
     2  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    23
    3 <div class="example-form">
    44
    5   <div class="form-group">
    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>
     5    <div class="example-form">
    156
    16   <div *ngIf="cityOption">
    17     <label><h5>Please select a city</h5></label>
    18     <mat-form-field appearance="fill" class="example-full-width">
    19       <mat-label>Please select a city</mat-label>
    20       <mat-select [(ngModel)]="cityId" placeholder="Select city">
    21         <mat-option [value]="city.id" *ngFor="let city of cities" [value]="city.id"> {{city.name}}</mat-option>
    22       </mat-select>
    23     </mat-form-field>
    24   </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>
     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>
    2570
    26   <div *ngIf="regionOption">
    27     <label><h5>Please select a region</h5></label>
    28     <mat-form-field appearance="fill" class="example-full-width">
    29       <mat-label>Please select a region</mat-label>
    30       <mat-select [(ngModel)]="regionId" placeholder="Select region">
    31         <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}</mat-option>
    32       </mat-select>
    33     </mat-form-field>
    34   </div>
    3571
    36   <h5>Who are you travelling with?  </h5>
    37   <mat-form-field appearance="fill" class="example-full-width">
    38     <mat-label>Please select a companion</mat-label>
    39     <mat-select [(ngModel)]="companionId" placeholder="Please select a companion">
    40       <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
    41     </mat-select>
    42   </mat-form-field>
    43 
    44   <h5>How many days are you willing to stay ?</h5>
    45   <mat-form-field class="example-full-width" appearance="fill">
    46     <mat-label>Please select a number of days</mat-label>
    47     <input matInput placeholder="No. Days"  type="number" min="1" value="0" max="30" [constraintMaxNumberDays()] [(ngModel)]="lengthOfStay">
    48   </mat-form-field>
    49 
    50    <h5>What are your priorities to visit?</h5>
    51   <mat-chip-list  selectable multiple >
    52     <mat-chip #c="matChip" selected *ngFor="let category of categories"
    53     (click)="toggleSelection(c, category)" [ngClass]="{'yellow' : toggle}">
    54   <mat-icon *ngIf="!c.selected" >check</mat-icon>
    55   {{category.name}}
    56   </mat-chip>
    57   </mat-chip-list>
    58   <br>
    59   <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
    60 
    61 </div>
    6272 

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

    r6c1585f rceaed42  
    1 import { Component, Injectable, OnInit } from '@angular/core';
    2 import { FormControl, NgForm } from '@angular/forms';
    3 import {map, startWith, switchMap} from 'rxjs/operators';
    4 import {forkJoin, Observable} from 'rxjs';
     1import { Component, EventEmitter, OnInit, Output } from '@angular/core';
     2import { FormBuilder, FormControl } from '@angular/forms';
     3import { map, startWith, switchMap } from 'rxjs/operators';
     4import { Observable } from 'rxjs';
    55import { CityService } from '../_services/city.service';
    66import { City } from '../_models/city';
    7 import { Country } from '../_models/country';
    8 import { CountryService } from '../_services/country.service';
    97import { Companion } from '../_models/companion';
    108import { CompanionService } from '../_services/companion.service';
    119import { Category } from '../_models/category';
    1210import { CategoryService } from '../_services/cateogry.service';
    13 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
    1411import { MatChip } from '@angular/material/chips';
    1512import { LocationService } from '../_services/location.service';
    1613import { Region } from '../_models/region';
    1714import { RegionService } from '../_services/region.service';
    18 import { Router } from '@angular/router';
     15import { ActivatedRoute, Params, Router } from '@angular/router';
     16import { Location } from '../_models/location';
     17
     18
    1919
    2020@Component({
    … …  
    4141  cityOption: boolean = false;
    4242  regionOption: boolean = false;
    43   value:number;
     43  value: number;
    4444  max: number;
    4545  toggle = true;
    4646  status = 'Enable';
     47  proba: any[];
    4748
    48   constructor(private cityService : CityService, private regionService: RegionService,
    49               private companionService : CompanionService, private categoryService : CategoryService,
    50               private locationService: LocationService, private router : Router){
     49
     50  constructor(private cityService: CityService, private regionService: RegionService,
     51    private companionService: CompanionService, private categoryService: CategoryService,
     52    private locationService: LocationService, private router: Router, private fb: FormBuilder, private route: ActivatedRoute) {
    5153    this.filteredOptions = new Observable<City[]>();
    5254    this.cities = [];
    … …  
    6365    this.value = 0;
    6466    this.max = 30;
     67    this.proba = [];
    6568  }
     69
     70  ngOnInit(): void {
    6671 
    67   ngOnInit() :void {
    6872    this.filteredOptions = this.myControl.valueChanges
    69     .pipe(
    70       startWith(''),
    71       switchMap(val => {
    72         return this.filter(val || '')
    73       })       
    74     );
     73      .pipe(
     74        startWith(''),
     75        switchMap(val => {
     76          return this.filter(val || '')
     77        })
     78      );
    7579
    7680    this.cityService.getAllCities().subscribe(
    … …  
    96100        this.companions = data;
    97101      }
    98     )
     102    );
     103
    99104  }
    100  
     105
    101106  filter(val: string): Observable<City[]> {
    102107    // call the service which makes the http-request
    … …  
    107112        }))
    108113      )
    109 
    110114  }
    111115
    112  toggleSelection(chip: MatChip, category: Category){
    113   chip.toggleSelected();
    114  
    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);
    126  }
     116  toggleSelection(chip: MatChip, category: Category) {
     117    chip.toggleSelected();
     118
     119    if (this.chipsSeletion.length > 0) {
     120      if (this.chipsSeletion.indexOf(category.id) <= -1) {
     121        this.chipsSeletion.push(category.id);
     122      } else {
     123        const index = this.chipsSeletion.indexOf(category.id);
     124        this.chipsSeletion.splice(index, 1);
     125      }
     126    } else {
     127      this.chipsSeletion.push(category.id);
     128    }
     129    console.log(this.chipsSeletion);
     130  }
     131
    127132
    128133
    … …  
    135140        result => {
    136141          console.log(result);
    137           this.router.navigate(['locations']);
     142          this.proba = result;
     143          this.router.navigate(['locations'], {queryParams: {cityId: this.cityId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds}});
    138144        }
    139145      );
    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 
     146    } else
     147      if (this.regionOption) {
     148        this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
     149          result => {
     150            console.log(result);
     151            this.router.navigate(['locations'], {queryParams: {regionId: this.regionId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds}});
     152          }
     153        );
     154      }
    151155  }
    152156
    … …  
    166170  }
    167171
     172
    168173}
Note: See TracChangeset for help on using the changeset viewer.