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

update feature

Browse Source
This commit is contained in:
Pringgosutono
2025-08-29 20:43:56 +07:00
parent f906c80835
commit 64d7ce4f65
8 changed files with 1101 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,10 @@
display: none;
}
.leaflet-routing-container {
display: none !important;
}
#openLeftSideBar1Mobile {
display: none;
}
@ -402,11 +406,11 @@
<div>
<div class="mb-2">
<label class="text-muted">From</label>
<input class="form-control" type="date" id="historyStartDate">
<input class="form-control" id="historyStartDate">
</div>
<div class="mb-3">
<label class="text-muted">To</label>
<input class="form-control" type="date" id="historyEndDate">
<input class="form-control" id="historyEndDate">
</div>
</div>
<div id="infoMove-plots" class="infoMove-plots">
@ -519,9 +523,11 @@
<script src="{{ asset('assets/vendor/leaflet-1.7.1/leaflet-src.js') }}"></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://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>
'use strict';
const State = {
isDrawPolygon: 0,
timingRouteAnimation: 100,
@ -737,6 +743,13 @@
$('#rightSideBar1').addClass('d-none');
$('#openRightSideBar1').removeClass('d-none');
}
$('#historyStartDate, #historyEndDate').datetimepicker({
format:'d-m-Y H:i',
defaultTime:'00:00',
closeOnDateSelect: true,
// mask:true
});
},
calcIdlingDur: function(lst_idle_unix, lst_speed) {
let now = moment();
@ -760,19 +773,19 @@
};
},
calcPeriodeDate: function(startDate, endDate) {
if (startDate.format('YYYY-MM-DD') === 'Invalid date') {
if (startDate.format('YYYY-MM-DD HH:mm') === 'Invalid date') {
Helper.toast('Warning', 'just now', 'Start date of the period is not valid');
return {
isValid: false
};
}
if (endDate.format('YYYY-MM-DD') === 'Invalid date') {
if (endDate.format('YYYY-MM-DD HH:mm') === 'Invalid date') {
Helper.toast('Warning', 'just now', 'End date of the period is not valid');
return {
isValid: false
};
}
endDate.add(23, 'hour').add(59, 'minutes').add(59, 'seconds');
// endDate.add(23, 'hour').add(59, 'minutes').add(59, 'seconds');
const duration = moment.duration(endDate.diff(startDate));
const diffDays = duration.days();
if (diffDays > 30) {
@ -814,7 +827,7 @@
// Leaflet.map = L.map('map').setView([-7.1451449, 109.9776078], 8); // centering javanese province
// Leaflet.map = L.map('map').setView([-7.8241413, 112.9071746], 9); // centering east java province
// Leaflet.map = L.map('map').setView([-6.2106272, 106.8477106], 9); // centering east java province
Leaflet.map = L.map('map').setView([-8.90507, 125.9945732], 10); // centering east java province
Leaflet.map = L.map('map').setView([-8.90507, 125.9945732], 10); // centering timor leste
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
// maxZoom: 20,
@ -887,6 +900,11 @@
if (locs.constructor === Array) {
let circles = [];
for (let i = 0; i < locs.length; i++) {
// invisible circle
if(locs[i].options?.markerOpacity == 0){
locs[i].options.opacity = 0
locs[i].options.fill = false
}
let circle = L.circle([locs[i].lat, locs[i].lng], locs[i]?.options);
circle.bindPopup(locs[i]?.label || '');
circle.bindTooltip(locs[i]?.label || '');
@ -914,6 +932,31 @@
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/osrm-backend/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: 5, opacity: 0.7 }],
},
}).addTo(Leaflet.map)
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 */
@ -1077,6 +1120,7 @@
if (cb) cb();
}
} else if (type == 'eventRemoveRouteStartEnd') {
// console.log('clear route eventRemoveRouteStartEnd');
if (State.eventRemoveRouteStartEnd) {
window.dispatchEvent(State.eventRemoveRouteStartEnd);
if (cb) cb();
@ -1251,7 +1295,7 @@
$('#infoMovement').addClass('d-none');
} else if (type == State.stts_filterDetail.lastMove) { // last movement
$('#infoVehicles').addClass('d-none');
$('#infoDriver').addClass('d-none');
// $('#infoDriver').addClass('d-none');
$('#infoJob').addClass('d-none');
$('#infoMovement').removeClass('d-none');
$('#infoMovement').addClass('d-block');
@ -1353,7 +1397,11 @@
eventListMovement: function() {
$('#infoMove-plots').on('click', '.plotMove-item', function(e) {
let tr = JSON.parse(decodeURIComponent(window.atob($(e.target).closest('.plotMove-item').data('obj'))));
// console.log("tr", tr);
let arrIdx = Helper.getIndexReversedSequence(tr.key_index - 1, Trucks.last_move.length - 1);
// console.log("arrIdx", arrIdx);
PgBar.setCrntVal(arrIdx);
Menu.createMarkerDetailPlotMovement(tr);
})
@ -1457,36 +1505,50 @@
});
},
eventFilterHistoryDate: function() {
$('#historyStartDate').on('change', function(e) {
$('#historyStartDate, #historyEndDate').on('change', function(e) {
const date0 = moment($('#historyStartDate').val(), "DD-MM-YYYY HH:mm")
const date1 = moment($('#historyEndDate').val(), "DD-MM-YYYY HH:mm")
const {
isValid,
data
} = Wrapper.calcPeriodeDate(moment($('#historyStartDate').val()), moment($('#historyEndDate').val()))
} = Wrapper.calcPeriodeDate(
date0,
date1
)
if (!isValid) return false;
State.historyStartDate = data.startDate.unix();
State.historyEndDate = data.endDate.unix();
// console.log("isValid", isValid, data);
State.historyStartDate = date0.unix();
State.historyEndDate = date1.unix();
Leaflet.clearLayer('eventRemoveRouteStartEnd');
Trucks.bundleShowRouteTruck(false);
});
$('#historyEndDate').on('change', function(e) {
const {
isValid,
data
} = Wrapper.calcPeriodeDate(moment($('#historyStartDate').val()), moment($('#historyEndDate').val()))
if (!isValid) return false;
State.historyStartDate = data.startDate.unix();
State.historyEndDate = data.endDate.unix();
// $('#historyEndDate').on('change', function(e) {
// const {
// isValid,
// data
// } = Wrapper.calcPeriodeDate(moment($('#historyStartDate').val()), moment($('#historyEndDate').val()))
// if (!isValid) return false;
// State.historyStartDate = data.startDate.unix();
// State.historyEndDate = data.endDate.unix();
Leaflet.clearLayer('eventRemoveRouteStartEnd');
Trucks.bundleShowRouteTruck(false);
});
// Leaflet.clearLayer('eventRemoveRouteStartEnd');
// Trucks.bundleShowRouteTruck(false);
// });
$('#historyStartDate').on('clearFilterHistoryDate', function(e) {
State.historyStartDate = '';
State.historyEndDate = '';
$('#historyStartDate').val('');
$('#historyEndDate').val('');
});
// 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'));
// // for testing purpose
// State.historyStartDate = '1756054800';
// State.historyEndDate = '1756141140';
// $('#historyStartDate').val("25-08-2025 00:00");
// $('#historyEndDate').val("25-08-2025 23:59");
});
},
handlerFilterPopupVhcMarker: function(markers) {
if (State.inShowLastMove) {
@ -2453,7 +2515,7 @@
// <p id="" class="mb-0">JNE</p>
// </div>
// <div class="col-auto">
// <small class="text-muted">Destination</small>
// <small class="text-muted">Destination</small>
// <p id="" class="mb-0">JKT-01</p></div>
// </div>
// </li>
@ -2501,13 +2563,16 @@
bundleShowRouteTruck: async function(cache = false) {
Menu.clearListMovements();
if (State.inShowVid != State.loadedLastMoveVid) $('#historyStartDate').trigger('clearFilterHistoryDate');
Trucks.last_move = await Trucks.getLastMove(State.inShowVid, cache);
const getLastMove = await Trucks.getLastMove(State.inShowVid, cache);
Trucks.last_move = getLastMove.flat()
if (Trucks.last_move.length < 1) {
Helper.toast('Data Not Found', 'just now', 'There are no last data', 'bg-warning');
Trucks.last_move = null;
return false;
}
Trucks.showLastMoveToView(Trucks.last_move);
Trucks.showLastMoveToView(getLastMove);
},
getLastMove: async function(vid, cache = false) {
State.loadedLastMoveVid = vid;
@ -2568,84 +2633,208 @@
showLastMoveToView: function(truckRoutes) {
// Leaflet.clearLayer('eventAboutTruck');
Leaflet.hideLayer('eventHideAllTruck');
Trucks.routeStartEnd(truckRoutes);
// Trucks.routeStartEnd(truckRoutes);
Trucks.routeStartEndGroupTrip(truckRoutes);
},
routeStartEnd: function(truckRoutes) {
let key_length = truckRoutes.length;
let polyTruckRoutes = truckRoutes.map((obj, key) => {
obj.key_index = key + 1 // key_length - key;
// lists per detail info movement
Menu.showToListMovement(obj);
return {
lat: obj.latitude,
lng: obj.longitude,
options: {
// polyline
smoothFactor: 1.0,
noClip: true,
bubblingMouseEvents: false,
// circle
radius: 2,
},
// 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_d).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
}
});
// routeStartEnd: function(truckRoutes) {
// let key_length = truckRoutes.length;
// let polyTruckRoutes = truckRoutes.map((obj, key) => {
// obj.key_index = key + 1 // key_length - key;
// // lists per detail info movement
// Menu.showToListMovement(obj);
// return {
// lat: obj.latitude,
// lng: obj.longitude,
// options: {
// // polyline
// smoothFactor: 1.0,
// noClip: true,
// bubblingMouseEvents: false,
// // circle
// radius: 5,
// // markerOpacity: 0
// },
// // 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_d).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
// }
// });
let polyline = Leaflet.addPolylines(polyTruckRoutes);
Leaflet.map.fitBounds(polyline.getBounds());
// let ctrWaypoint = Leaflet.addWaypoints(polyTruckRoutes.slice(0, 100))
// let polyline = Leaflet.addPolylines(polyTruckRoutes);
// Leaflet.map.fitBounds(polyline.getBounds());
// // let ctrWaypoint = Leaflet.addWaypoints(polyTruckRoutes.slice(0, 100))
Leaflet.addCircles(polyTruckRoutes, function(circle, i) {
window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
circle.remove();
});
circle.on('click', function() {
PgBar.syncToPlotTravelHistory(i);
})
});
// Leaflet.addCircles(polyTruckRoutes, function(circle, i) {
// window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
// circle.remove();
// });
// circle.on('click', function() {
// PgBar.syncToPlotTravelHistory(i);
// })
// });
let start = truckRoutes.at(-1);
let finish = truckRoutes.at(0);
// ${(start?.city_text || start?.state_tex || 'address't)} - ${(start?.postcode || 'postcode')}
// ${(finish?.city_text || finish?.state_text || 'address')} - ${(finish?.postcode || 'postcode')}
let startMarker = Leaflet.addMarkers({
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_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
}
});
let finishMarker = Leaflet.addMarkers({
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_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()
}
});
// let start = truckRoutes.at(-1);
// let finish = truckRoutes.at(0);
// // ${(start?.city_text || start?.state_tex || 'address't)} - ${(start?.postcode || 'postcode')}
// // ${(finish?.city_text || finish?.state_text || 'address')} - ${(finish?.postcode || 'postcode')}
// let startMarker = Leaflet.addMarkers({
// 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_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
// }
// });
// let finishMarker = Leaflet.addMarkers({
// 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_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()
// }
// });
// // remove marker, circle, event listener and all about this marker
// State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
// startMarker,
// finishMarker,
// polyline,
// polyline,
// });
// window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
// startMarker.removeEventListener('click');
// startMarker.removeEventListener('moveend');
// startMarker.remove();
// finishMarker.removeEventListener('click');
// finishMarker.removeEventListener('moveend');
// finishMarker.remove();
// polyline.remove();
// e.currentTarget.removeEventListener(e.type,
// handler); // window.removeEventListener('remove', this.handler, true);
// State.eventRemoveRouteStartEnd = null;
// State.inShowLastMove = null;
// PgBar.tglMenuPlayback(false);
// PgBar.reset();
// });
// PgBar.setMinMax(0, truckRoutes.length - 1);
// },
routeStartEndGroupTrip: function(truckRoutes) {
const colors = [
"#2980B9", // Dark Blue
"#C0392B", // Dark Red
"#27AE60", // Dark Green
"#D35400", // Dark Orange
"#F39C12", // Dark Yellow/Gold
]
let i = 1
let polyTruckRoutes = truckRoutes.map((groupTrip, key0) => {
return groupTrip.map((obj, key) => {
obj.key_index = i++
// console.log("obj", obj.key_index);
Menu.showToListMovement(obj)
// add start end marker per group trip
if(key == 0 || key == groupTrip.length - 1)
Leaflet.addMarkers({
lat: obj.latitude,
lng: obj.longitude,
label: `
<b>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_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
}
})
return {
lat: obj.latitude,
lng: obj.longitude,
options: {
// polyline
color : colors[key0 % colors.length],
smoothFactor : 0,
noClip : true,
bubblingMouseEvents : false,
// circle
radius: 5,
markerOpacity: 0
},
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((poly, idx) => {
// console.log("poly", poly);
let polyline = Leaflet.addRoutes(poly)
// let polyline = Leaflet.addPolylines(poly)
// if(idx == 0)
// Leaflet.map.fitBounds(polyline.getBounds());
// let circlesStartStop = [...poly.filter((p, i) => i == 0 || i == (poly.length - 1))]
let circlesStartStop = []
// console.log("circlesStartStop", 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);
})
});
// // remove marker, circle, event listener and all about this marker
State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
detail: {
polyline,
circlesStartStop
}
});
window.addEventListener('eventRemoveRouteStartEnd', function (e) {
// console.log("circlesStartStop", circlesStartStop);
polyline.remove();
circlesStartStop.forEach(c => c.remove())
});
// State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
// polyline,
// circlesStartStop,
// });
// console.log("polyline", polyline);
// console.log("circlesStartStop", circlesStartStop);
// console.log("State.eventRemoveRouteStartEnd", State.eventRemoveRouteStartEnd);
})
// remove marker, circle, event listener and all about this marker
State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
startMarker,
finishMarker,
polyline,
polyline,
});
window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
startMarker.removeEventListener('click');
startMarker.removeEventListener('moveend');
startMarker.remove();
finishMarker.removeEventListener('click');
finishMarker.removeEventListener('moveend');
finishMarker.remove();
polyline.remove();
// startMarker.removeEventListener('click');
// startMarker.removeEventListener('moveend');
// startMarker.remove();
// finishMarker.removeEventListener('click');
// finishMarker.removeEventListener('moveend');
// finishMarker.remove();
// polyline.remove();
e.currentTarget.removeEventListener(e.type,
handler); // window.removeEventListener('remove', this.handler, true);
State.eventRemoveRouteStartEnd = null;
@ -2655,7 +2844,7 @@
PgBar.reset();
});
PgBar.setMinMax(0, truckRoutes.length - 1);
PgBar.setMinMax(0, Trucks.last_move.length - 1);
},
routePerPoint: function() {
Leaflet.addMarkers(truckRoutes.routes.map((obj) => {