Retrieve the tunnel flights

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

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>

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();
}
}

View File

@@ -3,6 +3,7 @@
<button mat-raised-button color="accent" [routerLink]="['/jumps']" [routerLinkActive]="['active']" skipLocationChange>{{ 'NewJump_GoToJump' | translate }}</button>
<p><mat-checkbox [(ngModel)]="resetForm" labelPosition="before">{{ 'NewJump_ResetForm' | translate }}</mat-checkbox></p>
</div>
<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
<mat-form-field>
<mat-label>{{ 'NewJump_ChooseJumpType' | translate }}</mat-label>

View File

@@ -1,4 +1,7 @@
<div class="content">
<div>
<button mat-raised-button color="accent" [routerLink]="['/tunnelFlights']" [routerLinkActive]="['active']" skipLocationChange>{{ 'NewTunnelFlight_GoToJump' | translate }}</button>
</div>
<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
<mat-form-field>

View File

@@ -122,7 +122,9 @@
"NewTunnelFlight_Comments_Lbl": "Comments",
"NewTunnelFlight_Minutes_Lbl": "Time of flight (minutes)",
"NewTunnelFlight_Date_Lbl": "Date of flight",
"NewTunnelFlight_GoToJump": "View the tunnel flights",
"ListTunnelFlight_CurrentYear": "On the current year",
"ListTunnelFlight_12Months": "On 12 last months"
"ListTunnelFlight_12Months": "On 12 last months",
"ListTunnelFlight_Add" : "Add tunnel flights"
}

View File

@@ -122,7 +122,9 @@
"NewTunnelFlight_Comments_Lbl": "Commentaires",
"NewTunnelFlight_Minutes_Lbl": "Temps de vol(minutes)",
"NewTunnelFlight_Date_Lbl": "Date des vols",
"NewTunnelFlight_GoToJump": "Voir les temps de vol en soufflerie",
"ListTunnelFlight_CurrentYear": "Dans l'année en cours",
"ListTunnelFlight_12Months": "Sur 12 derniers mois"
"ListTunnelFlight_12Months": "Sur 12 derniers mois",
"ListTunnelFlight_Add" : "Ajouter du temps en soufflerie"
}

View File

@@ -1,3 +1,5 @@
import { DropZoneResp } from './dropzone';
export class TunnelFlightReq {
constructor(data: any) {
Object.assign(this, data);
@@ -30,7 +32,7 @@ export class TunnelFlight {
}
public id: number;
public tunnelId: number;
public tunnel: DropZoneResp;
public nbMinutes: number;
public notes: string;
public flightDate: Date;

View File

@@ -9,11 +9,21 @@ export class DateService {
}
public addDays(currentDate: Date, nbDays: number): Date {
const totalMilliSeconds = nbDays * this.milliSeconInDay;
const currentTime = currentDate.getTime();
const tmpDate = new Date(currentDate.getTime());
tmpDate.setDate(tmpDate.getDate() + nbDays);
tmpDate.setTime(currentTime + totalMilliSeconds);
// const totalMilliSeconds = nbDays * this.milliSeconInDay;
// const currentTime = currentDate.getTime();
// const tmpDate = new Date(currentDate.getTime());
// tmpDate.setTime(currentTime + totalMilliSeconds);
return tmpDate;
}
public addMonths(currentDate: Date, nbMonths: number): Date {
const tmpDate = new Date(currentDate.getTime());
tmpDate.setMonth(tmpDate.getMonth() + nbMonths);
return tmpDate;
}

View File

@@ -23,12 +23,12 @@ export class JumpService extends BaseService {
private callsToAdd: Array<Observable<any>>;
constructor(private http: HttpClient,
private dateService: DateService,
private datePipe: DatePipe,
private dropzoneService: DropzoneService,
private aircraftService: AircraftService,
private jumpTypeService: JumpTypeService,
private gearService: GearService) {
private dateService: DateService,
private datePipe: DatePipe,
private dropzoneService: DropzoneService,
private aircraftService: AircraftService,
private jumpTypeService: JumpTypeService,
private gearService: GearService) {
super();
}
@@ -41,7 +41,7 @@ export class JumpService extends BaseService {
public getJumps(beginIndex: number, endIndex: number): Observable<JumpList> {
return this.http.get<JumpListResp>(`${this.apiUrl}/Jump/${beginIndex}/${endIndex}`, { headers: this.headers })
.pipe(map((response) => {
.pipe(map(response => {
let result: JumpList = {
rows: this.mapWithDataInCache(response.rows),
count: response.count

View File

@@ -5,12 +5,16 @@ import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { TunnelFlightReq, TunnelFlightResp, TunnelFlight } from "../models/tunnel-flight";
import { DropZoneResp } from '../models/dropzone';
import { BaseService } from "./base.service";
import { DropzoneService } from "./dropzone.service";
@Injectable()
export class TunnelFlightService extends BaseService {
constructor(private http: HttpClient, private datePipe: DatePipe) {
constructor(private http: HttpClient,
private datePipe: DatePipe,
private dropzoneService: DropzoneService) {
super();
}
@@ -31,15 +35,25 @@ export class TunnelFlightService extends BaseService {
}
public getTunnelFlights(begin: Date, end: Date): Observable<Array<TunnelFlight>> {
let beginDate = this.datePipe.transform(begin, "yyyyMMdd");
let endDate = this.datePipe.transform(end, "yyyyMMdd");
let beginDate = this.datePipe.transform(begin, "yyyy-MM-dd");
let endDate = this.datePipe.transform(end, "yyyy-MM-dd");
return this.http.get<Array<TunnelFlightResp>>(`${this.apiUrl}/TunnelFlight/${beginDate}/${endDate}`, { headers: this.headers })
.pipe(
map(response => {
const stats = response.map(data => new TunnelFlightResp(data));
return stats;
.pipe(map(response => {
return this.mapWithDataInCache(response);
})
);
}
private mapWithDataInCache(apiResp: Array<TunnelFlightResp>): Array<TunnelFlight> {
let allDropzones: Array<DropZoneResp>;
this.dropzoneService.getFromCache().subscribe(data => { allDropzones = data; });
return apiResp.map((data) => {
let tmp = new TunnelFlight(data);
tmp.tunnel = allDropzones.find(d => d.id == data.tunnelId);
return tmp;
});
}
}