615 lines
26 KiB
PHP
615 lines
26 KiB
PHP
@php
|
|
$user_role = Auth::user()->role;
|
|
@endphp
|
|
|
|
@extends('app.app')
|
|
|
|
@section('title')
|
|
Vehicles
|
|
@endsection
|
|
|
|
@section('customcss')
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col-3">
|
|
<p class="card-title text-bold mb-0">Vehicle Trips Report</p>
|
|
</div>
|
|
@if ($user_role == \App\Models\Users::ROLE_VENDOR || $user_role == \App\Models\Users::ROLE_ADMIN)
|
|
@can('vehicle.create')
|
|
<!-- <div class="col text-end">
|
|
<button id="btnMdlNewVhc" class="btn btn-sm btn-danger">Add New Vehicle</button>
|
|
</div> -->
|
|
@endcan
|
|
|
|
{{-- <div class="col-auto text-end ps-0">
|
|
<button class="btn btn-sm btn-danger">Upload</button>
|
|
</div> --}}
|
|
@endif
|
|
<div class="col-auto text-end ps-0">
|
|
<!-- <button class="btn btn-sm btn-danger">Download</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- filter -->
|
|
<div class="row">
|
|
<div class="col-2">
|
|
<div class="form-group">
|
|
<label class="text-muted">From</label>
|
|
<input type="date" class="form-control"id="tgl0" value="2025-08-01">
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="form-group">
|
|
<label class="text-muted">To</label>
|
|
<input type="date" class="form-control" id="tgl1" value="2025-08-28">
|
|
</div>
|
|
</div>
|
|
<div class="col-2 d-flex align-items-end">
|
|
<!-- <button class="btn btn-sm btn-danger">Filter</button> -->
|
|
<button class="btn btn-sm btn-danger">Download</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive p-2">
|
|
<table id="tVehicleTrips" class="table table-hover dataTable ">
|
|
<thead>
|
|
<tr class="">
|
|
<!-- <th class="">#</th> -->
|
|
<!-- <th class="text-center">Action</th> -->
|
|
<th class="">Vehicle Name</th>
|
|
<th class="">License Plate Number</th>
|
|
<th class="">Number of Trips</th>
|
|
<th class="">Total Milage (km)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>24-679</td>
|
|
<td>24-679</td>
|
|
<td>26</td>
|
|
<td>442.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>24-682</td>
|
|
<td>24-682</td>
|
|
<td>28</td>
|
|
<td>312.7</td>
|
|
</tr>
|
|
<tr>
|
|
<td>24-877</td>
|
|
<td>24-877</td>
|
|
<td>15</td>
|
|
<td>276.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A.16-347</td>
|
|
<td>A.16-347</td>
|
|
<td>37</td>
|
|
<td>543.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>AL2025-B21</td>
|
|
<td>AL2025-B21</td>
|
|
<td>18</td>
|
|
<td>295.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>B.16-542</td>
|
|
<td>B.16-542</td>
|
|
<td>32</td>
|
|
<td>478.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>B.24-264</td>
|
|
<td>B.24-264</td>
|
|
<td>24</td>
|
|
<td>188.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>B.24-274</td>
|
|
<td>B.24-274</td>
|
|
<td>33</td>
|
|
<td>440.1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Ford Ranger</td>
|
|
<td>26-199</td>
|
|
<td>30</td>
|
|
<td>631.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nissan AD</td>
|
|
<td>B.10-517</td>
|
|
<td>27</td>
|
|
<td>375.9</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Triton</td>
|
|
<td>A.29-127</td>
|
|
<td>26</td>
|
|
<td>508.2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- modal -->
|
|
@endsection
|
|
|
|
@section('customjs')
|
|
<script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
|
|
<script>
|
|
'use strict';
|
|
const State = {
|
|
file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
|
|
storage_lara: "{{ asset('storage') }}/",
|
|
dvc_type: {
|
|
built_in: "{{ \App\Models\Devices::TYPE_BUILT_IN }}",
|
|
portable: "{{ \App\Models\Devices::TYPE_PORTABLE }}",
|
|
},
|
|
};
|
|
|
|
const Wrapper = {
|
|
activate: function() {
|
|
Wrapper.event();
|
|
DTable.activate();
|
|
},
|
|
event: function() {
|
|
$('#add-device_id').select2({
|
|
dropdownParent: $('#mdlNewVhc'),
|
|
});
|
|
$('#add-brand').select2({
|
|
dropdownParent: $('#mdlNewVhc'),
|
|
});
|
|
$('#add-type').select2({
|
|
dropdownParent: $('#mdlNewVhc'),
|
|
});
|
|
$('#add-model').select2({
|
|
dropdownParent: $('#mdlNewVhc'),
|
|
});
|
|
$('#add-dcurrent').select2({
|
|
dropdownParent: $('#mdlNewVhc'),
|
|
});
|
|
$('#add-dassign').select2({
|
|
dropdownParent: $('#mdlNewVhc'),
|
|
});
|
|
$('#add-vendor_id').select2({
|
|
dropdownParent: $('#mdlNewVhc'),
|
|
});
|
|
|
|
$('#edt-device_id').select2({
|
|
dropdownParent: $('#mdlEdtVhc'),
|
|
});
|
|
$('#edt-brand').select2({
|
|
dropdownParent: $('#mdlEdtVhc'),
|
|
});
|
|
$('#edt-type').select2({
|
|
dropdownParent: $('#mdlEdtVhc'),
|
|
});
|
|
$('#edt-model').select2({
|
|
dropdownParent: $('#mdlEdtVhc'),
|
|
});
|
|
$('#edt-dcurrent').select2({
|
|
dropdownParent: $('#mdlEdtVhc'),
|
|
});
|
|
$('#edt-dassign').select2({
|
|
dropdownParent: $('#mdlEdtVhc'),
|
|
});
|
|
$('#edt-vendor_id').select2({
|
|
dropdownParent: $('#mdlEdtVhc'),
|
|
});
|
|
},
|
|
};
|
|
|
|
const DTable = {
|
|
activate: function() {
|
|
DTable.reload();
|
|
},
|
|
reload: function() {
|
|
$('#tVehicleTrips').DataTable();
|
|
// if (Driver.Table.firstInitDataTable == 1) { loadTableSkeletonLoading() } else { Driver.Table.firstInitDataTable = 1; }
|
|
// $('#tVehicles').DataTable({
|
|
// processing: true,
|
|
// serverSide: false,
|
|
// bLengthChange: true,
|
|
// deferRender: true,
|
|
// destroy: true,
|
|
// ajax: {
|
|
// url: "{{ route('api_report_vehicle_trips_list') }}?cptid=" + AppState.current_company,
|
|
// type: 'GET',
|
|
// complete: function() {
|
|
// // removeTableSkeletonLoading()
|
|
// },
|
|
// },
|
|
// deferRender: true,
|
|
// columns: [{
|
|
// data: 'DT_RowIndex',
|
|
// className: 'text-end',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// },
|
|
// {
|
|
// data: 'action',
|
|
// className: 'text-center',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// let action = `
|
|
// <a href="#" class="text-decoration-none me-1 btnEdtVhc">
|
|
// <span class="icon ion-eye fz-16"></span>
|
|
// </a>
|
|
// `;
|
|
// // <a href="#" class="text-decoration-none text-danger btnDelVhc">
|
|
// // <span class="icon ion-trash-b fz-16"></span>
|
|
// // </a>
|
|
// return action;
|
|
// }
|
|
// },
|
|
// {
|
|
// data: 'name',
|
|
// className: 'text-start text-nowrap',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// return `
|
|
// <img src="${State.storage_lara}${row.fvhc_img}" class="img-fluid thumb-img-table" /><br>
|
|
// ${row.nopol1} ${row.nopol2} ${row.nopol3}
|
|
// `;
|
|
// },
|
|
// createdCell: function(td, cellData, rowData, row, col) {
|
|
// $(td).attr('data-vid', rowData.vid);
|
|
// $(td).attr('data-name', rowData.name);
|
|
// $(td).attr('data-nopol1', rowData.nopol1);
|
|
// $(td).attr('data-nopol2', rowData.nopol2);
|
|
// $(td).attr('data-nopol3', rowData.nopol3);
|
|
// },
|
|
// },
|
|
// // {
|
|
// // data: 'stnk_img',
|
|
// // className: 'text-start text-nowrap',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // // exp: ${row.stnk_exp?.split('-').reverse().join('-') || ''}
|
|
// // return `
|
|
// // <img src="${State.storage_lara}${data}" class="img-fluid thumb-img-table" /><br>
|
|
// // ${row.nopol1} ${row.nopol2} ${row.nopol3}<br>
|
|
// // exp: ${moment(row.stnk_exp).format('DD MMM YYYY') || '-'}
|
|
// // `;
|
|
// // },
|
|
// // },
|
|
// {
|
|
// data: 'tax_exp',
|
|
// className: 'text-end text-nowrap',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// // return (`${data?.split('-').reverse().join('-') || '-'}`);
|
|
// return (`${moment(data).format('DD MMM YYYY') || '-'}`);
|
|
// },
|
|
// },
|
|
// // {
|
|
// // data: 'kir_exp',
|
|
// // className: 'text-end text-nowrap',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (`${moment(data).format('DD MMM YYYY') || '-'}`);
|
|
// // },
|
|
// // },
|
|
// {
|
|
// data: 'crt',
|
|
// className: 'text-end text-nowrap',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// return moment.unix(data).format('DD MMM YYYY');
|
|
// },
|
|
// },
|
|
// @if ($user_role != \App\Models\Users::ROLE_VENDOR)
|
|
// {
|
|
// data: 'device_id',
|
|
// className: 'text-end text-nowrap',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// return `<span class="d-none">${data}</span>` + Helper.splitEvery4Char(`${data}`);
|
|
// },
|
|
// },
|
|
// @endif
|
|
// // {
|
|
// // data: 'dc_fullname',
|
|
// // className: 'text-start text-nowrap',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (
|
|
// // `${data}<br>` +
|
|
// // `<a href="tel:0${row.dc_phone}">${Helper.splitEvery4Char('0'+row.dc_phone)}</a>` +
|
|
// // ` || ` +
|
|
// // `<a href="https://api.whatsapp.com/send/?phone=62${row.dc_phone}&text=Halo&app_absent=0" class="bg-light" target="_blank"><i class="text-success ion-social-whatsapp"></i></a>`
|
|
// // );
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // data: 'da_fullname',
|
|
// // className: 'text-start text-nowrap',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (
|
|
// // `${data}<br>` +
|
|
// // `<a href="tel:0${row.da_phone}">${Helper.splitEvery4Char('0'+row.da_phone)}</a>` +
|
|
// // ` || ` +
|
|
// // `<a href="https://api.whatsapp.com/send/?phone=62${row.da_phone}&text=Halo&app_absent=0" class="bg-light" target="_blank"><i class="text-success ion-social-whatsapp"></i></a>`
|
|
// // );
|
|
// // },
|
|
// // },
|
|
// {
|
|
// data: 'type_name',
|
|
// className: 'text-start text-nowrap',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// // return (`${row.brand_name}<br>-<br>${data}`);
|
|
// return data;
|
|
// },
|
|
// },
|
|
// {
|
|
// data: 'vyear',
|
|
// className: 'text-end',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// return (`${(data || '-')}`);
|
|
// },
|
|
// },
|
|
// // {
|
|
// // data: 'cc',
|
|
// // className: 'text-start',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (`${(data || '0')} CC`);
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // data: 'vin',
|
|
// // className: 'text-start text-nowrap',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (`${Helper.splitEvery4Char(data || '-')}`);
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // data: 'en',
|
|
// // className: 'text-start text-nowrap',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (`${Helper.splitEvery4Char(data || '-')}`);
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // data: 'vcolor',
|
|
// // className: 'text-start',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (`${(data || '-')}`);
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // data: 'fuel_type',
|
|
// // className: 'text-start',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (`${(data || '-')}`);
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // data: 'tnkb_color',
|
|
// // className: 'text-start text-nowrap',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (`${(data || '-')}`);
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // data: 'regis_year',
|
|
// // className: 'text-end',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return (`${(data || '-')}`);
|
|
// // },
|
|
// // },
|
|
// // {
|
|
// // data: 'speed_limit',
|
|
// // className: 'text-end',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // },
|
|
// // {
|
|
// // data: 'fuel_capacity',
|
|
// // className: 'text-end',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // },
|
|
// // {
|
|
// // data: 'fuel_drop_treshold',
|
|
// // className: 'text-end',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // },
|
|
// // {
|
|
// // data: 'max_pressure',
|
|
// // className: 'text-end',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // },
|
|
// // {
|
|
// // data: 'alert_zones',
|
|
// // className: 'text-start',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // },
|
|
// // {
|
|
// // data: 'is_track_holiday_text',
|
|
// // className: 'text-start',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // },
|
|
// // {
|
|
// // data: 'track_schedule',
|
|
// // className: 'text-end',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // },
|
|
// {
|
|
// data: 'sum_milleage',
|
|
// className: 'text-end',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// return Number(data).toFixed(2);
|
|
// }
|
|
// },
|
|
// // {
|
|
// // data: 'cameras',
|
|
// // className: 'text-start',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // },
|
|
// {
|
|
// data: 'company_name',
|
|
// className: 'text-start text-nowrap',
|
|
// visible: true,
|
|
// orderable: true,
|
|
// searchable: true,
|
|
// render: function(data, type, row, meta) {
|
|
// return data || '-';
|
|
// }
|
|
// },
|
|
// // {
|
|
// // data: 'group_name',
|
|
// // className: 'text-start text-nowrap',
|
|
// // visible: true,
|
|
// // orderable: true,
|
|
// // searchable: true,
|
|
// // render: function(data, type, row, meta) {
|
|
// // return data || 'All Group';
|
|
// // }
|
|
// // },
|
|
// ],
|
|
// });
|
|
},
|
|
};
|
|
|
|
function safeVal(selector) {
|
|
const val = $(selector).val();
|
|
return (val === undefined || val === null || val === '') ? null : val;
|
|
}
|
|
|
|
const Filter = {
|
|
activate: function() {
|
|
Filter.event();
|
|
},
|
|
event: function() {},
|
|
triggerFilterCompany: function() {
|
|
DTable.reload();
|
|
},
|
|
}
|
|
|
|
async function convertImgHtmlToFile(imgHtml, imgWidth, imgHeight, mimeType, fileName) {
|
|
return new Promise((resolve, reject) => {
|
|
try {
|
|
let canvas = document.createElement("canvas")
|
|
|
|
// Draw image to canvas.
|
|
canvas.width = imgWidth
|
|
canvas.height = imgHeight
|
|
let ctx = canvas.getContext('2d')
|
|
ctx.drawImage(imgHtml, 0, 0)
|
|
|
|
// Convert canvas to ImageState.
|
|
let imageData = ctx.getImageData(0, 0, imgWidth, imgHeight)
|
|
// console.log(imageState.data.byteLength + ' bytes.')
|
|
|
|
// Convert canvas to Blob
|
|
canvas.toBlob((blob) => {
|
|
let newReader = new FileReader();
|
|
newReader.addEventListener('loadend', () => {
|
|
// Convert canvas to ArrayBuffer
|
|
let arrayBuffer = newReader.result
|
|
// console.log(arrayBuffer.byteLength + ' bytes.')
|
|
|
|
// Convert ArrayBuffer to Blob
|
|
// let blob = new Blob([arrayBuffer], {type: mimeType})
|
|
|
|
// Dispay Blob content in an Image.
|
|
// console.log(URL.createObjectURL(blob))
|
|
|
|
// Generate as file
|
|
let newFile = new File([arrayBuffer], fileName, {
|
|
type: mimeType,
|
|
lastModified: new Date(),
|
|
size: arrayBuffer.byteLength,
|
|
})
|
|
resolve(newFile)
|
|
});
|
|
newReader.readAsArrayBuffer(blob);
|
|
}, mimeType);
|
|
} catch (e) {
|
|
reject(e.message)
|
|
}
|
|
});
|
|
}
|
|
|
|
Wrapper.activate();
|
|
</script>
|
|
@endsection
|