report, timezone

This commit is contained in:
Pringgosutono
2025-09-10 10:53:10 +07:00
parent 48fe5e3ef6
commit 620486de25
6 changed files with 5664 additions and 48 deletions

View File

@ -1363,7 +1363,7 @@
// <p class="text-muted mb-0">${(obj?.city_text || obj?.state_text || 'address')} - ${(obj?.postcode || 'postcode')}</p>
// <p class="text-muted mb-0">${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}</p> // yang ini mix
// <p class="text-success mb-0">Device Time: ${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm')}</p>
// <p class="text-success mb-0">Device Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm')}</p>
// <p class="text-danger mb-0">Server Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm')}</p>
// <p class="${(obj.pre_milleage >= 3) ? 'text-warning' : 'text-muted'} mb-0">Pre Milleage: ${(obj.pre_milleage).toFixed(3)} Km</p>
@ -1371,7 +1371,7 @@
// <a href="#" class="plotMove-item" data-obj="${window.btoa( encodeURIComponent( JSON.stringify(obj) ) )}">
// <li class="list-group-item p-1 px-2">
// <p class="text-bold mb-0">${obj.key_index}</p>
// <p class="text-bold mb-0">Time: ${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm')}</p>
// <p class="text-bold mb-0">Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm')}</p>
// <p class="text-muted mb-0">Speed: ${(typeof obj.speed != 'undefined') ? obj.speed : '0'}</p>
// <p class="text-muted mb-0">${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}</p>
// <p class="text-muted mb-0">${Helper.shortenText(decodeURIComponent(obj?.fulladdress || 'address'), 25)}</p>
@ -1384,7 +1384,7 @@
// <a href="#" class="plotMove-item" data-obj="${window.btoa( encodeURIComponent( JSON.stringify(obj) ) )}">
// <li class="list-group-item p-1 px-2">
// <p class="text-bold mb-0">${arrIdx + 1}</p>
// <p class="text-bold mb-0">Time: ${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}</p>
// <p class="text-bold mb-0">Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm:ss')}</p>
// <p class="text-muted mb-0">${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}</p>
// <p class="text-muted mb-2">${Helper.shortenText(decodeURIComponent(obj?.fulladdress || 'address'), 255)}</p>
// <p class="mb-0">Current speed: ${Number(obj.speed)}km/h</p>
@ -1395,7 +1395,7 @@
<a href="#" class="plotMove-item" data-obj="${window.btoa( encodeURIComponent( JSON.stringify(obj) ) )}">
<li class="list-group-item p-1 px-2">
<p class="text-bold mb-0">${arrIdx + 1}</p>
<p class="text-bold mb-0">Time: ${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}</p>
<p class="text-bold mb-0">Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm:ss')}</p>
<p class="text-muted mb-0">${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}</p>
<p class="text-muted mb-2">${Helper.shortenText(decodeURIComponent(obj?.fulladdress || 'address'), 255)}</p>
<p class="mb-0">Current speed: ${Number(obj.speed)}km/h</p>
@ -1422,7 +1422,7 @@
lng: tr.longitude,
// label: `<b>${tr.key_index}</b><br>${tr.nopol1} ${tr.nopol2} ${tr.nopol3}<br>${moment.unix(tr?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof tr.lst_speed != 'undefined') ? tr.lst_speed : '0'}<br>${tr.latitude},${tr.longitude}<br>${decodeURIComponent(tr?.fulladdress || 'address')}`,
label: `<b>${tr.nopol1} ${tr.nopol2} ${tr.nopol3}</b><br>${moment.unix(tr?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>${decodeURIComponent(tr?.fulladdress || 'address')}.<br><br>Current speed: ${tr?.speed}km/h`,
//label: `<b>${tr.nopol1} ${tr.nopol2} ${tr.nopol3}</b><br>${moment.unix(tr?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(tr?.fulladdress || 'address')}.<br><br>Current speed: ${tr?.speed}km/h`,
//label: `<b>${tr.nopol1} ${tr.nopol2} ${tr.nopol3}</b><br>${moment.unix(tr?.lst_loc_crt_s).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(tr?.fulladdress || 'address')}.<br><br>Current speed: ${tr?.speed}km/h`,
options: {
// icon: Icon.destination()
}
@ -2469,7 +2469,7 @@
$('#infoVehicles-platno').text(`${truck?.nopol1} ${truck?.nopol2} ${truck?.nopol3}`);
// vehicles
$('#infoVehicles-crt').text(moment.unix(truck?.lst_loc_crt).format('DD MMM YYYY HH:mm'));
// $('#infoVehicles-crt').text(moment.unix(truck?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss'));
// $('#infoVehicles-crt').text(moment.unix(truck?.lst_loc_crt_s).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss'));
// ${(truck?.city_text || truck?.state_text || 'address')} - ${(truck?.postcode || 'postcode')}
if (truck?.ignition == State.stts_ignition.high) {
$('#infoVehicles-ignition').text('ON');
@ -2674,7 +2674,7 @@
// // circle
// // label: `<b>${obj.key_index}</b><br>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}<br>${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof obj.speed != 'undefined') ? obj.speed : '0'}<br>${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
// // label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
// label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
// label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
// }
// });
@ -2699,7 +2699,7 @@
// lat: start.latitude,
// lng: start.longitude,
// label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
// // label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
// // label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt_s).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
// options: {
// icon: Icon.titikAwal(),
// // rotationAngle: 290
@ -2709,7 +2709,7 @@
// lat: finish.latitude,
// lng: finish.longitude,
// label: `<b>End Poin</b><br>${finish.nopol1} ${finish.nopol2} ${finish.nopol3}<br>${moment.unix(finish?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}<br>${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}<br>${decodeURIComponent(finish.fulladdress || 'address')}`,
// //label: `<b>End Poin</b><br>${finish.nopol1} ${finish.nopol2} ${finish.nopol3}<br>${moment.unix(finish?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}<br>${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}<br>${decodeURIComponent(finish.fulladdress || 'address')}`,
// //label: `<b>End Poin</b><br>${finish.nopol1} ${finish.nopol2} ${finish.nopol3}<br>${moment.unix(finish?.lst_loc_crt_s).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}<br>${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}<br>${decodeURIComponent(finish.fulladdress || 'address')}`,
// options: {
// icon: Icon.titikAkhir()
// }
@ -2769,7 +2769,7 @@
${Number(obj.latitude).toFixed(5)},${Number(obj.longitude).toFixed(6)}<br>
${decodeURIComponent(obj.fulladdress || 'address')}
`,
// label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
// label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt_s).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
options: {
icon: (key == 0) ? Icon.titikAkhir() : (key == (groupTrip.length - 1)) ? Icon.titikAwal() : null,
// rotationAngle: 290
@ -2789,7 +2789,7 @@
radius: 5,
markerOpacity: 0
},
label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
// startLast : (key == 0) ? 0 : (key == (groupTrip.length - 1)) ? 1 : null,
}
})

File diff suppressed because it is too large Load Diff

View File

@ -43,8 +43,8 @@
<div class="form-group">
<label class="text-muted">From</label>
<!-- default today -->
<!-- <input type="date" class="form-control" id="tgl0" value="{{ date('Y-m-d') }}"> -->
<input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
<input class="form-control" id="tgl0" value="20-08-2025 00:00">
<!-- <input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}"> -->
</div>
</div>
<div class="col-2">
@ -80,6 +80,8 @@
<!-- <th class="text-center">Action</th> -->
<!-- <th class="">Vehicle Name</th> -->
<th class="">License Plate Number</th>
<th class="">Dist. Cat.</th>
<th class="">Pool</th>
<th class="">Time</th>
<th class="">Speed (kph)</th>
<th class="">Location</th>
@ -200,8 +202,16 @@
data: 'nopol1',
className: 'text-start',
},
{
data: 'dc_code',
className: 'text-start',
},
{
data: 'pool_code',
className: 'text-start',
},
{
data: "crt_d",
data: "crt_s",
className: 'text-nowrap',
render: (data, type, row, meta) => {
return moment.unix(data).format('DD MMM YYYY HH:mm:ss');

View File

@ -9,6 +9,12 @@
@endsection
@section('customcss')
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
@endsection
@section('content')
@ -43,8 +49,8 @@
<div class="form-group">
<label class="text-muted">From</label>
<!-- default today -->
<!-- <input class="form-control" id="tgl0" value="25-08-2025 00:00"> -->
<input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
<input class="form-control" id="tgl0" value="25-08-2025 00:00">
<!-- <input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}"> -->
</div>
</div>
<div class="col-2">
@ -76,14 +82,20 @@
<table id="tVehicleTrips" class="table table-hover dataTable w-100">
<thead>
<tr class="">
<th class="">Vehicle ID</th>
<th class="hidden">Vehicle ID</th>
<th class="">License Plate Number</th>
<th class="">Dist. Cat.</th>
<th class="">Pool</th>
<th class="">Number of Trip</th>
<th class="">Total Mileage (km)</th>
<th class="">Trip #</th>
<th class="">Start</th>
<th class="">Finish</th>
<th class="">Duration</th>
<th class="">Start (km)</th>
<th class="">Finish (km)</th>
<th class="">Mileage (km)</th>
<th class="">Detail</th>
</tr>
</thead>
<!-- <tbody>
@ -162,6 +174,20 @@
</div>
<!-- modal -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="mdlDetailTrip" aria-labelledby="mdlDetailTripLabel" aria-hidden="true">
<!-- <div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mdlDetailTripLabel">-----</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div> -->
</div>
@endsection
@section('customjs')
@ -170,6 +196,14 @@
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<!-- <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script> -->
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script>
'use strict';
const State = {
@ -185,6 +219,7 @@
activate: function() {
Wrapper.init();
Wrapper.event();
// DTable.table = $('#tVehicleTrips').DataTable()
// DTable.activate();
},
init: ()=>{
@ -204,6 +239,20 @@
$('#btnDownloadReport').on('click', function() {
DTable.table.button('.buttons-excel').trigger();
});
// detail trip
$('#tVehicleTrips').on('click', '.btnDetailTrip', function(e) {
e.preventDefault();
const vid = $(this).data('vid');
const tgl0 = $(this).data('tgl0');
const tgl1 = $(this).data('tgl1');
// $("#mdlDetailTrip").load("{{ route('view_report_trip_detail') }}");
$('#mdlDetailTrip').empty().load("{{ route('view_report_trip_detail') }}", `vid=${vid}&tgl0=${tgl0}&tgl1=${tgl1}`, () => {
$('#mdlDetailTrip').modal('show')
})
});
},
};
@ -269,7 +318,9 @@
orderable: true,
searchable: true,
},
{ data: "total_trip", className: 'text-end'},
{ data: "dc_code", className: 'text-start'},
{ data: "pool_code", className: 'text-start'},
{ data: "total_trip", className: 'text-end'},
{ data: "total_mileage", className: 'text-end', render: (data, type, row, meta) => parseFloat(data).toFixed(2)},
{ data: "trip_id", className: 'text-end'},
{
@ -292,12 +343,51 @@
`;
}
},
{
className: 'text-start', render: function(data, type, row, meta) {
const start = moment.unix(row.start);
const finish = moment.unix(row.finish);
// calculate duration
const diff = moment.duration(finish.diff(start));
const hours = Math.floor(diff.asHours());
const minutes = diff.minutes();
return `${hours}h ${minutes}m`;
}
},
{
data: 'startMileage',
className: 'text-end', render: function(data, type, row, meta) {
console.log(data);
return (data === null) ? '0' : parseFloat(data).toFixed(0);
}
},
{
data: 'finishMileage',
className: 'text-end', render: function(data, type, row, meta) {
return (data === null) ? '0' : parseFloat(data).toFixed(0);
}
},
{
data: 'mileage',
className: 'text-end', render: function(data, type, row, meta) {
return (data === null) ? '0' : parseFloat(data).toFixed(2);
}
},
{
data: 'id',
className: 'text-center',
render: function(data, type, row, meta) {
let action = `
<a href="#" class="text-decoration-none me-1 btnDetailTrip" data-vid="${data}" data-tgl0="${row.start}" data-tgl1="${row.finish}">
<span class="icon ion-eye fz-16"></span>
</a>
`;
return action;
}
},
],
paging: false,
drawCallback: function (settings) {
@ -321,6 +411,9 @@
$(rows).eq(i).find('td:eq(0)').attr('rowspan', rowspanCount);
$(rows).eq(i).find('td:eq(1)').attr('rowspan', rowspanCount);
$(rows).eq(i).find('td:eq(2)').attr('rowspan', rowspanCount);
$(rows).eq(i).find('td:eq(3)').attr('rowspan', rowspanCount);
$(rows).eq(i).find('td:eq(4)').attr('rowspan', rowspanCount);
// $(rows).eq(i).find('td:eq(3)').attr('rowspan', rowspanCount);
last = group;
@ -329,6 +422,8 @@
$(rows).eq(i).find('td:eq(0)').remove();
$(rows).eq(i).find('td:eq(0)').remove();
$(rows).eq(i).find('td:eq(0)').remove();
$(rows).eq(i).find('td:eq(0)').remove();
$(rows).eq(i).find('td:eq(0)').remove();
// $(rows).eq(i).find('td:eq(0)').remove();
}
});
@ -345,7 +440,7 @@
},
className: 'd-none', // hide default button
exportOptions: {
columns: ':visible' // 🔹 exclude first column
columns: ':visible:not(:last-child)' //
}
}
]
@ -358,16 +453,6 @@
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 {