Update on the tunnel flight

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

@@ -11,16 +11,20 @@
         <mat-radio-button value="12Months">{{ 'ListTunnelFlight_12Months' | translate }}</mat-radio-button>
     </mat-radio-group>
 
-    <canvas baseChart style="width: 50%;" 
+    <div style="display: block; width: 55%;">
-            [data]="barChartData" 
+        <canvas baseChart
-            [options]="barChartOptions"
+                [data]="barChartData" 
-            [plugins]="barChartPlugins" 
+                [options]="barChartOptions"
-            [legend]="barChartLegend" 
+                [plugins]="barChartPlugins" 
-            [type]="barChartType">
+                [legend]="barChartLegend" 
-    </canvas>
+                [type]="barChartType">
+        </canvas>
+    </div>
 
     <div>
-        <table mat-table [dataSource]="dataSourceTable">
+        <button mat-raised-button color="accent" (click)="onLoadTable()" >{{ 'ListTunnelFlight_LoadTable' | translate }}</button>
+
+        <table mat-table [dataSource]="dataSourceTable" *ngIf="dataSourceTable?.data.length">
             <ng-container matColumnDef="id">
                 <th mat-header-cell *matHeaderCellDef>ID</th>
                 <td mat-cell *matCellDef="let element">

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

@@ -7,7 +7,7 @@ import { ChartConfiguration, ChartData } from 'chart.js';
 import { ServiceComm } from '../../services/service-comm.service';
 import { TunnelFlightService } from "../../services/tunnel-flight.service";
 import { DateService } from '../../services/date.service';
