Many improvements in SelectionMap

2017-12-21 10:57:00 +01:00 · 2017-12-21 10:57:00 +01:00 · e3eddd6b85
commit e3eddd6b85
parent 7a672bca87
13 changed files with 173 additions and 132 deletions
--- a/imports/ui/components/DistanceSlider/DistanceSlider.js
+++ b/imports/ui/components/DistanceSlider/DistanceSlider.js
@ -56,7 +56,7 @@ class DistanceSlider extends React.Component {
      <div className="dist-slider">
        <p><Trans parent="span">¿A que distancia a la redonda quieres recibir notificaciones?</Trans></p>
        <Slider
-            min={5}
+            min={1}
            max={105}
            value={this.state.value}
            trackStyle={{ backgroundColor: 'green', height: 8 }}
@ -68,7 +68,8 @@ class DistanceSlider extends React.Component {
              height: 8
            }}
            marks={{
-              10: { label: '10км' },
+              1: { label: '1км' },
+              10: { label: '10' },
              20: { label: '20' },
              30: { label: '30' },
              40: { label: '40' },
@ -90,7 +91,7 @@ class DistanceSlider extends React.Component {
            onAfterChange={this.onAfterChange}
            onChange={this.onSliderChange}
            defaultValue={10}
-            step={5}
+            step={1}
            handle={handle}
        />
      </div>
--- a/imports/ui/components/Prompt/Prompt.js
+++ b/imports/ui/components/Prompt/Prompt.js
@ -7,56 +7,8 @@ import PropTypes from 'prop-types';
 import { Modal, Button } from 'react-bootstrap';
 import { confirmable } from 'react-confirm';

+// https://github.com/haradakunihiko/react-confirm/blob/master/example/react-bootstrap/src/components/Confirmation.js
 class Prompt extends Component {
-  // constructor(props) {
-  /* super(props);
-     * this.state = {
-     *   open: true
-     * };
-       }
-
-       componentDidMount() {
-     * console.log(this.prompt);
-     * this.setState({ open: true });
-       }
-     */
-
-  render2() {
-    const {
-      show,
-      proceed,
-      dismiss,
-      cancel,
-      confirmation,
-      okBtn,
-      cancelBtn
-    } = this.props;
-    return (
-      <div
-          className="modal"
-tabIndex="-1"
-role="dialog"
-      >
-        <div className="modal-dialog" role="document">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5 className="modal-title">Modal title</h5>
-              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </div>
-            <div className="modal-body">
-              <p>Modal body text goes here.</p>
-            </div>
-            <div className="modal-footer">
-              <button type="button" className="btn btn-primary">Save changes</button>
-              <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
  render() {
    const {
      show,
@ -66,6 +18,7 @@ role="dialog"
      confirmation,
      okBtn,
      cancelBtn,
+      title,
      enableEscape = true
    } = this.props;
    return (
@ -78,9 +31,11 @@ role="dialog"
            backdrop={enableEscape ? true : 'static'}
            keyboard={enableEscape}
        >
-          <Modal.Header closeButton>
-            <Modal.Title id="ModalHeader" />
-          </Modal.Header>
+          {title &&
+           <Modal.Header closeButton>
+             <Modal.Title id="ModalHeader">{title}</Modal.Title>
+           </Modal.Header>
+          }
          <Modal.Body>
            <p>{confirmation}</p>
          </Modal.Body>
@ -100,6 +55,7 @@ Prompt.propTypes = {
  cancel: PropTypes.func, // from confirmable. call to close the dialog with promise rejected.
  dismiss: PropTypes.func, // from confirmable. call to only close the dialog.
  confirmation: PropTypes.string, // arguments of your confirm function
+  title: PropTypes.string,
  okBtn: PropTypes.string.isRequired,
  cancelBtn: PropTypes.string.isRequired,
  enableEscape: PropTypes.bool
--- a/imports/ui/components/SelectionMap/SelectionMap.js
+++ b/imports/ui/components/SelectionMap/SelectionMap.js
@ -6,7 +6,8 @@

 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Map, Marker, CircleMarker, Circle } from 'react-leaflet';
+import { Meteor } from 'meteor/meteor';
+import { Map, Marker, CircleMarker, Circle, Tooltip } from 'react-leaflet';
 import Leaflet from 'leaflet';
 import { translate } from 'react-i18next';
 import { withTracker } from 'meteor/react-meteor-data';
@ -20,6 +21,7 @@ import 'leaflet-sleep/Leaflet.Sleep.js';
 import Control from 'react-leaflet-control';
 import { Button, ButtonGroup } from 'react-bootstrap';
 import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
+import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
 import './SelectionMap.scss';

 export const action = {
@ -114,7 +116,12 @@ class SelectionMap extends Component {
    if (this.props.currentSubs.length > 0 && this.state.subsFit) {
      // has autofit, do nothing
    } else if (this.selectionMap && this.distanceCircle) {
-      this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]);
+      if (!this.getMap().getBounds().contains(this.distanceCircle.leafletElement.getBounds())) {
+        // console.log('New area circle not visible');
+        this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds()); // padding , [70, 70]);
+      } else {
+        // console.log('New area circle visible');
+      }
    }
  }

@ -132,7 +139,7 @@ class SelectionMap extends Component {
  }

  isValidState() {
-    return this.state.center && this.state.center[0];
+    return !this.props.loadingSubs && this.state.center && this.state.center[0];
  }

  handleLeafletLoad(map) {
@ -175,7 +182,7 @@ class SelectionMap extends Component {
            >
              <DefMapLayers gray={false} />
              {this.props.action === action.edit &&
-               this.props.currentSubs.map(subs => (
+               this.props.currentSubs.map((subs, index) => (
                   <Marker
                       key={subs._id}
                       draggable={false}
@ -183,7 +190,18 @@ class SelectionMap extends Component {
                       icon={removeIcon}
                       title={t('Pulsa para borrar')}
                       onClick={() => { onRemove(subs._id); }}
-                   />
+                   >
+                     {index === 0 &&
+                      <Tooltip
+                       permanent
+                       direction="right"
+                       /* Use .openTooltip(); in the future */
+                       offset={[10, -10]}
+                      >
+                       <span>{t('Pulsa aquí para borrar la zona')}</span>
+                      </Tooltip>
+                     }
+                   </Marker>
               ))
              }
              {this.props.action === action.add &&
@ -257,14 +275,20 @@ SelectionMap.propTypes = {
  onSndBtn: PropTypes.func,
  onRemove: PropTypes.func,
  action: PropTypes.number.isRequired,
-  loadingSubs: PropTypes.bool,
+  loadingSubs: PropTypes.bool.isRequired,
  currentSubs: PropTypes.arrayOf(PropTypes.shape({
    location: PropTypes.shape({ latitude: PropTypes.number, longitude: PropTypes.number }).isRequired,
    distance: PropTypes.number.isRequired
  }))
 };

-export default translate([], { wait: true })(withTracker(props => ({
-  center: props.center[0] !== null ? props.center : geolocation.get(),
-  distance: props.distance
-}))(SelectionMap));
+export default translate([], { wait: true })(withTracker((props) => {
+  const subscription = Meteor.subscribe('mysubscriptions');
+  // console.log(props.loadingSubs);
+  return {
+    center: props.center[0] !== null ? props.center : geolocation.get(),
+    distance: props.distance,
+    loadingSubs: !subscription.ready(),
+    currentSubs: UserSubsToFiresCollection.find({ owner: Meteor.userId(), type: 'web' }).fetch()
+  };
+})(SelectionMap));
--- a/imports/ui/components/SubscriptionEditor/SubscriptionEditor.js
+++ b/imports/ui/components/SubscriptionEditor/SubscriptionEditor.js
@ -30,16 +30,22 @@ class SubscriptionEditor extends React.Component {

    if (existingSubscription) doc._id = existingSubscription;

-    Meteor.call(methodToCall, doc, (error, subscriptionId) => {
-      if (error) {
-        Bert.alert(error.reason, 'danger');
-      } else {
-        const confirmation = existingSubscription ? t('Zona actualizada') : t('Zona añadida');
-        Bert.alert(confirmation, 'success');
-        // history.push(`/subscriptions/${subscriptionId}`);
-        history.push('/subscriptions');
-      }
-    });
+    const authenticated = !!Meteor.userId();
+
+    if (authenticated) {
+      Meteor.call(methodToCall, doc, (error, subscriptionId) => {
+        if (error) {
+          Bert.alert(error.reason, 'danger');
+        } else {
+          const confirmation = existingSubscription ? t('Zona actualizada') : t('Zona añadida');
+          Bert.alert(confirmation, 'success');
+          // history.push(`/subscriptions/${subscriptionId}`);
+          history.push('/subscriptions');
+        }
+      });
+    } else {
+      this.props.history.push('/signup', doc);
+    }
  }

  render() {