source: trip-planner-front/src/app/location/add-location/add-location.component.html@ 571e0df

Last change on this file since 571e0df was 6fe77af, checked in by Ema <ema_spirova@…>, 3 years ago

add location feature

  • Property mode set to 100644
File size: 5.1 KB
Line 
1<mat-stepper linear #stepper>
2 <mat-step [stepControl]="firstFormGroup" [editable]="isEditable" [completed]="isCompleted">
3 <form [formGroup]="firstFormGroup">
4 <ng-template matStepLabel>Location properties</ng-template>
5 <mat-form-field appearance="fill">
6 <mat-label>Name</mat-label>
7 <input matInput [(ngModel)]="name" formControlName="name" required>
8 </mat-form-field>
9<label></label>
10 <mat-form-field appearance="fill">
11 <mat-label>Description</mat-label>
12 <input matInput [(ngModel)]="desc" formControlName="desc" required>
13 </mat-form-field>
14<label></label>
15 <mat-form-field appearance="fill">
16 <mat-label>Address</mat-label>
17 <input matInput [(ngModel)]="address" formControlName="address" required>
18 </mat-form-field>
19
20 <mat-form-field appearance="fill">
21 <mat-label>Duration</mat-label>
22 <input matInput [(ngModel)]="duration" type="number" formControlName="duration" required>
23 </mat-form-field>
24
25 <mat-form-field appearance="fill">
26 <mat-label>Trivia</mat-label>
27 <input matInput [(ngModel)]="trivia" formControlName="trivia" required>
28 </mat-form-field>
29
30 <mat-form-field appearance="fill">
31 <mat-label>Priority</mat-label>
32 <mat-select [(ngModel)]="priority" name="priority" [ngModelOptions]="{standalone: true}" >
33 <mat-option *ngFor="let priority of priorities" [value]="priority.value">
34 {{priority.viewValue}}
35 </mat-option>
36 </mat-select>
37 </mat-form-field>
38
39 <label>
40 <h5>Please select a city</h5>
41 </label>
42 <mat-form-field appearance="fill" class="example-full-width">
43 <mat-label>Please select a city</mat-label>
44 <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city" [ngModelOptions]="{standalone: true}">
45 <mat-option [value]="city.id" *ngFor="let city of cities"> {{city.name}}</mat-option>
46 </mat-select>
47 </mat-form-field>
48
49 <label>
50 <h5>Please select a region</h5>
51 </label>
52 <mat-form-field appearance="fill" class="example-full-width">
53 <mat-label>Please select a region</mat-label>
54 <mat-select [(ngModel)]="regionId" placeholder="Select region" name="region" [ngModelOptions]="{standalone: true}">
55 <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}
56 </mat-option>
57 </mat-select>
58 </mat-form-field>
59
60 <p-fileUpload #fubauto mode="basic" name="demo[]" url="" chooseLabel="Image"></p-fileUpload>
61
62 <div>
63 <button mat-button matStepperNext (click)="submitLocation()">Next</button>
64 </div>
65 </form>
66 </mat-step>
67 <mat-step [stepControl]="secondFormGroup" [editable]="isEditable" [completed]="isCompletedSecond">
68 <form [formGroup]="secondFormGroup">
69 <ng-template matStepLabel>Add companion for the location</ng-template>
70 <mat-form-field appearance="fill">
71 <mat-label>Companion</mat-label>
72 <mat-select [formControl]="companionForm" multiple>
73 <mat-select-trigger>
74 {{companionForm.value ? companionForm.value[0] : ''}}
75 <span *ngIf="companionForm.value?.length > 1" class="example-additional-selection">
76 (+{{companionForm.value.length - 1}} {{companionForm.value?.length === 2 ? 'other' : 'others'}})
77 </span>
78 </mat-select-trigger>
79 <mat-option *ngFor="let companion of companions" [value]="companion">{{companion.type}}</mat-option>
80 </mat-select>
81 </mat-form-field>
82 <div>
83 <button mat-button matStepperNext (click)="onClickSecondForm()">Next</button>
84 </div>
85 </form>
86 </mat-step>
87
88 <mat-step [stepControl]="thirdFormGroup" [editable]="isEditable">
89 <form [formGroup]="thirdFormGroup">
90 <ng-template matStepLabel>Add categories for the location</ng-template>
91 <mat-chip-list selectable multiple>
92 <mat-chip #c="matChip" selected *ngFor="let category of categories" (click)="toggleSelection(c, category)"
93 [ngClass]="{'yellow' : toggle}" name="chips">
94 <mat-icon *ngIf="!c.selected">check</mat-icon>
95 {{category.name}}
96 </mat-chip>
97 </mat-chip-list>
98 <div>
99 <button mat-button matStepperNext>Next</button>
100 </div>
101 </form>
102 </mat-step>
103 <mat-step>
104 <ng-template matStepLabel>Done</ng-template>
105 <p>You are now done.</p>
106 <div>
107 <button mat-button (click)="stepper.reset()">Reset</button>
108 </div>
109 </mat-step>
110</mat-stepper>
Note: See TracBrowser for help on using the repository browser.