-import { TunnelFlight } from '../../models/tunnel-flight';
+import { TunnelFlight, TunnelFlightByMonth } from '../../models/tunnel-flight';
 
 @Component({
     selector: 'app-list-of-tunnel-flights',
@@ -32,9 +32,9 @@ export class ListOfTunnelFlightsComponent implements OnInit {
     ];
 
     constructor(private serviceComm: ServiceComm,
-        private serviceTunnelFlight: TunnelFlightService,
+                private serviceTunnelFlight: TunnelFlightService,
-        private translateService: TranslateService,
+                private translateService: TranslateService,
-        private dateService: DateService) { }
+                private dateService: DateService) { }
 
     ngOnInit() {
         this.serviceComm.forceTranslateTitle.subscribe((data) => {
@@ -46,14 +46,25 @@ export class ListOfTunnelFlightsComponent implements OnInit {
 
         this.chartConfig();
         this.selectedPeriod = "currentYear"
-        this.getData();
+        this.getDataForGraph();
+    }
+    
+    public onPeriodChange() {
+        this.getDataForGraph();
+        if (this.dataSourceTable?.data.length > 0){
+            this.getDataForTable();
+        }
+    }
+
+    public onLoadTable() {
+        this.getDataForTable();
     }
 
     private chartConfig() {
         this.barChartType = "bar";
 
         this.barChartOptions = {
-            responsive: false,
+            responsive: true,
             plugins: {
                 legend: {
                     display: true
@@ -86,7 +97,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         );
     }
 
-    private getData(): void {
+    private getDataForTable(): void {
         this.isLoading = true;
 
         // Get data to show in a table
@@ -103,15 +114,34 @@ export class ListOfTunnelFlightsComponent implements OnInit {
                 break;
         }
 
-        let tunnelFlights: Array<TunnelFlight> = [];
         this.serviceTunnelFlight.getTunnelFlights(beginDate, endDate)
                                 .subscribe((data) => {
-                                    tunnelFlights = data;
                                     this.dataSourceTable.data = data;
+                                    this.isLoading = false;
+                                });
+    }
 
-                                    // Format data to show a chart
+    private getDataForGraph(): void {
+        this.isLoading = true;
+
+        // Get data to show in a table
+        let endDate = new Date();
+        let beginDate = new Date();
+        endDate.setHours(0, 0, 0, 0);
+        switch (this.selectedPeriod) {
+            case "currentYear":
+                beginDate = new Date(endDate.getFullYear(), 0, 1);
+                break;
+            case "12Months":
+                beginDate = this.dateService.addMonths(endDate, -12);
+                beginDate.setDate(1);
+                break;
+        }
+
+        this.serviceTunnelFlight.getTunnelFlightsByMonth(beginDate, endDate)
+                                .subscribe((data) => {
                                     const allMonths = this.getMontsBetweenDates(beginDate, endDate)
-                                    const cumulatedTime = this.getCumulatedTimeByMonth(tunnelFlights, allMonths);
+                                    const cumulatedTime = this.getCumulatedTimeByMonth(data, allMonths);
                                     this.barChartData = {
                                         labels: allMonths,
                                         datasets: [
@@ -123,17 +153,30 @@ export class ListOfTunnelFlightsComponent implements OnInit {
                                 });
     }
 
-    private getCumulatedTimeByMonth(tunnelFlights: TunnelFlight[], allMonths: string[]): Array<number> {
+    private getMontsBetweenDates(beginDate: Date, endDate: Date): Array<string> {
+        let results: Array<string> = [];
+        let tmpBeginDate = new Date(beginDate.getTime());
+        const tmpEndDate = new Date(endDate.getTime());
+
+        while (tmpBeginDate < tmpEndDate) {
+            results.push(formatDate(tmpBeginDate, "yy-MM", "en"));
+            tmpBeginDate.setMonth(tmpBeginDate.getMonth() + 1);
+        }
+
+        return results;
+    }
+
+    private getCumulatedTimeByMonth(stats: TunnelFlightByMonth[], allMonths: string[]): Array<number> {
         let results: Array<number> = [];
 
         for (let i = 0; i < allMonths.length; i++) {
             const month = allMonths[i];
-            let tmpTunnelFlights = tunnelFlights.filter((d) => d.flightMonth == month);
+            let tmp = stats.filter((d) => d.month == month);
 
             let sum = 0;
-            tmpTunnelFlights.map((data) => {
+            if (tmp.length == 1){
-                sum += data.nbMinutes;
+                sum = tmp[0].nb;
-            });
+            }
 
             results.push(sum);
         }
@@ -150,22 +193,4 @@ export class ListOfTunnelFlightsComponent implements OnInit {
 
         return 'Sum: ' + sum;
     };
-
-    public onPeriodChange() {
-        this.getData();
-    }
-
-
-    private getMontsBetweenDates(beginDate: Date, endDate: Date): Array<string> {
-        let results: Array<string> = [];
-        let tmpBeginDate = new Date(beginDate.getTime());
-        const tmpEndDate = new Date(endDate.getTime());
-
-        while (tmpBeginDate < tmpEndDate) {
-            results.push(formatDate(tmpBeginDate, "yy-MM", "en"));
-            tmpBeginDate.setMonth(tmpBeginDate.getMonth() + 1);
-        }
-
-        return results;
-    }
 }

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

@@ -126,5 +126,6 @@
 
     "ListTunnelFlight_CurrentYear": "On the current year",
     "ListTunnelFlight_12Months": "On 12 last months",
-    "ListTunnelFlight_Add" : "Add tunnel flights"
+    "ListTunnelFlight_Add" : "Add tunnel flights",
+    "ListTunnelFlight_LoadTable" : "Load the tunnel flights"
 }

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

@@ -126,5 +126,6 @@
 
     "ListTunnelFlight_CurrentYear": "Dans l'année en cours",
     "ListTunnelFlight_12Months": "Sur 12 derniers mois",
-    "ListTunnelFlight_Add" : "Ajouter du temps en soufflerie"
+    "ListTunnelFlight_Add" : "Ajouter du temps en soufflerie",
+    "ListTunnelFlight_LoadTable" : "Charger les vols en tunnel"
 }

Front/skydivelogs-app/src/models/tunnel-flight.ts

@@ -39,4 +39,23 @@ export class TunnelFlight {
   public notes: string;
   public flightDate: Date;
   public flightMonth: string;
+}
+
+export class TunnelFlightByMonth {
+  constructor(data: any) {
+    this.month = data.label;
+    this.nb = data.nb;
+  }
+
+  public month: string;
+  public nb: number;
+}
+
+export class TunnelFlightByMonthResp {
+  constructor(data: any) {
+    Object.assign(this, data);
+  }
+
+  public label: string;
+  public nb: number;
 }

Front/skydivelogs-app/src/services/tunnel-flight.service.ts

@@ -4,7 +4,7 @@ import { HttpClient } from "@angular/common/http";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 
-import { TunnelFlightReq, TunnelFlightResp, TunnelFlight } from "../models/tunnel-flight";
+import { TunnelFlightReq, TunnelFlightResp, TunnelFlight, TunnelFlightByMonthResp, TunnelFlightByMonth } from "../models/tunnel-flight";
 import { DropZoneResp } from '../models/dropzone';
 
 import { BaseService } from "./base.service";
@@ -45,6 +45,19 @@ export class TunnelFlightService extends BaseService {
                     );
   }
 
+  public getTunnelFlightsByMonth(begin: Date, end: Date): Observable<Array<TunnelFlightByMonth>> {
+    let beginDate = this.datePipe.transform(begin, "yyyy-MM-dd");
+    let endDate = this.datePipe.transform(end, "yyyy-MM-dd");
+
+    return this.http.get<Array<TunnelFlightByMonthResp>>(`${this.apiUrl}/TunnelFlight/month/${beginDate}/${endDate}`, { headers: this.headers })
+                    .pipe(
+                      map(response => {
+                        const stats = response.map(data => new TunnelFlightByMonth(data));
+                        return stats;
+                      })
+                    );
+  }
+
   private mapWithDataInCache(apiResp: Array<TunnelFlightResp>): Array<TunnelFlight> {
     let allDropzones: Array<DropZoneResp>;
     this.dropzoneService.getFromCache().subscribe(data => { allDropzones = data; });