forked from community/device-mgt-core
Add component to View device locations See merge request entgra/carbon-device-mgt!5004.x.x
Dharmakeerthi Lasantha
5 years ago
commit
0fdcc6cbd8
@ -0,0 +1,254 @@
|
||||
/*
|
||||
* Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { Map, TileLayer, Marker, Popup, CircleMarker } from 'react-leaflet';
|
||||
import L from 'leaflet';
|
||||
import { withConfigContext } from '../../../../../../components/ConfigContext';
|
||||
import axios from 'axios';
|
||||
import { message, notification } from 'antd';
|
||||
|
||||
// const { Title, Text } = Typography;
|
||||
|
||||
// Icons for the location markers
|
||||
const pinStart = new L.Icon({
|
||||
iconUrl: require('./pin_start.svg'),
|
||||
iconRetinaUrl: require('./pin_start.svg'),
|
||||
shadowUrl: require('./pin_shadow.svg'),
|
||||
shadowSize: new L.Point(51, 51),
|
||||
shadowAnchor: [22, 22],
|
||||
popupAnchor: [0, -22],
|
||||
iconSize: new L.Point(50, 50),
|
||||
tooltipAnchor: [0, -22],
|
||||
});
|
||||
|
||||
class DeviceLocationMap extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.customMap = React.createRef();
|
||||
this.state = {
|
||||
defaultZoomLevel: 3,
|
||||
locations: [],
|
||||
deviceData: {},
|
||||
minLatitute: -37.43997405227057,
|
||||
maxLatitute: 37.43997405227057,
|
||||
minLongtitute: -151.171875,
|
||||
maxLongtitute: 151.34765625,
|
||||
zoomLevel: 3,
|
||||
deviceName: null,
|
||||
isPopup: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getDeviceLocations(
|
||||
-37.43997405227057,
|
||||
37.43997405227057,
|
||||
-151.171875,
|
||||
151.34765625,
|
||||
3,
|
||||
);
|
||||
}
|
||||
|
||||
getDeviceLocations = (
|
||||
minLatitute,
|
||||
maxLatitute,
|
||||
minLongtitute,
|
||||
maxLongtitute,
|
||||
zoomLevel,
|
||||
) => {
|
||||
axios
|
||||
.get(
|
||||
window.location.origin +
|
||||
this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
'/geo-services/1.0.0/stats' +
|
||||
'/device-locations?' +
|
||||
'minLat=' +
|
||||
minLatitute +
|
||||
'&maxLat=' +
|
||||
maxLatitute +
|
||||
'&minLong=' +
|
||||
minLongtitute +
|
||||
'&maxLong=' +
|
||||
maxLongtitute +
|
||||
'&zoom=' +
|
||||
zoomLevel,
|
||||
)
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
// console.log(JSON.parse(res.data.data));
|
||||
this.setState({
|
||||
locations: JSON.parse(res.data.data),
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.hasOwnProperty('response') && error.response.status === 401) {
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification.error({
|
||||
message: 'There was a problem',
|
||||
duration: 0,
|
||||
description: 'Error occurred while trying to fetch locations......',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
setMarkers = positions => {
|
||||
let markers = [];
|
||||
positions.map(location => {
|
||||
if (location.count > 1) {
|
||||
markers.push(
|
||||
<CircleMarker
|
||||
key={location.deviceIdentification}
|
||||
center={[
|
||||
location.coordinates.latitude,
|
||||
location.coordinates.longitude,
|
||||
]}
|
||||
radius={10}
|
||||
fillOpacity={1}
|
||||
color={'#c0392b'}
|
||||
stroke={false}
|
||||
>
|
||||
<Popup>{location.count}</Popup>
|
||||
</CircleMarker>,
|
||||
);
|
||||
} else {
|
||||
markers.push(
|
||||
<Marker
|
||||
key={location.deviceIdentification}
|
||||
icon={pinStart}
|
||||
position={[
|
||||
location.coordinates.latitude,
|
||||
location.coordinates.longitude,
|
||||
]}
|
||||
onMouseOver={this
|
||||
.mouseOver
|
||||
// location.deviceType,
|
||||
// location.deviceIdentification,
|
||||
()}
|
||||
onMouseOut={this.mouseOut}
|
||||
>
|
||||
<Popup
|
||||
autoClose={true}
|
||||
style={{ display: this.state.isPopup ? 'block' : 'none' }}
|
||||
>
|
||||
{/* {this.getPopupData(*/}
|
||||
{/* // location.deviceType, // location.deviceIdentification, // )}*/}
|
||||
{/* {this.state.deviceData.name}*/}
|
||||
{this.state.deviceName}
|
||||
</Popup>
|
||||
</Marker>,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
{markers.map(markker => {
|
||||
return markker;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
mouseOut = () => {
|
||||
this.setState({
|
||||
isPopup: false,
|
||||
});
|
||||
};
|
||||
|
||||
// todo get device details when mouse over the maker
|
||||
mouseOver = (deviceType, deviceIdentification) => {
|
||||
// let aaa = null;
|
||||
// axios
|
||||
// .get(
|
||||
// window.location.origin +
|
||||
// this.config.serverConfig.invoker.uri +
|
||||
// this.config.serverConfig.invoker.deviceMgt +
|
||||
// `/devices/1.0.0/${deviceType}/${deviceIdentification}`,
|
||||
// )
|
||||
// .then(res => {
|
||||
// if (res.status === 200) {
|
||||
// // console.log(res.data.data);
|
||||
// this.setState({
|
||||
// deviceData: res.data.data,
|
||||
// isPopup: true,
|
||||
// });
|
||||
// // aaa = res.data.data;
|
||||
// // return (
|
||||
// // <div>
|
||||
// // <Title>{aaa.name}</Title>
|
||||
// // <Row>
|
||||
// // <Text> Type : {aaa.type}</Text>
|
||||
// // </Row>
|
||||
// // <Row>
|
||||
// // <Text> Status : {aaa.enrolmentInfo.status}</Text>
|
||||
// // </Row>
|
||||
// // <Row>
|
||||
// // <Text> Owner : {aaa.enrolmentInfo.owner}</Text>
|
||||
// // </Row>
|
||||
// // </div>
|
||||
// // );
|
||||
// }
|
||||
// })
|
||||
// .catch(error => {
|
||||
// if (error.hasOwnProperty('response') && error.response.status === 401) {
|
||||
// message.error('You are not logged in');
|
||||
// window.location.href = window.location.origin + '/entgra/login';
|
||||
// } else {
|
||||
// notification.error({
|
||||
// message: 'There was a problem',
|
||||
// duration: 0,
|
||||
// description: 'Error occurred while trying to fetch locations......',
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
// Todo : get bound and zoom level when doing movement and pass id to getDeviceLocations function
|
||||
handleMovements = event => {
|
||||
console.log(this.customMap.current.leafletElement.getZoom());
|
||||
};
|
||||
|
||||
render() {
|
||||
const position = [this.state.lat, this.state.lng];
|
||||
const attribution = this.config.geoMap.attribution;
|
||||
const url = this.config.geoMap.url;
|
||||
return (
|
||||
<div style={{ backgroundColor: '#ffffff', borderRadius: 5, padding: 5 }}>
|
||||
<Map
|
||||
ref={this.customMap}
|
||||
center={position}
|
||||
zoom={this.state.defaultZoomLevel}
|
||||
resize={this.onResize}
|
||||
onMoveEnd={this.handleMovements}
|
||||
>
|
||||
<TileLayer url={url} attribution={attribution} />
|
||||
{this.setMarkers(this.state.locations)}
|
||||
</Map>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(DeviceLocationMap);
|
||||
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 240 B |
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb, PageHeader } from 'antd';
|
||||
import DeviceLocationMap from './Component/DeviceLocationMap';
|
||||
|
||||
class DeviceLocations extends React.Component {
|
||||
routes;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.routes = props.routes;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<PageHeader style={{ paddingTop: 0 }}>
|
||||
<Breadcrumb style={{ paddingBottom: 16 }}>
|
||||
<Breadcrumb.Item>Devices Location</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="wrap">
|
||||
<h3>Devices Location </h3>
|
||||
</div>
|
||||
</PageHeader>
|
||||
<div
|
||||
style={{
|
||||
background: '#f0f2f5',
|
||||
padding: 24,
|
||||
minHeight: 720,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<DeviceLocationMap />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DeviceLocations;
|
||||
Loading…
Reference in new issue