timeout fix

This commit is contained in:
Pringgosutono
2025-09-14 23:01:35 +07:00
parent d1f90af6f6
commit 8445a18416
3 changed files with 228 additions and 41 deletions

View File

@ -533,6 +533,7 @@
<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://cdn.jsdelivr.net/npm/leaflet-rotatedmarker@0.2.0/leaflet.rotatedMarker.min.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
'use strict';
@ -946,22 +947,110 @@
for (let i = 0; i < locs.length; i++) {
latLngs.push([locs[i].lat, locs[i].lng]);
}
let routes = L.Routing.control({
waypoints: latLngs.reverse(), // reverse to make first point as start
// router: L.Routing.osrmv1(),
router: L.Routing.osrmv1({
serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1",
}),
show: false,
itinerary: null, // 👈 completely removes the panel
addWaypoints: false, // ❌ prevent adding points by clicking
draggableWaypoints: false, // ❌ prevent dragging markers
routeWhileDragging: false, // optional: dont reroute while dragging
createMarker: () => null,
lineOptions:{
styles: [{ color: locs[0]?.options?.color, weight: 3, opacity: 0.7 }],
// let routes = L.Routing.control({
// waypoints: latLngs.reverse(), // reverse to make first point as start
// // router: L.Routing.osrmv1(),
// router: L.Routing.osrmv1({
// serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1",
// }),
// show: false,
// itinerary: null, // 👈 completely removes the panel
// addWaypoints: false, // ❌ prevent adding points by clicking
// draggableWaypoints: false, // ❌ prevent dragging markers
// routeWhileDragging: false, // optional: dont reroute while dragging
// createMarker: () => null,
// lineOptions:{
// styles: [{ color: locs[0]?.options?.color, weight: 3, opacity: 0.7 }],
// },
// }).addTo(Leaflet.map)
function fetchOsrm(points) {
// balik koordinat: [lat, lon] -> [lon, lat]
const coords = points
// hints: N-1 semicolon
const hints = ";".repeat(points.length - 1);
const body = {
coordinates: coords,
overview: "false",
alternatives: "true",
steps: "true",
hints: hints
};
let config = {
method: 'post',
maxBodyLength: Infinity,
url: 'https://brilianapps.britimorleste.tl/osrm-backend/post-route/v1/driving/',
headers: {
'Content-Type': 'application/json'
},
}).addTo(Leaflet.map)
data: body
};
return axios.request(config)
.then((response) => {
// console.log(JSON.stringify(response.data));
return response.data; // supaya bisa dipakai di luar
})
.catch((error) => {
console.error("Error:", err.message);
return null;
});
}
function decodeOSRMGeometry(encoded) {
const coordinates = [];
let index = 0,
lat = 0,
lng = 0;
while (index < encoded.length) {
let result = 1,
shift = 0,
b;
do {
b = encoded.charCodeAt(index++) - 63 - 1;
result += b << shift;
shift += 5;
} while (b >= 0x1f);
lat += (result & 1 ? ~(result >> 1) : result >> 1);
result = 1;
shift = 0;
do {
b = encoded.charCodeAt(index++) - 63 - 1;
result += b << shift;
shift += 5;
} while (b >= 0x1f);
lng += (result & 1 ? ~(result >> 1) : result >> 1);
coordinates.push([lat / 1e5, lng / 1e5]);
}
return coordinates;
}
let routes
fetchOsrm(latLngs).then(osrm => {
if (!osrm) return console.log("OSRM gagal");
const coords = osrm.routes[0].legs.flatMap(leg =>
leg.steps.flatMap(step =>
decodeOSRMGeometry(step.geometry)
)
);
routes = L.polyline(coords, {
color: locs[0]?.options?.color,
weight: 3,
opacity: 0.8
}).addTo(Leaflet.map);
Leaflet.map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
});
if (cb) cb(routes);
return routes;
@ -2798,7 +2887,7 @@
polyTruckRoutes.forEach(async (poly, idx) => {
// console.log("poly", poly);
let polyline = Leaflet.addRoutes(poly)
// let polyline = Leaflet.addRoutes(poly)
// let polyline = Leaflet.addPolylines(poly)
// let circlesStartStop = []
@ -2847,7 +2936,7 @@
});
window.addEventListener('eventRemoveRouteStartEnd', function(e) {
polyline.remove();
// polyline.remove();
circlesStartStop.forEach(c => c.remove());
});
}

View File

