From 3a1fac9961461944b3f007be87269fbc2a56d74e Mon Sep 17 00:00:00 2001
From: ardhi <ardhi.irfan@integrasiautama.com>
Date: Mon, 4 Sep 2023 19:05:07 +0700
Subject: [PATCH] add marker and popup definition when searching user waypoint

---
 src/appredux/modules/map/actions.js      |  49 +++++++++++++++--------
 src/assets/img/map/pin_route_on_trip.png | Bin 0 -> 3864 bytes
 src/views/MapMonitoring/index.js         |  48 +++++++++++++++++++++-
 3 files changed, 79 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/img/map/pin_route_on_trip.png

diff --git a/src/appredux/modules/map/actions.js b/src/appredux/modules/map/actions.js
index db12266..0462355 100644
--- a/src/appredux/modules/map/actions.js
+++ b/src/appredux/modules/map/actions.js
@@ -158,11 +158,41 @@ export const getUserHistory = async (userId, dateString) => {
             "features": []
         }
 
+        // build waypoint line
+        let featureLine = {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+                "type": "LineString",
+                "coordinates": []
+            }
+        }
+
+        userHistory.data.map((n, idx) => {
+            featureLine.geometry.coordinates.push([parseFloat(n.lon), parseFloat(n.lat)])
+
+            if (idx > startIdx && idx < endIdx) {
+                let featureOnTrip = {
+                    "type": "Feature",
+                    "properties": {
+                        "type": "Working",
+                        "wptime": n.wptime
+                    },
+                    "geometry": {
+                        "type": "Point",
+                        "coordinates": [parseFloat(n.lon), parseFloat(n.lat)]
+                    }
+                }
+                featureCollection.features.push(featureOnTrip);
+            }
+        });
+        featureCollection.features.push(featureLine);
+
         // set waypoint start
         let featurePointStart = {
             "type": "Feature",
             "properties": {
-                "type": "start",
+                "type": "Start",
                 "wptime": userHistory.data[startIdx].wptime
             },
             "geometry": {
@@ -176,7 +206,7 @@ export const getUserHistory = async (userId, dateString) => {
         let featurePointEnd = {
             "type": "Feature",
             "properties": {
-                "type": "end",
+                "type": "End",
                 "wptime": userHistory.data[endIdx].wptime
             },
             "geometry": {
@@ -186,21 +216,6 @@ export const getUserHistory = async (userId, dateString) => {
         }
         featureCollection.features.push(featurePointEnd);
 
-        // build waypoint line
-        let featureLine = {
-            "type": "Feature",
-            "properties": {},
-            "geometry": {
-                "type": "LineString",
-                "coordinates": []
-            }
-        }
-
-        userHistory.data.map(n => {
-            featureLine.geometry.coordinates.push([parseFloat(n.lon), parseFloat(n.lat)])
-        });
-        featureCollection.features.push(featureLine);
-
         store.dispatch(setUserHistory(featureCollection));
         store.dispatch(setIsSearchingRoute(false));
     }
diff --git a/src/assets/img/map/pin_route_on_trip.png b/src/assets/img/map/pin_route_on_trip.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3c9d0c8813c41a47e99c1bb8354dd8cc3972d17
GIT binary patch
literal 3864
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
Bw1)ry

literal 0
HcmV?d00001

diff --git a/src/views/MapMonitoring/index.js b/src/views/MapMonitoring/index.js
index 322e485..83ec348 100644
--- a/src/views/MapMonitoring/index.js
+++ b/src/views/MapMonitoring/index.js
@@ -17,11 +17,15 @@ import "react-toastify/dist/ReactToastify.css";
 import './MapMonitoring.css';
 import { BASE_SIMPRO_LUMEN_IMAGE } from '../../const/ApiConst';
 import DEFAULT_USER_ICON from '../../assets/img/avatars/user.png';
+import pinRouteStart from '../../assets/img/map/pin_route_green.png';
+import pinRouteEnd from '../../assets/img/map/pin_route_red.png';
+import pinRouteOnTrip from '../../assets/img/map/pin_route_on_trip.png';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/leaflet.markercluster.js'
 import 'leaflet-control-geocoder/dist/Control.Geocoder.css'
 import 'leaflet-control-geocoder/dist/Control.Geocoder.js'
+import moment from 'moment';
 
 const MapMonitoring = () => {
 
@@ -81,8 +85,50 @@ const MapMonitoring = () => {
         if (mymap) {
             removeLayerByName('userHistoryLayer');
             if (userHistory) {
+                var startIcon = new L.Icon({
+                    iconSize: [60, 60],
+                    iconAnchor: [30, 47],
+                    popupAnchor:  [1, -24],
+                    iconUrl: pinRouteStart
+                });
+                var endIcon = new L.Icon({
+                    iconSize: [60, 60],
+                    iconAnchor: [30, 47],
+                    popupAnchor:  [1, -24],
+                    iconUrl: pinRouteEnd
+                });
+                var onTripIcon = new L.Icon({
+                    iconSize: [60, 60],
+                    iconAnchor: [30, 47],
+                    popupAnchor:  [1, -24],
+                    iconUrl: pinRouteOnTrip
+                });
                 let userHistoryLayer = L.geoJson(userHistory, {
-                    name: 'userHistoryLayer'
+                    name: 'userHistoryLayer',
+                    onEachFeature: function(feature, layer) {
+                        var popupText = `<b>Status: </b>${feature.properties.type}<br>
+                        <b>Time: </b> ${feature.properties.wptime ? moment(feature.properties.wptime).format("DD-MM-YYYY HH:mm:ss") : '-'}`;
+
+                        layer.bindPopup(popupText, {
+                          closeButton: true,
+                        //   offset: L.point(0, -20)
+                        });
+                        layer.on('click', function() {
+                          layer.openPopup();
+                        });
+                    },
+                    pointToLayer: function(feature, latlng) {
+                        var type = feature.properties.type;
+                        if (type === 'Start') {
+                            return L.marker(latlng, {icon: startIcon});
+                        } 
+                        else if (type === "Working") {
+                            return L.marker(latlng, {icon: onTripIcon});
+                        } 
+                        else if (type === "End") {
+                            return L.marker(latlng, {icon: endIcon});
+                        }
+                    },
                 });
                 userHistoryLayer.addTo(mymap);
                 mymap.fitBounds(userHistoryLayer.getBounds());