community
/
device-mgt-core
12
0
Fork 47
Code Issues Pull Requests 26 Packages Projects Releases Wiki Activity

Update geo featur UI and date time picker

Browse Source
merge-requests/347/head
achala007 5 years ago
parent 0f8d4a02d4
commit e57dd65dd8
3 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File

4
components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json
Unescape View File

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

49
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Geo/geo-dashboard/GeoDashboard.js vendored
Unescape View File

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

17
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js vendored
Unescape View File

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

Write Preview
Loading…
Cancel
Save