@ -49,7 +49,7 @@
<p class="mb-0">{{$duration}}</p>
</div>
<div class="col-12">
<div id="leafMap" style="height: 300px;"></div>
<div id="leafMap" style="height: 400px;"></div>
</div>
<div class="col-12">
<!-- <li class="list-group-item p-1 px-2">
@ -111,7 +111,7 @@
setTimeout(() => {
map.invalidateSize(); // force Leaflet to recalc
map.fitBounds(polyline.getBounds());
// map.fitBounds(polyline.getBounds());
}, 200);
const linesData = (@json($list));
@ -131,22 +131,119 @@
.map((point) => [point.latitude, point.longitude])
// // 4) Add polyline
const polyline = L.polyline(points)
const lines = L.Routing.control({
waypoints: points,
router: L.Routing.osrmv1({
serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1",
}),
show: false,
itinerary: null, // 👈 completely removes the panel
addWaypoints: false, // ❌ prevent adding points by clicking
draggableWaypoints: false, // ❌ prevent dragging markers
routeWhileDragging: false, // optional: dont reroute while dragging
createMarker: () => null,
lineOptions:{
styles: [{ color: "#2980B9", weight: 4, opacity: 0.8 }],
// const polyline = L.polyline(points,{
// color: 'blue',
// weight: 3,
// opacity: 0.7,
// smoothFactor: 1
// }).addTo(map);
// const lines = L.Routing.control({
// waypoints: points,
// // router: L.Routing.osrmv1(),
// router: L.Routing.osrmv1({
// serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1",
// }),
// show: false,
// itinerary: null, // 👈 completely removes the panel
// addWaypoints: false, // ❌ prevent adding points by clicking
// draggableWaypoints: false, // ❌ prevent dragging markers
// routeWhileDragging: false, // optional: dont reroute while dragging
// createMarker: () => null,
// routingOptions: {
// radiuses: [100, 100] // tolerance in meters per waypoint
// },
// lineOptions:{
// styles: [{ color: "#C0392B", weight: 4, opacity: 0.7 }],
// },
// }).addTo(map)
function fetchOsrm(points) {
// balik koordinat: [lat, lon] -> [lon, lat]
const coords = points
// hints: N-1 semicolon
const hints = ";".repeat(points.length - 1);
const body = {
coordinates: coords,
overview: "false",
alternatives: "true",
steps: "true",
hints: hints
};
let config = {
method: 'post',
maxBodyLength: Infinity,
url: 'https://brilianapps.britimorleste.tl/osrm-backend/post-route/v1/driving/',
headers: {
'Content-Type': 'application/json'
},
}).addTo(map)
data: body
};
return axios.request(config)
.then((response) => {
// console.log(JSON.stringify(response.data));
return response.data; // supaya bisa dipakai di luar
})
.catch((error) => {
console.error("Error:", err.message);
return null;
});
}
function decodeOSRMGeometry(encoded) {
const coordinates = [];
let index = 0,
lat = 0,
lng = 0;
while (index < encoded.length) {
let result = 1,
shift = 0,
b;
do {
b = encoded.charCodeAt(index++) - 63 - 1;
result += b << shift;
shift += 5;
} while (b >= 0x1f);
lat += (result & 1 ? ~(result >> 1) : result >> 1);
result = 1;
shift = 0;
do {
b = encoded.charCodeAt(index++) - 63 - 1;
result += b << shift;
shift += 5;
} while (b >= 0x1f);
lng += (result & 1 ? ~(result >> 1) : result >> 1);
coordinates.push([lat / 1e5, lng / 1e5]);
}
return coordinates;
}
fetchOsrm(points).then(osrm => {
if (!osrm) return console.log("OSRM gagal");
const coords = osrm.routes[0].legs.flatMap(leg =>
leg.steps.flatMap(step =>
decodeOSRMGeometry(step.geometry)
)
);
L.polyline(coords, {
color: "#2980B9",
weight: 3,
opacity: 0.8
}).addTo(map);
map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
});
// start and finish point
@ -164,8 +261,8 @@
})
L.marker(points[points.length - 1], {icon: finishIcon}).addTo(map)
// 5) Auto-fit map to polyline bounds
map.fitBounds(polyline.getBounds())
// // 5) Auto-fit map to polyline bounds
// map.fitBounds(polyline.getBounds())
// download pdf
$(document).on('click', '#btnDownloadReport', function () {

View File

@ -49,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">
@ -201,6 +201,7 @@
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
'use strict';