ardhi
2 years ago
10 changed files with 475 additions and 92 deletions
@ -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,9 @@
|
||||
.loader-container { |
||||
text-align: center; |
||||
align-content: center; |
||||
top: 100px; |
||||
position: fixed; |
||||
z-index: 999999; |
||||
align-self: center; |
||||
margin-left: 45%; |
||||
} |
||||
Loading…
Reference in new issue