Lint fixes
This commit is contained in:
vjrj
parent
ccf0716d3e
commit
45c6727bec
3 changed files with 164 additions and 159 deletions
|
|
@ -1,13 +1,14 @@
|
|||
/* eslint-disable import/no-absolute-path */
|
||||
/* eslint-disable react/jsx-indent-props */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { 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 Gkeys from '/imports/startup/client/Gkeys';
|
||||
import SubsAutocomplete from './SubsAutocomplete';
|
||||
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
|
||||
import SubsAutocomplete from './SubsAutocomplete';
|
||||
|
||||
class FireSubscription extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -18,26 +19,27 @@ class FireSubscription extends React.Component {
|
|||
// console.log(this.props.location.state);
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
Gkeys.load(function (err, key) {
|
||||
this.setState({ init: true });
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
centerOnUserLocation(value) {
|
||||
this.setState(update(this.state, {$merge: {lat: value.center[0], lng: value.center[1]}}));
|
||||
componentDidMount() {
|
||||
const self = this;
|
||||
Gkeys.load(() => {
|
||||
self.setState({ init: true });
|
||||
});
|
||||
}
|
||||
|
||||
onAutocompleteChange(value) {
|
||||
this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}}));
|
||||
this.setState({ lat: value.lat, lng: value.lng });
|
||||
}
|
||||
|
||||
onSliderChange(value) {
|
||||
this.setState(update(this.state, {$merge: {distance: value}}));
|
||||
this.setState({ distance: value });
|
||||
}
|
||||
|
||||
onSelection(value) {
|
||||
this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng, distance: value.distance}}));
|
||||
this.setState({ lat: value.lat, lng: value.lng, distance: value.distance });
|
||||
}
|
||||
|
||||
centerOnUserLocation(value) {
|
||||
this.setState({ lat: value.center[0], lng: value.center[1] });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -45,37 +47,37 @@ class FireSubscription extends React.Component {
|
|||
// https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js
|
||||
|
||||
if (!this.state.init) {
|
||||
return <div/>
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<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
|
||||
focusInput={this.props.focusInput}
|
||||
onChange={ (value) => this.onAutocompleteChange(value) }/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={12} sm={12} md={6} lg={6} >
|
||||
<DistanceSlider onChange={(value) => this.onSliderChange(value)} />
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<CenterInMyPosition onClick={(viewport) => this.centerOnUserLocation(viewport)} />
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<SelectionMap
|
||||
center={[this.state.lat, this.state.lng]}
|
||||
distance={this.state.distance}
|
||||
history={this.props.history}
|
||||
onSelection={(state) => this.onSelection(state)}
|
||||
/>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
return <div />;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<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
|
||||
focusInput={this.props.focusInput}
|
||||
onChange={value => this.onAutocompleteChange(value)}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={12} sm={12} md={6} lg={6} >
|
||||
<DistanceSlider onChange={value => this.onSliderChange(value)} />
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} />
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<SelectionMap
|
||||
center={[this.state.lat, this.state.lng]}
|
||||
distance={this.state.distance}
|
||||
history={this.props.history}
|
||||
onSelection={state => this.onSelection(state)}
|
||||
/>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,36 @@
|
|||
/* eslint-disable react/jsx-indent-props */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Trans, translate } from 'react-i18next';
|
||||
import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
|
||||
import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
|
||||
import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
|
||||
|
||||
class SubsAutocomplete extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
address: '',
|
||||
address: ''
|
||||
};
|
||||
}
|
||||
|
||||
onChange = (address) => { this.setState({ address }); }
|
||||
onChange(address) { this.setState({ address }); }
|
||||
|
||||
handleSelect = (address) => {
|
||||
handleSelect(address) {
|
||||
const self = this;
|
||||
geocodeByAddress(address)
|
||||
.then((results) => getLatLng(results[0]))
|
||||
.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});
|
||||
self.props.onChange({ lat, lng });
|
||||
// console.log(this.state);
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
if (error === 'ZERO_RESULTS') {
|
||||
console.log("No results");
|
||||
console.log('No results');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -43,17 +44,17 @@ class SubsAutocomplete extends React.Component {
|
|||
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')",
|
||||
},
|
||||
}
|
||||
backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')"
|
||||
}
|
||||
};
|
||||
|
||||
// http://simplelineicons.com/
|
||||
const AutocompleteItem = ({ formattedSuggestion }) => (
|
||||
<div className="suggestion-item">
|
||||
<i className="icons icon-location-pin suggestion-icon"/>{' '}
|
||||
<i className="icons icon-location-pin suggestion-icon" />{' '}
|
||||
<strong>{formattedSuggestion.mainText}</strong>{' '}
|
||||
<small className="text-muted">{formattedSuggestion.secondaryText}</small>
|
||||
</div>)
|
||||
</div>);
|
||||
|
||||
return (
|
||||
<form>
|
||||
|
|
@ -67,11 +68,12 @@ class SubsAutocomplete extends React.Component {
|
|||
classNames={{
|
||||
root: 'form-group',
|
||||
input: 'form-control',
|
||||
autocompleteContainer: 'autocomplete-container'}}
|
||||
autocompleteContainer: 'autocomplete-container'
|
||||
}}
|
||||
googleLogo={false}
|
||||
highlightFirstSuggestion={true}
|
||||
onSelect={(address) => this.handleSelect(address)}
|
||||
onEnterKeyDown={(address) => this.handleSelect(address)}
|
||||
highlightFirstSuggestion
|
||||
onSelect={address => this.handleSelect(address)}
|
||||
onEnterKeyDown={address => this.handleSelect(address)}
|
||||
options={{
|
||||
// location: new google.maps.LatLng(-34, 151),
|
||||
// radius: 2000,
|
||||
|
|
@ -81,21 +83,24 @@ class SubsAutocomplete extends React.Component {
|
|||
inputProps={
|
||||
{
|
||||
value: this.state.address,
|
||||
onChange: (address) => this.onChange(address),
|
||||
placeholder: this.props.t("Escribe aquí un lugar "),
|
||||
onBlur:() => { /* console.log('Blur event!'); */ },
|
||||
onFocus:() => { /* console.log('Focused!'); */ },
|
||||
onChange: address => this.onChange(address),
|
||||
placeholder: this.props.t('Escribe aquí un lugar'),
|
||||
onBlur: () => { /* console.log('Blur event!'); */ },
|
||||
onFocus: () => { /* console.log('Focused!'); */ },
|
||||
autoFocus: this.props.focusInput
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
<HelpBlock><Trans parent="span">También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
|
||||
</FormGroup>
|
||||
</form>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SubsAutocomplete.propTypes = {
|
||||
focusInput: PropTypes.bool.isRequired
|
||||
focusInput: PropTypes.bool.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
i18n: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default translate([], { wait: true }) (SubsAutocomplete);
|
||||
export default translate([], { wait: true })(SubsAutocomplete);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue