75 lines
3.4 KiB
HTML
75 lines
3.4 KiB
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>
|
|
|
|
<div style="display: block; width: 55%;">
|
|
<canvas baseChart
|
|
[data]="barChartData"
|
|
[options]="barChartOptions"
|
|
[plugins]="barChartPlugins"
|
|
[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>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
</table>
|
|
</div>
|
|
</div> |