270 lines
13 KiB
HTML
270 lines
13 KiB
HTML
<ng-container *ngIf="sourceType && enablePaginationTypes.includes(sourceType)">
|
|
<div class="row mt-5 mb-3">
|
|
<div class="col-xs-12 col-12">
|
|
<input type="text" class="form-control" placeholder="{{ 'search'|translate|ftitlecase }}" [(ngModel)]="searchText" (ngModelChange)="onSearchTextChange($event)">
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="sourceType && enableDateRangePickerTypes.includes(sourceType)">
|
|
<daterange-picker [(ngModel)]="range" (ngModelChange)="filterDateRangeChanged($event)"></daterange-picker>
|
|
</ng-container>
|
|
<ng-container *ngIf="sourceType && enableCountTotalsTypes.includes(sourceType)">
|
|
<div class="row mt-3">
|
|
<div class="col-xs-12 col-12">
|
|
<p class="h5">{{ 'total_elements_with_filters'|translate }}: {{ totalElements }}</p>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
|
|
<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|ftitlecase }}</th>
|
|
<th>{{ 'available'|translate|ftitlecase }}</th>
|
|
<th>{{ 'driver'|translate|ftitlecase }}</th>
|
|
<ng-container *ngIf="auth.profile.can('users-read')">
|
|
<th>{{ 'call'|translate|ftitlecase }}</th>
|
|
</ng-container>
|
|
<th>{{ 'services'|translate|ftitlecase }}</th>
|
|
<th>{{ 'availability_minutes'|translate|ftitlecase }}</th>
|
|
<ng-container *ngIf="auth.profile.can('users-update')">
|
|
<th>{{ 'edit'|translate|ftitlecase }}</th>
|
|
</ng-container>
|
|
</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>
|
|
<div (click)="onMoreDetails(row.id)" class="d-inline">
|
|
<img alt="red helmet" src="./assets/icons/red_helmet.png" width="20px" *ngIf="row.chief">
|
|
<img alt="black helmet" src="./assets/icons/black_helmet.png" width="20px" *ngIf="!row.chief">
|
|
<ng-container *ngIf="row.online;else userOffline"><u>{{ row.surname }} {{ row.name }}</u></ng-container>
|
|
<ng-template #userOffline>{{ row.surname }} {{ row.name }}</ng-template>
|
|
</div>
|
|
</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>
|
|
<td *ngIf="auth.profile.can('users-update')" (click)="editUser(row.id)"><i class="fa fa-edit"></i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<ng-container *ngIf="sourceType === 'logs'">
|
|
<table id="table" class="table table-striped table-bordered dt-responsive nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ 'action'|translate|ftitlecase }}</th>
|
|
<th>{{ 'changed'|translate|ftitlecase }}</th>
|
|
<th>{{ 'editor'|translate|ftitlecase }}</th>
|
|
<th>{{ 'datetime'|translate|ftitlecase }}</th>
|
|
<th *ngIf="auth.profile.can('logs-read')">{{ 'device_information'|translate|ftitlecase }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table_body">
|
|
<tr *ngFor="let row of displayedData; index as i">
|
|
<td>
|
|
{{ row.action }}
|
|
<div class="float-end d-inline">
|
|
<i *ngIf="row.source_type === 'telegram'" class="fab faxlarge fa-telegram"></i>
|
|
<i *ngIf="row.source_type === 'web'" class="fa faxlarge fa-globe"></i>
|
|
</div>
|
|
</td>
|
|
<td>{{ row.changed }}</td>
|
|
<td>
|
|
<div class="float-start d-inline" *ngIf="row.editor_hidden">
|
|
<i class="fa fa-ghost"></i>
|
|
</div>
|
|
{{ row.editor }}
|
|
</td>
|
|
<td>{{ row.created_at | date: 'dd/MM/YYYY HH:mm:ss' }}</td>
|
|
<td *ngIf="auth.profile.can('logs-read') && row.source_type === 'web'">
|
|
<a [href]="'https://iplocation.io/ip/'+row.ip" target="_blank" *ngIf="isPublicIp(row.ip)">
|
|
<code>{{ row.ip }}</code>
|
|
</a>
|
|
<code *ngIf="!isPublicIp(row.ip)">{{ row.ip }}</code>
|
|
<div class="mt-1" (click)="openUserAgentInfoModal(row.user_agent, useragentInfoModal)">
|
|
<i *ngFor="let icon of userAgentToIcons(row.user_agent)" [ngClass]="'m-1 '+icon"></i>
|
|
</div>
|
|
</td>
|
|
<td *ngIf="auth.profile.can('logs-read') && row.source_type !== 'web'"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</ng-container>
|
|
|
|
<ng-container>
|
|
<table *ngIf="sourceType === 'services'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>{{ 'start'|translate|ftitlecase }}</th>
|
|
<th>{{ 'end'|translate|ftitlecase }}</th>
|
|
<th>{{ 'code'|translate|ftitlecase }}</th>
|
|
<th>{{ 'chief'|translate|ftitlecase }}</th>
|
|
<th>{{ 'drivers'|translate|ftitlecase }}</th>
|
|
<th>{{ 'crew'|translate|ftitlecase }}</th>
|
|
<th>{{ 'place'|translate|ftitlecase }}</th>
|
|
<th>{{ 'notes'|translate|ftitlecase }}</th>
|
|
<th>{{ 'type'|translate|ftitlecase }}</th>
|
|
<th *ngIf="auth.profile.can('services-update')">{{ 'update'|translate|ftitlecase }}</th>
|
|
<th *ngIf="auth.profile.can('services-delete')">{{ 'remove'|translate|ftitlecase }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table_body">
|
|
<tr *ngFor="let row of displayedData; index as i">
|
|
<td *ngIf="rangePicked"></td>
|
|
<td *ngIf="!rangePicked">{{ data.length - (rowsPerPage * (currentPage-1) + 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>{{ extractNamesFromObject(row.drivers).join(', ') }}</td>
|
|
<td>{{ extractNamesFromObject(row.crew).join(', ') }}</td>
|
|
<td>
|
|
<ng-container *ngIf="row.place.name"><i>{{ row.place.name }}</i></ng-container><br>
|
|
<ng-container *ngIf="row.place.village">{{ row.place.village }}</ng-container><br>
|
|
<a class="place_details_link cursor-pointer" (click)="openPlaceDetails(row.place.id)">{{ 'more details'|translate|ftitlecase }}</a>
|
|
</td>
|
|
<td>{{ row.notes }}</td>
|
|
<td>{{ row.type }}</td>
|
|
<td (click)="editService(row.id)" *ngIf="auth.profile.can('services-update')"><i class="fa fa-edit"></i></td>
|
|
<td (click)="deleteService(row.id)" *ngIf="auth.profile.can('services-delete')"><i class="fa fa-trash"></i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</ng-container>
|
|
|
|
<ng-container>
|
|
<table *ngIf="sourceType === 'trainings'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
|
|
<thead>
|
|
<tr>
|
|
<td>#</td>
|
|
<th>{{ 'name'|translate|ftitlecase }}</th>
|
|
<th>{{ 'start'|translate|ftitlecase }}</th>
|
|
<th>{{ 'end'|translate|ftitlecase }}</th>
|
|
<th>{{ 'chief'|translate|ftitlecase }}</th>
|
|
<th>{{ 'crew'|translate|ftitlecase }}</th>
|
|
<th>{{ 'place'|translate|ftitlecase }}</th>
|
|
<th>{{ 'notes'|translate|ftitlecase }}</th>
|
|
<th *ngIf="auth.profile.can('trainings-update')">{{ 'update'|translate|ftitlecase }}</th>
|
|
<th *ngIf="auth.profile.can('trainings-delete')">{{ 'remove'|translate|ftitlecase }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table_body">
|
|
<tr *ngFor="let row of displayedData; index as i">
|
|
<td>{{ data.length - (rowsPerPage * (currentPage-1) + i) }}</td>
|
|
<td>{{ row.name }}</td>
|
|
<td>{{ row.start | date:'dd/MM/YYYY, HH:mm' }}</td>
|
|
<td>{{ row.end | date:'dd/MM/YYYY, HH:mm' }}</td>
|
|
<td>{{ row.chief }}</td>
|
|
<td>{{ extractNamesFromObject(row.crew).join(', ') }}</td>
|
|
<td>{{ row.place }}</td>
|
|
<td>{{ row.notes }}</td>
|
|
<td (click)="editTraining(row.id)" *ngIf="auth.profile.can('trainings-update')"><i class="fa fa-edit"></i></td>
|
|
<td (click)="deleteTraining(row.id)" *ngIf="auth.profile.can('trainings-delete')"><i class="fa fa-trash"></i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</ng-container>
|
|
</div>
|
|
|
|
<ng-container *ngIf="sourceType && enablePaginationTypes.includes(sourceType)">
|
|
<div class="row mt-5">
|
|
<div class="col-xs-12 col-12 pagination-parent">
|
|
<pagination
|
|
[totalItems]="totalElements"
|
|
[(ngModel)]="currentPage"
|
|
(pageChanged)="pageChanged($event)"
|
|
[maxSize]="maxPaginationSize"
|
|
[itemsPerPage]="rowsPerPage"
|
|
[boundaryLinks]="totalElements > 100"
|
|
[customFirstTemplate]="firstTemplate"
|
|
[customLastTemplate]="lastTemplate"
|
|
[customPreviousTemplate]="prevTemplate"
|
|
[customNextTemplate]="nextTemplate"
|
|
[customPageTemplate]="pageTemplate"
|
|
></pagination>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-template #pageTemplate let-page let-disabled="disabled" let-currentPage="currentPage">
|
|
{{ page.number }}
|
|
</ng-template>
|
|
|
|
<ng-template #nextTemplate let-disabled="disabled" let-currentPage="currentPage">
|
|
{{ 'next'|translate|ftitlecase }}
|
|
</ng-template>
|
|
|
|
<ng-template #prevTemplate let-disabled="disabled" let-currentPage="currentPage">
|
|
{{ 'previous'|translate|ftitlecase }}
|
|
</ng-template>
|
|
|
|
<ng-template #lastTemplate let-disabled="disabled" let-currentPage="currentPage">
|
|
{{ 'last'|translate|ftitlecase }}
|
|
</ng-template>
|
|
|
|
<ng-template #firstTemplate let-disabled="disabled" let-currentPage="currentPage">
|
|
{{ 'first'|translate|ftitlecase }}
|
|
</ng-template>
|
|
|
|
<ng-template #useragentInfoModal>
|
|
<div class="modal-header">
|
|
<h4 class="modal-title pull-left" translate>{{ 'useragent_info_modal.title' }}</h4>
|
|
<button type="button" class="btn-close close pull-right" aria-label="Close" (click)="useragentInfoModalRef?.hide()">
|
|
<span aria-hidden="true" class="visually-hidden">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-responsive">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ 'property'|translate|ftitlecase }}</th>
|
|
<th>{{ 'value'|translate|ftitlecase }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ 'user_agent'|translate|ftitlecase }}</td>
|
|
<td><code>{{ processedUA.ua }}</code></td>
|
|
</tr>
|
|
<tr *ngIf="processedUA.browser && processedUA.browser.name">
|
|
<td>{{ 'browser'|translate|ftitlecase }}</td>
|
|
<td><code>{{ processedUA.browser.name }} {{ processedUA.browser.version }}</code></td>
|
|
</tr>
|
|
<tr *ngIf="processedUA.engine && processedUA.engine.name">
|
|
<td>{{ 'engine'|translate|ftitlecase }}</td>
|
|
<td><code>{{ processedUA.engine.name }} {{ processedUA.engine.version }}</code></td>
|
|
</tr>
|
|
<tr *ngIf="processedUA.os && processedUA.os.name">
|
|
<td>{{ 'os'|translate|ftitlecase }}</td>
|
|
<td><code>{{ processedUA.os.name }} {{ processedUA.os.version }}</code></td>
|
|
</tr>
|
|
<tr *ngIf="processedUA.device && processedUA.device.name">
|
|
<td>{{ 'device'|translate|ftitlecase }}</td>
|
|
<td><code>{{ processedUA.device.vendor }} {{ processedUA.device.model }}</code></td>
|
|
</tr>
|
|
<tr *ngIf="processedUA.cpu && processedUA.cpu.architecture">
|
|
<td>{{ 'cpu'|translate|ftitlecase }}</td>
|
|
<td><code>{{ processedUA.cpu.architecture }}</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</ng-template>
|