sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Retrieve the tunnel flights

Browse Source 
Show the list of tunnel flights
This commit is contained in:
Sébastien ANDRE
2023-07-21 19:49:13 +02:00
parent 54dc6ae57e
commit 320ea8c8f3
10 changed files with 166 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,63 @@
<div class="content">
<div>
<button mat-raised-button color="accent" [routerLink]="['/newTunnelFlight']" [routerLinkActive]="['active']"
skipLocationChange>{{ 'ListTunnelFlight_Add' | translate }}</button>
</div>
<mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
<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>
<mat-radio-group [(ngModel)]="selectedPeriod" (ngModelChange)="onPeriodChange()">
<mat-radio-button value="currentYear">{{ 'ListTunnelFlight_CurrentYear' | translate }}</mat-radio-button>
<mat-radio-button value="12Months">{{ 'ListTunnelFlight_12Months' | translate }}</mat-radio-button>
</mat-radio-group>
<canvas baseChart style="width: 50%;"
[data]="barChartData"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[type]="barChartType">
</canvas>
</form>
<canvas baseChart style="width: 50%;"
[data]="barChartData"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[type]="barChartType">
</canvas>
<div>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span>
</td>
</ng-container>
<ng-container matColumnDef="tunnel">
<th mat-header-cell *matHeaderCellDef>Tunnel</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.tunnel.name"></span>
</td>
</ng-container>
<ng-container matColumnDef="nbMinutes">
<th mat-header-cell *matHeaderCellDef>Minutes</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.nbMinutes"></span>
</td>
</ng-container>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>Notes</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.notes"></span>
</td>
</ng-container>
<ng-container matColumnDef="flightDate">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.flightDate | date: 'yyyy-MM-dd'"></span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>

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

@@ -1,9 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { MatTableDataSource } from '@angular/material/table';
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';
@Component({
selector: 'app-list-of-tunnel-flights',
@@ -18,10 +21,19 @@ export class ListOfTunnelFlightsComponent implements OnInit {
public barChartType: string;
public isLoading: boolean = false;
public selectedPeriod: string;
public dataSourceTable: MatTableDataSource<TunnelFlight> = new MatTableDataSource();
public displayedColumns: Array<string> = [
"id",
"tunnel",
"nbMinutes",
"notes",
"flightDate"
];
constructor(private serviceComm: ServiceComm,
private serviceTunnelFlight: TunnelFlightService,
private translateService: TranslateService) { }
private translateService: TranslateService,
private dateService: DateService) { }
ngOnInit() {
this.serviceComm.forceTranslateTitle.subscribe((data) => {
@@ -31,26 +43,13 @@ export class ListOfTunnelFlightsComponent implements OnInit {
});
this.updateTitle();
this.isLoading = true;
this.chartConfig();
this.selectedPeriod = "currentYear"
this.getData();
}
private updateTitle() {
this.translateService.get("ListTunnelFlight_Title").subscribe(
data => { this.serviceComm.updatedComponentTitle(data); }
);
}
private getData(): void {
private chartConfig() {
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,
@@ -78,6 +77,43 @@ export class ListOfTunnelFlightsComponent implements OnInit {
}
}
};
}
private updateTitle() {
this.translateService.get("ListTunnelFlight_Title").subscribe(
data => { this.serviceComm.updatedComponentTitle(data); }
);
}
private getData(): void {
this.isLoading = true;
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.getTunnelFlights(beginDate, endDate)
.subscribe((data) => {
console.log(data);
this.dataSourceTable.data = data;
});
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.isLoading = false;
}
@@ -88,10 +124,12 @@ export class ListOfTunnelFlightsComponent implements OnInit {
tooltipItems.forEach(function (tooltipItem) {
sum += tooltipItem.parsed.y;
});
return 'Sum: ' + sum;
};
public onPeriodChange() {
console.log(this.selectedPeriod);
this.getData();
}
}