From 29f9a2d4761a2cdf9aff2cf015db708b59c57d8b Mon Sep 17 00:00:00 2001 From: vjrj Date: Mon, 11 Dec 2017 18:23:24 +0100 Subject: [PATCH] Improved SelectionMap --- imports/startup/client/geolocation.js | 26 +-- .../DistanceSlider/DistanceSlider.js | 1 + .../components/SelectionMap/SelectionMap.js | 148 +++++++++++------- .../FireSubscription/FireSubscription.js | 3 +- .../FireSubscription/SubsAutocomplete.js | 4 +- 5 files changed, 106 insertions(+), 76 deletions(-) diff --git a/imports/startup/client/geolocation.js b/imports/startup/client/geolocation.js index 5d3a97a..a43d784 100644 --- a/imports/startup/client/geolocation.js +++ b/imports/startup/client/geolocation.js @@ -1,18 +1,20 @@ import { Meteor } from 'meteor/meteor'; +import { ReactiveVar } from 'meteor/reactive-var'; + const geolocation = new ReactiveVar(); -Meteor.startup(function() { - Meteor.call("geo", function (error, response) { - if (error) { - console.warn(error); - } else { - var pos = [ - response.location.latitude, - response.location.longitude - ]; - geolocation.set(pos); - } - }); +Meteor.startup(() => { + Meteor.call('geo', (error, response) => { + if (error) { + console.warn(error); + } else { + const pos = [ + response.location.latitude, + response.location.longitude + ]; + geolocation.set(pos); + } + }); }); export default geolocation; diff --git a/imports/ui/components/DistanceSlider/DistanceSlider.js b/imports/ui/components/DistanceSlider/DistanceSlider.js index 44a60e2..efc541a 100644 --- a/imports/ui/components/DistanceSlider/DistanceSlider.js +++ b/imports/ui/components/DistanceSlider/DistanceSlider.js @@ -30,6 +30,7 @@ class DistanceSlider extends React.Component { }; this.onSliderChange = this.onSliderChange.bind(this); this.onAfterChange = this.onAfterChange.bind(this); + this.props.onChange(10); } onSliderChange(value) { diff --git a/imports/ui/components/SelectionMap/SelectionMap.js b/imports/ui/components/SelectionMap/SelectionMap.js index 1651a5b..7764b16 100644 --- a/imports/ui/components/SelectionMap/SelectionMap.js +++ b/imports/ui/components/SelectionMap/SelectionMap.js @@ -1,8 +1,13 @@ +/* global setTimeout */ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable import/no-absolute-path */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet'; import Leaflet from 'leaflet'; import { translate } from 'react-i18next'; +import { withTracker } from 'meteor/react-meteor-data'; +import update from 'immutability-helper'; import geolocation from '/imports/startup/client/geolocation'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js'; @@ -25,11 +30,11 @@ class SelectionMap extends Component { constructor(props) { super(props); this.state = { - center: geolocation.get(), - marker: geolocation.get(), + center: props.center, + marker: props.center, zoom: 11, - draggable: true, - modified: false + distance: props.distance, + draggable: true }; this.getMap = this.getMap.bind(this); @@ -41,7 +46,20 @@ class SelectionMap extends Component { } componentDidMount() { - this.addScale(); + if (this.isValidState()) { + this.addScale(); + } + } + + componentWillReceiveProps(nextProps) { + const nextCenter = nextProps.center[0] ? nextProps.center : this.state.center; + const nextMarker = nextProps.center[0] ? nextProps.center : this.state.marker; + this.setState({ + center: nextCenter, + marker: nextMarker, + distance: nextProps.distance || this.state.distance + }); + this.fit(); } componentDidUpdate() { @@ -58,19 +76,18 @@ class SelectionMap extends Component { updatePosition() { const { lat, lng } = this.marker.leafletElement.getLatLng(); + // console.log(`New marker lat ${lat} and lng ${lng}`); const currentDistance = this.state.distance; - this.setState({ - marker: [lat, lng], - modified: true - }); - console.log(currentDistance); + this.setState(update(this.state, { $merge: { marker: [lat, lng] } })); this.props.onSelection({ lat, lng, currentDistance }); this.fit(); } fit() { // console.log("fit!"); - this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]); + if (this.selectionMap && this.distanceCircle) { + this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]); + } } addScale() { @@ -91,69 +108,80 @@ class SelectionMap extends Component { ); } + isValidState() { + return this.state.center && this.state.center[0] && this.state.distance; + } + render() { - this.state.center = !this.state.modified && this.props.lat? [this.props.lat, this.props.lng]: this.state.center; - this.state.marker = !this.state.modified && this.props.lat? [this.props.lat, this.props.lng]: this.state.marker; - this.state.distance = !this.state.modified? this.props.distance: this.state.distance; - this.state.modified = false; + // console.log('render map called'); return (
- { this.state && this.state.center && - { this.selectionMap = map; }} - sleep={window.location.pathname === '/'} - sleepTime={10750} - wakeTime={750} - sleepNote={true} - hoverToWake={true} - wakeMessage={this.props.t('Pulsa para activar')} - sleepOpacity={.6}> - - { this.marker = ref; }}> - - - { this.selectionMap = map; }} + sleep={window.location.pathname === '/'} + sleepTime={10750} + wakeTime={750} + sleepNote + hoverToWake + wakeMessage={this.props.t('Pulsa para activar')} + sleepOpacity={0.6} + > + + { this.marker = ref; }} + /> + + { this.distanceCircle = ref; }} color="#145A32" fillColor="green" - fillOpacity={.1} - radius={this.state.distance * 1000} /> - - - - - - } + fillOpacity={0.1} + radius={this.state.distance * 1000} + /> + + + + + + }
); } } -SelectionMap.defaultProps = { - distance: 10 -}; SelectionMap.propTypes = { history: PropTypes.object.isRequired, - lat: PropTypes.number, - lng: PropTypes.number, + t: PropTypes.func.isRequired, + center: PropTypes.array, distance: PropTypes.number, onSelection: PropTypes.func.isRequired }; -export default translate([], { wait: true })(SelectionMap); +export default translate([], { wait: true })(withTracker(props => ({ + center: props.center[0] ? props.center : geolocation.get(), + distance: props.distance +}))(SelectionMap)); diff --git a/imports/ui/pages/FireSubscription/FireSubscription.js b/imports/ui/pages/FireSubscription/FireSubscription.js index 4da671c..a1f18be 100644 --- a/imports/ui/pages/FireSubscription/FireSubscription.js +++ b/imports/ui/pages/FireSubscription/FireSubscription.js @@ -67,8 +67,7 @@ class FireSubscription extends React.Component { this.onSelection(state)} diff --git a/imports/ui/pages/FireSubscription/SubsAutocomplete.js b/imports/ui/pages/FireSubscription/SubsAutocomplete.js index 050dc15..1e38223 100644 --- a/imports/ui/pages/FireSubscription/SubsAutocomplete.js +++ b/imports/ui/pages/FireSubscription/SubsAutocomplete.js @@ -9,10 +9,10 @@ class SubsAutocomplete extends React.Component { super(props); this.state = { address: '', - } + }; } - onChange = (address) => { this.setState({ address }) } + onChange = (address) => { this.setState({ address }); } handleSelect = (address) => { const self = this;