source: trip-planner-front/src/app/locations-form/locations-form.component.html@ 8d391a1

Last change on this file since 8d391a1 was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos

  • Property mode set to 100644
File size: 2.8 KB
RevLine 
[ceaed42]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">
[fa375fe]3
[eed0bf8]4
[ceaed42]5 <div class="example-form">
[eed0bf8]6
[ceaed42]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>
[59329aa]24 <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city" >
[ceaed42]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>
[eed0bf8]70
[fa375fe]71
[eed0bf8]72
Note: See TracBrowser for help on using the repository browser.