+
Detail Information
-
-
-
- | Name |
- : |
- {selectedFeature?.properties['Name']} |
-
-
- | Clock in time |
- : |
- {selectedFeature?.properties['Clock in time']} |
-
-
- | Clock in location |
- : |
- {selectedFeature?.properties['Clock in location']} |
-
-
- | Clock out time |
- : |
- {selectedFeature?.properties['Clock out time']} |
-
-
- | Clock out location |
- : |
- {selectedFeature?.properties['Clock out location']} |
-
-
-
+
+
+
+
+ | Name |
+ : |
+ {selectedFeature?.properties['Name']} |
+
+
+ | Clock in time |
+ : |
+ {selectedFeature?.properties['Clock in time']} |
+
+
+ | Clock in location |
+ : |
+ {selectedFeature?.properties['Clock in location']} |
+
+
+ | Clock out time |
+ : |
+ {selectedFeature?.properties['Clock out time']} |
+
+
+ | Clock out location |
+ : |
+ {selectedFeature?.properties['Clock out location']} |
+
+
+
+
+
+
)
}, [selectedFeature])
diff --git a/src/components/PopupButtonActions/index.js b/src/components/PopupButtonActions/index.js
new file mode 100644
index 0000000..3c0b7d4
--- /dev/null
+++ b/src/components/PopupButtonActions/index.js
@@ -0,0 +1,32 @@
+import { Button, Tooltip } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useSelector } from 'react-redux';
+import routeIcon from '@iconify/icons-fa-solid/route';
+import {Icon} from '@iconify/react';
+import { store } from '../../appredux/store';
+import { setRoutingBarVisible } from '../../appredux/modules/map/actions';
+
+const PopupButtonActions = () => {
+ const { selectedFeature } = useSelector(state => state.mapReducer);
+
+ const handleRoute = () => {
+ console.log('handleRoute');
+ store.dispatch(setRoutingBarVisible(true));
+ }
+
+ const Content = useMemo(() => {
+ return (
+
+
+ } size="large"
+ onClick={handleRoute}
+ />
+
+
+ )
+ }, [selectedFeature])
+
+ return Content;
+}
+
+export default PopupButtonActions;
\ No newline at end of file
diff --git a/src/components/RoutingBarV2/RoutingBarV2.css b/src/components/RoutingBarV2/RoutingBarV2.css
new file mode 100644
index 0000000..2653fe4
--- /dev/null
+++ b/src/components/RoutingBarV2/RoutingBarV2.css
@@ -0,0 +1,77 @@
+.routingbar-container {
+ z-index: 999;
+ position: absolute;
+ top: 0;
+}
+
+.routingbar-content {
+ text-align: center;
+ display: block;
+ position: relative;
+ top: 10px;
+ left: 15%;
+ padding: 5px;
+ z-index: 50;
+ background-color: rgba(0,0,0,0.5);
+ border-radius: 10px;
+ width: 470px;
+}
+
+.routingbar-header-content {
+ color: #ffffff;
+ line-height: 17px;
+ margin-top: 10px;
+}
+
+.routingbar-title {
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.routingbar-sales-name {
+ font-size: 12px;
+}
+
+.routingbar-close {
+ float: right;
+ margin-right: 5px;
+ margin-top: -60px;
+ cursor: pointer;
+ color: #ffffff;
+}
+
+.routingbar-body-content {
+ margin-bottom: 5px;
+}
+
+.routingbar-label-container {
+ text-align: center !important;
+ /* margin-left: 63px; */
+ margin-bottom: 5px;
+ font-weight: 700;
+}
+
+.routingbar-label {
+ color: #ffffff;
+ font-size: 12px;
+}
+
+.routingbar-range-picker {
+ margin-bottom: 10px;
+ display: inline-block;
+}
+
+.routingbar-apply-button-container {
+ display: inline-block;
+ margin-left: 10px;
+ margin-top: -100px;
+ top: -100px;
+}
+
+.routingbar-apply-button {
+ margin-top: -5px !important;
+}
+
+.text-white {
+ color: #FFFFFF;
+}
\ No newline at end of file
diff --git a/src/components/RoutingBarV2/index.js b/src/components/RoutingBarV2/index.js
new file mode 100644
index 0000000..f9c9d46
--- /dev/null
+++ b/src/components/RoutingBarV2/index.js
@@ -0,0 +1,89 @@
+import React, { Component, useState } from 'react';
+// import { Button, ButtonGroup, UncontrolledTooltip } from 'reactstrap';
+import { Icon, InlineIcon } from '@iconify/react';
+import closeCircleOutline from '@iconify/icons-ion/close-circle-outline';
+import moment from 'moment';
+import './RoutingBarV2.css';
+import { useSelector } from 'react-redux';
+import { getUserHistory, setRoutingBarVisible, setUserHistory } from '../../appredux/modules/map/actions';
+import { store } from '../../appredux/store';
+import { Button, DatePicker } from 'antd';
+import { removeLayerByName } from '../../utils/MapUtils';
+
+const { RangePicker } = DatePicker;
+
+const RoutingBar = () => {
+
+ const { selectedFeature, routingBarVisible, isSearchingRoute } = useSelector(state => state.mapReducer);
+ const [dateString, setDateString] = useState(null);
+
+ const onChange = (value, dateString) => {
+ console.log('Selected Time: ', value);
+ console.log('Formatted Selected Time: ', dateString);
+ }
+
+ const onOk = (value) => {
+ let dateString = [];
+ dateString[0] = moment(value[0]).format("YYYY-MM-DD HH:mm");
+ dateString[1] = moment(value[1]).format("YYYY-MM-DD HH:mm");
+ setDateString(dateString)
+ }
+
+ const applyRouting = () => {
+ let userId = selectedFeature?.properties.user_id;
+ getUserHistory(userId, dateString);
+ }
+
+ const handleCloseRoutingBar = () => {
+ store.dispatch(setRoutingBarVisible(false))
+ removeLayerByName('userHistoryLayer');
+ store.dispatch(setUserHistory(null));
+ }
+
+ return (
+
+
+
+ User History
+ {selectedFeature?.properties.Name}
+
+
+
+
+ Select Start and End Time
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+
+ )
+}
+export default RoutingBar;
\ No newline at end of file
diff --git a/src/services/api/modules/map_monitoring/index.js b/src/services/api/modules/map_monitoring/index.js
index 1f1936b..6a989cb 100644
--- a/src/services/api/modules/map_monitoring/index.js
+++ b/src/services/api/modules/map_monitoring/index.js
@@ -69,4 +69,49 @@ export default class ApiMapMonitoring extends RequestApi {
return {status: false, data: null};
});
}
+
+
+ static async searchUserHistory(userId, dateString) {
+ const URL = `${BASE_SIMPRO_LUMEN}/waypoint/search`
+ const payload = {
+ "paging": { "start": 0, "length": -1 },
+ "columns": [
+ { "name": "user_id", "logic_operator": "=", "value": userId },
+ { "name": "wptime", "logic_operator": "range", "value": dateString[0], "value1": dateString[1] }
+ ],
+ "orders": { "columns": ["wptime"], "ascending": true }
+ }
+
+ return await RequestApi.Request().post(
+ URL,
+ payload,
+ RequestApi.HeaderWithToken()).then(res => {
+ if (res) {
+ if (res && res.data && res.data.data) {
+ // console.log('ApiPresence search', res.data.data)
+ if (res.data.data.length > 0) {
+ return {status: true, data: res.data.data};
+ }
+ else {
+ return {status: false, data: null}
+ }
+ }
+ else {
+ return {status: false, data: null};
+ }
+ }
+ else {
+ alert("Please check your internet connection.", "error");
+ return {status: false, data: null};
+ }
+ }).catch(e => {
+ // console.log('error search presence', e);
+ let error = JSON.parse(JSON.stringify(e));
+ console.log('error search presence', error);
+ if (error.message) {
+ alert(error.message);
+ }
+ return {status: false, data: null};
+ });
+ }
}
\ No newline at end of file
diff --git a/src/views/MapMonitoring/MapMonitoring.css b/src/views/MapMonitoring/MapMonitoring.css
new file mode 100644
index 0000000..1ad7e4c
--- /dev/null
+++ b/src/views/MapMonitoring/MapMonitoring.css
@@ -0,0 +1,9 @@
+.loader-container {
+ text-align: center;
+ align-content: center;
+ top: 100px;
+ position: fixed;
+ z-index: 999999;
+ align-self: center;
+ margin-left: 45%;
+}
\ No newline at end of file
diff --git a/src/views/MapMonitoring/index.js b/src/views/MapMonitoring/index.js
index 10985c2..3623a77 100644
--- a/src/views/MapMonitoring/index.js
+++ b/src/views/MapMonitoring/index.js
@@ -9,6 +9,13 @@ import { useSelector } from 'react-redux';
import MapLeftContent from '../../components/MapLeftContent';
import MapRightContent from '../../components/MapRightContent';
import { removeLayerByName } from '../../utils/MapUtils';
+import RoutingBar from '../../components/RoutingBarV2';
+import Loader from "react-loader-spinner";
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import './MapMonitoring.css';
+
const MapMonitoring = () => {
@@ -24,7 +31,7 @@ const MapMonitoring = () => {
lng: 120.13025155062624
}
- const {userPoints, mymap, openLeft, openRight} = useSelector(state => state.mapReducer);
+ const {userPoints, mymap, openLeft, openRight, routingBarVisible, userHistory, isSearchingRoute} = useSelector(state => state.mapReducer);
const [gridMiddle, setGridMiddle] = useState(GRID_MIDDLE);
const [gridLeft, setGridLeft] = useState(0);
const [gridRight, setGridRight] = useState(0);
@@ -46,14 +53,28 @@ const MapMonitoring = () => {
if (userPoints) {
let userPointLayer = L.geoJson(userPoints, {
name: 'userPointLayer',
- onEachFeature: onEachFeatureUserPoints,
+ onEachFeature: onEachFeatureUserPoints
});
userPointLayer.addTo(mymap);
+ mymap.fitBounds(userPointLayer.getBounds());
}
}
}, [userPoints])
+ useEffect(() => {
+ if (mymap) {
+ removeLayerByName('userHistoryLayer');
+ if (userHistory) {
+ let userHistoryLayer = L.geoJson(userHistory, {
+ name: 'userHistoryLayer'
+ });
+ userHistoryLayer.addTo(mymap);
+ mymap.fitBounds(userHistoryLayer.getBounds());
+ }
+ }
+ }, [userHistory])
+
const initMap = () => {
let mymap = L.map('map-area', {
center: center,
@@ -64,9 +85,12 @@ const MapMonitoring = () => {
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '©
OpenStreetMap contributors' }).addTo(mymap);
mymap.on('click', (e) => {
- removeLayerByName('popupTemp');
- store.dispatch(setOpenRight(false));
- store.dispatch(setSelectedFeature(null));
+ if (!store.getState().mapReducer.routingBarVisible) {
+ // only can close popup when routing mode is not visible
+ removeLayerByName('popupTemp');
+ store.dispatch(setOpenRight(false));
+ store.dispatch(setSelectedFeature(null));
+ }
})
}
@@ -99,7 +123,10 @@ const MapMonitoring = () => {
const onEachFeatureUserPoints = (feature, layer) => {
layer.on('click', function(e) {
L.DomEvent.stopPropagation(e);
- showHighLight(feature);
+ if (!store.getState().mapReducer.routingBarVisible) {
+ // proceed only when routing mode is not visible
+ showHighLight(feature);
+ }
});
}
@@ -130,18 +157,30 @@ const MapMonitoring = () => {
+ { routingBarVisible &&
}
+ { isSearchingRoute && (
+
+
+
+ )}
+
)
- }, [openLeft, openRight, gridLeft, gridMiddle, gridRight])
+ }, [openLeft, openRight, gridLeft, gridMiddle, gridRight, routingBarVisible ])
const renderGridMap = () => {
let middle = GRID_MIDDLE;