mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Update geo featur UI and date time picker
This commit is contained in:
achala007
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…
Reference in New Issue
Block a user