Improved subs form

This commit is contained in:
vjrj 2017-12-06 17:10:47 +01:00
parent b40309e80b
commit 93d9ca43f1
8 changed files with 81 additions and 71 deletions

View file

@ -1,10 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Row, Col } from 'react-bootstrap';
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 { withTracker } from 'meteor/react-meteor-data';
import getGKeys from '/imports/startup/client/gkeys';
@ -14,19 +13,14 @@ 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}}));
});
this.setState({init: true});
}.bind(this));
}
onAutocompleteChange = (value) => {
@ -40,27 +34,26 @@ class FireSubscription extends React.Component {
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
if (!this.state.init) {
return <div/>
} else
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}/>
<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>
</Col>
<Col xs={12} sm={12} md={6} lg={6} >
<DistanceSlider onChange={this.onSliderChange} />
</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>
)
}