diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json index 916421e377..cb3821751b 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json @@ -1,12 +1,12 @@ { "theme": { - "logo" : "https://entgra.io/assets/images/svg/logo.svg", + "logo": "https://entgra.io/assets/images/svg/logo.svg", "primaryColor": "rgb(24, 144, 255)" }, "serverConfig": { "invoker": { "uri": "/entgra-ui-request-handler/invoke", - "deviceMgt" : "/device-mgt/v1.0" + "deviceMgt": "/device-mgt/v1.0" }, "loginUri": "/entgra-ui-request-handler/login", "logoutUri": "/entgra-ui-request-handler/logout", @@ -37,6 +37,7 @@ "geoMap": { "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", "attribution": "© OpenStreetMap contributors", - "defaultZoomLevel": 16 + "defaultZoomLevel": 16, + "timeout": 120 } } diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/index.js index 113878b2c6..9dc2722e0f 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/index.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/index.js @@ -25,8 +25,31 @@ import { Popup, Tooltip, } from 'react-leaflet'; +import L from 'leaflet'; import { withConfigContext } from '../../../../../../components/ConfigContext'; +// Icons for the location markers +const pinStart = new L.Icon({ + iconUrl: require('./pin_start.svg'), + iconRetinaUrl: require('./pin_start.svg'), + shadowUrl: require('./pin_shadow.svg'), + shadowSize: new L.Point(51, 51), + shadowAnchor: [22, 22], + popupAnchor: [0, -22], + iconSize: new L.Point(50, 50), + tooltipAnchor: [0, -22], +}); +const pinEnd = new L.Icon({ + iconUrl: require('./pin_end.svg'), + iconRetinaUrl: require('./pin_end.svg'), + shadowUrl: require('./pin_shadow.svg'), + shadowSize: new L.Point(51, 51), + shadowAnchor: [22, 22], + popupAnchor: [0, -22], + iconSize: new L.Point(65, 65), + tooltipAnchor: [0, -28], +}); + class CustomMap extends Component { constructor(props) { super(props); @@ -38,17 +61,65 @@ class CustomMap extends Component { * @returns content */ polylineMarker = locationData => { - const polyMarkers = locationData.map(locationPoint => { - return [locationPoint.latitude, locationPoint.longitude]; - }); + const locationPoints = [...locationData]; + const polyLines = []; + + while (locationPoints.length > 0) { + // Array to store positions for next polyline + const positions = []; + // Make a copy of remaining location points + const cachedLocationPoints = [...locationPoints]; + // Iterate the remaining cached locations + for (let i = 0; i < cachedLocationPoints.length; i++) { + positions.push([ + cachedLocationPoints[i].latitude, + cachedLocationPoints[i].longitude, + ]); + const currentPoint = cachedLocationPoints[i]; + // Remove the current location from the locationPoints + locationPoints.shift(); + if (i < cachedLocationPoints.length - 1) { + const nextPoint = cachedLocationPoints[i + 1]; + // Draw a dashed line for long for location points with long interval + if ( + nextPoint.timestamp - currentPoint.timestamp > + this.props.context.geoMap.timeout * 1000 + ) { + // Create a dashed line + polyLines.push( + , + ); + break; + } + } + } + // Create a polyline from provided positions + polyLines.push( + , + ); + } return (
- { - - on the way - - } + {polyLines.map(polyLine => { + return polyLine; + })}
); }; @@ -59,6 +130,10 @@ class CustomMap extends Component { const attribution = config.geoMap.attribution; const url = config.geoMap.url; const startingPoint = [locationData[0].latitude, locationData[0].longitude]; + const endPoint = [ + locationData[locationData.length - 1].latitude, + locationData[locationData.length - 1].longitude, + ]; const zoom = config.geoMap.defaultZoomLevel; return (
@@ -66,8 +141,16 @@ class CustomMap extends Component { {this.polylineMarker(locationData)} - - Starting Location + + Start + + Start + + + + + End + diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_end.svg b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_end.svg new file mode 100644 index 0000000000..95b746b838 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_end.svg @@ -0,0 +1 @@ +map \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_shadow.svg b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_shadow.svg new file mode 100644 index 0000000000..ea27ab26a4 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_shadow.svg @@ -0,0 +1 @@ +map \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_start.svg b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_start.svg new file mode 100644 index 0000000000..3a51859bfd --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_start.svg @@ -0,0 +1 @@ +map \ No newline at end of file