diff --git a/smppir-checkin-portal/src/Components/MapComponent.js b/smppir-checkin-portal/src/Components/MapComponent.js index e40c362198a5158c684d1025e9ad6847c62e3aaf..8c123feee6007817889da1e3859f347d680d927d 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 e61173c74e8e7330ceedab48370161ddb8727ace..daa01b37cf42dbe904bb38433996d7ace0c8f858 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 0000000000000000000000000000000000000000..aaa11293d211422de0559c081657d7c8ad6cdc4a --- /dev/null +++ b/smppir-checkin-portal/src/Pages/Styles/Map.css @@ -0,0 +1,3 @@ +.listLocations{ + height: 723px; +} \ No newline at end of file