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

dashboard fix

Browse Source
This commit is contained in:
Pringgosutono
2025-09-25 16:51:16 +07:00
parent a92d0c632f
commit 0284d25af4
3 changed files with 3666 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/Models/Tracks.php
View File

@ -542,8 +542,10 @@ class Tracks extends Model
// array_push($params, strtotime('-24 hours', $now), $now); // array_push($params, strtotime('-24 hours', $now), $now);
if (isset($filter["start_date"]) && isset($filter["end_date"])) { if (isset($filter["start_date"]) && isset($filter["end_date"])) {
$query .= " AND tr.crt_s BETWEEN ? AND ?"; $query .= " AND tr.crt_d BETWEEN ? AND ?";
array_push($params, $filter["start_date"], $filter["end_date"]); $tgl0 = $filter["start_date"] - Helper::TIMEFIX;
$tgl1 = $filter["end_date"] - Helper::TIMEFIX;
array_push($params, $tgl0, $tgl1);
} }
if (isset($filter["start_at"])) { if (isset($filter["start_at"])) {
@ -552,8 +554,8 @@ class Tracks extends Model
} }
// last move based on last count data // last move based on last count data
$query .= " GROUP BY tr.crt_s"; $query .= " GROUP BY tr.crt_d";
$query .= " ORDER BY tr.crt_s DESC"; $query .= " ORDER BY tr.crt_d DESC";
// $query .= " ORDER BY tr.id DESC"; // $query .= " ORDER BY tr.id DESC";
// array_push($params, strtotime('-24 hours', $now), $now); // array_push($params, strtotime('-24 hours', $now), $now);

