Added action to SelectionMap

imports/ui/components/SelectionMap/SelectionMap.js

@@ -4,7 +4,7 @@
 /* eslint-disable import/no-absolute-path */
 /* eslint-disable import/no-absolute-path */
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Map, Marker, CircleMarker, Circle } from 'react-leaflet';
 import Leaflet from 'leaflet';
@@ -22,6 +22,12 @@ import { Button, ButtonGroup } from 'react-bootstrap';
 import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
 import './SelectionMap.scss';
 
+export const action = {
+  view: 0,
+  add: 1,
+  edit: 2
+};
+
 class SelectionMap extends Component {
   constructor(props) {
     super(props);
@@ -137,7 +143,7 @@ class SelectionMap extends Component {
         fit: this.state.subsFit,
         subs: this.props.currentSubs
       };
-      if (!this.props.readOnly) {
+      if (this.props.action === action.add) {
         subsOpts.color = '#F2F2F2';
       }
       this.state.union = subsUnion(this.state.union, subsOpts);
@@ -167,7 +173,8 @@ class SelectionMap extends Component {
                 sleepOpacity={0.6}
             >
               <DefMapLayers gray={false} />
-              {!this.props.readOnly &&
+              {this.props.action === action.add &&
+               <Fragment>
                  <Marker
                      draggable={this.state.draggable}
                      onDragend={this.updatePosition}
@@ -175,8 +182,7 @@ class SelectionMap extends Component {
                      icon={positionIcon}
                      title={this.props.t('Arrastrar para seleccionar otro punto')}
                      ref={(ref) => { this.marker = ref; }}
-              /> }
+                 />
-              {!this.props.readOnly &&
                  <CircleMarker
                      center={this.state.marker}
                      color="red"
@@ -184,8 +190,7 @@ class SelectionMap extends Component {
                      fillOpacity="1"
                      fill
                      radius={3}
-              /> }
+                 />
-              {!this.props.readOnly &&
                  <Circle
                      center={this.state.marker}
                      ref={(ref) => { this.distanceCircle = ref; }}
@@ -193,7 +198,9 @@ class SelectionMap extends Component {
                      fillColor="green"
                      fillOpacity={0.1}
                      radius={this.state.distance * 1000}
-              /> }
+                 />
+               </Fragment>
+              }
                <Control position="topright" >
                  <ButtonGroup>
                    { this.props.sndBtn && this.props.onSndBtn &&
@@ -235,8 +242,7 @@ SelectionMap.propTypes = {
   onFstBtn: PropTypes.func.isRequired,
   sndBtn: PropTypes.string,
   onSndBtn: PropTypes.func,
-  readOnly: PropTypes.bool.isRequired,
+  action: PropTypes.number.isRequired,
-  edit: PropTypes.bool.isRequired,
   loadingSubs: PropTypes.bool,
   currentSubs: PropTypes.arrayOf(PropTypes.shape({
     location: PropTypes.shape({ latitude: PropTypes.number, longitude: PropTypes.number }).isRequired,

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -7,7 +7,7 @@ import { withTracker } from 'meteor/react-meteor-data';
 import { Row, Col } from 'react-bootstrap';
 import { translate } from 'react-i18next';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
-import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
+import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap';
 import Gkeys from '/imports/startup/client/Gkeys';
 import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
@@ -95,8 +95,7 @@ class FireSubscription extends React.Component {
               fstBtn={this.props.subsBtn}
               onFstBtn={state => this.onSubs(state)}
               onSelection={state => this.onSelection(state)}
-              readOnly={false}
+              action={action.add}
-              edit={false}
               loadingSubs={this.props.loading}
               currentSubs={this.props.subscriptions}
           />

imports/ui/pages/Subscriptions/Subscriptions.js

@@ -12,7 +12,7 @@ import { withTracker } from 'meteor/react-meteor-data';
 import { Trans, translate } from 'react-i18next';
 import { Bert } from 'meteor/themeteorchef:bert';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
-import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
+import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap';
 import Loading from '../../components/Loading/Loading';
 import './Subscriptions.scss';
 
@@ -21,7 +21,7 @@ class Subscriptions extends Component {
     super(props);
     this.t = props.t;
     this.state = {
-      edit: false
+      action: action.view
     };
     this.onViewportChanged = this.onViewportChanged.bind(this);
     this.onFstBtn = this.onFstBtn.bind(this);
@@ -29,12 +29,12 @@ class Subscriptions extends Component {
   }
 
   onFstBtn() {
-    console.log(this.state);
+    // console.log(this.state);
     this.props.history.push(`${this.props.match.url}/new`, { center: this.state.center, zoom: this.state.zoom });
   }
 
   onSndBtn() {
-    this.state.edit = true;
+    this.setState({ action: action.edit });
   }
 
   onViewportChanged(viewport) {
@@ -66,14 +66,12 @@ class Subscriptions extends Component {
       <div className="Subscriptions">
         <div className="page-header clearfix">
           <h4 className="pull-left"><Trans>Suscripciones a fuegos en zonas de mi interés</Trans></h4>
-          <Link className="btn btn-success pull-right" to={`${match.url}/new`}><Trans>Añadir zona</Trans></Link>
         </div>
         <br />
         <SelectionMap
             center={[null, null]}
             zoom={11}
-            readOnly
+            action={this.state.action}
-            edit={this.state.edit}
             fstBtn={t('Añadir zona')}
             onFstBtn={state => this.onFstBtn(state)}
             sndBtn={this.props.subscriptions.length > 1 ? t('Editar') : null}