diff --git a/app/Models/Tracks.php b/app/Models/Tracks.php index 607a112..564f73f 100755 --- a/app/Models/Tracks.php +++ b/app/Models/Tracks.php @@ -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); diff --git a/resources/views/menu_v1/dashboard.blade copy.php b/resources/views/menu_v1/dashboard.blade copy.php new file mode 100644 index 0000000..f5ffdb5 --- /dev/null +++ b/resources/views/menu_v1/dashboard.blade copy.php @@ -0,0 +1,3541 @@ +@extends('app.app') +@section('title') + Dashboard +@endsection +@section('customcss') + {{-- --}} + {{-- --}} + + +@endsection +@section('content') +
+
+ {{-- list zones --}} +
+
+
+ + + +
+
+

Zone List (2)

+
+
+
+
{{ $client_group->c_name }}
+
+
+
hide zone
+
+
+ +
+ +
+ {{-- zone detail --}} +
+
+ + + +
+
+
+
+
+
+ +
+
+
+

BRK001

+

Warehouse

+
+
+
+
+
    +
  • +

    Client

    +

    JNE

    +
    • +
  • +

    Tipe

    +

    Warehouse

    +
    • +
  • +

    Jenis Zona

    +

    Pickup

    +
    • +
  • +

    Alamat

    +

    Jl. Letjen Mt. Haryono No.Kav. 20, RW.1, Cawang, Kec. + Kramat jati, Kota Jakarta Timur, Daerah Khusus Ibukota Jakarta

    +
    • +
  • +

    Kode Pos

    +

    13630

    +
    • +
  • +

    Pembaharuan Terakhir

    +

    + 22-Sep-2020 04:43:43 + RTadmin +

    +
    • +
+
+
+
+ {{-- client logo --}} + {{--
+
+
+
+

{{ $client_group->c_name }}

+
+
+ + + +
+
+
+
+ @if ($client_group) + + @else + + @endif +
+
+
+
--}} + + + + + + + + + + +
+
+ {{-- vehicle detail --}} +
+
+ +
+
+
+
+
+ +
+
+

B 1201 SYX

+

Kebon Baru - Tebet

+
+
+
+
+
+ +
+
    +
  • + +
    • +
  • +

    Timestamp

    +

    20-Jan-2022 23:16:18

    +
    • +
  • +

    Current Location

    +

    Kebon Baru - Tebet

    +
    • +
  • +

    Latitude, Longitude

    +

    -6.27013, 106.731371

    +
    • +
  • +

    Vehicle Mileage (km)

    +

    45080.83

    +
    • + {{--
  • +

    Batas kecepatan (kph)

    +

    100

    +
    • +
  • +

    Keccepatan Saat Ini (kph)

    +

    60

    +
    • +
  • +

    Pengapian

    +

    ON

    +
    • --}} +
  • +

    Engine Status

    +

    Idling

    +
    • + + {{--
  • +

    Durasi Berhenti (min)

    +

    2946

    +
    • +
  • +

    Zona Peringatan

    +

    Pasar Induk Cibitung, RAPID Office, + Rumah Ranko KBB, toll + Jorr

    +
    • +
  • +

    Lacak di Hari Libur

    +

    Enabled

    +
    • +
  • +

    Jadwal Pelacakan

    +

    24/7

    +
    • +
  • +

    Perusahaan

    +

    Swa Nusa Multimedia

    +
    • +
  • +

    Tanggal Bergabung

    +

    23-Aug-2018

    +
    • --}} +
+
    +
  • +

    Driver Information

    +

    20-Jan-2022 23:16:18

    +
    • +
  • +

    Driver Name

    +

    Emrsyf

    +
    • +
  • +

    Phone

    +

    + +   + + +

    +

    + + + +

    +
    • + {{--
  • +

    Phone 2

    +

    + +   + + +

    +

    + + + +

    +
    • --}} +
