1e jet du formulaire d'ajout de sauts

Front/skydivelogs-app/src/app/app.component.css

@@ -11,6 +11,10 @@ body {
   fill: #ffff;
 }
 
+.hamburger__icon__fill {
+  fill: #594e78
+}
+
 .side-menu-disactive {
   display: none !important;
 }

Front/skydivelogs-app/src/app/app.component.html

@@ -1,14 +1,6 @@
 <div>
   <header>
     <svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32">
-      <defs>
-        <style>
-          .hamburger__icon__fill {
-            fill: #594e78
-          }
-
-        </style>
-      </defs>
       <rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
         transform="translate(31.5 58)"></rect>
       <rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"

Front/skydivelogs-app/src/app/app.module.ts

@@ -15,7 +15,20 @@ import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-type
 import { ServiceApi } from '../services/serviceApi';
 import { ServiceComm } from '../services/serviceComm';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatPaginatorModule, MatTableModule, MatSelectModule, MatOptionModule, MatFormFieldModule } from '@angular/material';
+import { FormsModule } from '@angular/forms';
+import {
+  MatPaginatorModule,
+  MatTableModule,
+  MatSelectModule,
+  MatOptionModule,
+  MatFormFieldModule,
+  MatCheckboxModule,
+  MatDatepickerModule,
+  MatNativeDateModule,
+  MatInputModule,
+  MatButtonModule,
+  MatIconModule
+} from '@angular/material';
 
 
 
@@ -44,8 +57,20 @@ const appRoutes: Routes = [
       appRoutes,
       { enableTracing: true } // <-- debugging purposes only
     ),
+    FormsModule,
     BrowserModule,
-    BrowserAnimationsModule, MatPaginatorModule, MatTableModule, MatSelectModule, MatOptionModule, MatFormFieldModule 
+    BrowserAnimationsModule,
+    MatPaginatorModule,
+    MatTableModule,
+    MatSelectModule,
+    MatOptionModule,
+    MatFormFieldModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule
   ],
   exports: [HttpClientModule],
   providers: [ServiceApi, ServiceComm],

Front/skydivelogs-app/src/app/new-jump/new-jump.component.css

@@ -1,6 +1,13 @@
 .example-container {
   display: flex;
   flex-direction: column;
+
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+  background-color: black;
+  color: white;
+  padding: 15px
 }
 
 .example-container>* {

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -1,5 +1,4 @@
 <div class="example-container">
-  <h4>Basic native select</h4>
   <mat-form-field>
     <mat-label>Choose the jump type</mat-label>
     <mat-select>
@@ -9,7 +8,6 @@
     </mat-select>
   </mat-form-field>
 
-  <h4>Basic native select</h4>
   <mat-form-field>
     <mat-label>Choose the aircraft</mat-label>
     <mat-select>
@@ -17,4 +15,49 @@
       <mat-option value="option2">Option 2</mat-option>
     </mat-select>
   </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Choose the DZ</mat-label>
+    <mat-select>
+      <mat-option value="option1">Option 1</mat-option>
+      <mat-option value="option2">Option 2</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-checkbox>With a cutaway ?</mat-checkbox>
+
+  <mat-form-field>
+    <input matInput [matDatepicker]="beginDate" [value]="date.value" disabled>
+    <mat-datepicker-toggle matSuffix [for]="beginDate"></mat-datepicker-toggle>
+    <mat-datepicker #beginDate disabled="false"></mat-datepicker>
+  </mat-form-field>
+  <mat-form-field>
+    <input matInput [matDatepicker]="endDate" [value]="date.value" disabled>
+    <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
+    <mat-datepicker #endDate disabled="false"></mat-datepicker>
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Exit altitude" [(ngModel)]="defaultExitAltitude">
+    <button mat-button *ngIf="defaultExitAltitude" matSuffix mat-icon-button aria-label="Clear"
+      (click)="defaultExitAltitude=''">
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+  <mat-form-field>
+    <input matInput placeholder="Deploy altitude" [(ngModel)]="defaultDeployAltitude">
+    <button mat-button *ngIf="defaultDeployAltitude" matSuffix mat-icon-button aria-label="Clear"
+      (click)="defaultDeployAltitude=''">
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
+
+  <mat-form-field>
+    <input matInput placeholder="Count of jumps" [(ngModel)]="countOfJumps">
+    <button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear" (click)="countOfJumps=''">
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+
 </div>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -1,15 +1,28 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
-import { ServiceComm } from "../../services/serviceComm";
+import { FormControl } from '@angular/forms';
+
+import { ServiceComm } from '../../services/serviceComm';
+
 
 @Component({
-  selector: "app-new-jump",
+  selector: 'app-new-jump',
-  templateUrl: "./new-jump.component.html",
+  templateUrl: './new-jump.component.html',
-  styleUrls: ["./new-jump.component.css"]
+  styleUrls: ['./new-jump.component.css']
 })
 export class NewJumpComponent implements OnInit {
-  constructor(private serviceComm: ServiceComm) {}
+  date: FormControl;
+  defaultExitAltitude: number;
+  defaultDeployAltitude: number;
+  countOfJumps: number;
+
+  constructor(private serviceComm: ServiceComm) {
+    this.date = new FormControl(new Date());
+    this.defaultExitAltitude = 4000;
+    this.defaultDeployAltitude = 1000;
+    this.countOfJumps = 0;
+  }
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle("Add a new jump");
+    this.serviceComm.updatedComponentTitle('Add a new jump');
   }
 }