Refactorization
This commit is contained in:
vjrj
parent
df96b6e51e
commit
b40309e80b
4 changed files with 173 additions and 120 deletions
|
|
@ -20,7 +20,7 @@ Meteor.methods({
|
|||
if (isPrivateIP(clientIP)) {
|
||||
clientIP = '80.58.61.250' // Some Spain IP address
|
||||
}
|
||||
console.log(`Geolocating ${clientIP}`);
|
||||
// console.log(`Geolocating ${clientIP}`);
|
||||
|
||||
// https://developers.google.com/web/fundamentals/primers/promises
|
||||
var promise = new Promise(function(resolve, reject) {
|
||||
|
|
|
|||
69
imports/ui/pages/FireSubscription/FireSubscription.js
Normal file
69
imports/ui/pages/FireSubscription/FireSubscription.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Row, Col } from 'react-bootstrap';
|
||||
import { Trans, translate } from 'react-i18next';
|
||||
import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
|
||||
import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
|
||||
|
||||
import update from 'immutability-helper';
|
||||
import { withTracker } from 'meteor/react-meteor-data';
|
||||
import getGKeys from '/imports/startup/client/gkeys';
|
||||
import SubsAutocomplete from './SubsAutocomplete';
|
||||
|
||||
class FireSubscription extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
adddress: '',
|
||||
init: false
|
||||
};
|
||||
self = this;
|
||||
// this.handleSelect = this.handleSelect.bind(this)
|
||||
// this.handleChange = this.handleChange.bind(this)
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
self = this;
|
||||
getGKeys(function(err, key) {
|
||||
self.setState(update(self.state, {$merge: {init: true}}));
|
||||
});
|
||||
}
|
||||
|
||||
onAutocompleteChange = (value) => {
|
||||
this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}}));
|
||||
}
|
||||
|
||||
onSliderChange = (value) => {
|
||||
this.setState(update(this.state, {$merge: {distance: value}}));
|
||||
}
|
||||
|
||||
render() {
|
||||
// https://developers.google.com/places/web-service/search
|
||||
// https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js
|
||||
let init = this.state.init
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ init &&
|
||||
<Row>
|
||||
<Col xs={12} sm={12} md={6} lg={6} >
|
||||
<div>
|
||||
<h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
|
||||
<SubsAutocomplete onChange={this.onAutocompleteChange}/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={12} sm={12} md={6} lg={6} >
|
||||
<DistanceSlider onChange={this.onSliderChange} />
|
||||
<Button bsStyle="success" type="submit"><Trans parent="span">Subscribir</Trans></Button>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<SelectionMap lat={this.state.lat} lng={this.state.lng} distance={this.state.distance || 10} />
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default translate([], { wait: true }) (FireSubscription);
|
||||
96
imports/ui/pages/FireSubscription/SubsAutocomplete.js
Normal file
96
imports/ui/pages/FireSubscription/SubsAutocomplete.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import React from 'react';
|
||||
import { Trans, translate } from 'react-i18next';
|
||||
import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete'
|
||||
import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
|
||||
|
||||
class SubsAutocomplete extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
adddress: '',
|
||||
}
|
||||
}
|
||||
|
||||
onChange = (address) => { this.setState({ address }) }
|
||||
|
||||
handleSelect = (address) => {
|
||||
const self = this;
|
||||
geocodeByAddress(address)
|
||||
.then((results) => getLatLng(results[0]))
|
||||
.then(({ lat, lng }) => {
|
||||
// console.log('Success Yay', { lat, lng })
|
||||
// const newState = update(this.state, {$merge: {lat: lat, lng: lng}});
|
||||
// console.log(newState);
|
||||
// this.setState(newState);
|
||||
self.props.onChange({lat: lat, lng: lng});
|
||||
// console.log(this.state);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
if (error === 'ZERO_RESULTS') {
|
||||
console.log("No results");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
// https://www.npmjs.com/package/react-places-autocomplete
|
||||
// https://github.com/kenny-hibino/react-places-autocomplete/issues/103
|
||||
const myStyles = {
|
||||
autocompleteContainer: {
|
||||
paddingBottom: '20px',
|
||||
backgroundSize: 'auto 12px',
|
||||
backgroundPosition: 'bottom left 10px',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')",
|
||||
},
|
||||
}
|
||||
|
||||
const AutocompleteItem = ({ formattedSuggestion }) => (
|
||||
<div className="suggestion-item">
|
||||
<i className='fa fa-map-marker suggestion-icon'/>{' '}
|
||||
<strong>{formattedSuggestion.mainText}</strong>{' '}
|
||||
<small className="text-muted">{formattedSuggestion.secondaryText}</small>
|
||||
</div>)
|
||||
|
||||
return (
|
||||
<form onSubmit={this.handleSelectEnd}>
|
||||
<FormGroup>
|
||||
<ControlLabel>
|
||||
<Trans parent="span">Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
|
||||
<PlacesAutocomplete
|
||||
styles={myStyles}
|
||||
classNames={{
|
||||
root: 'form-group',
|
||||
input: 'form-control',
|
||||
autocompleteContainer: 'autocomplete-container'}}
|
||||
googleLogo={false}
|
||||
highlightFirstSuggestion={true}
|
||||
onSelect={this.handleSelect}
|
||||
onEnterKeyDown={this.handleSelect}
|
||||
autocompleteItem={AutocompleteItem}
|
||||
options={{
|
||||
// location: new google.maps.LatLng(-34, 151),
|
||||
// radius: 2000,
|
||||
// type: ['address'],
|
||||
language: this.props.i18n.language
|
||||
}}
|
||||
inputProps={
|
||||
{
|
||||
value: this.state.address,
|
||||
onChange: this.onChange,
|
||||
placeholder: this.props.t("Escribe aquí un lugar "),
|
||||
onBlur:() => { console.log('Blur event!'); },
|
||||
onFocus:() => { console.log('Focused!'); },
|
||||
autoFocus:true
|
||||
}} />
|
||||
</ControlLabel>
|
||||
<HelpBlock><Trans parent="span">También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
|
||||
</FormGroup>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default translate([], { wait: true }) (SubsAutocomplete);
|
||||
|
|
@ -1,43 +1,18 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormGroup, ControlLabel, Button, Row, Col, HelpBlock } from 'react-bootstrap';
|
||||
import { Trans, translate } from 'react-i18next';
|
||||
import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
|
||||
import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
|
||||
import getGKeys from '/imports/startup/client/gkeys';
|
||||
import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete'
|
||||
import update from 'immutability-helper';
|
||||
import { withTracker } from 'meteor/react-meteor-data';
|
||||
import getGKeys from '/imports/startup/client/gkeys';
|
||||
import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
|
||||
|
||||
class Sandbox extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
adddress: ''
|
||||
lat: 0,
|
||||
lng: 0
|
||||
};
|
||||
self = this;
|
||||
// this.handleSelect = this.handleSelect.bind(this)
|
||||
// this.handleChange = this.handleChange.bind(this)
|
||||
}
|
||||
|
||||
onChange = (address) => { this.setState({ address }) }
|
||||
|
||||
handleSelect = (address) => {
|
||||
geocodeByAddress(address)
|
||||
.then((results) => getLatLng(results[0]))
|
||||
.then(({ lat, lng }) => {
|
||||
// console.log('Success Yay', { lat, lng })
|
||||
const newState = update(this.state, {$merge: {lat: lat, lng: lng}});
|
||||
// console.log(newState);
|
||||
this.setState(newState);
|
||||
// console.log(this.state);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
if (error === 'ZERO_RESULTS') {
|
||||
console.log("No results");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onSliderChange = (value) => {
|
||||
|
|
@ -45,101 +20,14 @@ class Sandbox extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
// https://www.npmjs.com/package/react-places-autocomplete
|
||||
|
||||
// https://github.com/kenny-hibino/react-places-autocomplete/issues/103
|
||||
const myStyles = {
|
||||
autocompleteContainer: {
|
||||
paddingBottom: '20px',
|
||||
backgroundSize: 'auto 12px',
|
||||
backgroundPosition: 'bottom left 10px',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')",
|
||||
},
|
||||
}
|
||||
|
||||
const AutocompleteItem = ({ formattedSuggestion }) => (
|
||||
<div className="suggestion-item">
|
||||
<i className='fa fa-map-marker suggestion-icon'/>{' '}
|
||||
<strong>{formattedSuggestion.mainText}</strong>{' '}
|
||||
<small className="text-muted">{formattedSuggestion.secondaryText}</small>
|
||||
</div>)
|
||||
|
||||
// https://developers.google.com/places/web-service/search
|
||||
// https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col xs={12} sm={12} md={6} lg={6} >
|
||||
{ typeof this.props.gkey === 'string' &&
|
||||
<div>
|
||||
<h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
|
||||
<form onSubmit={this.handleSelectEnd}>
|
||||
<FormGroup>
|
||||
<ControlLabel>
|
||||
<Trans parent="span">Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
|
||||
</ControlLabel>
|
||||
<PlacesAutocomplete
|
||||
styles={myStyles}
|
||||
classNames={{
|
||||
root: 'form-group',
|
||||
input: 'form-control',
|
||||
autocompleteContainer: 'autocomplete-container'}}
|
||||
googleLogo={false}
|
||||
highlightFirstSuggestion={true}
|
||||
onSelect={this.handleSelect}
|
||||
onEnterKeyDown={this.handleSelect}
|
||||
autocompleteItem={AutocompleteItem}
|
||||
options={{
|
||||
// location: new google.maps.LatLng(-34, 151),
|
||||
// radius: 2000,
|
||||
// type: ['address'],
|
||||
language: this.props.i18n.language
|
||||
}}
|
||||
inputProps={
|
||||
{
|
||||
value: this.state.address,
|
||||
onChange: this.onChange,
|
||||
placeholder: this.props.t("Escribe aquí un lugar "),
|
||||
onBlur:() => { console.log('Blur event!'); },
|
||||
onFocus:() => { console.log('Focused!'); },
|
||||
autoFocus:true
|
||||
}} />
|
||||
<HelpBlock><Trans parent="span">También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
|
||||
</FormGroup>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
</Col>
|
||||
<Col xs={12} sm={12} md={6} lg={6} >
|
||||
<DistanceSlider onChange={this.onSliderChange} />
|
||||
<Button bsStyle="success" type="submit"><Trans parent="span">Subscribir</Trans></Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<SelectionMap lat={this.state.lat} lng={this.state.lng} distance={this.state.distance || 10} />
|
||||
</Row>
|
||||
<FireSubscription />
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Sandbox.propTypes = {
|
||||
gkey: PropTypes.string
|
||||
}
|
||||
|
||||
const gkey = new ReactiveVar();
|
||||
|
||||
getGKeys(function(err, key) {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
} else {
|
||||
gkey.set(key);
|
||||
}
|
||||
});
|
||||
|
||||
export default translate([], { wait: true }) (withTracker(() => {
|
||||
return {
|
||||
gkey: gkey.get()
|
||||
};
|
||||
})(Sandbox));
|
||||
export default translate([], { wait: true }) (Sandbox);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue