diff --git a/resources/views/menu_v1/dashboard.blade.php b/resources/views/menu_v1/dashboard.blade.php index 5763216..03933a9 100755 --- a/resources/views/menu_v1/dashboard.blade.php +++ b/resources/views/menu_v1/dashboard.blade.php @@ -272,6 +272,7 @@

Engine Status

Idling

+ {{--

  • Durasi Berhenti (min)

    2946

    @@ -408,10 +409,11 @@ -
    +
    +
    {{-- @@ -513,6 +515,13 @@ Stopped Idling Moving +
    +
    + Trip 1 + Trip 2 + Trip 3 + Trip 4 + Trip 5
    @@ -941,7 +950,7 @@ 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", + serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1", }), show: false, itinerary: null, // ๐Ÿ‘ˆ completely removes the panel @@ -950,7 +959,7 @@ routeWhileDragging: false, // optional: donโ€™t reroute while dragging createMarker: () => null, lineOptions:{ - styles: [{ color: locs[0]?.options?.color, weight: 5, opacity: 0.7 }], + styles: [{ color: locs[0]?.options?.color, weight: 3, opacity: 0.7 }], }, }).addTo(Leaflet.map) @@ -1505,7 +1514,14 @@ }); }, eventFilterHistoryDate: function() { - $('#historyStartDate, #historyEndDate').on('change', function(e) { + $('#historySearch').on('click', function(e) { + e.preventDefault(); + // console.log("change history date", this.id, this.value); + const value = this.value; + const id = this.id; + if(State[id] == moment(value, "DD-MM-YYYY HH:mm").unix()) + return false; + const date0 = moment($('#historyStartDate').val(), "DD-MM-YYYY HH:mm") const date1 = moment($('#historyEndDate').val(), "DD-MM-YYYY HH:mm") const { @@ -2637,95 +2653,95 @@ 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: 5, - // // markerOpacity: 0 - // }, - // // circle - // // label: `${obj.key_index}
    ${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    ${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    Speed: ${(typeof obj.speed != 'undefined') ? obj.speed : '0'}
    ${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}
    ${decodeURIComponent(obj?.fulladdress || 'address')}`, - // // label: `${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    ${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    ${decodeURIComponent(obj?.fulladdress || 'address')}`, - // label: `${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    ${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}
    ${decodeURIComponent(obj?.fulladdress || 'address')}`, - // } - // }); + // 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: `${obj.key_index}
    ${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    ${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    Speed: ${(typeof obj.speed != 'undefined') ? obj.speed : '0'}
    ${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}
    ${decodeURIComponent(obj?.fulladdress || 'address')}`, + // // label: `${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    ${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    ${decodeURIComponent(obj?.fulladdress || 'address')}`, + // label: `${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    ${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}
    ${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: `Start Poin
    ${start.nopol1} ${start.nopol2} ${start.nopol3}
    ${moment.unix(start?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}
    ${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}
    ${decodeURIComponent(start.fulladdress || 'address')}`, - // // label: `Start Poin
    ${start.nopol1} ${start.nopol2} ${start.nopol3}
    ${moment.unix(start?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}
    Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}
    ${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}
    ${decodeURIComponent(start.fulladdress || 'address')}`, - // options: { - // icon: Icon.titikAwal(), - // // rotationAngle: 290 - // } - // }); - // let finishMarker = Leaflet.addMarkers({ - // lat: finish.latitude, - // lng: finish.longitude, - // label: `End Poin
    ${finish.nopol1} ${finish.nopol2} ${finish.nopol3}
    ${moment.unix(finish?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}
    ${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}
    ${decodeURIComponent(finish.fulladdress || 'address')}`, - // //label: `End Poin
    ${finish.nopol1} ${finish.nopol2} ${finish.nopol3}
    ${moment.unix(finish?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}
    Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}
    ${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}
    ${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: `Start Poin
    ${start.nopol1} ${start.nopol2} ${start.nopol3}
    ${moment.unix(start?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}
    ${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}
    ${decodeURIComponent(start.fulladdress || 'address')}`, + // // label: `Start Poin
    ${start.nopol1} ${start.nopol2} ${start.nopol3}
    ${moment.unix(start?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}
    Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}
    ${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}
    ${decodeURIComponent(start.fulladdress || 'address')}`, + // options: { + // icon: Icon.titikAwal(), + // // rotationAngle: 290 + // } + // }); + // let finishMarker = Leaflet.addMarkers({ + // lat: finish.latitude, + // lng: finish.longitude, + // label: `End Poin
    ${finish.nopol1} ${finish.nopol2} ${finish.nopol3}
    ${moment.unix(finish?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}
    ${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}
    ${decodeURIComponent(finish.fulladdress || 'address')}`, + // //label: `End Poin
    ${finish.nopol1} ${finish.nopol2} ${finish.nopol3}
    ${moment.unix(finish?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}
    Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}
    ${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}
    ${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; + // // 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.tglMenuPlayback(false); + // PgBar.reset(); + // }); - // PgBar.setMinMax(0, truckRoutes.length - 1); + // PgBar.setMinMax(0, truckRoutes.length - 1); // }, - routeStartEndGroupTrip: function(truckRoutes) { + routeStartEndGroupTrip: function(truckRoutes) { const colors = [ "#2980B9", // Dark Blue "#C0392B", // Dark Red @@ -2780,29 +2796,61 @@ }) // console.log("truckRoutes update", polyTruckRoutes); - polyTruckRoutes.forEach((poly, idx) => { + polyTruckRoutes.forEach(async (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 = [] + // Leaflet.addCircles(poly, function(circle, i) { + // if(i == 0 || i == (polyTruckRoutes.length - 1)) + // circlesStartStop.push(circle) - // 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); + // }) + // }); + function addCirclesAsync(poly) { + return new Promise(resolve => { + let circles = []; - window.addEventListener('eventRemoveRouteStartEnd', function handler(e) { - circle.remove(); + Leaflet.addCircles(poly, function(circle, i) { + if (i === 0 || i === (poly.length - 1)) { + circles.push(circle); + } + + circle.on('click', function() { + PgBar.syncToPlotTravelHistory(i); + }); + + // โœ… When last point processed, resolve + if (i === poly.length - 1) { + resolve(circles); + } + }); }); - circle.on('click', function() { - PgBar.syncToPlotTravelHistory(i); - }) - }); + } + + let circlesStartStop = []; + for (let [idx, poly] of polyTruckRoutes.entries()) { + let polyline = Leaflet.addRoutes(poly); + + // 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()); + }); + } // // remove marker, circle, event listener and all about this marker State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', { @@ -2813,28 +2861,12 @@ }); 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); - }) 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;