diff --git a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html index ff8a19f..0296c87 100644 --- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html +++ b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html @@ -11,16 +11,20 @@ {{ 'ListTunnelFlight_12Months' | translate }} - - +
+ + +
- + + +
ID diff --git a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts index 71fa9da..0b3bd28 100644 --- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts +++ b/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 translateService: TranslateService, - private dateService: DateService) { } + private serviceTunnelFlight: TunnelFlightService, + private translateService: TranslateService, + 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 = []; 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 { + private getMontsBetweenDates(beginDate: Date, endDate: Date): Array { + let results: Array = []; + 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 { let results: Array = []; 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) => { - sum += data.nbMinutes; - }); + if (tmp.length == 1){ + 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 { - let results: Array = []; - 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; - } } diff --git a/Front/skydivelogs-app/src/assets/i18n/en.json b/Front/skydivelogs-app/src/assets/i18n/en.json index c1a0dba..5df8871 100644 --- a/Front/skydivelogs-app/src/assets/i18n/en.json +++ b/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" } \ No newline at end of file diff --git a/Front/skydivelogs-app/src/assets/i18n/fr.json b/Front/skydivelogs-app/src/assets/i18n/fr.json index c8f31c1..a467efe 100644 --- a/Front/skydivelogs-app/src/assets/i18n/fr.json +++ b/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" } \ No newline at end of file diff --git a/Front/skydivelogs-app/src/models/tunnel-flight.ts b/Front/skydivelogs-app/src/models/tunnel-flight.ts index 5defb8d..41c3946 100644 --- a/Front/skydivelogs-app/src/models/tunnel-flight.ts +++ b/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; } \ No newline at end of file diff --git a/Front/skydivelogs-app/src/services/tunnel-flight.service.ts b/Front/skydivelogs-app/src/services/tunnel-flight.service.ts index 293889a..2bb9c03 100644 --- a/Front/skydivelogs-app/src/services/tunnel-flight.service.ts +++ b/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> { + let beginDate = this.datePipe.transform(begin, "yyyy-MM-dd"); + let endDate = this.datePipe.transform(end, "yyyy-MM-dd"); + + return this.http.get>(`${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): Array { let allDropzones: Array; this.dropzoneService.getFromCache().subscribe(data => { allDropzones = data; });