First step to add a new page

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

@@ -1,4 +1,3 @@
-
 <div class="content">
   <div>
     <button mat-raised-button color="accent" [routerLink]="['/jumps']" [routerLinkActive]="['active']" skipLocationChange>{{ 'NewJump_GoToJump' | translate }}</button>

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

@@ -0,0 +1,18 @@
+.formNewJumps {
+    display: flex;
+    flex-direction: column;
+  
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  
+  .content {
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
+  }
+  

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

@@ -1 +1,12 @@
-<p>new-tunnel-flight works!</p>
+<div class="content">
+
+    <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
+
+        <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>
+</div>

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

@@ -1,4 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { formatDate } from '@angular/common';
+import { DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
+import { TranslateService } from '@ngx-translate/core';
+
+import { DateService } from 'src/services/date.service';
+import { ServiceComm } from 'src/services/service-comm.service';
+import { StatsService } from 'src/services/stats.service';
 
 @Component({
   selector: 'app-new-tunnel-flight',
@@ -6,5 +13,73 @@ import { Component } from '@angular/core';
   styleUrls: ['./new-tunnel-flight.component.css']
 })
 export class NewTunnelFlightComponent {
+  public beginDate: Date;
+  public endDate: Date;
+  public minutesOfFlight: number;
+  public selectedTunnel: TunnelResp;
+  public listOfTunnel: Array<TunnelResp>;
+  public resetForm: boolean;
+  public comments: string;
+  private countDatasLoaded: number;
+  private pendingAddRequest: boolean;
 
+  constructor(private serviceComm: ServiceComm,
+              private serviceTunnel: TunnelService,
+              private dateService: DateService,
+              private translateService: TranslateService,
+              private statsService : StatsService) {}
+
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data)=> {
+      if (data === true){
+        this.updateTitle();
+      }
+    });
+    this.updateTitle();
+    
+    this.pendingAddRequest = false;
+    this.initForm();
+    this.getListOfTunnels();
+  }
+
+  onFormSubmit() {
+    this.pendingAddRequest = true;
+
+    this.statsService.resetStats();
+  }
+
+  public isValidatedForm(): boolean {
+    return (this.selectedTunnel !== undefined &&
+            this.selectedTunnel.id !== undefined &&
+            this.minutesOfFlight !== undefined &&
+            typeof this.minutesOfFlight === "number");
+  }
+
+  private getListOfTunnels() {
+    this.serviceTunnel.getListOfTunnels(true).subscribe((data) => {
+      data.sort((a, b) => a.name.localeCompare(b.name));
+      this.listOfTunnel = data;
+      this.countDatasLoaded++;
+    });
+  }
+
+  public notLoadingToDisplay(): boolean {
+    return !(this.pendingAddRequest || this.countDatasLoaded !== 1);
+  }
+
+  private updateTitle() {
+    this.translateService.get("NewTunnelFlight_Title").subscribe(
+      data => { this.serviceComm.UpdatedComponentTitle(data); }
+    );
+  }
+
+  private initForm() {
+    this.endDate = new Date();
+    this.endDate.setHours(0, 0, 0, 0);
+    this.beginDate = this.dateService.AddDays(this.endDate, -1);
+
+    this.minutesOfFlight = 1;
+    this.selectedTunnel = undefined;
+    this.comments = undefined;
+  }
 }

Front/skydivelogs-app/src/assets/i18n/en.json

@@ -36,6 +36,7 @@
     "ListJumpTypes_Title" : "List of jump types",
     "ListGears_Title" : "List of gears",
     "ListAircrafts_Title" : "List of aircrafts",
+    "NewTunnelFlight_Title" : "Nouveaux tunnel flights",
 
     "App_Footer" : "Web software to log your skydive jumps - v",
     "App_Nav_Summary" : "Summary",

Front/skydivelogs-app/src/assets/i18n/fr.json

@@ -36,6 +36,7 @@
     "ListJumpTypes_Title" : "Liste des types de saut",
     "ListGears_Title" : "Liste des pièges",
     "ListAircrafts_Title" : "Liste des avions",
+    "NewTunnelFlight_Title" : "Nouveaux créneaux de soufflerie",
 
     "App_Footer" : "Application pour enregistrer ses sauts de parachutisme - v",
     "App_Nav_Summary" : "Récapitulatif",