Files
SkydiveLogs/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
2025-07-11 09:54:35 +02:00

82 lines
4.4 KiB
HTML

<div class="content">
<div>
<button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']"
skipLocationChange>{{ 'List_Jump_Add' | translate }}</button>
</div>
<mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
<div>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="infos">
<th mat-header-cell *matHeaderCellDef style="min-width: 80px;text-wrap: nowrap;"></th>
<td mat-cell *matCellDef="let element" style="text-align: left;text-wrap: nowrap;">
<mat-icon aria-hidden="false" aria-label="Additional informations of the jump"
style="cursor: pointer;" (click)='openDialog(element, false)'>info</mat-icon>
<mat-icon aria-hidden="false" aria-label="Special jump"
[style.visibility]="element.notes != undefined ? 'visible' : 'hidden'">sticky_note_2</mat-icon>
<mat-icon aria-hidden="false" aria-label="Special jump"
[style.visibility]="element.isSpecial ? 'visible' : 'hidden'">celebration</mat-icon>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef style="min-width: 70px;">{{ 'List_Jump_Header_Num' | translate }}
</th>
<td mat-cell *matCellDef="let element; let i = index">
{{ paginator.length - ( (paginator.pageIndex * paginator.pageSize ) + i ) }}
</td>
</ng-container>
<ng-container matColumnDef="jumpDate">
<th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Date' | translate }}</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"></span>
</td>
</ng-container>
<ng-container matColumnDef="jumpType">
<th mat-header-cell *matHeaderCellDef style="min-width: 100px;text-wrap: nowrap;">{{ 'List_Jump_Header_JumpType' |
translate }}</th>
<td mat-cell *matCellDef="let element" style="text-wrap: nowrap;">
<span class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span>
</td>
</ng-container>
<ng-container matColumnDef="aircraft">
<th mat-header-cell *matHeaderCellDef style="min-width: 110px;">{{ 'List_Jump_Header_Aircraft' |
translate }}</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.aircraft.name"></span>
</td>
</ng-container>
<ng-container matColumnDef="dropZone">
<th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Dz' | translate }}</th>
<td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.dropZone.name"></span>
</td>
</ng-container>
<ng-container matColumnDef="gear">
<th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Id' | translate }}</th>
<td mat-cell *matCellDef="let element">{{element.gear.name}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="min-width: 80px;text-wrap: nowrap;"></th>
<td mat-cell *matCellDef="let element" style="text-align: left;text-wrap: nowrap;">
<mat-icon aria-hidden="false" aria-label="Delete this jump" style="cursor: pointer;"
(click)='delete(element)'>delete</mat-icon>
<mat-icon aria-hidden="false" aria-label="Update some informations of the jump"
style="cursor: pointer; margin-left: 10px;" (click)='openDialog(element, true)'>edit</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>
<mat-paginator #paginator [pageSize]="20" (page)="pageChanged($event)" showFirstLastButtons></mat-paginator>
</div>