Changeset 76712b2 for trip-planner-front/src/app/locations-form
- Timestamp:
- 01/28/22 18:45:54 (3 years ago)
- Branches:
- master
- Children:
- 6fe77af
- Parents:
- b738035
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trip-planner-front/src/app/locations-form/locations-form.component.html
rb738035 r76712b2 3 3 4 4 5 5 <div class="example-form"> 6 6 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> 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> 70 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> 71 29 72 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>
Note:
See TracChangeset
for help on using the changeset viewer.