Ignore:
Timestamp:
01/28/22 18:45:54 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
6fe77af
Parents:
b738035
Message:

search all locations by city or region

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    rb738035 r76712b2  
    33
    44
    5     <div class="example-form">
     5<div class="example-form">
    66
    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>
    7017
     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>
    7129
    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.