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

import { Component, OnInit } from '@angular/core';
import { formatDate } from '@angular/common';
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, TunnelFlightByMonth } from '../../models/tunnel-flight';

@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;
    public selectedPeriod: string;
    public dataSourceTable: MatTableDataSource<TunnelFlight> = new MatTableDataSource();
    public displayedColumns: Array<string> = [
        "id",
        "tunnel",
        "jumpType",
        "nbMinutes",
        "notes",
        "flightDate"
    ];

    constructor(private serviceComm: ServiceComm,
                private serviceTunnelFlight: TunnelFlightService,
                private translateService: TranslateService,
                private dateService: DateService) { }

    ngOnInit() {
        this.serviceComm.forceTranslateTitle.subscribe((data) => {
            if (data === true) {
                this.updateTitle();
            }
        });
        this.updateTitle();

        this.chartConfig();
        this.selectedPeriod = "currentYear"
        this.getDataForGraph();
    }
    
    public onPeriodChange() {
        this.getDataForGraph();
        if (this.dataSourceTable?.data.length > 0){
            this.getDataForTable();
        }
    }

    public onLoadTable() {
        this.getDataForTable();
    }

    private chartConfig() {
        this.barChartType = "bar";

        this.barChartOptions = {
            responsive: true,
            plugins: {
                legend: {
                    display: true
                },
                tooltip: {
                    callbacks: {
                        footer: this.footer,
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'nearest',
                axis: 'x'
            },
            scales: {
                x: {
                    stacked: true
                },
                y: {
                    stacked: true
                }
            }
        };
    }

    private updateTitle() {
        this.translateService.get("ListTunnelFlight_Title").subscribe(
            data => { this.serviceComm.updatedComponentTitle(data); }
        );
    }

    private getDataForTable(): void {
        this.isLoading = true;

        // Get data to show in a table
        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) => {
                                    this.dataSourceTable.data = data;
                                    this.isLoading = false;
                                });
    }

    private getDataForGraph(): void {
        this.isLoading = true;

        // Get data to show in a table
        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.getTunnelFlightsByMonth(beginDate, endDate)
                                .subscribe((data) => {
                                    const allMonths = this.getMontsBetweenDates(beginDate, endDate)
                                    const cumulatedTime = this.getCumulatedTimeByTypeByMonth(data, allMonths);
                                    this.barChartData = {
                                        labels: allMonths,
                                        datasets: cumulatedTime
                                    };

                                    this.isLoading = false;
                                });
    }

    private getMontsBetweenDates(beginDate: Date, endDate: Date): Array<string> {
        let results: Array<string> = [];
        let tmpBeginDate = new Date(beginDate.getTime());
        const tmpEndDate = new Date(endDate.getTime());

        while (tmpBeginDate < tmpEndDate) {
            results.push(formatDate(tmpBeginDate, "yy-MM", "en"));
            tmpBeginDate.setMonth(tmpBeginDate.getMonth() + 1);
        }

        return results;
    }

    private getCumulatedTimeByTypeByMonth(stats: TunnelFlightByMonth[], allMonths: string[]): Array<any> {
        let tmpResults = new Map<string, number[]>();

        const disctintType =  Array.from(new Set(stats.map((item) => item.type)));
        disctintType.forEach(type => {
            tmpResults.set(type, Array.from({length: allMonths.length}, (v, k) => 0));
        });

        for (let i = 0; i < allMonths.length; i++) {
            const month = allMonths[i];
            let filteredStats = stats.filter((d) => d.month == month);

            if (filteredStats.length > 0){
                filteredStats.forEach(fs => {
                    tmpResults.get(fs.type)[i] += fs.nb;
                });
            }
        }

        const results = Array.from(tmpResults, function (item) {
            return { label: item[0], data: item[1] }
        });

        return results;
    }

    private footer = (tooltipItems) => {
        let sum = 0;

        tooltipItems.forEach(function (tooltipItem) {
            sum += tooltipItem.parsed.y;
        });

        return 'Sum: ' + sum;
    };
}