Subs form (wip)

imports/ui/components/DistanceSlider/DistanceSlider.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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';
+
+// https://www.npmjs.com/package/rc-slider
+const createSliderWithTooltip = Slider.createSliderWithTooltip;
+const Handle = Slider.Handle;
+
+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 };
+
+// https://github.com/react-component/slider/tree/master/examples
+
+class DistanceSlider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 10,
+    };
+  }
+
+  onSliderChange = (value) => {
+    // console.log(value);
+    this.setState({
+      value,
+    });
+    this.props.onChange(value);
+  }
+
+  onAfterChange = (value) => {
+    // console.log(`After change: ${value}`); //eslint-disable-line
+    this.props.onChange(value);
+  }
+
+  render() {
+    return (
+
+      <div style={wrapperStyle}>
+        <p><Trans parent="span">¿A que distancia a la redonda quieres recibir notificaciones?</Trans></p>
+        <Slider min={5}
+                max={105}
+                value={this.state.value}
+                trackStyle={{ backgroundColor: 'green', height: 8 }}
+                railStyle={{ backgroundColor: 'orange', height: 8 }}
+                dotStyle={{ top: 0, marginLeft: -1, width: 2, height: 8 }}
+                marks={{
+                  10:  {style: {}, label: "10"},
+                  20:  {style: {}, label: "20"},
+                  30:  {style: {}, label: "30"},
+                  40:  {style: {}, label: "40"},
+                  50:  {style: {}, label: "50"},
+                  60:  {style: {}, label: "60"},
+                  70:  {style: {}, label: "70"},
+                  80:  {style: {}, label: "80"},
+                  90:  {style: {}, label: "90"},
+                  100: {style: {}, label: "100"}
+                }}
+                handleStyle={{
+                  borderColor: 'green',
+                  height: 20,
+                  width: 20,
+                  marginLeft: -10,
+                  marginTop: -6,
+                  /* backgroundColor: 'gray', */
+                }}
+                onAfterChange={this.onAfterChange}
+                onChange={this.onSliderChange}
+                defaultValue={10}
+                step={5}
+                handle={handle} />
+      </div>
+    )
+  }
+}
+
+export default translate([], { wait: true })(DistanceSlider);

imports/ui/components/SelectionMap/SelectionMap.js

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Map, TileLayer, Marker, Popup, CircleMarker, Circle} from 'react-leaflet';
+import Leaflet from 'leaflet';
+import { withTracker } from 'meteor/react-meteor-data';
+import { translate } from 'react-i18next';
+import geolocation from '/imports/startup/client/geolocation';
+import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
+import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
+
+const positionIcon = new Leaflet.Icon({
+  iconUrl: "/your-position.png",
+  /* shadowUrl: require('../public/marker-shadow.png'), */
+  iconSize:     [50, 77], // size of the icon
+  /* shadowSize:   [50, 64], // size of the shadow */
+  iconAnchor:   [25, 82], // point of the icon which will correspond to marker's location
+  /* shadowAnchor: [4, 62],  // the same for the shadow
+   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor*/
+})
+
+class SelectionMap extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      center: geolocation.get(),
+      marker: geolocation.get(),
+      zoom: 11,
+      draggable: true,
+      modified: false
+    };
+    // console.log(this.state);
+  }
+
+  componentDidUpdate = () => {
+    this.fit();
+  }
+
+  getMap = () => {
+    return this.refs.selectionMap.leafletElement;
+  }
+
+  toggleDraggable = () => {
+    this.setState({ draggable: !this.state.draggable })
+  }
+
+  updatePosition = () => {
+    const { lat, lng } = this.refs.marker.leafletElement.getLatLng()
+    this.setState({
+      marker: [ lat, lng ],
+      modified: true
+    });
+  }
+
+  fit() {
+    // console.log("fit!");
+    this.getMap().fitBounds(this.refs.distanceCircle.leafletElement.getBounds(), [70, 70]);
+  }
+
+  componentDidMount() {
+    this.addScale();
+  }
+
+  addScale = () => {
+    // https://www.npmjs.com/package/leaflet-graphicscale
+    const map = this.getMap();
+    var options = {
+      fill: 'fill',
+      showSubunits: true,
+    }
+    var graphicScale = L.control.graphicScale([options]).addTo(map);
+  }
+
+  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.props.distance;
+    this.state.modified = false;
+    return (
+      <div>
+      { this.state && this.state.center &&
+        <Map center={this.state.center} zoom={this.state.zoom} ref="selectionMap">
+        <TileLayer
+          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker
+            draggable={this.state.draggable}
+            onDragend={this.updatePosition}
+            position={this.state.marker}
+            icon={positionIcon}
+          ref="marker">
+        </Marker>
+        <CircleMarker
+            center={this.state.marker} color="red"
+            stroke={false}
+            fillOpacity="1"
+            fill={true}
+            radius={3} />
+        <Circle center={this.state.marker}
+                ref="distanceCircle"
+                color="#145A32"
+                fillColor="green"
+                fillOpacity={.1}
+                radius={this.state.distance * 1000} />
+        </Map> }
+      </div>
+    )
+  }
+}
+
+SelectionMap.propTypes = {
+  lat: PropTypes.number,
+  lng: PropTypes.number,
+  distance: PropTypes.number
+};
+
+export default translate([], { wait: true })(SelectionMap);