TIMOR-TELECOM/gps-frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

timeout fix

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

127
resources/views/menu_v1/dashboard.blade.php
View File

@ -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://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://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://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> <script>
'use strict'; 'use strict';
@ -946,22 +947,110 @@
for (let i = 0; i < locs.length; i++) { for (let i = 0; i < locs.length; i++) {
latLngs.push([locs[i].lat, locs[i].lng]); latLngs.push([locs[i].lat, locs[i].lng]);
} }
let routes = L.Routing.control({ // let routes = L.Routing.control({
waypoints: latLngs.reverse(), // reverse to make first point as start // waypoints: latLngs.reverse(), // reverse to make first point as start
// router: L.Routing.osrmv1(), // // router: L.Routing.osrmv1(),
router: L.Routing.osrmv1({ // router: L.Routing.osrmv1({
serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1", // serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1",
}), // }),
show: false, // show: false,
itinerary: null, // 👈 completely removes the panel // itinerary: null, // 👈 completely removes the panel
addWaypoints: false, // ❌ prevent adding points by clicking // addWaypoints: false, // ❌ prevent adding points by clicking
draggableWaypoints: false, // ❌ prevent dragging markers // draggableWaypoints: false, // ❌ prevent dragging markers
routeWhileDragging: false, // optional: don’t reroute while dragging // routeWhileDragging: false, // optional: don’t reroute while dragging
createMarker: () => null, // createMarker: () => null,
lineOptions:{ // lineOptions:{
styles: [{ color: locs[0]?.options?.color, weight: 3, opacity: 0.7 }], // styles: [{ color: locs[0]?.options?.color, weight: 3, opacity: 0.7 }],
}, // },
}).addTo(Leaflet.map) // }).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); if (cb) cb(routes);
return routes; return routes;
@ -2798,7 +2887,7 @@
polyTruckRoutes.forEach(async (poly, idx) => { polyTruckRoutes.forEach(async (poly, idx) => {
// console.log("poly", poly); // console.log("poly", poly);
let polyline = Leaflet.addRoutes(poly) // let polyline = Leaflet.addRoutes(poly)
// let polyline = Leaflet.addPolylines(poly) // let polyline = Leaflet.addPolylines(poly)
// let circlesStartStop = [] // let circlesStartStop = []
@ -2847,7 +2936,7 @@
}); });
window.addEventListener('eventRemoveRouteStartEnd', function(e) { window.addEventListener('eventRemoveRouteStartEnd', function(e) {
polyline.remove(); // polyline.remove();
circlesStartStop.forEach(c => c.remove()); circlesStartStop.forEach(c => c.remove());
}); });
} }

137
resources/views/menu_v1/reports/_trip_detail.blade.php
View File

@ -49,7 +49,7 @@
<p class="mb-0">{{$duration}}</p> <p class="mb-0">{{$duration}}</p>
</div> </div>
<div class="col-12"> <div class="col-12">
<div id="leafMap" style="height: 300px;"></div> <div id="leafMap" style="height: 400px;"></div>
</div> </div>
<div class="col-12"> <div class="col-12">
<!-- <li class="list-group-item p-1 px-2"> <!-- <li class="list-group-item p-1 px-2">
@ -111,7 +111,7 @@
setTimeout(() => { setTimeout(() => {
map.invalidateSize(); // force Leaflet to recalc map.invalidateSize(); // force Leaflet to recalc
map.fitBounds(polyline.getBounds()); // map.fitBounds(polyline.getBounds());
}, 200); }, 200);
const linesData = (@json($list)); const linesData = (@json($list));
@ -131,22 +131,119 @@
.map((point) => [point.latitude, point.longitude]) .map((point) => [point.latitude, point.longitude])
// // 4) Add polyline // // 4) Add polyline
const polyline = L.polyline(points) // const polyline = L.polyline(points,{
const lines = L.Routing.control({ // color: 'blue',
waypoints: points, // weight: 3,
router: L.Routing.osrmv1({ // opacity: 0.7,
serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1", // smoothFactor: 1
}), // }).addTo(map);
show: false,
itinerary: null, // 👈 completely removes the panel // const lines = L.Routing.control({
addWaypoints: false, // ❌ prevent adding points by clicking // waypoints: points,
draggableWaypoints: false, // ❌ prevent dragging markers // // router: L.Routing.osrmv1(),
routeWhileDragging: false, // optional: don’t reroute while dragging // router: L.Routing.osrmv1({
createMarker: () => null, // serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1",
lineOptions:{ // }),
styles: [{ color: "#2980B9", weight: 4, opacity: 0.8 }], // show: false,
}, // itinerary: null, // 👈 completely removes the panel
}).addTo(map) // 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 // start and finish point
@ -164,8 +261,8 @@
}) })
L.marker(points[points.length - 1], {icon: finishIcon}).addTo(map) L.marker(points[points.length - 1], {icon: finishIcon}).addTo(map)
// 5) Auto-fit map to polyline bounds // // 5) Auto-fit map to polyline bounds
map.fitBounds(polyline.getBounds()) // map.fitBounds(polyline.getBounds())
// download pdf // download pdf
$(document).on('click', '#btnDownloadReport', function () { $(document).on('click', '#btnDownloadReport', function () {

5
resources/views/menu_v1/reports/vehicle_trips.blade.php
View File

@ -49,8 +49,8 @@
<div class="form-group"> <div class="form-group">
<label class="text-muted">From</label> <label class="text-muted">From</label>
<!-- default today --> <!-- default today -->
<!-- <input class="form-control" id="tgl0" value="25-08-2025 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') }}"> <!-- <input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}"> -->
</div> </div>
</div> </div>
<div class="col-2"> <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://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/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://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> <script>
'use strict'; 'use strict';