Improved subs form

2017-12-06 17:10:47 +01:00 · 2017-12-06 17:10:47 +01:00 · 93d9ca43f1
commit 93d9ca43f1
parent b40309e80b
8 changed files with 81 additions and 71 deletions
--- a/imports/startup/client/i18n.js
+++ b/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: 'ð',
--- a/imports/startup/client/ravenLogger.js
+++ b/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);
+}
--- a/imports/ui/components/DistanceSlider/DistanceSlider.js
+++ b/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',
--- a/imports/ui/components/SelectionMap/SelectionMap.js
+++ b/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>
    )
--- a/imports/ui/pages/FireSubscription/FireSubscription.js
+++ b/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>
--- a/imports/ui/pages/FireSubscription/SubsAutocomplete.js
+++ b/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!'); },
-                    onFocus:() => { console.log('Focused!'); },
+                  onBlur:() => { /* console.log('Blur event!'); */ },
+                  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>
--- a/imports/ui/pages/Sandbox/Sandbox.js
+++ b/imports/ui/pages/Sandbox/Sandbox.js
@ -10,24 +10,20 @@ class Sandbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      lat: 0,
-      lng: 0
+      init: false
    };
  }

-  onSliderChange = (value) => {
-    this.setState(update(this.state, {$merge: {distance: value}}));
+  componentDidMount = () => {
+    this.setState({init: true});
  }

  render() {
    return (
      <div>
        <FireSubscription />
-
      </div>
    )
  }
 }
-
-
 export default translate([], { wait: true }) (Sandbox);
--- a/package.json
+++ b/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",