Retrieve the tunnel flights
Show the list of tunnel flights
This commit is contained in:
@@ -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>
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user