From 93d9ca43f1c3c584a378111c0c9dab40ebdb1b60 Mon Sep 17 00:00:00 2001 From: vjrj Date: Wed, 6 Dec 2017 17:10:47 +0100 Subject: [PATCH] Improved subs form --- imports/startup/client/i18n.js | 8 ++- imports/startup/client/ravenLogger.js | 17 +++--- .../DistanceSlider/DistanceSlider.js | 4 +- .../components/SelectionMap/SelectionMap.js | 15 +++++- .../FireSubscription/FireSubscription.js | 43 +++++++-------- .../FireSubscription/SubsAutocomplete.js | 54 +++++++++---------- imports/ui/pages/Sandbox/Sandbox.js | 10 ++-- package.json | 1 + 8 files changed, 81 insertions(+), 71 deletions(-) diff --git a/imports/startup/client/i18n.js b/imports/startup/client/i18n.js index 2de5331..713bccc 100644 --- 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: 'ð', diff --git a/imports/startup/client/ravenLogger.js b/imports/startup/client/ravenLogger.js index ffe19f2..6b69209 100644 --- 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({ - 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); + 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); +} diff --git a/imports/ui/components/DistanceSlider/DistanceSlider.js b/imports/ui/components/DistanceSlider/DistanceSlider.js index f1b2e6f..841840a 100644 --- 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', diff --git a/imports/ui/components/SelectionMap/SelectionMap.js b/imports/ui/components/SelectionMap/SelectionMap.js index 5f8ddf0..3fc17e7 100644 --- 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"> + + + } ) diff --git a/imports/ui/pages/FireSubscription/FireSubscription.js b/imports/ui/pages/FireSubscription/FireSubscription.js index 14ddfdb..9520995 100644 --- 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,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
+ } else return (
- { init && - -
-

Suscríbete a alertas de fuegos

- + +
+

Suscríbete a alertas de fuegos

+
- - - - - - - } - - - + + + + + + + +
) } diff --git a/imports/ui/pages/FireSubscription/SubsAutocomplete.js b/imports/ui/pages/FireSubscription/SubsAutocomplete.js index 4d17e16..cb7e837 100644 --- 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,33 +58,33 @@ class SubsAutocomplete extends React.Component { Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc): - { console.log('Blur event!'); }, - onFocus:() => { console.log('Focused!'); }, - autoFocus:true - }} /> + { /* console.log('Blur event!'); */ }, + onFocus:() => { /* console.log('Focused!'); */ }, + autoFocus:true + }} /> También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja. diff --git a/imports/ui/pages/Sandbox/Sandbox.js b/imports/ui/pages/Sandbox/Sandbox.js index 4c7f9e8..5886061 100644 --- 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 (
-
) } } - - export default translate([], { wait: true }) (Sandbox); diff --git a/package.json b/package.json index e423bf3..bccb967 100644 --- 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",