From e57dd65dd8e0ce481ac8c95863a98cc5e7773a9b Mon Sep 17 00:00:00 2001
From: achala007 <achala@entgra.io>
Date: Wed, 23 Oct 2019 09:54:00 +0530
Subject: [PATCH] Update geo featur UI and date time picker

---
 .../react-app/package.json                    |  4 +-
 .../Geo/geo-dashboard/GeoDashboard.js         | 49 +++++++------------
 .../src/pages/Dashboard/Dashboard.js          | 25 +++++++---
 3 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json b/components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json
index 3f4470ef197..2471a872d95 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json
@@ -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"
   },
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Geo/geo-dashboard/GeoDashboard.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Geo/geo-dashboard/GeoDashboard.js
index 63367f3afd3..07be907074b 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Geo/geo-dashboard/GeoDashboard.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Geo/geo-dashboard/GeoDashboard.js
@@ -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">
+                    <RangePicker
+                            ranges={ranges}
+                            style={{marginRight: 20}}
+                            showTime
+                            format="YYYY-MM-DD HH:mm:ss"
+                            defaultValue={[this.state.start, this.state.end]}
+                            onChange={this.applyCallback}
 
-                    <Button style={{marginRight: 20}}>
-                        <DateTimeRangeContainer
-                                ranges={ranges}
-                                start={this.state.start}
-                                end={this.state.end}
-                                local={local}
-                                maxDate={maxDate}
-                                applyCallback={this.applyCallback}
-                        >
-                            {value}
-                        </DateTimeRangeContainer>
-                    </Button>
+                    />
 
                     <Select
                             showSearch
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js
index 0ab9a856196..138d70e0940 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js
@@ -74,12 +74,25 @@ class Dashboard extends React.Component {
                                     <span>Devices</span>
                                 </Link>
                             </Menu.Item>
-                            <Menu.Item key="geo">
-                                <Link to="/entgra/geo">
-                                    <Icon type="environment"/>
-                                    <span>Geo</span>
-                                </Link>
-                            </Menu.Item>
+                            <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"/>