3541
resources/views/menu_v1/dashboard.blade copy.php Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -407,11 +407,13 @@
<div> <div>
<div class="mb-2"> <div class="mb-2">
<label class="text-muted">From</label> <label class="text-muted">From</label>
<input class="form-control" id="historyStartDate"> <!-- <input class="form-control" id="historyStartDate"> -->
<input class="form-control" id="historyStartDate" value="11-08-2025 00:00">
</div> </div>
<div class="mb-2"> <div class="mb-2">
<label class="text-muted">To</label> <label class="text-muted">To</label>
<input class="form-control" id="historyEndDate"> <!-- <input class="form-control" id="historyEndDate"> -->
<input class="form-control" id="historyEndDate" value="11-08-2025 23:00">
</div> </div>
<button class="btn btn-primary btn-sm w-100 mb-3" id="historySearch">Search</button> <button class="btn btn-primary btn-sm w-100 mb-3" id="historySearch">Search</button>
</div> </div>
@ -942,33 +944,22 @@
if (cb) cb(polyline); if (cb) cb(polyline);
return polyline; return polyline;
}, },
addRoutes: function(locs = [], cb = null) { addRoutes: async function(locs = [], cb = null) {
let latLngs = []; let latLngs = [];
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({
// waypoints: latLngs.reverse(), // reverse to make first point as start function chunkArray(arr, size) {
// // router: L.Routing.osrmv1(), const result = [];
// router: L.Routing.osrmv1({ for (let i = 0; i < arr.length; i += size) {
// serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1", result.push(arr.slice(i, i + size));
// }), }
// show: false, return result;
// 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) { function fetchOsrm(points) {
// balik koordinat: [lat, lon] -> [lon, lat] const coords = points;
const coords = points
// hints: N-1 semicolon
const hints = ";".repeat(points.length - 1); const hints = ";".repeat(points.length - 1);
const body = { const body = {
@ -991,26 +982,20 @@
return axios.request(config) return axios.request(config)
.then((response) => { .then((response) => {
// console.log(JSON.stringify(response.data)); return response.data;
return response.data; // supaya bisa dipakai di luar
}) })
.catch((error) => { .catch((err) => {
console.error("Error:", err.message); console.error("Error:", err.message);
return null; return null;
}); });
} }
function decodeOSRMGeometry(encoded) { function decodeOSRMGeometry(encoded) {
const coordinates = []; const coordinates = [];
let index = 0, let index = 0, lat = 0, lng = 0;
lat = 0,
lng = 0;
while (index < encoded.length) { while (index < encoded.length) {
let result = 1, let result = 1, shift = 0, b;
shift = 0,
b;
do { do {
b = encoded.charCodeAt(index++) - 63 - 1; b = encoded.charCodeAt(index++) - 63 - 1;
result += b << shift; result += b << shift;
@ -1033,28 +1018,46 @@
return coordinates; return coordinates;
} }
let routes async function getCoordinates(points) {
fetchOsrm(latLngs).then(osrm => { const chunkSize = 500;
if (!osrm) return console.log("OSRM gagal"); const chunks = chunkArray(points, chunkSize); // Split the points array into chunks of 500
let allCoords = [];
const coords = osrm.routes[0].legs.flatMap(leg => for (const chunk of chunks) {
leg.steps.flatMap(step => const osrm = await fetchOsrm(chunk); // Fetch OSRM data for each chunk
decodeOSRMGeometry(step.geometry)
)
);
routes = L.polyline(coords, { if (!osrm) {
console.log("OSRM failed for chunk");
return;
}
const coords = osrm.routes[0].legs.flatMap(leg =>
leg.steps.flatMap(step =>
decodeOSRMGeometry(step.geometry)
)
);
allCoords = allCoords.concat(coords); // Combine the result
}
// Now add the polyline to the map
return L.polyline(allCoords, {
color: locs[0]?.options?.color, color: locs[0]?.options?.color,
weight: 3, weight: 3,
opacity: 0.8 opacity: 0.8
}).addTo(Leaflet.map); }).addTo(Leaflet.map);
Leaflet.map.fitBounds(coords.map(c => L.latLng(c[0], c[1]))); // map.fitBounds(allCoords.map(c => L.latLng(c[0], c[1])));
}); }
// Usage: Pass the array of coordinates to the function
const routes = await getCoordinates(latLngs);
if (cb) cb(routes); // optionally fit bounds
return routes; // Leaflet.map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
},
if (cb) cb(routes);
return routes;
},
// start custom polylines // start custom polylines
addCustomPolylines: function(locs = [], cb = null) { addCustomPolylines: function(locs = [], cb = null) {
const radius = 0.5 /* corner smooth radius, keep value in range 0 - 0.5 to avoid artifacts */ const radius = 0.5 /* corner smooth radius, keep value in range 0 - 0.5 to avoid artifacts */
@ -1397,10 +1400,11 @@
$('#infoJob').addClass('d-none'); $('#infoJob').addClass('d-none');
$('#infoMovement').removeClass('d-none'); $('#infoMovement').removeClass('d-none');
$('#infoMovement').addClass('d-block'); $('#infoMovement').addClass('d-block');
if (State.inShowVid) { // if (State.inShowVid) {
let cache = !(State.inShowVid != State.loadedLastMoveVid); // let cache = !(State.inShowVid != State.loadedLastMoveVid);
Trucks.bundleShowRouteTruck(cache); // jika data yang diload sebelumnya beda, maka tidak mengambil dari cache // Trucks.bundleShowRouteTruck(cache); // jika data yang diload sebelumnya beda, maka tidak mengambil dari cache
} // }
Menu.clearListMovements();
} }
}, },
eventListVehicle: function() { eventListVehicle: function() {
@ -1443,48 +1447,12 @@
}); });
}, },
showToListMovement: function(obj) { showToListMovement: function(obj) {
/**
* fix DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains
* because of string Cawang–Pluit
* solution: https://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte
* window.btoa( unescape(encodeURIComponent(str) ) is deprecated => window.btoa(encodeURIComponent(str))
*/
// <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_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>
// $('#infoMove-plots').append(`
// <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_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>
// </li>
// </a>
// `);
let arrIdx = Helper.getIndexReversedSequence(obj.key_index - 1, Trucks.last_move.length - 1); let arrIdx = Helper.getIndexReversedSequence(obj.key_index - 1, Trucks.last_move.length - 1);
// +7
// $('#infoMove-plots').append(`
// <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_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>
// </li>
// </a>
// `);
$('#infoMove-plots').append(` $('#infoMove-plots').append(`
<a href="#" class="plotMove-item" data-obj="${window.btoa( encodeURIComponent( JSON.stringify(obj) ) )}"> <a href="#" class="plotMove-item" data-obj="${window.btoa( encodeURIComponent( JSON.stringify(obj) ) )}">
<li class="list-group-item p-1 px-2"> <li class="list-group-item p-1 px-2">
<p class="text-bold mb-0">${arrIdx + 1}</p> <p class="text-bold mb-0">${arrIdx + 1}</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-bold mb-0">Time: ${moment.unix(obj?.lst_loc_crt_d).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-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="text-muted mb-2">${Helper.shortenText(decodeURIComponent(obj?.fulladdress || 'address'), 255)}</p>
<p class="mb-0">Current speed: ${Number(obj.speed)}km/h</p> <p class="mb-0">Current speed: ${Number(obj.speed)}km/h</p>
@ -1511,7 +1479,7 @@
lng: tr.longitude, 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.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).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_s).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_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(tr?.fulladdress || 'address')}.<br><br>Current speed: ${tr?.speed}km/h`,
options: { options: {
// icon: Icon.destination() // icon: Icon.destination()
} }
@ -1643,12 +1611,12 @@
// }); // });
$('#historyStartDate').on('clearFilterHistoryDate', function(e) { $('#historyStartDate').on('clearFilterHistoryDate', function(e) {
// default date today // default date today
State.historyStartDate = moment().startOf('day').unix(); // State.historyStartDate = moment().startOf('day').unix();
State.historyEndDate = moment().endOf('day').unix(); // State.historyEndDate = moment().endOf('day').unix();
$('#historyStartDate').val(moment().startOf('day').format('DD-MM-YYYY HH:mm')); // $('#historyStartDate').val(moment().startOf('day').format('DD-MM-YYYY HH:mm'));
$('#historyEndDate').val(moment().endOf('day').format('DD-MM-YYYY HH:mm')); // $('#historyEndDate').val(moment().endOf('day').format('DD-MM-YYYY HH:mm'));
// // for testing purpose // for testing purpose
// State.historyStartDate = '1756054800'; // State.historyStartDate = '1756054800';
// State.historyEndDate = '1756141140'; // State.historyEndDate = '1756141140';
// $('#historyStartDate').val("25-08-2025 00:00"); // $('#historyStartDate').val("25-08-2025 00:00");
@ -2558,7 +2526,7 @@
$('#infoVehicles-platno').text(`${truck?.nopol1} ${truck?.nopol2} ${truck?.nopol3}`); $('#infoVehicles-platno').text(`${truck?.nopol1} ${truck?.nopol2} ${truck?.nopol3}`);
// vehicles // 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).format('DD MMM YYYY HH:mm'));
// $('#infoVehicles-crt').text(moment.unix(truck?.lst_loc_crt_s).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')); // $('#infoVehicles-crt').text(moment.unix(truck?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss'));
// ${(truck?.city_text || truck?.state_text || 'address')} - ${(truck?.postcode || 'postcode')} // ${(truck?.city_text || truck?.state_text || 'address')} - ${(truck?.postcode || 'postcode')}
if (truck?.ignition == State.stts_ignition.high) { if (truck?.ignition == State.stts_ignition.high) {
$('#infoVehicles-ignition').text('ON'); $('#infoVehicles-ignition').text('ON');
@ -2763,7 +2731,7 @@
// // circle // // 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.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).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_s).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_d).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
// } // }
// }); // });
@ -2788,7 +2756,7 @@
// lat: start.latitude, // lat: start.latitude,
// lng: start.longitude, // 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).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_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')}`, // // 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')}`,
// options: { // options: {
// icon: Icon.titikAwal(), // icon: Icon.titikAwal(),
// // rotationAngle: 290 // // rotationAngle: 290
@ -2798,7 +2766,7 @@
// lat: finish.latitude, // lat: finish.latitude,
// lng: finish.longitude, // 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).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_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')}`, // //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')}`,
// options: { // options: {
// icon: Icon.titikAkhir() // icon: Icon.titikAkhir()
// } // }
@ -2830,7 +2798,7 @@
// PgBar.setMinMax(0, truckRoutes.length - 1); // PgBar.setMinMax(0, truckRoutes.length - 1);
// }, // },
routeStartEndGroupTrip: function(truckRoutes) { routeStartEndGroupTrip: async function(truckRoutes) {
const colors = [ const colors = [
"#2980B9", // Dark Blue "#2980B9", // Dark Blue
"#C0392B", // Dark Red "#C0392B", // Dark Red
@ -2839,6 +2807,7 @@
"#F39C12", // Dark Yellow/Gold "#F39C12", // Dark Yellow/Gold
] ]
let i = 1 let i = 1
let allStartStop = []
let polyTruckRoutes = truckRoutes.map((groupTrip, key0) => { let polyTruckRoutes = truckRoutes.map((groupTrip, key0) => {
return groupTrip.map((obj, key) => { return groupTrip.map((obj, key) => {
obj.key_index = i++ obj.key_index = i++
@ -2847,23 +2816,25 @@
Menu.showToListMovement(obj) Menu.showToListMovement(obj)
// add start end marker per group trip // add start end marker per group trip
if(key == 0 || key == groupTrip.length - 1) if(key == 0 || key == groupTrip.length - 1){
Leaflet.addMarkers({ const marker = Leaflet.addMarkers({
lat: obj.latitude, lat: obj.latitude,
lng: obj.longitude, lng: obj.longitude,
label: ` label: `
<b>Start Poin</b><br>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}<br> <b>${(key == 0) ? 'Finish' : 'Start'} Poin</b><br>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}<br>
${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br> ${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>
Speed: ${(typeof obj.lst_speed != 'undefined') ? obj.lst_speed : '0'}<br> Speed: ${(typeof obj.lst_speed != 'undefined') ? obj.lst_speed : '0'}<br>
${Number(obj.latitude).toFixed(5)},${Number(obj.longitude).toFixed(6)}<br> ${Number(obj.latitude).toFixed(5)},${Number(obj.longitude).toFixed(6)}<br>
${decodeURIComponent(obj.fulladdress || 'address')} ${decodeURIComponent(obj.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')}`, // 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')}`,
options: { options: {
icon: (key == 0) ? Icon.titikAkhir() : (key == (groupTrip.length - 1)) ? Icon.titikAwal() : null, icon: (key == 0) ? Icon.titikAkhir() : (key == (groupTrip.length - 1)) ? Icon.titikAwal() : null,
// rotationAngle: 290 // rotationAngle: 290
} }
}) })
allStartStop.push(marker)
}
return { return {
lat: obj.latitude, lat: obj.latitude,
@ -2878,84 +2849,73 @@
radius: 5, radius: 5,
markerOpacity: 0 markerOpacity: 0
}, },
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')}`, 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')}`,
// startLast : (key == 0) ? 0 : (key == (groupTrip.length - 1)) ? 1 : null, // startLast : (key == 0) ? 0 : (key == (groupTrip.length - 1)) ? 1 : null,
} }
}) })
}) })
// console.log("truckRoutes update", polyTruckRoutes); // console.log("truckRoutes update", polyTruckRoutes);
polyTruckRoutes.forEach(async (poly, idx) => { let circleCounter = 0
for (const [idx, poly] of polyTruckRoutes.entries()) {
// console.log("poly", poly); // console.log("poly", poly);
// let polyline = Leaflet.addRoutes(poly) function addCirclesAsync(polyCircle) {
// let polyline = Leaflet.addPolylines(poly) // console.log("circleCounter", circleCounter);
// let circlesStartStop = [] // return array of circles start end only
// Leaflet.addCircles(poly, function(circle, i) {
// if(i == 0 || i == (polyTruckRoutes.length - 1))
// circlesStartStop.push(circle)
// window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
// circle.remove();
// });
// circle.on('click', function() {
// PgBar.syncToPlotTravelHistory(i);
// })
// });
function addCirclesAsync(poly) {
return new Promise(resolve => { return new Promise(resolve => {
let circles = []; let circles = [];
Leaflet.addCircles(poly, function(circle, i) { Leaflet.addCircles(polyCircle, function(circle, i) {
if (i === 0 || i === (poly.length - 1)) { // console.log("circle", i, circleCounter);
if (i === 0 || i === (polyCircle.length - 1)) {
circles.push(circle); circles.push(circle);
} }
const currentCounter = circleCounter;
circle.on('click', function() { circle.on('click', function() {
PgBar.syncToPlotTravelHistory(i); PgBar.syncToPlotTravelHistory(currentCounter);
}); });
circleCounter++
// ✅ When last point processed, resolve // ✅ When last point processed, resolve
if (i === poly.length - 1) { if (i === polyCircle.length - 1) {
resolve(circles); resolve(circles);
} }
}); });
}); });
} }
let circlesStartStop = []; let polyline = await Leaflet.addRoutes(poly);
for (let [idx, poly] of polyTruckRoutes.entries()) { // console.log("polyline", polyline);
let polyline = Leaflet.addRoutes(poly); allStartStop.push(polyline)
// wait for all circles // wait for all circles
circlesStartStop = await addCirclesAsync(poly); const ssmarker = await addCirclesAsync(poly);
// console.log("ssmarker", ssmarker);
// keep event + removal logic here allStartStop.push(...ssmarker)
State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', { }
detail: { polyline, circlesStartStop }
});
window.addEventListener('eventRemoveRouteStartEnd', function(e) {
// polyline.remove();
circlesStartStop.forEach(c => c.remove());
});
}
// // remove marker, circle, event listener and all about this marker console.log("allStartStop", allStartStop);
State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', { // console.log("circlesStartStop", circlesStartStop);
detail: {
polyline, // // remove marker, circle, event listener and all about this marker
circlesStartStop State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
} // detail: {
}); allStartStop,
// circlesStartStop
// }
});
window.addEventListener('eventRemoveRouteStartEnd', function (e) { // window.addEventListener('eventRemoveRouteStartEnd', function (e) {
polyline.remove(); // // allStartStop.remove();
circlesStartStop.forEach(c => c.remove()) // allStartStop.forEach(c => c.remove())
}); // // circlesStartStop.forEach(c => c.remove())
}) // });
window.addEventListener('eventRemoveRouteStartEnd', function handler(e) { window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
allStartStop.forEach(c => c.remove())
e.currentTarget.removeEventListener(e.type, e.currentTarget.removeEventListener(e.type,
handler); // window.removeEventListener('remove', this.handler, true); handler); // window.removeEventListener('remove', this.handler, true);
State.eventRemoveRouteStartEnd = null; State.eventRemoveRouteStartEnd = null;
@ -3525,6 +3485,8 @@
} }
}, },
syncToPlotTravelHistory: function(arrIdx) { syncToPlotTravelHistory: function(arrIdx) {
console.log("syncToPlotTravelHistory", arrIdx);
const listPlotTravelHistory = document.querySelectorAll('#infoMove-plots .plotMove-item')[arrIdx]; const listPlotTravelHistory = document.querySelectorAll('#infoMove-plots .plotMove-item')[arrIdx];
listPlotTravelHistory.scrollIntoView(); listPlotTravelHistory.scrollIntoView();
listPlotTravelHistory.querySelector('li').classList.add('hover'); listPlotTravelHistory.querySelector('li').classList.add('hover');