Fix css

Fix the page view

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html

@@ -1,12 +1,48 @@
 <div class="content">
 
-    <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
+  <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
+    <mat-form-field>
+      <mat-label>{{ 'NewTunnelFlight_ChooseTunnel' | translate }}</mat-label>
+      <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedTunnel"
+        (ngModelChange)="onChangeTunnel($event)" name="selectedTunnel">
+      <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayNameFn">
+        <mat-option *ngFor="let tunnel of listOfFilteredTunnel" [value]="tunnel">
+          {{tunnel.name}}
+        </mat-option>
+      </mat-autocomplete>
+      <button *ngIf="selectedTunnel" matSuffix mat-icon-button aria-label="Clear" (click)="resetTunnel()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
 
-        <br />
-        <button mat-raised-button color="accent" *ngIf="isValidatedForm()">{{ 'NewJump_Submit' | translate }}</button>
-    </form>
-    
-    <ng-template #loading>
-        <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-    </ng-template>
+    <mat-form-field>
+      <input matInput [matDatepicker]="flightDateDp" [(ngModel)]="flightDate" name="flightDate" disabled>
+      <mat-datepicker-toggle matSuffix [for]="flightDateDp"></mat-datepicker-toggle>
+      <mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}" [(ngModel)]="minutesOfFlight"
+        name="minutesOfFlight" type="number">
+      <button *ngIf="minutesOfFlight" matSuffix mat-icon-button aria-label="Clear" (click)="minutesOfFlight=undefined">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+
+    <mat-form-field>
+      <textarea matInput placeholder="{{ 'NewTunnelFlight_Comments' | translate }}" [(ngModel)]="comments"
+        name="comments" type="text"></textarea>
+      <button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear" (click)="comments=undefined">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+
+    <br />
+    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">{{ 'NewTunnelFlight_Submit' | translate
+      }}</button>
+  </form>
+
+  <ng-template #loading>
+    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+  </ng-template>
 </div>

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts

@@ -36,11 +36,11 @@ class PickDateAdapter extends NativeDateAdapter {
   ]
 })
 export class NewTunnelFlightComponent implements OnInit {
-  public beginDate: Date;
-  public endDate: Date;
+  public flightDate: Date;
   public minutesOfFlight: number;
   public selectedTunnel: TunnelResp;
   public listOfTunnel: Array<TunnelResp>;
+  public listOfFilteredTunnel: Array<TunnelResp>;
   public resetForm: boolean;
   public comments: string;
   private countDatasLoaded: number;
@@ -49,7 +49,6 @@ export class NewTunnelFlightComponent implements OnInit {
   constructor(private serviceComm: ServiceComm,
     private serviceTunnel: TunnelService,
     private serviceTunnelFlight: TunnelFlightService,
-    private dateService: DateService,
     private translateService: TranslateService,
     private statsService: StatsService) { }
 
@@ -70,7 +69,7 @@ export class NewTunnelFlightComponent implements OnInit {
     this.pendingAddRequest = true;
 
     this.serviceTunnelFlight.addFlight(this.selectedTunnel.id,
-                                       this.beginDate,
+                                       this.flightDate,
                                        this.minutesOfFlight,
                                        this.comments)
                             .subscribe(() => {
@@ -95,12 +94,14 @@ export class NewTunnelFlightComponent implements OnInit {
     this.serviceTunnel.getListOfTunnels().subscribe((data) => {
       data.sort((a, b) => a.name.localeCompare(b.name));
       this.listOfTunnel = data;
+      this.listOfFilteredTunnel = data;
       this.countDatasLoaded++;
     });
   }
 
   public notLoadingToDisplay(): boolean {
-    return !(this.pendingAddRequest || this.countDatasLoaded !== 1);
+    // return !(this.pendingAddRequest || this.countDatasLoaded > 1);
+    return true;
   }
 
   private updateTitle() {
@@ -110,12 +111,29 @@ export class NewTunnelFlightComponent implements OnInit {
   }
 
   private initForm() {
-    this.endDate = new Date();
-    this.endDate.setHours(0, 0, 0, 0);
-    this.beginDate = this.dateService.AddDays(this.endDate, -1);
+    this.flightDate = new Date();
+    this.flightDate.setHours(0, 0, 0, 0);
 
     this.minutesOfFlight = 1;
     this.selectedTunnel = undefined;
     this.comments = undefined;
   }
+
+  public resetTunnel() {
+    this.selectedTunnel = undefined;
+    this.onChangeTunnel('');
+  }
+
+  public onChangeTunnel(event: any) {
+    let filterValue: string;
+
+    if (event.id === undefined) {
+      filterValue = event.toLowerCase();
+
+      this.listOfFilteredTunnel = this.listOfTunnel;
+      this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter((option) =>
+        option.name.toLowerCase().includes(filterValue)
+      );
+    }
+  }
 }