From 8445a18416f03fa5af33513c2197d4b3977f9902 Mon Sep 17 00:00:00 2001
From: Pringgosutono <pringgosutono@gmail.com>
Date: Sun, 14 Sep 2025 23:01:35 +0700
Subject: [PATCH] timeout fix

---
 resources/views/menu_v1/dashboard.blade.php   | 127 +++++++++++++---
 .../menu_v1/reports/_trip_detail.blade.php    | 137 +++++++++++++++---
 .../menu_v1/reports/vehicle_trips.blade.php   |   5 +-
 3 files changed, 228 insertions(+), 41 deletions(-)

diff --git a/resources/views/menu_v1/dashboard.blade.php b/resources/views/menu_v1/dashboard.blade.php
index 6861198..5e3f163 100755
--- a/resources/views/menu_v1/dashboard.blade.php
+++ b/resources/views/menu_v1/dashboard.blade.php
@@ -533,7 +533,8 @@
     <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: don’t reroute while dragging
-					createMarker: () => null,
-					lineOptions:{
-						styles: [{ color: locs[0]?.options?.color, weight: 3, opacity: 0.7 }],
-					},
-				}).addTo(Leaflet.map)
+				// 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: don’t 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'
+						},
+						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());
 						});
 					}
diff --git a/resources/views/menu_v1/reports/_trip_detail.blade.php b/resources/views/menu_v1/reports/_trip_detail.blade.php
index 06d6778..0937da2 100644
--- a/resources/views/menu_v1/reports/_trip_detail.blade.php
+++ b/resources/views/menu_v1/reports/_trip_detail.blade.php
@@ -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: don’t reroute while dragging
-			createMarker: () => null,
-			lineOptions:{
-				styles: [{ color: "#2980B9", weight: 4, opacity: 0.8 }],
-			},
-		}).addTo(map)
+		// 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: don’t 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'
+                },
+                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 () {
diff --git a/resources/views/menu_v1/reports/vehicle_trips.blade.php b/resources/views/menu_v1/reports/vehicle_trips.blade.php
index c498b57..ec7724e 100644
--- a/resources/views/menu_v1/reports/vehicle_trips.blade.php
+++ b/resources/views/menu_v1/reports/vehicle_trips.blade.php
@@ -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';