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>
-        <canvas baseChart style="width: 50%;"
-                [data]="barChartData"
-                [options]="barChartOptions" 
-                [plugins]="barChartPlugins"
+    <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,92 +2,96 @@ 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";
 
 @Component({
-  selector: 'app-list-of-tunnel-flights',
-  templateUrl: './list-of-tunnel-flights.component.html',
-  styleUrls: ['./list-of-tunnel-flights.component.css']
+    selector: 'app-list-of-tunnel-flights',
+    templateUrl: './list-of-tunnel-flights.component.html',
+    styleUrls: ['./list-of-tunnel-flights.component.css']
 })
 export class ListOfTunnelFlightsComponent implements OnInit {
-  public barChartLegend = true;
-  public barChartPlugins = [];
-  public barChartData: ChartData<'bar'>;
-  public barChartOptions: ChartConfiguration['options'];
-  public barChartType: string;
-  public isLoading: boolean = false;
+    public barChartLegend = true;
+    public barChartPlugins = [];
+    public barChartData: ChartData<'bar'>;
+    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) { }
+    constructor(private serviceComm: ServiceComm,
+                private serviceTunnelFlight: TunnelFlightService,
+                private translateService: TranslateService) { }
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
         this.updateTitle();
-      }
-    });
-    this.updateTitle();
 
-    this.isLoading = true;
-    this.getData();
-  }
+        this.isLoading = true;
+        this.selectedPeriod = "currentYear"
+        this.getData();
+    }
 
-  private updateTitle() {
-    this.translateService.get("ListTunnelFlight_Title").subscribe(
-      data => { this.serviceComm.UpdatedComponentTitle(data); }
-    );
-  }
+    private updateTitle() {
+        this.translateService.get("ListTunnelFlight_Title").subscribe(
+            data => { this.serviceComm.UpdatedComponentTitle(data); }
+        );
+    }
 
-  private getData(): void {
-    this.barChartType = "bar";
-    this.barChartData = {
-      labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
-      datasets: [
-        { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
-        { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
-      ]
+    private getData(): void {
+        this.barChartType = "bar";
+        this.barChartData = {
+            labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
+            datasets: [
+                { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
+                { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
+            ]
+        };
+
+        this.barChartOptions = {
+            responsive: false,
+            plugins: {
+                legend: {
+                    display: true
+                },
+                tooltip: {
+                    callbacks: {
+                        footer: this.footer,
+                    }
+                }
+            },
+            interaction: {
+                intersect: false,
+                mode: 'nearest',
+                axis: 'x'
+            },
+            scales: {
+                x: {
+                    stacked: true
+                },
+                y: {
+                    stacked: true
+                }
+            }
+        };
+
+        this.isLoading = false;
+    }
+
+    private footer = (tooltipItems) => {
+        let sum = 0;
+
+        tooltipItems.forEach(function (tooltipItem) {
+            sum += tooltipItem.parsed.y;
+        });
+        return 'Sum: ' + sum;
     };
 
-    this.barChartOptions = {
-      responsive: false,
-      plugins: {
-        legend: {
-          display: true
-        },
-        tooltip: {
-          callbacks: {
-            footer: this.footer,
-          }
-        }
-      },
-      interaction: {
-        intersect: false,
-        mode: 'nearest',
-        axis: 'x'
-      },
-      scales: {
-        x: {
-          stacked: true
-        },
-        y: {
-          stacked: true
-        }
-      }
-    };
-
-    this.isLoading = false;
-  }
-
-  private footer = (tooltipItems) => {
-    let sum = 0;
-
-    tooltipItems.forEach(function (tooltipItem) {
-      sum += tooltipItem.parsed.y;
-    });
-    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"
 }