dtl trip report
This commit is contained in:
Pringgosutono
@ -7,7 +7,10 @@
|
||||
max-height: none;
|
||||
}
|
||||
.dtl-text{
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
}
|
||||
.head-text{
|
||||
font-size: 12px !important;
|
||||
}
|
||||
/* .leaflet-overlay-pane svg {
|
||||
transform: none !important;
|
||||
@ -15,88 +18,89 @@
|
||||
.leaflet-routing-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#viewPdf {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 794px;
|
||||
/* height: auto; */
|
||||
max-width: 100%; /* Ensures it is responsive */
|
||||
}
|
||||
/* .modal-dialog{
|
||||
width: 794px;
|
||||
} */
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
|
||||
<div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="mdlDetailTripLabel">{{$nopol1}} Trip Detail</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body row" id="viewPdf">
|
||||
<!-- <div class="col-2">
|
||||
<img id="infoVehicles-thumb-md" src="https://products.unitedtractors.com/wp-content/uploads/2021/03/udtruck-GWE370.png" class="img-fluid thumb-img-landscape" alt="">
|
||||
</div> -->
|
||||
<div class="col-4">
|
||||
<p class="text-bold mb-0">Start</p>
|
||||
<p class="mb-0 time">{{ $start['time'] }}</p>
|
||||
<p class="mb-0">Vehicle Mileage: {{number_format($start['mileage'], 2)}} km</p>
|
||||
<p>{{$start['fulladdress']}}</p>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<p class="text-bold mb-0">Finish</p>
|
||||
<p class="mb-0 time">{{ $finish['time'] }}</p>
|
||||
<p class="mb-0">Vehicle Mileage: {{number_format($finish['mileage'], 2)}} km</p>
|
||||
<p>{{$finish['fulladdress']}}</p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p class="text-bold mb-0">Distance</p>
|
||||
<p class="mb-0">{{number_format($distance, 2)}} km</p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p class="text-bold mb-0">Duration</p>
|
||||
<p class="mb-0">{{$duration}}</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div id="leafMap" style="height: 400px;"></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<!-- <li class="list-group-item p-1 px-2">
|
||||
<p class="text-bold mb-0">Time: 25 Aug 2025 07:31:08</p>
|
||||
<p class="text-muted mb-0 dtl-text">-8.55387 - 125.542409</p>
|
||||
<p class="text-muted mb-0 dtl-text">Avenida Luro Mata, Praia dos Coqueiros, Bebunuk, Dom Aleixo, Dili, Timor-Leste;2066973</p>
|
||||
<p class="mb-0 dtl-text">Current speed: 7km/h</p>
|
||||
</li> -->
|
||||
@foreach ($list as $item)
|
||||
<div class="modal-body">
|
||||
<div class="row head-text" id="viewPdf">
|
||||
<div class="col-12">
|
||||
<h4>{{$nopol1}}</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<p class="text-bold mb-0">Start</p>
|
||||
<p class="mb-0 time">{{ $start['time'] }}</p>
|
||||
<p class="mb-0">Vehicle Mileage: {{number_format($start['mileage'], 2)}} km</p>
|
||||
<p>{{$start['fulladdress']}}</p>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<p class="text-bold mb-0">Finish</p>
|
||||
<p class="mb-0 time">{{ $finish['time'] }}</p>
|
||||
<p class="mb-0">Vehicle Mileage: {{number_format($finish['mileage'], 2)}} km</p>
|
||||
<p>{{$finish['fulladdress']}}</p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p class="text-bold mb-0">Distance</p>
|
||||
<p class="mb-0">{{number_format($distance, 2)}} km</p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p class="text-bold mb-0">Duration</p>
|
||||
<p class="mb-0">{{$duration}}</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div id="leafMap" style="height: 400px;"></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<!-- <li class="list-group-item p-1 px-2">
|
||||
<p class="text-bold mb-0">Time: {{date('d-m-Y H:i:s', $item->crt_s)}}</p>
|
||||
<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
|
||||
<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}} - {{number_format($item->longitude, 6)}}</p>
|
||||
<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
|
||||
<p class="text-muted mb-0 dtl-text">Current speed: {{number_format($item->speed, 2)}} km/h</p>
|
||||
<p class="text-bold mb-0">Time: 25 Aug 2025 07:31:08</p>
|
||||
<p class="text-muted mb-0 dtl-text">-8.55387 - 125.542409</p>
|
||||
<p class="text-muted mb-0 dtl-text">Avenida Luro Mata, Praia dos Coqueiros, Bebunuk, Dom Aleixo, Dili, Timor-Leste;2066973</p>
|
||||
<p class="mb-0 dtl-text">Current speed: 7km/h</p>
|
||||
</li> -->
|
||||
<li class="list-group-item p-1 px-2">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<p class="text-bold mb-0">Time: <span class="time">{{ $item->crt_s }}</span></p>
|
||||
<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
|
||||
<p class="text-muted mb-0 dtl-text">Current speed: {{$item->speed}} km/h</p>
|
||||
@foreach ($list as $item)
|
||||
<!-- <li class="list-group-item p-1 px-2">
|
||||
<p class="text-bold mb-0">Time: {{date('d-m-Y H:i:s', $item->crt_s)}}</p>
|
||||
<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
|
||||
<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}} - {{number_format($item->longitude, 6)}}</p>
|
||||
<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
|
||||
<p class="text-muted mb-0 dtl-text">Current speed: {{number_format($item->speed, 2)}} km/h</p>
|
||||
</li> -->
|
||||
<li class="list-group-item p-1 px-2">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<p class="text-bold mb-0 dtl-text">Time: <span class="time">{{ $item->crt_s }}</span></p>
|
||||
<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
|
||||
<p class="text-muted mb-0 dtl-text">Current speed: {{$item->speed}} km/h</p>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}}, {{number_format($item->longitude, 6)}}</p>
|
||||
<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}} - {{number_format($item->longitude, 6)}}</p>
|
||||
<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@endforeach
|
||||
</li>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<!-- <button class="btn btn-sm btn-danger ms-auto" id="btnDownloadReport">Download Report</button> -->
|
||||
<!-- @can('vehicle.delete')
|
||||
<button type="button" id="btnDelVhc_updt" class="btn btn-sm btn-warning">Delete ?</button>
|
||||
@endcan
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
@can('vehicle.edit')
|
||||
<button id="btnSubmitEdtVhc" type="button" class="btn btn-sm btn-danger">Update data</button>
|
||||
@endcan
|
||||
<div id="edt-btnSubmitEdtVhc" class="d-none">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<button class="btn btn-sm btn-danger ms-auto" id="btnDownloadReport">Download Report</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -111,8 +115,8 @@
|
||||
let coords
|
||||
setTimeout(() => {
|
||||
map.invalidateSize(); // force Leaflet to recalc
|
||||
// map.fitBounds(polyline.getBounds());
|
||||
map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
|
||||
map.fitBounds(polyline.getBounds());
|
||||
// map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
|
||||
}, 200);
|
||||
|
||||
const linesData = (@json($list));
|
||||
@ -131,13 +135,13 @@
|
||||
.filter(p => p.latitude && p.longitude)
|
||||
.map((point) => [point.latitude, point.longitude])
|
||||
|
||||
// // 4) Add polyline
|
||||
// const polyline = L.polyline(points,{
|
||||
// color: 'blue',
|
||||
// weight: 3,
|
||||
// opacity: 0.7,
|
||||
// smoothFactor: 1
|
||||
// }).addTo(map);
|
||||
// 4) Add polyline
|
||||
const polyline = L.polyline(points,{
|
||||
color: 'red',
|
||||
weight: 3,
|
||||
opacity: 0.7,
|
||||
smoothFactor: 1
|
||||
}).addTo(map);
|
||||
|
||||
// const lines = L.Routing.control({
|
||||
// waypoints: points,
|
||||
@ -169,7 +173,7 @@
|
||||
const body = {
|
||||
coordinates: coords,
|
||||
overview: "false",
|
||||
alternatives: "true",
|
||||
alternatives: "false",
|
||||
steps: "true",
|
||||
hints: hints
|
||||
};
|
||||
@ -266,49 +270,58 @@
|
||||
// map.fitBounds(polyline.getBounds())
|
||||
|
||||
// download pdf
|
||||
$(document).on('click', '#btnDownloadReport', function () {
|
||||
const viewPdf = document.getElementById("viewPdf");
|
||||
window._downloadReportBound ||= (
|
||||
$(document).on('click', '#btnDownloadReport', function () {
|
||||
$('#viewPdf').printThis({
|
||||
debug: false, // show the iframe for debugging
|
||||
importCSS: true, // copy linked styles
|
||||
importStyle: true, // copy inline styles
|
||||
});
|
||||
|
||||
// find overlay svg (the one holding polylines)
|
||||
const overlaySvg = document.querySelector('.leaflet-overlay-pane svg');
|
||||
let originalTransform = '';
|
||||
if (overlaySvg) {
|
||||
originalTransform = overlaySvg.style.transform;
|
||||
overlaySvg.style.transform = 'none';
|
||||
}
|
||||
|
||||
html2canvas(viewPdf, {
|
||||
scale: 2,
|
||||
useCORS: true,
|
||||
logging: true
|
||||
}).then(canvas => {
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
const { jsPDF } = window.jspdf;
|
||||
// const viewPdf = document.getElementById("viewPdf");
|
||||
|
||||
const pdf = new jsPDF('p', 'mm', 'a4');
|
||||
const pageWidth = pdf.internal.pageSize.getWidth();
|
||||
const pageHeight = pdf.internal.pageSize.getHeight();
|
||||
// // find overlay svg (the one holding polylines)
|
||||
// const overlaySvg = document.querySelector('.leaflet-overlay-pane svg');
|
||||
// let originalTransform = '';
|
||||
// if (overlaySvg) {
|
||||
// originalTransform = overlaySvg.style.transform;
|
||||
// overlaySvg.style.transform = 'none';
|
||||
// }
|
||||
|
||||
// html2canvas(viewPdf, {
|
||||
// scale: 2,
|
||||
// useCORS: true,
|
||||
// logging: true
|
||||
// }).then(canvas => {
|
||||
// const imgData = canvas.toDataURL('image/png');
|
||||
// const { jsPDF } = window.jspdf;
|
||||
|
||||
const imgWidth = pageWidth - 20; // margin
|
||||
const imgHeight = canvas.height * imgWidth / canvas.width;
|
||||
// const pdf = new jsPDF('p', 'mm', 'a4');
|
||||
// const pageWidth = pdf.internal.pageSize.getWidth();
|
||||
// const pageHeight = pdf.internal.pageSize.getHeight();
|
||||
|
||||
let position = 10;
|
||||
// const imgWidth = pageWidth - 20; // margin
|
||||
// const imgHeight = canvas.height * imgWidth / canvas.width;
|
||||
|
||||
// 👉 Handle multipage content
|
||||
let heightLeft = imgHeight;
|
||||
while (heightLeft > 0) {
|
||||
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
|
||||
heightLeft -= pageHeight;
|
||||
if (heightLeft > 0) {
|
||||
pdf.addPage();
|
||||
position = 0;
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save(`{{$nopol1}} Trip Report {{$start['time']}}.pdf`);
|
||||
// let position = 10;
|
||||
|
||||
});
|
||||
});
|
||||
// // 👉 Handle multipage content
|
||||
// let heightLeft = imgHeight;
|
||||
// while (heightLeft > 0) {
|
||||
// pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
|
||||
// heightLeft -= pageHeight;
|
||||
// if (heightLeft > 0) {
|
||||
// pdf.addPage();
|
||||
// position = 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// pdf.save(`{{$nopol1}} Trip Report {{$start['time']}}.pdf`);
|
||||
|
||||
// });
|
||||
}),
|
||||
true
|
||||
);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user