Ignore:
Timestamp:
11/11/21 12:59:26 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
59329aa
Parents:
6c1585f
Message:

add location to planner

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r6c1585f rceaed42  
    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">
     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">
    23
    3 <div class="example-form">
    44
    5   <div class="form-group">
    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>
     5    <div class="example-form">
    156
    16   <div *ngIf="cityOption">
    17     <label><h5>Please select a city</h5></label>
    18     <mat-form-field appearance="fill" class="example-full-width">
    19       <mat-label>Please select a city</mat-label>
    20       <mat-select [(ngModel)]="cityId" placeholder="Select city">
    21         <mat-option [value]="city.id" *ngFor="let city of cities" [value]="city.id"> {{city.name}}</mat-option>
    22       </mat-select>
    23     </mat-form-field>
    24   </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>
     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>
    2570
    26   <div *ngIf="regionOption">
    27     <label><h5>Please select a region</h5></label>
    28     <mat-form-field appearance="fill" class="example-full-width">
    29       <mat-label>Please select a region</mat-label>
    30       <mat-select [(ngModel)]="regionId" placeholder="Select region">
    31         <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}</mat-option>
    32       </mat-select>
    33     </mat-form-field>
    34   </div>
    3571
    36   <h5>Who are you travelling with?  </h5>
    37   <mat-form-field appearance="fill" class="example-full-width">
    38     <mat-label>Please select a companion</mat-label>
    39     <mat-select [(ngModel)]="companionId" placeholder="Please select a companion">
    40       <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
    41     </mat-select>
    42   </mat-form-field>
    43 
    44   <h5>How many days are you willing to stay ?</h5>
    45   <mat-form-field class="example-full-width" appearance="fill">
    46     <mat-label>Please select a number of days</mat-label>
    47     <input matInput placeholder="No. Days"  type="number" min="1" value="0" max="30" [constraintMaxNumberDays()] [(ngModel)]="lengthOfStay">
    48   </mat-form-field>
    49 
    50    <h5>What are your priorities to visit?</h5>
    51   <mat-chip-list  selectable multiple >
    52     <mat-chip #c="matChip" selected *ngFor="let category of categories"
    53     (click)="toggleSelection(c, category)" [ngClass]="{'yellow' : toggle}">
    54   <mat-icon *ngIf="!c.selected" >check</mat-icon>
    55   {{category.name}}
    56   </mat-chip>
    57   </mat-chip-list>
    58   <br>
    59   <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
    60 
    61 </div>
    6272 
Note: See TracChangeset for help on using the changeset viewer.