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

import { Component, OnInit } from "@angular/core";
import { RouterLink, RouterModule } from "@angular/router";
import { formatDate } from "@angular/common";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { CommonModule } from "@angular/common";
import { MatIconModule } from "@angular/material/icon";
import { MatListModule } from "@angular/material/list";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatRadioModule } from "@angular/material/radio";
import { MatProgressBarModule } from "@angular/material/progress-bar";
import { FormsModule } from "@angular/forms";
import { MatButtonModule } from "@angular/material/button";

import { ChartConfiguration, ChartData, ChartType } from "chart.js";
import { from, groupBy, mergeMap, reduce, map } from "rxjs";
import { BaseChartDirective } from "ng2-charts";

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"],
  imports: [
    TranslateModule,
    BaseChartDirective,
    CommonModule,
    MatIconModule,
    MatListModule,
    MatProgressSpinnerModule,
    RouterLink,
    MatRadioModule,
    MatProgressBarModule,
    FormsModule,
    RouterModule,
    MatTableModule,
    MatButtonModule,
  ],
})
export class ListOfTunnelFlightsComponent implements OnInit {
  public barChartLegend = true;
  public barChartData: ChartData<"bar">;
  public barChartOptions: ChartConfiguration["options"];
  public barChartType: ChartType;
  public isLoading: boolean = false;
  public selectedPeriod: string;
  public dataSourceTable: MatTableDataSource<TunnelFlight> =
    new MatTableDataSource();
  public displayedColumns: Array<string> = [
    "id",
    "tunnel",
    "jumpType",
    "nbMinutes",
    "notes",
    "flightDate",
    "actions",
  ];
  public stats: Array<{ id: String | Number; values: String | Number }> = [];

  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,
      maintainAspectRatio: 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();
    endDate.setHours(0, 0, 0, 0);
    let beginDate = this.computeBeginDateByPeriod(this.selectedPeriod, endDate);

    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();
    endDate.setHours(0, 0, 0, 0);
    let beginDate = this.computeBeginDateByPeriod(this.selectedPeriod, endDate);

    this.serviceTunnelFlight
      .getTunnelFlightsByMonth(beginDate, endDate)
      .subscribe((data) => {
        const allMonths = this.getMontsBetweenDates(beginDate, endDate);
        const cumulatedTime = this.getCumulatedTimeByTypeByMonth(
          data,
          allMonths
        );
        this.computeTimeByType(data);
        this.barChartData = {
          labels: allMonths,
          datasets: cumulatedTime,
        };

        this.isLoading = false;
      });
  }

  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).reduce((a, b) => Number(a) + Number(b), 0),
        }))
      )
      .subscribe((p) => {
        console.log(p);
        this.stats.push(p);
      });
  }

  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: any) => {
    let sum = 0;

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

    return "Sum: " + sum;
  };

  private computeBeginDateByPeriod(
    selectedPeriod: String,
    endDate: Date
  ): Date {
    let beginDate = new Date();

    switch (selectedPeriod) {
      case "currentYear":
        beginDate = new Date(endDate.getFullYear(), 0, 1);
        break;
      case "12Months":
        beginDate = this.dateService.addMonths(endDate, -12);
        beginDate.setDate(1);
        break;
      case "all":
        beginDate = this.dateService.addMonths(endDate, -120);
        beginDate.setDate(1);
        break;
    }

    return beginDate;
  }

  public delete(item: TunnelFlight) {
    let data: Array<TunnelFlight> = this.dataSourceTable.data;
    data = data.filter((d) => d.id !== item.id);

    this.dataSourceTable.data = data;
    this.serviceTunnelFlight.deleteTunnelFlight(item);
  }
}