Begin to add filter on the tunnel flights

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css

@@ -0,0 +1,18 @@
+.formListTunnelFlight {
+    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/list-of-tunnel-flights/list-of-tunnel-flights.component.html

@@ -1,13 +1,18 @@
 <div class="content">
     <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
 
-    <div>
+    <form class="formListTunnelFlight" [(ngModel)]="selectedPeriod" (ngModelChange)="onPeriodChange()" >
+        <mat-radio-group>
+            <mat-radio-button [value]="1">{{ 'ListTunnelFlight_CurrentYear' | translate }}</mat-radio-button>
+            <mat-radio-button [value]="2">{{ 'ListTunnelFlight_12Months' | translate }}</mat-radio-button>
+        </mat-radio-group>
+
         <canvas baseChart style="width: 50%;" 
                 [data]="barChartData" 
                 [options]="barChartOptions"
                 [plugins]="barChartPlugins" 
                 [legend]="barChartLegend" 
-                [type]="barChartType" >
+                [type]="barChartType">
         </canvas>
-    </div>
+    </form>
 </div>

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { ChartConfiguration, ChartData } from 'chart.js';
 
-import { TunnelService } from '../../services/tunnel.service';
 import { ServiceComm } from '../../services/service-comm.service';
 import { TunnelFlightService } from "../../services/tunnel-flight.service";
 
@@ -18,9 +17,9 @@ export class ListOfTunnelFlightsComponent implements OnInit {
     public barChartOptions: ChartConfiguration['options'];
     public barChartType: string;
     public isLoading: boolean = false;
+    public selectedPeriod: string;
 
     constructor(private serviceComm: ServiceComm,
-              private serviceTunnel: TunnelService,
                 private serviceTunnelFlight: TunnelFlightService,
                 private translateService: TranslateService) { }
 
@@ -33,6 +32,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         this.updateTitle();
 
         this.isLoading = true;
+        this.selectedPeriod = "currentYear"
         this.getData();
     }
 
@@ -90,4 +90,8 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         });
         return 'Sum: ' + sum;
     };
+
+    public onPeriodChange() {
+        console.log(this.selectedPeriod);
+    }
 }

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

@@ -65,7 +65,7 @@ export class NewTunnelFlightComponent implements OnInit {
     this.getListOfTunnels();
   }
 
-  onFormSubmit() {
+  public onFormSubmit() {
     this.pendingAddRequest = true;
 
     this.serviceTunnelFlight.addFlight(this.selectedTunnel.id,

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

@@ -121,5 +121,8 @@
     "NewTunnelFlight_Submit": "Submit",
     "NewTunnelFlight_Comments_Lbl": "Comments",
     "NewTunnelFlight_Minutes_Lbl": "Time of flight (minutes)",
-    "NewTunnelFlight_Date_Lbl": "Date of flight"
+    "NewTunnelFlight_Date_Lbl": "Date of flight",
+
+    "ListTunnelFlight_CurrentYear": "On the current year",
+    "ListTunnelFlight_12Months": "On 12 last months"
 }

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

@@ -121,5 +121,8 @@
     "NewTunnelFlight_Submit": "Ajouter",
     "NewTunnelFlight_Comments_Lbl": "Commentaires",
     "NewTunnelFlight_Minutes_Lbl": "Temps de vol(minutes)",
-    "NewTunnelFlight_Date_Lbl": "Date des vols"
+    "NewTunnelFlight_Date_Lbl": "Date des vols",
+
+    "ListTunnelFlight_CurrentYear": "Dans l'année en cours",
+    "ListTunnelFlight_12Months": "Sur 12 derniers mois"
 }