Retrieve the tunnel flights

Show the list of tunnel flights

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

@@ -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 [(ngModel)]="selectedPeriod" (ngModelChange)="onPeriodChange()">
-        <mat-radio-group>
+        <mat-radio-button value="currentYear">{{ 'ListTunnelFlight_CurrentYear' | translate }}</mat-radio-button>
-            <mat-radio-button [value]="1">{{ 'ListTunnelFlight_CurrentYear' | translate }}</mat-radio-button>
+        <mat-radio-button value="12Months">{{ 'ListTunnelFlight_12Months' | translate }}</mat-radio-button>
-            <mat-radio-button [value]="2">{{ 'ListTunnelFlight_12Months' | translate }}</mat-radio-button>
+    </mat-radio-group>
-        </mat-radio-group>
 
-        <canvas baseChart style="width: 50%;" 
+    <canvas baseChart style="width: 50%;" 
-                [data]="barChartData" 
+            [data]="barChartData" 
-                [options]="barChartOptions"
+            [options]="barChartOptions"
-                [plugins]="barChartPlugins" 
+            [plugins]="barChartPlugins" 
-                [legend]="barChartLegend" 
+            [legend]="barChartLegend" 
-                [type]="barChartType">
+            [type]="barChartType">
-        </canvas>
+    </canvas>
-    </form>
+
+    <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>

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

@@ -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() {
+    private chartConfig() {
-        this.translateService.get("ListTunnelFlight_Title").subscribe(
-            data => { this.serviceComm.updatedComponentTitle(data); }
-        );
-    }
-
-    private getData(): void {
         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();
     }
 }

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -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>

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html

@@ -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>

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

@@ -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"
 }

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

@@ -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"
 }

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

@@ -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;

Front/skydivelogs-app/src/services/date.service.ts

@@ -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;
     }

Front/skydivelogs-app/src/services/jump.service.ts

@@ -23,12 +23,12 @@ export class JumpService extends BaseService {
   private callsToAdd: Array<Observable<any>>;
 
   constructor(private http: HttpClient,
-    private dateService: DateService,
+              private dateService: DateService,
-    private datePipe: DatePipe,
+              private datePipe: DatePipe,
-    private dropzoneService: DropzoneService,
+              private dropzoneService: DropzoneService,
-    private aircraftService: AircraftService,
+              private aircraftService: AircraftService,
-    private jumpTypeService: JumpTypeService,
+              private jumpTypeService: JumpTypeService,
-    private gearService: GearService) {
+              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

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

@@ -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 beginDate = this.datePipe.transform(begin, "yyyy-MM-dd");
-    let endDate = this.datePipe.transform(end, "yyyyMMdd");
+    let endDate = this.datePipe.transform(end, "yyyy-MM-dd");
 
     return this.http.get<Array<TunnelFlightResp>>(`${this.apiUrl}/TunnelFlight/${beginDate}/${endDate}`, { headers: this.headers })
-                    .pipe(
+                    .pipe(map(response => {
-                      map(response => {
+                        return this.mapWithDataInCache(response);
-                        const stats = response.map(data => new TunnelFlightResp(data));
-                        return stats;
                       })
                     );
   }
+
+  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;
+    });
+  }
 }