Display the num of minutes of flights

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

@@ -12,6 +12,12 @@
         <mat-radio-button value="all">{{ 'ListTunnelFlight_AllFlights' | translate }}</mat-radio-button>
     </mat-radio-group>
 
+    <mat-nav-list>
+        <mat-list-item matListItemLine *ngFor="let stat of stats">
+            <label>{{stat.id}} : {{stat.values}}</label>
+        </mat-list-item>
+    </mat-nav-list>
+
     <div style="display: inline-block; position: relative; width: 100%;">
         <canvas baseChart
                 [data]="barChartData" 

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

@@ -3,7 +3,7 @@ import { formatDate } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
-import { from, of, groupBy, mergeMap, reduce, map } from 'rxjs';
+import { from, of, groupBy, mergeMap, reduce, map, Observable } from 'rxjs';
 
 import { ServiceComm } from '../../services/service-comm.service';
 import { TunnelFlightService } from "../../services/tunnel-flight.service";
@@ -33,6 +33,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         "flightDate",
         "actions"
     ];
+    public stats: Array<{id: String|Number, values: String|Number}> = [];
 
     constructor(private serviceComm: ServiceComm,
                 private serviceTunnelFlight: TunnelFlightService,
@@ -138,14 +139,18 @@ export class ListOfTunnelFlightsComponent implements OnInit {
     }
 
     private computeTimeByType(stats: TunnelFlightByMonth[]) {
+        this.stats = [];
         from(stats).pipe(
           groupBy((type) => type.type, { element: (p) => p.nb }),
           mergeMap((group$) =>
             group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))
           ),
-          map((arr) => ({ id: arr[0], values: arr.slice(1) }))
+          map((arr) => ({ id: arr[0], values: arr.slice(1).reduce((a, b) => Number(a) + Number(b), 0) }))
         )
-        .subscribe((p) => console.log(p));
+        .subscribe((p) => { 
+            console.log(p); 
+            this.stats.push(p); 
+        });
     }
 
     private getMontsBetweenDates(beginDate: Date, endDate: Date): Array<string> {

Front/skydivelogs-app/src/interceptor/caching.interceptor.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
 import { HttpEvent, HttpRequest, HttpResponse, HttpInterceptor, HttpHandler } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+// import { Observable } from 'rxjs/Observable';
+// import 'rxjs/add/observable/of';
 import { tap } from 'rxjs/operators';
-import 'rxjs/add/observable/of';
+import { Observable, of } from 'rxjs';
 
 import { RequestCache } from '../services/request-cache.service';
 
@@ -13,7 +14,7 @@ export class CachingInterceptor implements HttpInterceptor {
 
   intercept(req: HttpRequest<any>, next: HttpHandler) {
     const cachedResponse = this.cache.get(req);
-    return cachedResponse ? Observable.of(cachedResponse) : this.sendRequest(req, next);
+    return cachedResponse ? of(cachedResponse) : this.sendRequest(req, next);
   }
 
   sendRequest(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {