From c2ad34401a8ba0d0aa99eb32032b00ffbaa400c5 Mon Sep 17 00:00:00 2001 From: Henrique Varella Ehrenfried <h.v.ehrenfried@hotmail.com> Date: Mon, 11 Jun 2018 08:50:31 -0300 Subject: [PATCH] Add locations in map --- .../src/Components/MapComponent.js | 18 +++++++++++------ smppir-checkin-portal/src/Pages/Map.js | 20 ++++++++++++++----- .../src/Pages/Styles/Map.css | 3 +++ 3 files changed, 30 insertions(+), 11 deletions(-) create mode 100644 smppir-checkin-portal/src/Pages/Styles/Map.css diff --git a/smppir-checkin-portal/src/Components/MapComponent.js b/smppir-checkin-portal/src/Components/MapComponent.js index e40c362..8c123fe 100644 --- a/smppir-checkin-portal/src/Components/MapComponent.js +++ b/smppir-checkin-portal/src/Components/MapComponent.js @@ -10,7 +10,7 @@ class MapComponent extends Component { constructor() { super(); this.state = { - markers: [], + markers: undefined, hasLocation:false, latlng:[-14.424429, -49.265382], zoom:4 @@ -35,8 +35,14 @@ class MapComponent extends Component { this.setState({markers: this.props.markers}) } } + componentWillReceiveProps(nextProps){ + if(nextProps.markers !== this.props.markers){ + this.setState({markers: nextProps.markers}) + } + } render() { + console.log(this.state.markers) if(this.props.readOnly){ return ( <div> @@ -55,9 +61,9 @@ class MapComponent extends Component { <CustomMarker id={idx} key={`marker-${idx}`} - lat={position.lat} - lng={position.lng} - text={idx===0?<div>{`Você está Aqui`}</div>:<div>{`Ponto ${idx}`}</div>} + lat={position.latitude} + lng={position.longitude} + text={<div>{position.geolocation_name}</div>} dragableMarker={false} icon={'default'} @@ -87,8 +93,8 @@ class MapComponent extends Component { <CustomMarker id={idx} key={`marker-${idx}`} - lat={position.lat} - lng={position.lng} + lat={position.latitude} + lng={position.longitude} text={idx===0?<div>{`Você está Aqui`}</div>:<div>{`Ponto ${idx}`}</div>} delete={idx===0 ? undefined : this.deletedMarker} deleteButton={idx===0 ? false :true} diff --git a/smppir-checkin-portal/src/Pages/Map.js b/smppir-checkin-portal/src/Pages/Map.js index e61173c..daa01b3 100644 --- a/smppir-checkin-portal/src/Pages/Map.js +++ b/smppir-checkin-portal/src/Pages/Map.js @@ -3,23 +3,33 @@ import './Styles/MainPage.css'; import BarraBrasil from '../Components/BarraBrasil' import { Card, Row, Col, Breadcrumb, MenuItem } from 'react-materialize' import AppFooter from '../Components/AppFooter' -import Button from '../Components/Button' import NavigationBar from '../Components/NavigationBar' import { Redirect } from 'react-router-dom' import MapComponent from '../Components/MapComponent' +import {URL} from '../env' +import DataFrame from 'dataframe-js'; import './Styles/Login.css' - +import axios from 'axios'; class Map extends Component { constructor(props) { super(props); this.state={ 'redirect':false, - 'credentials': {} + 'credentials': {}, + 'data': undefined, //it's a dataframe + 'latLng': [] } } - + componentWillMount(){ + axios.get(`${URL}geolocations`).then((resp) => { + let response = resp.data.result + let df = new DataFrame(response) + let latLng = df.select('latitude', 'longitude','geolocation_name').toCollection() + this.setState({data: df, latLng: latLng}) + }) + } render() { if (this.state.redirect){ return <Redirect to='/welcome'/> @@ -36,7 +46,7 @@ class Map extends Component { <Row> <Col s={12} m={10} offset={'m1'}> <Card className='white' textClassName='black-text'> - <MapComponent readOnly={true}/> + <MapComponent readOnly={true} markers={this.state.latLng}/> </Card> </Col> </Row> diff --git a/smppir-checkin-portal/src/Pages/Styles/Map.css b/smppir-checkin-portal/src/Pages/Styles/Map.css new file mode 100644 index 0000000..aaa1129 --- /dev/null +++ b/smppir-checkin-portal/src/Pages/Styles/Map.css @@ -0,0 +1,3 @@ +.listLocations{ + height: 723px; +} \ No newline at end of file -- GitLab