[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>
|
---|
[6a80231] | 69 | <mat-chip-list selectable multiple >
|
---|
[eed0bf8] | 70 | <mat-chip #c="matChip" selected *ngFor="let category of categories"
|
---|
[6a80231] | 71 | (click)="toggleSelection(c, category)" [ngClass]="{'yellow' : toggle}">
|
---|
[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 | |
---|