+
+ {{-- @for ($i = 0; $i < 20; $i++) +
  • +

    #902192102910

    +
    +
    + Client name +

    JNE

    +
    +
    + Destination +

    JKT-01

    +
    +
    • + @endfor --}} + {{--
      +
    • +
      +
      + Client +

      PT

      +
      +
      +
      • +
    --}} +
      +
    • + {{--

      #902192102910

      --}} +
      +
      + Origin + {{--

      Jakarta

      --}} +

      JKT-01

      +

      Jl. Pancoran Timur Raya No.9, RT.8/RW.9, Pancoran, Kec. Pancoran, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12780

      +
      +
      +
      • +
    • + {{--

      #902192102910

      --}} +
      +
      + Destination + {{--

      Indramayu

      --}} +

      IND-01

      +

      Jl. Jend. Sudirman, Karanganyar, Kec. Indramayu, Kabupaten Indramayu, Jawa Barat

      +
      +
      +
      • +
    +
      +
    • + {{--

      #902192102910

      --}} +
      +
      + Status +

      On Going

      +
      +
      +
      • +
    +
    + +
    + {{-- vehicle list & filter --}} +
    + {{-- filter --}} +
    +
    +
    +
    + + + + + - +
    +
    + + + +
    + {{--
    + + + + - +
    +
    + + + + - +
    --}} +
    +
    +
    +
    +
    + {{-- + + --}} + + + +
    +
    +
    +
    +
    + +
    + {{-- vehicle list --}} + +
    +
    +
    +
    +
    +
    +
    + Stopped + Idling + Moving +
    +
    + Trip 1 + Trip 2 + Trip 3 + Trip 4 + Trip 5 +
    +
    +
    +
    +@endsection + +@section('customjs') + + + + + + + +@endsection diff --git a/resources/views/menu_v1/dashboard.blade.php b/resources/views/menu_v1/dashboard.blade.php index 5e3f163..cf1dfdf 100755 --- a/resources/views/menu_v1/dashboard.blade.php +++ b/resources/views/menu_v1/dashboard.blade.php @@ -407,11 +407,13 @@
    - + +
    - + +
    @@ -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)) - */ - //

    ${(obj?.city_text || obj?.state_text || 'address')} - ${(obj?.postcode || 'postcode')}

    - //

    ${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}

    // yang ini mix - - //

    Device Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm')}

    - //

    Server Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm')}

    - //

    Pre Milleage: ${(obj.pre_milleage).toFixed(3)} Km

    - - // $('#infoMove-plots').append(` - // - //
  • - //

    ${obj.key_index}

    - //

    Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm')}

    - //

    Speed: ${(typeof obj.speed != 'undefined') ? obj.speed : '0'}

    - //

    ${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}

    - //

    ${Helper.shortenText(decodeURIComponent(obj?.fulladdress || 'address'), 25)}

    - //
    • - //     - // `); let arrIdx = Helper.getIndexReversedSequence(obj.key_index - 1, Trucks.last_move.length - 1); - // +7 - // $('#infoMove-plots').append(` - // - //
  • - //

    ${arrIdx + 1}

    - //

    Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm:ss')}

    - //

    ${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}

    - //

    ${Helper.shortenText(decodeURIComponent(obj?.fulladdress || 'address'), 255)}

    - //

    Current speed: ${Number(obj.speed)}km/h

    - //
    • - //     - // `); $('#infoMove-plots').append(`

  • ${arrIdx + 1}

    -

    Time: ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm:ss')}

    +

    Time: ${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}

    ${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}

    ${Helper.shortenText(decodeURIComponent(obj?.fulladdress || 'address'), 255)}

    Current speed: ${Number(obj.speed)}km/h

    @@ -1511,7 +1479,7 @@ lng: tr.longitude, // label: `${tr.key_index}
    ${tr.nopol1} ${tr.nopol2} ${tr.nopol3}
    ${moment.unix(tr?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    Speed: ${(typeof tr.lst_speed != 'undefined') ? tr.lst_speed : '0'}
    ${tr.latitude},${tr.longitude}
    ${decodeURIComponent(tr?.fulladdress || 'address')}`, label: `${tr.nopol1} ${tr.nopol2} ${tr.nopol3}
    ${moment.unix(tr?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    ${decodeURIComponent(tr?.fulladdress || 'address')}.

    Current speed: ${tr?.speed}km/h`, - //label: `${tr.nopol1} ${tr.nopol2} ${tr.nopol3}
    ${moment.unix(tr?.lst_loc_crt_s).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}
    ${decodeURIComponent(tr?.fulladdress || 'address')}.

    Current speed: ${tr?.speed}km/h`, + //label: `${tr.nopol1} ${tr.nopol2} ${tr.nopol3}
    ${moment.unix(tr?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}
    ${decodeURIComponent(tr?.fulladdress || 'address')}.

    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: `${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_s).format('DD MMM YYYY HH:mm:ss')}
    ${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')}`, // } // }); @@ -2788,7 +2756,7 @@ // 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_s).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')}`, + // // 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 @@ -2798,7 +2766,7 @@ // 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_s).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')}`, + // //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() // } @@ -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: ` - Start Poin
    ${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    + ${(key == 0) ? 'Finish' : 'Start'} Poin
    ${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    ${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}
    Speed: ${(typeof obj.lst_speed != 'undefined') ? obj.lst_speed : '0'}
    ${Number(obj.latitude).toFixed(5)},${Number(obj.longitude).toFixed(6)}
    ${decodeURIComponent(obj.fulladdress || 'address')} `, - // label: `Start Poin
    ${start.nopol1} ${start.nopol2} ${start.nopol3}
    ${moment.unix(start?.lst_loc_crt_s).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')}`, + // 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: (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: `${obj.nopol1} ${obj.nopol2} ${obj.nopol3}
    ${moment.unix(obj?.lst_loc_crt_s).format('DD MMM YYYY HH:mm:ss')}
    ${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')}`, // 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');