Improved subs form

imports/startup/client/i18n.js

@@ -2,6 +2,7 @@ import i18n from 'i18next';
 import backend from 'i18next-xhr-backend';
 import LngDetector from 'i18next-browser-languagedetector';
 import Cache from 'i18next-localstorage-cache';
+import { Meteor } from 'meteor/meteor';
 import { T9n } from 'meteor-accounts-t9n';
 import en from 'meteor-accounts-t9n/build/en';
 import es from 'meteor-accounts-t9n/build/es';
@@ -47,6 +48,9 @@ var backOpts = {
 
 T9N_LANGUAGES='es,en';
 
+const forceDebug = false;
+const shouldDebug = (forceDebug && !Meteor.isProduction);
+
 i18n.use(backend)
   .use(LngDetector)
   .use(Cache)
@@ -75,10 +79,10 @@ i18n.use(backend)
     whitelist: false,
     // whitelist: ['es', 'en'], // allowed languages
     load: 'all', // es-ES -> es, en-US -> en
-    debug: false,
+    debug: shouldDebug,
     ns: 'common',
     defaultNS: 'common',
-    saveMissing: true, // if true seems it's fails to getResourceBundle
+    saveMissing: shouldDebug, // if true seems it's fails to getResourceBundle
     saveMissingTo: 'es',
     keySeparator: 'ß',
     nsSeparator: 'ð',

imports/startup/client/ravenLogger.js

@@ -1,10 +1,13 @@
 import RavenLogger from 'meteor/flowkey:raven';
+import { Meteor } from 'meteor/meteor';
 
-var ravenOptions = {};
+if (Meteor.isProduction) {
+  var ravenOptions = {};
 
-export const ravenLogger = new RavenLogger({
+  export const ravenLogger = new RavenLogger({
     publicDSN: Meteor.settings.public.sentryPublicDSN, // will be used on the client
     privateDSN: Meteor.settings.sentryPrivateDSN, // will be used on the server
     shouldCatchConsoleError: true, // default
     trackUser: false, // default
-}, ravenOptions);
+  }, ravenOptions);
+}

imports/ui/components/DistanceSlider/DistanceSlider.js

@@ -64,7 +64,7 @@ class DistanceSlider extends React.Component {
                 railStyle={{ backgroundColor: 'orange', height: 8 }}
                 dotStyle={{ top: 0, marginLeft: -1, width: 2, height: 8 }}
                 marks={{
-                  10:  {style: {}, label: "10"},
+                  10:  {style: {}, label: "10км"},
                   20:  {style: {}, label: "20"},
                   30:  {style: {}, label: "30"},
                   40:  {style: {}, label: "40"},
@@ -73,7 +73,7 @@ class DistanceSlider extends React.Component {
                   70:  {style: {}, label: "70"},
                   80:  {style: {}, label: "80"},
                   90:  {style: {}, label: "90"},
-                  100: {style: {}, label: "100"}
+                  100: {style: {}, label: "100км"}
                 }}
                 handleStyle={{
                   borderColor: 'green',

imports/ui/components/SelectionMap/SelectionMap.js

@@ -3,10 +3,13 @@ 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 { translate, Trans } 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';
+import Control from 'react-leaflet-control';
+import { Button } from 'react-bootstrap';
+import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
 
 const positionIcon = new Leaflet.Icon({
   iconUrl: "/your-position.png",
@@ -70,6 +73,10 @@ class SelectionMap extends Component {
     var graphicScale = L.control.graphicScale([options]).addTo(map);
   }
 
+  doSubs = (event) => {
+    console.log(event);
+  }
+
   render() {
     this.state.center = !this.state.modified && this.props.lat?
                         [this.props.lat, this.props.lng]: this.state.center;
@@ -90,6 +97,7 @@ class SelectionMap extends Component {
             onDragend={this.updatePosition}
             position={this.state.marker}
             icon={positionIcon}
+            title={this.props.t("Arrastrar para seleccionar otro punto")}
           ref="marker">
         </Marker>
         <CircleMarker
@@ -104,6 +112,11 @@ class SelectionMap extends Component {
                 fillColor="green"
                 fillOpacity={.1}
                 radius={this.state.distance * 1000} />
+        <Control position="topright" >
+          <Button bsStyle="success" onClick={this.doSubs}>
+            {this.props.t("Subscribirme a fuegos en este rádio")}
+          </Button>
+         </Control>
         </Map> }
       </div>
     )

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -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,11 +34,12 @@ 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>
@@ -54,10 +49,8 @@ class FireSubscription extends React.Component {
             </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>

imports/ui/pages/FireSubscription/SubsAutocomplete.js

@@ -9,9 +9,9 @@ class SubsAutocomplete extends React.Component {
     this.state = {
       adddress: '',
     }
+    this.onChange = (address) => { this.setState({ address }) }
   }
 
-  onChange = (address) => { this.setState({ address }) }
 
   handleSelect = (address) => {
     const self = this;
@@ -58,6 +58,7 @@ class SubsAutocomplete extends React.Component {
         <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={{
@@ -80,11 +81,10 @@ class SubsAutocomplete extends React.Component {
                   value: this.state.address,
                   onChange: this.onChange,
                   placeholder: this.props.t("Escribe aquí un lugar "),
-                    onBlur:() => { console.log('Blur event!'); },
+                  onBlur:() => { /* console.log('Blur event!'); */ },
-                    onFocus:() => { console.log('Focused!'); },
+                  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>

imports/ui/pages/Sandbox/Sandbox.js

@@ -10,24 +10,20 @@ class Sandbox extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      lat: 0,
+      init: false
-      lng: 0
     };
   }
 
-  onSliderChange = (value) => {
+  componentDidMount = () => {
-    this.setState(update(this.state, {$merge: {distance: value}}));
+    this.setState({init: true});
   }
 
   render() {
     return (
       <div>
         <FireSubscription />
-
       </div>
     )
   }
 }
-
-
 export default translate([], { wait: true }) (Sandbox);

package.json

@@ -43,6 +43,7 @@
     "react-dom": "^15.6.1",
     "react-i18next": "^6.1.0",
     "react-leaflet": "^1.7.7",
+    "react-leaflet-control": "^1.4.0",
     "react-places-autocomplete": "^5.4.3",
     "react-resize-detector": "^1.1.0",
     "react-router-bootstrap": "^0.24.3",