allerta-vvf/frontend/src/app/_components/table/table.component.html

126 lines
6.0 KiB
HTML

<div id="list" class="table-responsive mt-4">
<table *ngIf="sourceType === 'list'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th>{{ 'name'|translate|titlecase }}</th>
<th>{{ 'available'|translate|titlecase }}</th>
<th>{{ 'driver'|translate|titlecase }}</th>
<ng-container *ngIf="auth.profile.can('users-read')">
<th>{{ 'call'|translate|titlecase }}</th>
</ng-container>
<th>{{ 'services'|translate|titlecase }}</th>
<th>{{ 'availability_minutes'|translate|titlecase }}</th>
</tr>
</thead>
<tbody id="table_body">
<tr *ngFor="let row of data">
<td>
<i *ngIf="auth.profile.can('users-impersonate') && row.id !== auth.profile.id" class="fa fa-user me-2" (click)="onUserImpersonate(row.id)"></i>
<img alt="red helmet" src="./assets/icons/red_helmet.png" width="20px" *ngIf="row.chief">
<img alt="red helmet" src="./assets/icons/black_helmet.png" width="20px" *ngIf="!row.chief">
<ng-container *ngIf="(getTime() - row.last_access) < 30"><u>{{ row.name }}</u></ng-container>
<ng-container *ngIf="(getTime() - row.last_access) > 30">{{ row.name }}</ng-container>
</td>
<td (click)="onChangeAvailability(row.id, row.available ? 0 : 1)">
<i class="fa fa-check" style="color:green" *ngIf="row.available"></i>
<i class="fa fa-times" style="color:red" *ngIf="!row.available"></i>
</td>
<td>
<img alt="driver" src="./assets/icons/wheel.png" width="20px" *ngIf="row.driver">
</td>
<td *ngIf="auth.profile.can('users-read')">
<ng-container *ngIf="row.phone_number">
<a href="tel:{{row.phone_number}}"><i class="fa fa-phone"></i></a>
</ng-container>
</td>
<td>{{ row.services }}</td>
<td>{{ row.availability_minutes }}</td>
</tr>
</tbody>
</table>
<table *ngIf="sourceType === 'logs'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th>{{ 'action'|translate|titlecase }}</th>
<th>{{ 'changed'|translate|titlecase }}</th>
<th>{{ 'editor'|translate|titlecase }}</th>
<th>{{ 'datetime'|translate|titlecase }}</th>
</tr>
</thead>
<tbody id="table_body">
<tr *ngFor="let row of data">
<td>{{ row.action }}</td>
<td>{{ row.changed }}</td>
<td>{{ row.editor }}</td>
<td>{{ row.timestamp }}</td>
</tr>
</tbody>
</table>
<table *ngIf="sourceType === 'services'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th>#</th>
<th>{{ 'start'|translate|titlecase }}</th>
<th>{{ 'end'|translate|titlecase }}</th>
<th>{{ 'code'|translate|titlecase }}</th>
<th>{{ 'chief'|translate|titlecase }}</th>
<th>{{ 'drivers'|translate|titlecase }}</th>
<th>{{ 'crew'|translate|titlecase }}</th>
<th>{{ 'place'|translate|titlecase }}</th>
<th>{{ 'notes'|translate|titlecase }}</th>
<th>{{ 'type'|translate|titlecase }}</th>
<th>{{ 'update'|translate|titlecase }}</th>
<th>{{ 'remove'|translate|titlecase }}</th>
</tr>
</thead>
<tbody id="table_body">
<tr *ngFor="let row of data; index as i">
<td>{{ data.length - i }}</td>
<td>{{ row.start | date:'dd/MM/YYYY, HH:mm' }}</td>
<td>{{ row.end | date:'dd/MM/YYYY, HH:mm' }}</td>
<td>{{ row.code }}</td>
<td>{{ row.chief }}</td>
<td>{{ row.drivers }}</td>
<td>{{ row.crew }}</td>
<td>
{{ row.place_name }}<br>
<a class="place_details_link cursor-pointer" (click)="openPlaceDetails(row.lat, row.lng)">{{ 'more details'|translate|titlecase }}</a>
</td>
<td>{{ row.notes }}</td>
<td>{{ row.type }}</td>
<td (click)="editService(row.id)"><i class="fa fa-edit"></i></td>
<td (click)="deleteService(row.id)"><i class="fa fa-trash"></i></td>
</tr>
</tbody>
</table>
<table *ngIf="sourceType === 'trainings'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<td>#</td>
<th>{{ 'name'|translate|titlecase }}</th>
<th>{{ 'start'|translate|titlecase }}</th>
<th>{{ 'end'|translate|titlecase }}</th>
<th>{{ 'chief'|translate|titlecase }}</th>
<th>{{ 'crew'|translate|titlecase }}</th>
<th>{{ 'place'|translate|titlecase }}</th>
<th>{{ 'notes'|translate|titlecase }}</th>
<th>{{ 'update'|translate|titlecase }}</th>
<th>{{ 'remove'|translate|titlecase }}</th>
</tr>
</thead>
<tbody id="table_body">
<tr *ngFor="let row of data; index as i">
<td>{{ data.length - i }}</td>
<td>{{ row.name }}</td>
<td>{{ row.beginning }}</td>
<td>{{ row.end }}</td>
<td>{{ row.chief }}</td>
<td>{{ row.crew }}</td>
<td>{{ row.place }}</td>
<td>{{ row.notes }}</td>
<td><i class="fa fa-edit"></i></td>
<td><i class="fa fa-trash"></i></td>
</tr>
</tbody>
</table>
</div>