Subs form (wip)
This commit is contained in:
vjrj
parent
3d86418d22
commit
df96b6e51e
14 changed files with 530 additions and 75 deletions
|
|
@ -16,6 +16,7 @@ import LGeo from 'leaflet-geodesy';
|
|||
import union from 'turf-union';
|
||||
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
|
||||
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
|
||||
import _ from 'lodash';
|
||||
|
||||
// https://stackoverflow.com/questions/35394577/leaflet-js-union-merge-circles
|
||||
function unify(polyList) {
|
||||
|
|
@ -163,17 +164,22 @@ class FiresMap extends React.Component {
|
|||
height.set(this.divElement.clientHeight);
|
||||
width.set(this.divElement.clientWidth);
|
||||
this.addScale();
|
||||
const self = this;
|
||||
this.handleViewportChangeDebounced = _.debounce(function (viewport) {
|
||||
console.log(`Viewport changed: ${JSON.stringify(this.state.viewport)}`);
|
||||
zoom.set(viewport.zoom);
|
||||
lat.set(viewport.center[0]);
|
||||
lng.set(viewport.center[1]);
|
||||
self.state.viewport = viewport;
|
||||
self.state.modified = true;
|
||||
self.showSubsUnion(self.state.showSubsUnion);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
onViewportChanged = viewport => {
|
||||
// console.log(`Viewport changed: ${JSON.stringify(this.state.viewport)}`);
|
||||
zoom.set(viewport.zoom);
|
||||
lat.set(viewport.center[0]);
|
||||
lng.set(viewport.center[1]);
|
||||
this.state.viewport = viewport;
|
||||
this.state.modified = true;
|
||||
this.showSubsUnion(this.state.showSubsUnion);
|
||||
}
|
||||
// https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
|
||||
onViewportChanged = (viewport) => {
|
||||
this.handleViewportChangeDebounced(viewport);
|
||||
};
|
||||
|
||||
onClickReset = () => {
|
||||
// console.log("onclick");
|
||||
|
|
@ -297,7 +303,7 @@ class FiresMap extends React.Component {
|
|||
</Map>
|
||||
</Row>
|
||||
<Row>
|
||||
(*) <Trans parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans>
|
||||
(*) <Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,58 +1,145 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { FormGroup, ControlLabel, Button, Row, Col, HelpBlock } from 'react-bootstrap';
|
||||
import { Trans, translate } from 'react-i18next';
|
||||
import Slider, { Range } from 'rc-slider';
|
||||
import Tooltip from 'rc-tooltip';
|
||||
// We can just import Slider or Range to reduce bundle size
|
||||
// import Slider from 'rc-slider/lib/Slider';
|
||||
// import Range from 'rc-slider/lib/Range';
|
||||
import 'rc-slider/assets/index.css';
|
||||
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';
|
||||
|
||||
// https://www.npmjs.com/package/rc-slider
|
||||
const createSliderWithTooltip = Slider.createSliderWithTooltip;
|
||||
const Handle = Slider.Handle;
|
||||
class Sandbox extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
adddress: ''
|
||||
};
|
||||
self = this;
|
||||
// this.handleSelect = this.handleSelect.bind(this)
|
||||
// this.handleChange = this.handleChange.bind(this)
|
||||
}
|
||||
|
||||
const handle = (props) => {
|
||||
const { value, dragging, index, ...restProps } = props;
|
||||
return (
|
||||
<Tooltip
|
||||
prefixCls="rc-slider-tooltip"
|
||||
overlay={value}
|
||||
visible={dragging}
|
||||
placement="top"
|
||||
key={index}
|
||||
>
|
||||
<Handle value={value} {...restProps} />
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
const wrapperStyle = { width: 400, margin: 50 };
|
||||
onChange = (address) => { this.setState({ address }) }
|
||||
|
||||
const Sandbox = props => (
|
||||
<div style={wrapperStyle}>
|
||||
<Slider min={5}
|
||||
max={100}
|
||||
trackStyle={{ backgroundColor: 'green', height: 8 }}
|
||||
railStyle={{ backgroundColor: 'orange', height: 8 }}
|
||||
handleStyle={{
|
||||
borderColor: 'green',
|
||||
height: 20,
|
||||
width: 20,
|
||||
marginLeft: -14,
|
||||
marginTop: -6,
|
||||
/* backgroundColor: 'gray', */
|
||||
}}
|
||||
defaultValue={10}
|
||||
step={5}
|
||||
handle={handle} />
|
||||
</div>
|
||||
);
|
||||
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");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Sandbox.defaultProps = {
|
||||
};
|
||||
onSliderChange = (value) => {
|
||||
this.setState(update(this.state, {$merge: {distance: value}}));
|
||||
}
|
||||
|
||||
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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Sandbox.propTypes = {
|
||||
};
|
||||
gkey: PropTypes.string
|
||||
}
|
||||
|
||||
export default translate([], { wait: true })(Sandbox);
|
||||
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));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue