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);
@@ -166,52 +172,53 @@ class SelectionMap extends Component {
                 wakeMessage={this.props.t('Pulsa para activar')}
                 sleepOpacity={0.6}
             >
-          <DefMapLayers gray={false} />
-              {!this.props.readOnly &&
-              <Marker
-                  draggable={this.state.draggable}
-                  onDragend={this.updatePosition}
-                  position={this.state.marker}
-                  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"
-                  stroke={false}
-                  fillOpacity="1"
-                  fill
-                  radius={3}
-              /> }
-              {!this.props.readOnly &&
-              <Circle
-                  center={this.state.marker}
-                  ref={(ref) => { this.distanceCircle = ref; }}
-                  color="#145A32"
-                  fillColor="green"
-                  fillOpacity={0.1}
-                  radius={this.state.distance * 1000}
-              /> }
-              <Control position="topright" >
-                <ButtonGroup>
-                  { this.props.sndBtn && this.props.onSndBtn &&
-                    <Button
-                        bsStyle="warning"
-                        onClick={event => this.onSndBtn(event)}
-                    >
-                      {this.props.sndBtn}
-                    </Button>
-                  }
-                    <Button
-                        bsStyle="success"
-                        onClick={event => this.onFstBtn(event)}
-                    >
-                      {this.props.fstBtn}
-                    </Button>
-                </ButtonGroup>
-              </Control>
+              <DefMapLayers gray={false} />
+              {this.props.action === action.add &&
+               <Fragment>
+                 <Marker
+                     draggable={this.state.draggable}
+                     onDragend={this.updatePosition}
+                     position={this.state.marker}
+                     icon={positionIcon}
+                     title={this.props.t('Arrastrar para seleccionar otro punto')}
+                     ref={(ref) => { this.marker = ref; }}
+                 />
+                 <CircleMarker
+                     center={this.state.marker}
+                     color="red"
+                     stroke={false}
+                     fillOpacity="1"
+                     fill
+                     radius={3}
+                 />
+                 <Circle
+                     center={this.state.marker}
+                     ref={(ref) => { this.distanceCircle = ref; }}
+                     color="#145A32"
+                     fillColor="green"
+                     fillOpacity={0.1}
+                     radius={this.state.distance * 1000}
+                 />
+               </Fragment>
+              }
+               <Control position="topright" >
+                 <ButtonGroup>
+                   { this.props.sndBtn && this.props.onSndBtn &&
+                     <Button
+                         bsStyle="warning"
+                         onClick={event => this.onSndBtn(event)}
+                     >
+                       {this.props.sndBtn}
+                     </Button>
+                   }
+                     <Button
+                         bsStyle="success"
+                         onClick={event => this.onFstBtn(event)}
+                     >
+                       {this.props.fstBtn}
+                     </Button>
+                 </ButtonGroup>
+               </Control>
             </Map>
           </div>
         }
@@ -235,8 +242,7 @@ SelectionMap.propTypes = {
   onFstBtn: PropTypes.func.isRequired,
   sndBtn: PropTypes.string,
   onSndBtn: PropTypes.func,
-  readOnly: PropTypes.bool.isRequired,
-  edit: PropTypes.bool.isRequired,
+  action: PropTypes.number.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}
-              edit={false}
+              action={action.add}
               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
-            edit={this.state.edit}
+            action={this.state.action}
             fstBtn={t('Añadir zona')}
             onFstBtn={state => this.onFstBtn(state)}
             sndBtn={this.props.subscriptions.length > 1 ? t('Editar') : null}