Add a page to show the hours of tunnel

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

@@ -0,0 +1,13 @@
+<div class="content">
+    <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
+
+    <div>
+        <canvas baseChart style="width: 50%;"
+                [data]="barChartData"
+                [options]="barChartOptions" 
+                [plugins]="barChartPlugins"
+                [legend]="barChartLegend" 
+                [type]="barChartType" >
+        </canvas>
+    </div>
+</div>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListOfTunnelFlightsComponent } from './list-of-tunnel-flights.component';
+
+describe('ListOfTunnelFlightsComponent', () => {
+  let component: ListOfTunnelFlightsComponent;
+  let fixture: ComponentFixture<ListOfTunnelFlightsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ListOfTunnelFlightsComponent]
+    });
+    fixture = TestBed.createComponent(ListOfTunnelFlightsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,93 @@
+import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { ChartConfiguration, ChartData } from 'chart.js';
+
+import { TunnelService } from '../../services/tunnel.service';
+import { ServiceComm } from '../../services/service-comm.service';
+import { TunnelFlightService } from "../../services/tunnel-flight.service";
+
+@Component({
+  selector: 'app-list-of-tunnel-flights',
+  templateUrl: './list-of-tunnel-flights.component.html',
+  styleUrls: ['./list-of-tunnel-flights.component.css']
+})
+export class ListOfTunnelFlightsComponent implements OnInit {
+  public barChartLegend = true;
+  public barChartPlugins = [];
+  public barChartData: ChartData<'bar'>;
+  public barChartOptions: ChartConfiguration['options'];
+  public barChartType: string;
+  public isLoading: boolean = false;
+
+  constructor(private serviceComm: ServiceComm,
+              private serviceTunnel: TunnelService,
+              private serviceTunnelFlight: TunnelFlightService,
+              private translateService: TranslateService) { }
+
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
+        this.updateTitle();
+      }
+    });
+    this.updateTitle();
+
+    this.isLoading = true;
+    this.getData();
+  }
+
+  private updateTitle() {
+    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,
+      plugins: {
+        legend: {
+          display: true
+        },
+        tooltip: {
+          callbacks: {
+            footer: this.footer,
+          }
+        }
+      },
+      interaction: {
+        intersect: false,
+        mode: 'nearest',
+        axis: 'x'
+      },
+      scales: {
+        x: {
+          stacked: true
+        },
+        y: {
+          stacked: true
+        }
+      }
+    };
+
+    this.isLoading = false;
+  }
+
+  private footer = (tooltipItems) => {
+    let sum = 0;
+
+    tooltipItems.forEach(function (tooltipItem) {
+      sum += tooltipItem.parsed.y;
+    });
+    return 'Sum: ' + sum;
+  };
+}