Avancement sur le formulaire d'ajout de sauts

This commit is contained in:
Sébastien André
2019-10-29 14:46:47 +01:00
parent 1a5cc2ed4e
commit 659bbed322
3 changed files with 45 additions and 24 deletions

View File

@@ -1,51 +1,51 @@
<div class="example-container"> <form class="example-container" (ngSubmit)="onFormSubmit()" [ngModelOptions]="{standalone: true}">
<mat-form-field> <mat-form-field>
<mat-label>Choose the jump type</mat-label> <mat-label>Choose the jump type</mat-label>
<mat-select> <mat-select [(value)]="selectedJumpType">
<mat-option value="option1">Option 1</mat-option> <mat-option value="1">Option 1</mat-option>
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option> <mat-option value="2" disabled>Option 2 (disabled)</mat-option>
<mat-option value="option3">Option 3</mat-option> <mat-option value="3">Option 3</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Choose the aircraft</mat-label> <mat-label>Choose the aircraft</mat-label>
<mat-select> <mat-select [(value)]="selectedAircraft">
<mat-option value="option1">Option 1</mat-option> <mat-option value="4">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option> <mat-option value="5">Option 2</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Choose the DZ</mat-label> <mat-label>Choose the DZ</mat-label>
<mat-select> <mat-select [(value)]="selectedDz">
<mat-option value="option1">Option 1</mat-option> <mat-option value="6">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option> <mat-option value="7">Option 2</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-checkbox>With a cutaway ?</mat-checkbox> <mat-checkbox [(checked)]="withCutaway">With a cutaway ?</mat-checkbox>
<mat-form-field> <mat-form-field>
<input matInput [matDatepicker]="beginDate" [value]="date.value" disabled> <input matInput [matDatepicker]="beginDateDp" [value]="beginDate.value" disabled>
<mat-datepicker-toggle matSuffix [for]="beginDate"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="beginDateDp"></mat-datepicker-toggle>
<mat-datepicker #beginDate disabled="false"></mat-datepicker> <mat-datepicker #beginDateDp disabled="false"></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput [matDatepicker]="endDate" [value]="date.value" disabled> <input matInput [matDatepicker]="endDateDp" [value]="endDate.value" disabled>
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="endDateDp"></mat-datepicker-toggle>
<mat-datepicker #endDate disabled="false"></mat-datepicker> <mat-datepicker #endDateDp disabled="false"></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Exit altitude" [(ngModel)]="defaultExitAltitude"> <input matInput placeholder="Exit altitude" [(value)]="defaultExitAltitude">
<button mat-button *ngIf="defaultExitAltitude" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="defaultExitAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="defaultExitAltitude=''"> (click)="defaultExitAltitude=''">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Deploy altitude" [(ngModel)]="defaultDeployAltitude"> <input matInput placeholder="Deploy altitude" [(value)]="defaultDeployAltitude">
<button mat-button *ngIf="defaultDeployAltitude" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="defaultDeployAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="defaultDeployAltitude=''"> (click)="defaultDeployAltitude=''">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
@@ -60,4 +60,6 @@
</button> </button>
</mat-form-field> </mat-form-field>
</div> <br />
<button class="btn btn-primary">Submit</button>
</form>

View File

@@ -10,13 +10,20 @@ import { ServiceComm } from '../../services/serviceComm';
styleUrls: ['./new-jump.component.css'] styleUrls: ['./new-jump.component.css']
}) })
export class NewJumpComponent implements OnInit { export class NewJumpComponent implements OnInit {
date: FormControl; beginDate: Date;
endDate: Date;
defaultExitAltitude: number; defaultExitAltitude: number;
defaultDeployAltitude: number; defaultDeployAltitude: number;
countOfJumps: number; countOfJumps: number;
selectedDz: number;
selectedAircraft: number;
selectedJumpType: number;
withCutaway: boolean;
constructor(private serviceComm: ServiceComm) { constructor(private serviceComm: ServiceComm) {
this.date = new FormControl(new Date()); this.beginDate = new Date();
this.endDate = new Date();
this.defaultExitAltitude = 4000; this.defaultExitAltitude = 4000;
this.defaultDeployAltitude = 1000; this.defaultDeployAltitude = 1000;
this.countOfJumps = 0; this.countOfJumps = 0;
@@ -25,4 +32,16 @@ export class NewJumpComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.serviceComm.updatedComponentTitle('Add a new jump'); this.serviceComm.updatedComponentTitle('Add a new jump');
} }
onFormSubmit() {
console.log(this.selectedJumpType);
console.log(this.selectedAircraft);
console.log(this.selectedDz);
console.log(this.withCutaway);
console.log(this.beginDate);
console.log(this.endDate);
console.log(this.defaultExitAltitude);
console.log(this.defaultDeployAltitude);
console.log(this.countOfJumps);
}
} }

View File

@@ -3,7 +3,7 @@ import { BehaviorSubject } from 'rxjs';
@Injectable() @Injectable()
export class ServiceComm { export class ServiceComm {
private componentTitleSource = new BehaviorSubject<string>(""); private componentTitleSource = new BehaviorSubject<string>('');
componentTitle = this.componentTitleSource.asObservable(); componentTitle = this.componentTitleSource.asObservable();
constructor() { } constructor() { }