Update geo featur UI and date time picker

feature/appm-store/pbac
achala007 5 years ago
parent 0f8d4a02d4
commit e57dd65dd8

@ -17,12 +17,11 @@
"moment": "latest",
"prop-types": "latest",
"rc-viewer": "0.0.9",
"react-advanced-datetimerange-picker": "^1.0.8",
"react-bootstrap": "^1.0.0-beta.12",
"react-highlight-words": "^0.16.0",
"react-image-viewer-zoom": "^1.0.36",
"react-infinite-scroller": "^1.2.4",
"react-leaflet": "^2.4.0",
"react-bootstrap": "^1.0.0-beta.12",
"react-moment": "^0.9.2",
"react-router": "^5.0.1",
"react-router-config": "^5.0.1",
@ -31,6 +30,7 @@
"react-star-ratings": "^2.3.0",
"react-twemoji": "^0.2.3",
"react-virtualized": "^9.21.1",
"react-websocket": "^2.1.0",
"reqwest": "^2.0.5",
"storm-react-diagrams": "^5.2.1"
},

@ -18,8 +18,7 @@
import React from "react";
import moment from "moment";
import DateTimeRangeContainer from "react-advanced-datetimerange-picker";
import {Button, Select, message, notification, Tag, Tooltip, Empty} from "antd";
import {Button, Select, message, notification, Tag, Tooltip, Empty, DatePicker} from "antd";
import axios from "axios";
import {withConfigContext} from "../../../context/ConfigContext";
import GeoCustomMap from "../geo-custom-map/GeoCustomMap";
@ -29,15 +28,16 @@ class GeoDashboard extends React.Component {
constructor(props) {
super(props);
let start = moment(new Date());
let start = moment(
new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0, 0)
);
let end = moment(start)
.add(5, "days")
.subtract(1, "minute");
.add(1, "days")
.subtract(1, "seconds");
this.state = {
deviceData: [],
selectedDevice: '',
locationData: [],
// currentLocation: [],
loading: false,
start: start,
end: end,
@ -55,11 +55,11 @@ class GeoDashboard extends React.Component {
* @param startDate - start date
* @param endDate - end date
*/
applyCallback = (startDate, endDate) => {
applyCallback = (dates, dateStrings) => {
console.log("Apply Callback");
this.setState({
start: startDate,
end: endDate
start: dateStrings[0],
end: dateStrings[1]
});
};
@ -180,6 +180,7 @@ class GeoDashboard extends React.Component {
*/
controllerBar = () => {
const {RangePicker} = DatePicker;
let now = new Date();
let start = moment(
new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0)
@ -199,32 +200,20 @@ class GeoDashboard extends React.Component {
"2 Weeks": [moment(start).subtract(14, "days"), moment(end)],
"1 Month": [moment(start).subtract(1, "months"), moment(end)],
};
let local = {
format: "DD-MM-YYYY HH:mm",
sundayFirst: false
};
let maxDate = moment(start).add(24, "hour");
let value =
`
${this.state.start.format("DD-MM-YYYY HH:mm")} - ${this.state.end.format("DD-MM-YYYY HH:mm")}
`;
let {deviceData} = this.state;
return (
<div className="controllerDiv">
<Button style={{marginRight: 20}}>
<DateTimeRangeContainer
<RangePicker
ranges={ranges}
start={this.state.start}
end={this.state.end}
local={local}
maxDate={maxDate}
applyCallback={this.applyCallback}
>
{value}
</DateTimeRangeContainer>
</Button>
style={{marginRight: 20}}
showTime
format="YYYY-MM-DD HH:mm:ss"
defaultValue={[this.state.start, this.state.end]}
onChange={this.applyCallback}
/>
<Select
showSearch

@ -74,12 +74,25 @@ class Dashboard extends React.Component {
<span>Devices</span>
</Link>
</Menu.Item>
<Menu.Item key="geo">
<Link to="/entgra/geo">
<SubMenu
key="geo"
title={
<span>
<Icon type="environment"/>
<span>Geo</span>
</span>}
>
<Menu.Item key="singleDevice">
<Link to="/entgra/geo">
<span>Single Device View</span>
</Link>
</Menu.Item>
<Menu.Item key="deviceGroup">
<Link to="#">
<span>Device Group View</span>
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="reports">
<Link to="/entgra/reports">
<Icon type="bar-chart"/>

Loading…
Cancel
Save