148 lines
5.4 KiB
HTML
148 lines
5.4 KiB
HTML
<div class="content">
|
|
<div>
|
|
<button
|
|
mat-raised-button
|
|
color="accent"
|
|
[routerLink]="['/newTunnelFlight']"
|
|
[routerLinkActive]="['active']"
|
|
skipLocationChange
|
|
>
|
|
{{ "ListTunnelFlight_Add" | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
@if (isLoading) {
|
|
<mat-progress-bar [mode]="'indeterminate'"></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>
|
|
@for (stat of stats; track stat) {
|
|
<mat-list-item matListItemLine>
|
|
<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>
|
|
|
|
@if (dataSourceTable?.data.length) {
|
|
<table mat-table [dataSource]="dataSourceTable">
|
|
<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>
|