source: trip-planner-front/src/app/locations-form/locations-form.component.html@ 188ee53

Last change on this file since 188ee53 was 188ee53, checked in by Ema <ema_spirova@…>, 3 years ago

location-form

  • Property mode set to 100644
File size: 3.0 KB
RevLine 
[fa375fe]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
[eed0bf8]3<div class="example-form">
4
[188ee53]5 <div class="form-group">
[eed0bf8]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 <!--
[fa375fe]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>
[eed0bf8]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>
[188ee53]37 <mat-select [(ngModel)]="cityId" placeholder="Select city">
[eed0bf8]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
[188ee53]43
[eed0bf8]44 <div *ngIf="regionOption">
45 <label><h5>Please select a region</h5></label>
46 <mat-form-field appearance="fill" class="example-full-width">
47 <mat-label>Please select a region</mat-label>
48 <mat-select [(ngModel)]="regionId" placeholder="Select region">
49 <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}</mat-option>
50 </mat-select>
51 </mat-form-field>
52 </div>
[fa375fe]53
54 <h5>Who are you travelling with? </h5>
55 <mat-form-field appearance="fill" class="example-full-width">
56 <mat-label>Please select a companion</mat-label>
[eed0bf8]57 <mat-select [(ngModel)]="companionId" placeholder="Please select a companion">
58 <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
[fa375fe]59 </mat-select>
60 </mat-form-field>
61
62 <h5>How many days are you willing to stay ?</h5>
63 <mat-form-field class="example-full-width" appearance="fill">
64 <mat-label>Please select a number of days</mat-label>
[188ee53]65 <input matInput placeholder="No. Days" type="number" min="1" value="0" max="30" [constraintMaxNumberDays()] [(ngModel)]="lengthOfStay">
[fa375fe]66 </mat-form-field>
67
68 <h5>What are your priorities to visit?</h5>
69 <mat-chip-list selectable multiple>
[eed0bf8]70 <mat-chip #c="matChip" selected *ngFor="let category of categories"
[188ee53]71 (click)="toggleSelection(c, category)">
[eed0bf8]72 <mat-icon *ngIf="!c.selected" >check</mat-icon>
[fa375fe]73 {{category.name}}
74 </mat-chip>
75 </mat-chip-list>
[188ee53]76 <br>
[eed0bf8]77 <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
78
79</div>
80
Note: See TracBrowser for help on using the repository browser.