21 changed files with 1374 additions and 62 deletions
@ -0,0 +1,192 @@
|
||||
import moment from "moment"; |
||||
import { toast } from "react-toastify"; |
||||
import ApiMapMonitoring from "../../../services/api/modules/map_monitoring"; |
||||
import { store } from "../../store"; |
||||
|
||||
export const SET_MYMAP = 'SET_MYMAP'; |
||||
export const SET_OPEN_LEFT = 'SET_OPEN_LEFT'; |
||||
export const SET_OPEN_RIGHT = 'SET_OPEN_RIGHT'; |
||||
export const SET_MAP_LOADING = 'SET_MAP_LOADING'; |
||||
export const SET_USER_HISTORY = 'SET_USER_HISTORY'; |
||||
export const SET_PROJECT_TREE = 'SET_PROJECT_TREE'; |
||||
export const SET_USER_POINTS = 'SET_USER_POINTS'; |
||||
export const SET_SELECTED_FEATURE = 'SET_SELECTED_FEATURE'; |
||||
export const SET_ROUTINGBAR_VISIBLE = 'SET_ROUTINGBAR_VISIBLE'; |
||||
export const SET_IS_SEARCHING_ROUTE = 'SET_IS_SEARCHING_ROUTE'; |
||||
|
||||
export const setMymap = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_MYMAP, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setOpenLeft = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_OPEN_LEFT, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setOpenRight = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_OPEN_RIGHT, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setMapLoading = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_MAP_LOADING, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setUserHistory = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_USER_HISTORY, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setProjectTree = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_PROJECT_TREE, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setUserPoints = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_USER_POINTS, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setSelectedFeature = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_SELECTED_FEATURE, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setRoutingBarVisible = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_ROUTINGBAR_VISIBLE, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
export const setIsSearchingRoute = obj => dispatch => { |
||||
dispatch({ |
||||
type: SET_IS_SEARCHING_ROUTE, |
||||
payload: obj |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
export const getUserPoints = async () => { |
||||
let userPoints = await ApiMapMonitoring.search(); |
||||
// console.log('userPoints', userPoints);
|
||||
if (userPoints.status && userPoints.data && userPoints.data.length > 0) { |
||||
let featureCollection = { |
||||
"type": "FeatureCollection", |
||||
"features": [] |
||||
} |
||||
|
||||
userPoints.data.map(n => { |
||||
let feature = { |
||||
"type": "Feature", |
||||
"properties": null, |
||||
"geometry": null |
||||
} |
||||
|
||||
feature.properties = { |
||||
"user_id": n.user_id, |
||||
"Name": n.join_first_name ? n.join_first_name : '-', |
||||
"Clock in time": n.clock_in ? moment(n.clock_in).format('YYYY-MM-DD HH:mm:ss') : '-', |
||||
"Clock in location": n.clock_in_loc ? n.clock_in_loc : '-', |
||||
"Clock out time": n.clock_out ? moment(n.clock_out).format('YYYY-MM-DD HH:mm:ss') : '-', |
||||
"Clock out location": n.clock_out_loc ? n.clock_out_loc : '-', |
||||
} |
||||
|
||||
feature.geometry = { |
||||
"type": "Point", |
||||
"coordinates": [n.clock_in_lng, n.clock_in_lat] |
||||
} |
||||
|
||||
featureCollection.features.push(feature); |
||||
}); |
||||
|
||||
store.dispatch(setUserPoints(featureCollection)); |
||||
} |
||||
} |
||||
|
||||
export const getUserHistory = async (userId, dateString) => { |
||||
console.log('[map->action.js] getUserHistory', userId, dateString); |
||||
|
||||
store.dispatch(setIsSearchingRoute(true)); |
||||
let userHistory = await ApiMapMonitoring.searchUserHistory(userId, dateString); |
||||
console.log('userHistory', userHistory); |
||||
|
||||
if (userHistory.status && userHistory.data && userHistory.data.length > 0) { |
||||
let startIdx = 0; |
||||
let endIdx = userHistory.data.length - 1; |
||||
let featureCollection = { |
||||
"type": "FeatureCollection", |
||||
"features": [] |
||||
} |
||||
|
||||
// set waypoint start
|
||||
let featurePointStart = { |
||||
"type": "Feature", |
||||
"properties": { |
||||
"type": "start", |
||||
"wptime": userHistory.data[startIdx].wptime |
||||
}, |
||||
"geometry": { |
||||
"type": "Point", |
||||
"coordinates": [parseFloat(userHistory.data[startIdx].lon), parseFloat(userHistory.data[startIdx].lat)] |
||||
} |
||||
} |
||||
featureCollection.features.push(featurePointStart); |
||||
|
||||
// set waypoint end
|
||||
let featurePointEnd = { |
||||
"type": "Feature", |
||||
"properties": { |
||||
"type": "end", |
||||
"wptime": userHistory.data[endIdx].wptime |
||||
}, |
||||
"geometry": { |
||||
"type": "Point", |
||||
"coordinates": [parseFloat(userHistory.data[endIdx].lon), parseFloat(userHistory.data[endIdx].lat)] |
||||
} |
||||
} |
||||
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)); |
||||
} |
||||
// kalo gak ada historynya
|
||||
else if (!userHistory.status && !userHistory.data) { |
||||
toast.warn("Couldn't find user history at the selected time. Please select another range of time."); |
||||
} |
||||
store.dispatch(setIsSearchingRoute(false)); |
||||
} |
||||
@ -0,0 +1,54 @@
|
||||
import { |
||||
SET_MYMAP, |
||||
SET_MAP_LOADING, |
||||
SET_USER_HISTORY, |
||||
SET_PROJECT_TREE, |
||||
SET_USER_POINTS, |
||||
SET_SELECTED_FEATURE, |
||||
SET_OPEN_LEFT, |
||||
SET_OPEN_RIGHT, |
||||
SET_ROUTINGBAR_VISIBLE, |
||||
SET_IS_SEARCHING_ROUTE |
||||
} from "./actions"; |
||||
|
||||
const initialState = { |
||||
mymap: null, |
||||
openLeft: true, |
||||
openRight: false, |
||||
mapLoading: false, |
||||
userHistory: null, |
||||
projectTree: null, |
||||
userPoints: null, |
||||
selectedFeature: null, |
||||
routingBarVisible: false, |
||||
isSearchingRoute: false |
||||
} |
||||
|
||||
function mapReducer(state = initialState, action) { |
||||
switch (action.type) { |
||||
case SET_MYMAP: |
||||
return { ...state, mymap: action.payload } |
||||
case SET_OPEN_LEFT: |
||||
return { ...state, openLeft: action.payload } |
||||
case SET_OPEN_RIGHT: |
||||
return { ...state, openRight: action.payload } |
||||
case SET_MAP_LOADING: |
||||
return { ...state, mapLoading: action.payload } |
||||
case SET_USER_HISTORY: |
||||
return { ...state, userHistory: action.payload } |
||||
case SET_PROJECT_TREE: |
||||
return { ...state, projectTree: action.payload } |
||||
case SET_USER_POINTS: |
||||
return { ...state, userPoints: action.payload } |
||||
case SET_SELECTED_FEATURE: |
||||
return { ...state, selectedFeature: action.payload } |
||||
case SET_ROUTINGBAR_VISIBLE: |
||||
return { ...state, routingBarVisible: action.payload } |
||||
case SET_IS_SEARCHING_ROUTE: |
||||
return { ...state, isSearchingRoute: action.payload } |
||||
default: |
||||
return state; |
||||
} |
||||
} |
||||
|
||||
export default mapReducer; |
||||
@ -0,0 +1,46 @@
|
||||
// import { parse, stringify } from 'flatted';
|
||||
import { combineReducers } from 'redux'; |
||||
import { persistReducer, createTransform } from 'redux-persist'; |
||||
import storage from 'redux-persist/lib/storage'; |
||||
|
||||
// modules
|
||||
import mapReducer from './modules/map/reducers'; |
||||
|
||||
const rootReducer = combineReducers({ |
||||
mapReducer |
||||
}); |
||||
|
||||
// export const transformCircular = createTransform(
|
||||
// // (inboundState, key) => JSON.stringify(inboundState),
|
||||
// // (outboundState, key) => JSON.parse(outboundState),
|
||||
// (inboundState, key) => stringify(inboundState),
|
||||
// (outboundState, key) => parse(outboundState),
|
||||
// )
|
||||
|
||||
|
||||
// const SetTransform = createTransform(
|
||||
// // transform state on its way to being serialized and persisted.
|
||||
// (inboundState, key) => {
|
||||
// // convert mySet to an Array.
|
||||
// return { ...inboundState, mySet: [...inboundState.mySet] };
|
||||
// },
|
||||
// // transform state being rehydrated
|
||||
// (outboundState, key) => {
|
||||
// // convert mySet back to a Set.
|
||||
// return { ...outboundState, mySet: new Set(outboundState.mySet) };
|
||||
// },
|
||||
// // define which reducers this transform gets called for.
|
||||
// { whitelist: ['mapReducer'] }
|
||||
// );
|
||||
|
||||
const persistConfig = { |
||||
key: 'root', |
||||
storage, |
||||
// blacklist: [], // to be not persisted
|
||||
// transforms: [SetTransform]
|
||||
// transforms: [transformCircular]
|
||||
}; |
||||
|
||||
// export default persistReducer(persistConfig, rootReducer);
|
||||
|
||||
export default rootReducer; |
||||
@ -0,0 +1,46 @@
|
||||
import { configureStore } from "@reduxjs/toolkit"; |
||||
import { applyMiddleware, compose, createStore } from "redux"; |
||||
// import thunk from "redux-thunk";
|
||||
import { persistStore } from 'redux-persist'; |
||||
import thunk from "redux-thunk"; |
||||
import thunkMiddleware from 'redux-thunk'; |
||||
import persistedReducer from "./reducers"; |
||||
|
||||
// const enhancers = [
|
||||
// applyMiddleware(
|
||||
// thunkMiddleware,
|
||||
// // createLogger({
|
||||
// // collapsed: true,
|
||||
// // // eslint-disable-next-line no-undef
|
||||
// // predicate: () => __DEV__,
|
||||
// // }),
|
||||
// ),
|
||||
// ];
|
||||
|
||||
// /* eslint-disable no-undef */
|
||||
// const composeEnhancers =
|
||||
// (__DEV__ &&
|
||||
// typeof window !== 'undefined' &&
|
||||
// window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
|
||||
// compose;
|
||||
// /* eslint-enable no-undef */
|
||||
|
||||
// const enhancer = composeEnhancers(...enhancers);
|
||||
|
||||
// export const store = createStore(persistedReducer, {}, enhancer)
|
||||
// // export const store = configureStore(persistedReducer, enhancer);
|
||||
// // export const store = configureStore( {
|
||||
// // persistedReducer,
|
||||
// // enhancers: enhancer
|
||||
// // })
|
||||
// export const persistor = persistStore(store);
|
||||
|
||||
|
||||
|
||||
export const store = configureStore({ |
||||
reducer: persistedReducer, |
||||
devTools: process.env.NODE_ENV !== 'production', |
||||
middleware: [thunk] |
||||
}) |
||||
|
||||
export const persistor = persistStore(store) |
||||
@ -0,0 +1,162 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react' |
||||
import L from 'leaflet'; |
||||
import { Button, Col, Drawer, Input, Row, Spin, Tree } from 'antd'; |
||||
import ApiProject from '../../services/api/modules/project'; |
||||
import { store } from '../../appredux/store'; |
||||
import { getUserPoints, setMapLoading, setOpenRight, setProjectTree, setSelectedFeature, setUserPoints } from '../../appredux/modules/map/actions'; |
||||
import ContentLoader from 'react-content-loader'; |
||||
import { useSelector } from 'react-redux'; |
||||
import ApiMapMonitoring from '../../services/api/modules/map_monitoring'; |
||||
|
||||
const { Search } = Input; |
||||
|
||||
const MapLeftContent = () => { |
||||
// const { mapLoading } = store.getState().mapReducer;
|
||||
const { mapLoading, projectTree } = useSelector(state => state.mapReducer); |
||||
// const [expandedKeys, setExpandedKeys] = useState([]);
|
||||
// const [searchValue, setSearchValue] = useState('');
|
||||
// const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
// const onExpand = (newExpandedKeys) => {
|
||||
// setExpandedKeys(newExpandedKeys);
|
||||
// setAutoExpandParent(false);
|
||||
// };
|
||||
|
||||
const onSelect = (selectedKeys, info) => { |
||||
console.log('selected', selectedKeys, info); |
||||
}; |
||||
const onCheck = (checkedKeys, info) => { |
||||
console.log('onCheck', checkedKeys, info); |
||||
|
||||
if (checkedKeys.length < 1) { |
||||
store.dispatch(setUserPoints(null)); |
||||
store.dispatch(setOpenRight(false)); |
||||
store.dispatch(setSelectedFeature(null)); |
||||
return; |
||||
} |
||||
getUserPoints(); |
||||
}; |
||||
|
||||
// const getParentKey = (key, tree) => {
|
||||
// let parentKey;
|
||||
// for (let i = 0; i < tree.length; i++) {
|
||||
// const node = tree[i];
|
||||
// if (node.children) {
|
||||
// if (node.children.some((item) => item.key === key)) {
|
||||
// parentKey = node.key;
|
||||
// } else if (getParentKey(key, node.children)) {
|
||||
// parentKey = getParentKey(key, node.children);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return parentKey;
|
||||
// };
|
||||
|
||||
// const treeData = useMemo(() => {
|
||||
// const loop = (data) =>
|
||||
// data.map((item) => {
|
||||
// const strTitle = item.title;
|
||||
// const index = strTitle.indexOf(searchValue);
|
||||
// const beforeStr = strTitle.substring(0, index);
|
||||
// const afterStr = strTitle.slice(index + searchValue.length);
|
||||
// const title =
|
||||
// index > -1 ? (
|
||||
// <span>
|
||||
// {beforeStr}
|
||||
// <span className="site-tree-search-value">{searchValue}</span>
|
||||
// {afterStr}
|
||||
// </span>
|
||||
// ) : (
|
||||
// <span>{strTitle}</span>
|
||||
// );
|
||||
// if (item.children) {
|
||||
// return {
|
||||
// title,
|
||||
// key: item.key,
|
||||
// children: loop(item.children),
|
||||
// };
|
||||
// }
|
||||
// return {
|
||||
// title,
|
||||
// key: item.key,
|
||||
// };
|
||||
// });
|
||||
// return loop(projectTree);
|
||||
// }, [searchValue]);
|
||||
|
||||
// const onChangeSearch = (e) => {
|
||||
// const { value } = e.target;
|
||||
// const newExpandedKeys = projectTree
|
||||
// .map((item) => {
|
||||
// if (item.title.indexOf(value) > -1) {
|
||||
// return getParentKey(item.key, projectTree);
|
||||
// }
|
||||
// return null;
|
||||
// })
|
||||
// .filter((item, i, self) => item && self.indexOf(item) === i);
|
||||
// setExpandedKeys(newExpandedKeys);
|
||||
// setSearchValue(value);
|
||||
// setAutoExpandParent(true);
|
||||
// };
|
||||
|
||||
const Content = useMemo(() => { |
||||
return ( |
||||
<div style={{ paddingRight: 10 }}> |
||||
<div style={{ backgroundColor: '#f0f0f0', padding: 10, marginBottom: 5, fontWeight: 'bold', fontSize: 16 }}> |
||||
Project List |
||||
</div> |
||||
|
||||
<div style={{ maxHeight: '80vh', overflow: 'auto' }}> |
||||
{mapLoading ? |
||||
<ContentLoader |
||||
speed={2} |
||||
width="100%" |
||||
height="200" |
||||
viewBox="0 0 200 200" |
||||
backgroundColor="#f3f3f3" |
||||
foregroundColor="#ecebeb" |
||||
> |
||||
<circle cx="10" cy="20" r="8" /> |
||||
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" /> |
||||
<circle cx="10" cy="50" r="8" /> |
||||
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" /> |
||||
<circle cx="10" cy="80" r="8" /> |
||||
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" /> |
||||
<circle cx="10" cy="110" r="8" /> |
||||
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" /> |
||||
</ContentLoader> |
||||
: |
||||
<> |
||||
{/* <Search |
||||
style={{ |
||||
marginBottom: 8, |
||||
}} |
||||
placeholder="Search" |
||||
onChange={onChangeSearch} |
||||
/> */} |
||||
{ |
||||
projectTree ? |
||||
<Tree |
||||
checkable |
||||
defaultExpandedKeys={['all']} |
||||
defaultCheckedKeys={['all']} |
||||
onSelect={onSelect} |
||||
onCheck={onCheck} |
||||
// onExpand={onExpand}
|
||||
// expandedKeys={expandedKeys}
|
||||
// autoExpandParent={autoExpandParent}
|
||||
treeData={projectTree} |
||||
/> |
||||
: |
||||
null |
||||
} |
||||
</> |
||||
} |
||||
</div> |
||||
</div> |
||||
) |
||||
}, [mapLoading]) |
||||
|
||||
return Content; |
||||
} |
||||
|
||||
export default MapLeftContent; |
||||
@ -0,0 +1,103 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react' |
||||
import { useSelector } from 'react-redux'; |
||||
import PopupButtonActions from '../PopupButtonActions'; |
||||
import './styles.css' |
||||
|
||||
const MapRightContent = () => { |
||||
const { mapLoading, selectedFeature } = useSelector(state => state.mapReducer); |
||||
|
||||
const PopupContent = useMemo(() => { |
||||
console.log('selectedFeature', selectedFeature); |
||||
if (selectedFeature && selectedFeature.properties) { |
||||
// let content = [];
|
||||
// for (let key in selectedFeature.properties) {
|
||||
// content.push(<tr key={key}>
|
||||
// <td>{`${key}`}</td>
|
||||
// <td>:</td>
|
||||
// <td>{`${selectedFeature.properties[key]}`}</td>
|
||||
// </tr>)
|
||||
// }
|
||||
// console.log('content', content);
|
||||
|
||||
return ( |
||||
<table className="table popup-table"> |
||||
<tbody> |
||||
<tr> |
||||
<td>Name</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Name']}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Clock in time</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Clock in time']}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Clock in location</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Clock in location']}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Clock out time</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Clock out time']}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Clock out location</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Clock out location']}</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
) |
||||
} |
||||
}, [selectedFeature]) |
||||
|
||||
const Content = useMemo(() => { |
||||
return ( |
||||
<div style={{ paddingLeft: 10 }}> |
||||
<div style={{ backgroundColor: '#f0f0f0', padding: 10, marginBottom: 5, fontWeight: 'bold', fontSize: 16 }}> |
||||
Detail Information |
||||
</div> |
||||
|
||||
<div style={{height: '75vh', overflow: 'auto'}}> |
||||
<table className="table popup-table"> |
||||
<tbody> |
||||
<tr> |
||||
<td className='td-popup-label'>Name</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Name']}</td> |
||||
</tr> |
||||
<tr> |
||||
<td className='td-popup-label'>Clock in time</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Clock in time']}</td> |
||||
</tr> |
||||
<tr> |
||||
<td className='td-popup-label'>Clock in location</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Clock in location']}</td> |
||||
</tr> |
||||
<tr> |
||||
<td className='td-popup-label'>Clock out time</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Clock out time']}</td> |
||||
</tr> |
||||
<tr> |
||||
<td className='td-popup-label'>Clock out location</td> |
||||
<td>:</td> |
||||
<td>{selectedFeature?.properties['Clock out location']}</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
|
||||
<PopupButtonActions /> |
||||
</div> |
||||
) |
||||
}, [selectedFeature]) |
||||
|
||||
return Content; |
||||
} |
||||
|
||||
export default MapRightContent; |
||||
@ -0,0 +1,9 @@
|
||||
table th, .table td { |
||||
padding: 0.25rem !important; |
||||
vertical-align: top; |
||||
border-top: 1px solid #c8ced3; |
||||
} |
||||
|
||||
.td-popup-label { |
||||
color: #808080; |
||||
} |
||||
@ -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 ( |
||||
<div style={{ paddingLeft: 10, bottom: 10, textAlign: 'center', margin: 'auto' }}> |
||||
<Tooltip title="View Tracking History"> |
||||
<Button shape="circle" color='' icon={<Icon icon={routeIcon} width={15} height={15} />} size="large"
|
||||
onClick={handleRoute} |
||||
/> |
||||
</Tooltip> |
||||
</div> |
||||
) |
||||
}, [selectedFeature]) |
||||
|
||||
return Content; |
||||
} |
||||
|
||||
export default PopupButtonActions; |
||||
@ -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; |
||||
} |
||||
@ -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 ( |
||||
<div className="routingbar-container"> |
||||
<div className="routingbar-content"> |
||||
<p className="routingbar-header-content"> |
||||
<span className="routingbar-title">User History</span><br /> |
||||
<span className="routingbar-sales-name">{selectedFeature?.properties.Name}</span><br /> |
||||
</p> |
||||
<span className="routingbar-close" onClick={handleCloseRoutingBar}><Icon icon={closeCircleOutline} width={25} height={25} /></span> |
||||
|
||||
<div className="routingbar-label-container"> |
||||
<span className="routingbar-label">Select Start and End Time</span> |
||||
</div> |
||||
|
||||
<div className="routingbar-body-content"> |
||||
<div className="routingbar-range-picker"> |
||||
<RangePicker |
||||
showTime={{ format: 'HH:mm' }} |
||||
format="YYYY-MM-DD HH:mm" |
||||
placeholder={['Start Time', 'End Time']} |
||||
onChange={onChange} |
||||
onOk={onOk} |
||||
disabled={isSearchingRoute} |
||||
/> |
||||
</div> |
||||
|
||||
<div className="routingbar-apply-button-container"> |
||||
{/* <Button |
||||
color="primary" size="sm" className="routingbar-apply-button" |
||||
disabled={isSearchingRoute} |
||||
onClick={applyRouting} |
||||
>Search</Button> */} |
||||
|
||||
<Button
|
||||
type="primary" |
||||
size="small" |
||||
disabled={isSearchingRoute} |
||||
loading={isSearchingRoute} |
||||
onClick={applyRouting}> |
||||
Search |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
export default RoutingBar; |
||||
@ -0,0 +1,99 @@
|
||||
import axios from 'axios'; |
||||
export default class RequestApi { |
||||
// static Request() {
|
||||
// // axios.interceptors.request.use(function (config) {
|
||||
// // const token = localStorage.getItem('token')
|
||||
// // config.headers.Authorization = token;
|
||||
|
||||
// // return config;
|
||||
// // });
|
||||
// const token = localStorage.getItem('token')
|
||||
|
||||
// let instance = axios.create({
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// "Authorization": `Bearer ${token}`
|
||||
// }
|
||||
// })
|
||||
|
||||
// instance.interceptors.response.use(
|
||||
// (response) => response,
|
||||
// async (error) => {
|
||||
// // const originalRequest = error.config;
|
||||
// if (error.response.status === 307 || error.response.status === 403) {
|
||||
// console.log(error.response);
|
||||
// }
|
||||
|
||||
// return Promise.reject(error);
|
||||
// }
|
||||
// );
|
||||
|
||||
// return instance;
|
||||
// }
|
||||
|
||||
static Request() { |
||||
axios.interceptors.response.use( |
||||
response => response, |
||||
async (error) => { |
||||
// console.log('error axios', error);
|
||||
if (error) { |
||||
// console.log('stringify', JSON.stringify(error));
|
||||
const err = JSON.parse(JSON.stringify(error)); |
||||
if (err.name === 'AxiosError' && err.code === 'ERR_NETWORK') { |
||||
alert(err.message); |
||||
return; |
||||
} |
||||
if (err.response) { |
||||
if (err.response.status === 307 || err.response.status === 403) { |
||||
// console.log(err.response);
|
||||
alert('Token expired, please re-login'); |
||||
// clearAllState();
|
||||
window.localStorage.clear(); |
||||
// this.props.history.replace('/login');
|
||||
return; |
||||
} |
||||
} |
||||
return Promise.reject(error); |
||||
} |
||||
} |
||||
); |
||||
return axios; |
||||
} |
||||
|
||||
static Header() { |
||||
let header = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
// 'Cache-Control': 'no-cache'
|
||||
} |
||||
} |
||||
return header; |
||||
} |
||||
|
||||
static HeaderWithToken() { |
||||
const token = localStorage.getItem('token') |
||||
let header = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}`, |
||||
// 'Cache-Control': 'no-cache',
|
||||
} |
||||
} |
||||
return header; |
||||
} |
||||
|
||||
static HeaderMultipart() { |
||||
const token = localStorage.getItem('token') |
||||
let header = { |
||||
headers: { |
||||
"Content-Type": "multipart/form-data", |
||||
"Authorization": `Bearer ${token}`, |
||||
// 'Cache-Control': 'no-cache',
|
||||
} |
||||
} |
||||
return header; |
||||
} |
||||
|
||||
} |
||||
export const AXIOS = RequestApi.Request(); |
||||
|
||||
@ -0,0 +1,117 @@
|
||||
import moment from "moment"; |
||||
import { BASE_SIMPRO_LUMEN } from "../../../../const/ApiConst"; |
||||
import RequestApi from '../../base'; |
||||
|
||||
export default class ApiMapMonitoring extends RequestApi { |
||||
static async search() { |
||||
const URL = `${BASE_SIMPRO_LUMEN}/presence/search` |
||||
const dateFrom = moment().subtract(7,'d').format('YYYY-MM-DD 00:00:00'); |
||||
const dateTo = moment().format('YYYY-MM-DD 23:59:00'); |
||||
const payload = { |
||||
"columns": [ |
||||
{ |
||||
"logic_operator": "range", |
||||
"name": "created_at", |
||||
"operator": "AND", |
||||
"value": dateFrom, |
||||
"value1": dateTo |
||||
} |
||||
], |
||||
"joins": [ |
||||
{ |
||||
"column_join": "user_id", |
||||
"column_results": [ |
||||
"username", "name" |
||||
], |
||||
"name": "m_users" |
||||
} |
||||
], |
||||
"orders": { |
||||
"ascending": false, |
||||
"columns": [ |
||||
"created_at" |
||||
] |
||||
}, |
||||
"paging": { |
||||
"length": 25, |
||||
"start": 0 |
||||
} |
||||
} |
||||
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}; |
||||
}); |
||||
} |
||||
|
||||
|
||||
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}; |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,62 @@
|
||||
import { BASE_SIMPRO_LUMEN } from "../../../../const/ApiConst"; |
||||
import RequestApi from '../../base'; |
||||
|
||||
export default class ApiProject extends RequestApi { |
||||
static async list() { |
||||
// const user_id = store.getState().userReducer && store.getState().userReducer.user && store.getState().userReducer.user.data_user ? store.getState().userReducer.user.data_user.id : 0;
|
||||
const URL = `${BASE_SIMPRO_LUMEN}/project/list` |
||||
// const payload = {
|
||||
// "paging": { "start": 0, "length": 25 },
|
||||
// // "columns": [
|
||||
// // { "name": "user_id", "logic_operator": "=", "value": user_id }
|
||||
// // ],
|
||||
// // "joins": [
|
||||
// // {
|
||||
// // "name": "m_proyek",
|
||||
// // "column_join": "proyek_id",
|
||||
// // "column_results": [
|
||||
// // "nama", "kode_sortname", "mulai_proyek", "akhir_proyek"
|
||||
// // ]
|
||||
// // },
|
||||
// // {
|
||||
// // "name": "m_activity",
|
||||
// // "column_join": "activity_id",
|
||||
// // "column_results": [
|
||||
// // "name", "start_date", "end_date", "persentase_progress"
|
||||
// // ]
|
||||
// // }
|
||||
// // ],
|
||||
// "orders": { "columns": ["id"], "ascending": false }
|
||||
// }
|
||||
return await RequestApi.Request().get( |
||||
URL, |
||||
RequestApi.HeaderWithToken()).then(res => { |
||||
if (res) { |
||||
if (res && res.data && res.data.data) { |
||||
// console.log('ApiProject 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 project', e);
|
||||
let error = JSON.parse(JSON.stringify(e)); |
||||
console.log('error search project', error); |
||||
if (error.message) { |
||||
alert(error.message); |
||||
} |
||||
return {status: false, data: null}; |
||||
}); |
||||
} |
||||
} |
||||
@ -1,41 +0,0 @@
|
||||
import axios from 'axios'; |
||||
export default class RequestApi { |
||||
// constructor() {
|
||||
// this.Request = this.Request.bind(this);
|
||||
// }
|
||||
|
||||
static Request() { |
||||
// axios.interceptors.request.use(function (config) {
|
||||
// const token = localStorage.getItem('token')
|
||||
// config.headers.Authorization = token;
|
||||
|
||||
// return config;
|
||||
// });
|
||||
const token = localStorage.getItem('token') |
||||
|
||||
let instance = axios.create({ |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
}) |
||||
|
||||
instance.interceptors.response.use( |
||||
(response) => response, |
||||
async (error) => { |
||||
// const originalRequest = error.config;
|
||||
if (error.response.status === 307 || error.response.status === 403) { |
||||
console.log(error.response); |
||||
} |
||||
|
||||
return Promise.reject(error); |
||||
} |
||||
); |
||||
|
||||
return instance; |
||||
} |
||||
|
||||
static getToken() { } |
||||
} |
||||
export const AXIOS = RequestApi.Request(); |
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { store } from "../appredux/store"; |
||||
|
||||
export const removeLayerByName = (layerName) => { |
||||
const {mymap} = store.getState().mapReducer; |
||||
var layerToRemove = []; |
||||
mymap.eachLayer(function(layer) { |
||||
if (layer.wmsParams) { |
||||
if (layer.wmsParams.layers) { |
||||
let layerWmsName = layer.wmsParams.layers.split(':')[1]; |
||||
if (layerName === layerWmsName) { |
||||
layerToRemove.push(layer) |
||||
} |
||||
} |
||||
} |
||||
else { |
||||
if (layer.options && layer.options.name && layer.options.name === layerName) { |
||||
layerToRemove.push(layer); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
if (layerToRemove.length > 0) { |
||||
for (let i = 0; i < layerToRemove.length; i++) { |
||||
mymap.removeLayer(layerToRemove[i]); |
||||
} |
||||
} |
||||
} |
||||
@ -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%; |
||||
} |
||||
@ -0,0 +1,217 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react' |
||||
import L from 'leaflet'; |
||||
import { Button, Col, Drawer, Row, Spin, Tree } from 'antd'; |
||||
import ApiProject from '../../services/api/modules/project'; |
||||
import { store } from '../../appredux/store'; |
||||
import { getUserPoints, setMapLoading, setMymap, setOpenLeft, setOpenRight, setProjectTree, setSelectedFeature, setUserPoints } from '../../appredux/modules/map/actions'; |
||||
import ContentLoader from 'react-content-loader'; |
||||
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 = () => { |
||||
|
||||
const GRID_LEFT = 6; |
||||
const GRID_MIDDLE = 12; |
||||
const GRID_RIGHT = 6;
|
||||
const GRID_TOTAL = GRID_LEFT+GRID_MIDDLE+GRID_RIGHT;
|
||||
const mapRef = useRef() |
||||
const center = { |
||||
// lat: -6.200000,
|
||||
// lng: 106.816666
|
||||
lat: -2.4809807277842437, |
||||
lng: 120.13025155062624 |
||||
|
||||
} |
||||
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); |
||||
|
||||
useEffect(() => { |
||||
initMap(); |
||||
getMapLeftContent(); |
||||
}, []) |
||||
|
||||
useEffect(() => { |
||||
renderGridMap(); |
||||
}, [openLeft, openRight]) |
||||
|
||||
useEffect(() => { |
||||
// console.log('userPoints changes', userPoints);
|
||||
if (mymap) { |
||||
removeLayerByName('popupTemp'); |
||||
removeLayerByName('userPointLayer'); |
||||
if (userPoints) { |
||||
let userPointLayer = L.geoJson(userPoints, { |
||||
name: 'userPointLayer', |
||||
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, |
||||
zoom: 5 |
||||
}); |
||||
store.dispatch(setMymap(mymap)); |
||||
// setMymap(mymap);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(mymap); |
||||
|
||||
mymap.on('click', (e) => { |
||||
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)); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
// init for left content panel, get projects and build tree select antd
|
||||
const getMapLeftContent = async () => { |
||||
store.dispatch(setMapLoading(true)); |
||||
let project = await ApiProject.list(); |
||||
console.log('project', project); |
||||
if (project && project.status && project.data && project.data.length > 0) { |
||||
let projectData = [ |
||||
{ |
||||
"title": 'All', |
||||
"key": 'all', |
||||
"children": [] |
||||
} |
||||
]; |
||||
project.data.map(n => { |
||||
n.key = n.id; |
||||
n.title = n.nama; |
||||
projectData[0].children.push(n); |
||||
}) |
||||
store.dispatch(setProjectTree(projectData)); |
||||
// console.log('projectData', projectData);
|
||||
getUserPoints(); |
||||
store.dispatch(setMapLoading(false)); |
||||
} |
||||
store.dispatch(setMapLoading(false)); |
||||
} |
||||
|
||||
const onEachFeatureUserPoints = (feature, layer) => { |
||||
layer.on('click', function(e) { |
||||
L.DomEvent.stopPropagation(e); |
||||
if (!store.getState().mapReducer.routingBarVisible) { |
||||
// proceed only when routing mode is not visible
|
||||
showHighLight(feature); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function showHighLight(feature) { |
||||
removeLayerByName('popupTemp'); |
||||
// add highlight
|
||||
L.geoJSON(feature, { |
||||
style: function(feature) { |
||||
return {color: 'blue'} |
||||
}, |
||||
name: 'popupTemp', |
||||
onEachFeature: function (feature, layer) { |
||||
layer.name = 'popupTemp' |
||||
}, |
||||
}).addTo(mymap); |
||||
|
||||
// opening right panel
|
||||
store.dispatch(setOpenRight(!openRight)); |
||||
store.dispatch(setSelectedFeature(feature)); |
||||
} |
||||
|
||||
const MapContent = useMemo(() => { |
||||
return ( |
||||
<Row> |
||||
<Col span={gridLeft}> |
||||
<MapLeftContent /> |
||||
</Col> |
||||
<Col span={gridMiddle}> |
||||
<div id="map-area" style={{ height: '90vh', width: '100%' }} ref={mapRef}></div> |
||||
<button
|
||||
title='Project List' |
||||
style={{position: 'absolute', top: 80, left: 10, zIndex: 999, backgroundColor:'white', backgroundSize:'34px 34px', width: '34px', height: '34px', borderRadius: '2px', borderWidth: '1px', borderColor: 'grey'}}
|
||||
onClick={() => store.dispatch(setOpenLeft(!openLeft))}> |
||||
<i className='fa fa-list'></i> |
||||
</button> |
||||
{ routingBarVisible && <RoutingBar /> } |
||||
{ isSearchingRoute && ( |
||||
<div className="loader-container"> |
||||
<Loader |
||||
type="TailSpin" |
||||
color="#36D7B7" |
||||
height={100} |
||||
width={100} |
||||
/> |
||||
</div> |
||||
)} |
||||
</Col> |
||||
<Col span={gridRight}> |
||||
<MapRightContent /> |
||||
</Col> |
||||
<ToastContainer autoClose={5000} /> |
||||
</Row> |
||||
) |
||||
}, [openLeft, openRight, gridLeft, gridMiddle, gridRight, routingBarVisible ]) |
||||
|
||||
const renderGridMap = () => { |
||||
let middle = GRID_MIDDLE; |
||||
let left = GRID_LEFT; |
||||
let right = GRID_RIGHT; |
||||
if (openLeft && openRight){ |
||||
middle = GRID_MIDDLE; |
||||
left = GRID_LEFT; |
||||
right = GRID_RIGHT; |
||||
} |
||||
else if (!openLeft && openRight) { |
||||
middle = GRID_TOTAL - GRID_RIGHT; |
||||
left = 0; |
||||
right = GRID_RIGHT; |
||||
}
|
||||
else if (openLeft && !openRight) { |
||||
middle = GRID_TOTAL - GRID_LEFT; |
||||
left = GRID_LEFT; |
||||
right = 0; |
||||
} |
||||
else if (!openLeft && !openRight) { |
||||
middle = GRID_TOTAL; |
||||
left = 0; |
||||
right = 0; |
||||
} |
||||
setGridMiddle(middle); |
||||
setGridLeft(left); |
||||
setGridRight(right); |
||||
} |
||||
|
||||
return MapContent |
||||
} |
||||
|
||||
export default MapMonitoring; |
||||
Loading…
Reference in new issue