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

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

  <mat-radio-group
    [(ngModel)]="selectedPeriod"
    (ngModelChange)="onPeriodChange()"
  >
    <mat-radio-button value="currentYear">{{
      "ListTunnelFlight_CurrentYear" | translate
    }}</mat-radio-button>
    <mat-radio-button value="12Months">{{
      "ListTunnelFlight_12Months" | translate
    }}</mat-radio-button>
    <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 class="chart-container">
    <!-- https://www.freecodecamp.org/news/how-to-make-bar-and-line-charts-using-chartjs-in-angular/ -->
    <canvas
      baseChart
      [data]="barChartData"
      [options]="barChartOptions"
      [legend]="barChartLegend"
      [type]="barChartType"
    >
    </canvas>
  </div>

  <div>
    <button mat-raised-button color="accent" (click)="onLoadTable()">
      {{ "ListTunnelFlight_LoadTable" | translate }}
    </button>

    <table
      mat-table
      [dataSource]="dataSourceTable"
      *ngIf="dataSourceTable?.data.length"
    >
      <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="jumpType">
        <th mat-header-cell *matHeaderCellDef>Jump Type</th>
        <td mat-cell *matCellDef="let element">
          <span
            class="smallSpanWithBreakWord"
            [innerHTML]="element.jumpType.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>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef style="min-width: 80px"></th>
        <td mat-cell *matCellDef="let element" style="text-align: left">
          <mat-icon
            aria-hidden="false"
            aria-label="Delete this jump"
            style="cursor: pointer"
            (click)="delete(element)"
            svgIcon="delete"
          ></mat-icon>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </div>
</div>