dashboard fix
This commit is contained in:
Pringgosutono
@ -542,8 +542,10 @@ class Tracks extends Model
|
||||
// array_push($params, strtotime('-24 hours', $now), $now);
|
||||
|
||||
if (isset($filter["start_date"]) && isset($filter["end_date"])) {
|
||||
$query .= " AND tr.crt_s BETWEEN ? AND ?";
|
||||
array_push($params, $filter["start_date"], $filter["end_date"]);
|
||||
$query .= " AND tr.crt_d BETWEEN ? AND ?";
|
||||
$tgl0 = $filter["start_date"] - Helper::TIMEFIX;
|
||||
$tgl1 = $filter["end_date"] - Helper::TIMEFIX;
|
||||
array_push($params, $tgl0, $tgl1);
|
||||
}
|
||||
|
||||
if (isset($filter["start_at"])) {
|
||||
@ -552,8 +554,8 @@ class Tracks extends Model
|
||||
}
|
||||
|
||||
// last move based on last count data
|
||||
$query .= " GROUP BY tr.crt_s";
|
||||
$query .= " ORDER BY tr.crt_s DESC";
|
||||
$query .= " GROUP BY tr.crt_d";
|
||||
$query .= " ORDER BY tr.crt_d DESC";
|
||||
// $query .= " ORDER BY tr.id DESC";
|
||||
// array_push($params, strtotime('-24 hours', $now), $now);
|
||||
|
||||
|
||||
3541
resources/views/menu_v1/dashboard.blade copy.php
Normal file
3541
resources/views/menu_v1/dashboard.blade copy.php
Normal file
File diff suppressed because it is too large
Load Diff
@ -407,11 +407,13 @@
|
||||
<div>
|
||||
<div class="mb-2">
|
||||
<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 class="mb-2">
|
||||
<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>
|
||||
<button class="btn btn-primary btn-sm w-100 mb-3" id="historySearch">Search</button>
|
||||
</div>
|
||||
@ -942,33 +944,22 @@
|
||||
if (cb) cb(polyline);
|
||||
return polyline;
|
||||
},
|
||||
addRoutes: function(locs = [], cb = null) {
|
||||
let latLngs = [];
|
||||
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)
|
||||
addRoutes: async function(locs = [], cb = null) {
|
||||
let latLngs = [];
|
||||
for (let i = 0; i < locs.length; i++) {
|
||||
latLngs.push([locs[i].lat, locs[i].lng]);
|
||||
}
|
||||
|
||||
function chunkArray(arr, size) {
|
||||
const result = [];
|
||||
for (let i = 0; i < arr.length; i += size) {
|
||||
result.push(arr.slice(i, i + size));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function fetchOsrm(points) {
|
||||
// balik koordinat: [lat, lon] -> [lon, lat]
|
||||
const coords = points
|
||||
|
||||
// hints: N-1 semicolon
|
||||
const coords = points;
|
||||
const hints = ";".repeat(points.length - 1);
|
||||
|
||||
const body = {
|
||||
@ -991,26 +982,20 @@
|
||||
|
||||
return axios.request(config)
|
||||
.then((response) => {
|
||||
// console.log(JSON.stringify(response.data));
|
||||
return response.data; // supaya bisa dipakai di luar
|
||||
return response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
.catch((err) => {
|
||||
console.error("Error:", err.message);
|
||||
return null;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function decodeOSRMGeometry(encoded) {
|
||||
const coordinates = [];
|
||||
let index = 0,
|
||||
lat = 0,
|
||||
lng = 0;
|
||||
let index = 0, lat = 0, lng = 0;
|
||||
|
||||
while (index < encoded.length) {
|
||||
let result = 1,
|
||||
shift = 0,
|
||||
b;
|
||||
let result = 1, shift = 0, b;
|
||||
do {
|
||||
b = encoded.charCodeAt(index++) - 63 - 1;
|
||||
result += b << shift;
|
||||
@ -1033,28 +1018,46 @@
|
||||
return coordinates;
|
||||
}
|
||||
|
||||
let routes
|
||||
fetchOsrm(latLngs).then(osrm => {
|
||||
if (!osrm) return console.log("OSRM gagal");
|
||||
async function getCoordinates(points) {
|
||||
const chunkSize = 500;
|
||||
const chunks = chunkArray(points, chunkSize); // Split the points array into chunks of 500
|
||||
let allCoords = [];
|
||||
|
||||
const coords = osrm.routes[0].legs.flatMap(leg =>
|
||||
leg.steps.flatMap(step =>
|
||||
decodeOSRMGeometry(step.geometry)
|
||||
)
|
||||
);
|
||||
for (const chunk of chunks) {
|
||||
const osrm = await fetchOsrm(chunk); // Fetch OSRM data for each chunk
|
||||
|
||||
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,
|
||||
weight: 3,
|
||||
opacity: 0.8
|
||||
}).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);
|
||||
return routes;
|
||||
},
|
||||
// optionally fit bounds
|
||||
// Leaflet.map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
|
||||
|
||||
if (cb) cb(routes);
|
||||
return routes;
|
||||
},
|
||||
// start custom polylines
|
||||
addCustomPolylines: function(locs = [], cb = null) {
|
||||
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');
|
||||
$('#infoMovement').removeClass('d-none');
|
||||
$('#infoMovement').addClass('d-block');
|
||||
if (State.inShowVid) {
|
||||
let cache = !(State.inShowVid != State.loadedLastMoveVid);
|
||||
Trucks.bundleShowRouteTruck(cache); // jika data yang diload sebelumnya beda, maka tidak mengambil dari cache
|
||||
}
|
||||
// if (State.inShowVid) {
|
||||
// let cache = !(State.inShowVid != State.loadedLastMoveVid);
|
||||
// Trucks.bundleShowRouteTruck(cache); // jika data yang diload sebelumnya beda, maka tidak mengambil dari cache
|
||||
// }
|
||||
Menu.clearListMovements();
|
||||
}
|
||||
},
|
||||
eventListVehicle: function() {
|
||||
@ -1443,48 +1447,12 @@
|
||||
});
|
||||
},
|
||||
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);
|
||||
// +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(`
|
||||
<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-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-2">${Helper.shortenText(decodeURIComponent(obj?.fulladdress || 'address'), 255)}</p>
|
||||
<p class="mb-0">Current speed: ${Number(obj.speed)}km/h</p>
|
||||
@ -1511,7 +1479,7 @@
|
||||
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.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: {
|
||||
// icon: Icon.destination()
|
||||
}
|
||||
@ -1643,12 +1611,12 @@
|
||||
// });
|
||||
$('#historyStartDate').on('clearFilterHistoryDate', function(e) {
|
||||
// default date today
|
||||
State.historyStartDate = moment().startOf('day').unix();
|
||||
State.historyEndDate = moment().endOf('day').unix();
|
||||
$('#historyStartDate').val(moment().startOf('day').format('DD-MM-YYYY HH:mm'));
|
||||
$('#historyEndDate').val(moment().endOf('day').format('DD-MM-YYYY HH:mm'));
|
||||
// State.historyStartDate = moment().startOf('day').unix();
|
||||
// State.historyEndDate = moment().endOf('day').unix();
|
||||
// $('#historyStartDate').val(moment().startOf('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.historyEndDate = '1756141140';
|
||||
// $('#historyStartDate').val("25-08-2025 00:00");
|
||||
@ -2558,7 +2526,7 @@
|
||||
$('#infoVehicles-platno').text(`${truck?.nopol1} ${truck?.nopol2} ${truck?.nopol3}`);
|
||||
// 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_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')}
|
||||
if (truck?.ignition == State.stts_ignition.high) {
|
||||
$('#infoVehicles-ignition').text('ON');
|
||||
@ -2763,7 +2731,7 @@
|
||||
// // 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.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,
|
||||
// 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_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: {
|
||||
// icon: Icon.titikAwal(),
|
||||
// // rotationAngle: 290
|
||||
@ -2798,7 +2766,7 @@
|
||||
// lat: finish.latitude,
|
||||
// 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_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: {
|
||||
// icon: Icon.titikAkhir()
|
||||
// }
|
||||
@ -2830,7 +2798,7 @@
|
||||
|
||||
// PgBar.setMinMax(0, truckRoutes.length - 1);
|
||||
// },
|
||||
routeStartEndGroupTrip: function(truckRoutes) {
|
||||
routeStartEndGroupTrip: async function(truckRoutes) {
|
||||
const colors = [
|
||||
"#2980B9", // Dark Blue
|
||||
"#C0392B", // Dark Red
|
||||
@ -2839,6 +2807,7 @@
|
||||
"#F39C12", // Dark Yellow/Gold
|
||||
]
|
||||
let i = 1
|
||||
let allStartStop = []
|
||||
let polyTruckRoutes = truckRoutes.map((groupTrip, key0) => {
|
||||
return groupTrip.map((obj, key) => {
|
||||
obj.key_index = i++
|
||||
@ -2847,23 +2816,25 @@
|
||||
Menu.showToListMovement(obj)
|
||||
|
||||
// add start end marker per group trip
|
||||
if(key == 0 || key == groupTrip.length - 1)
|
||||
Leaflet.addMarkers({
|
||||
if(key == 0 || key == groupTrip.length - 1){
|
||||
const marker = Leaflet.addMarkers({
|
||||
lat: obj.latitude,
|
||||
lng: obj.longitude,
|
||||
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>
|
||||
Speed: ${(typeof obj.lst_speed != 'undefined') ? obj.lst_speed : '0'}<br>
|
||||
${Number(obj.latitude).toFixed(5)},${Number(obj.longitude).toFixed(6)}<br>
|
||||
${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: {
|
||||
icon: (key == 0) ? Icon.titikAkhir() : (key == (groupTrip.length - 1)) ? Icon.titikAwal() : null,
|
||||
// rotationAngle: 290
|
||||
}
|
||||
})
|
||||
allStartStop.push(marker)
|
||||
}
|
||||
|
||||
return {
|
||||
lat: obj.latitude,
|
||||
@ -2878,84 +2849,73 @@
|
||||
radius: 5,
|
||||
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,
|
||||
}
|
||||
})
|
||||
})
|
||||
// console.log("truckRoutes update", polyTruckRoutes);
|
||||
|
||||
polyTruckRoutes.forEach(async (poly, idx) => {
|
||||
let circleCounter = 0
|
||||
for (const [idx, poly] of polyTruckRoutes.entries()) {
|
||||
// console.log("poly", poly);
|
||||
// let polyline = Leaflet.addRoutes(poly)
|
||||
// let polyline = Leaflet.addPolylines(poly)
|
||||
|
||||
// let circlesStartStop = []
|
||||
// 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) {
|
||||
function addCirclesAsync(polyCircle) {
|
||||
// console.log("circleCounter", circleCounter);
|
||||
|
||||
// return array of circles start end only
|
||||
return new Promise(resolve => {
|
||||
let circles = [];
|
||||
|
||||
Leaflet.addCircles(poly, function(circle, i) {
|
||||
if (i === 0 || i === (poly.length - 1)) {
|
||||
Leaflet.addCircles(polyCircle, function(circle, i) {
|
||||
// console.log("circle", i, circleCounter);
|
||||
|
||||
if (i === 0 || i === (polyCircle.length - 1)) {
|
||||
circles.push(circle);
|
||||
}
|
||||
|
||||
const currentCounter = circleCounter;
|
||||
circle.on('click', function() {
|
||||
PgBar.syncToPlotTravelHistory(i);
|
||||
PgBar.syncToPlotTravelHistory(currentCounter);
|
||||
});
|
||||
circleCounter++
|
||||
|
||||
// ✅ When last point processed, resolve
|
||||
if (i === poly.length - 1) {
|
||||
if (i === polyCircle.length - 1) {
|
||||
resolve(circles);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
let circlesStartStop = [];
|
||||
for (let [idx, poly] of polyTruckRoutes.entries()) {
|
||||
let polyline = Leaflet.addRoutes(poly);
|
||||
let polyline = await Leaflet.addRoutes(poly);
|
||||
// console.log("polyline", polyline);
|
||||
allStartStop.push(polyline)
|
||||
|
||||
// wait for all circles
|
||||
circlesStartStop = await addCirclesAsync(poly);
|
||||
|
||||
// keep event + removal logic here
|
||||
State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
|
||||
detail: { polyline, circlesStartStop }
|
||||
});
|
||||
|
||||
window.addEventListener('eventRemoveRouteStartEnd', function(e) {
|
||||
// polyline.remove();
|
||||
circlesStartStop.forEach(c => c.remove());
|
||||
});
|
||||
}
|
||||
// wait for all circles
|
||||
const ssmarker = await addCirclesAsync(poly);
|
||||
// console.log("ssmarker", ssmarker);
|
||||
allStartStop.push(...ssmarker)
|
||||
}
|
||||
|
||||
// // remove marker, circle, event listener and all about this marker
|
||||
State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
|
||||
detail: {
|
||||
polyline,
|
||||
circlesStartStop
|
||||
}
|
||||
});
|
||||
console.log("allStartStop", allStartStop);
|
||||
// console.log("circlesStartStop", circlesStartStop);
|
||||
|
||||
// // remove marker, circle, event listener and all about this marker
|
||||
State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
|
||||
// detail: {
|
||||
allStartStop,
|
||||
// circlesStartStop
|
||||
// }
|
||||
});
|
||||
|
||||
window.addEventListener('eventRemoveRouteStartEnd', function (e) {
|
||||
polyline.remove();
|
||||
circlesStartStop.forEach(c => c.remove())
|
||||
});
|
||||
})
|
||||
// window.addEventListener('eventRemoveRouteStartEnd', function (e) {
|
||||
// // allStartStop.remove();
|
||||
// allStartStop.forEach(c => c.remove())
|
||||
// // circlesStartStop.forEach(c => c.remove())
|
||||
// });
|
||||
|
||||
window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
|
||||
allStartStop.forEach(c => c.remove())
|
||||
e.currentTarget.removeEventListener(e.type,
|
||||
handler); // window.removeEventListener('remove', this.handler, true);
|
||||
State.eventRemoveRouteStartEnd = null;
|
||||
@ -3525,6 +3485,8 @@
|
||||
}
|
||||
},
|
||||
syncToPlotTravelHistory: function(arrIdx) {
|
||||
console.log("syncToPlotTravelHistory", arrIdx);
|
||||
|
||||
const listPlotTravelHistory = document.querySelectorAll('#infoMove-plots .plotMove-item')[arrIdx];
|
||||
listPlotTravelHistory.scrollIntoView();
|
||||
listPlotTravelHistory.querySelector('li').classList.add('hover');
|
||||
|
||||
Reference in New Issue
Block a user