Added area removing

imports/ui/components/Maps/Icons.js

@@ -16,18 +16,16 @@ export const nFireIcon = new Leaflet.Icon({
   iconUrl: '/n-fire-marker.png',
   iconSize: [16, 24], // size of the icon
   iconAnchor: [8, 26] // point of the icon which will correspond to marker's location
-  /* shadowUrl: require('../public/marker-shadow.png'), */
-  /* shadowSize:   [50, 64], // size of the shadow */
-  /* shadowAnchor: [4, 62],  // the same for the shadow
-   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
 });
 
 export const positionIcon = new Leaflet.Icon({
   iconUrl: '/your-position.png',
   iconSize: [50, 77], // size of the icon
   iconAnchor: [25, 82] // point of the icon which will correspond to marker's location
-  /* shadowSize:   [50, 64], // size of the shadow */
-  /* shadowUrl: require('../public/marker-shadow.png'), */
-  /* shadowAnchor: [4, 62],  // the same for the shadow
-   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
+});
+
+export const removeIcon = new Leaflet.Icon({
+  iconUrl: '/remove-marker.png',
+  iconSize: [24, 24], // size of the icon
+  iconAnchor: [12, 12] // point of the icon which will correspond to marker's location
 });

imports/ui/components/SelectionMap/SelectionMap.js

@@ -12,7 +12,7 @@ import { translate } from 'react-i18next';
 import { withTracker } from 'meteor/react-meteor-data';
 import update from 'immutability-helper';
 import geolocation from '/imports/startup/client/geolocation';
-import { positionIcon } from '/imports/ui/components/Maps/Icons';
+import { positionIcon, removeIcon } from '/imports/ui/components/Maps/Icons';
 import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
@@ -151,6 +151,7 @@ class SelectionMap extends Component {
   }
 
   render() {
+    const { t, onRemove } = this.props;
     return (
       <div>
         { this.isValidState() &&
@@ -169,10 +170,22 @@ class SelectionMap extends Component {
                 onViewportChanged={this.onViewportChanged}
                 sleepNote
                 hoverToWake
-                wakeMessage={this.props.t('Pulsa para activar')}
+                wakeMessage={t('Pulsa para activar')}
                 sleepOpacity={0.6}
             >
               <DefMapLayers gray={false} />
+              {this.props.action === action.edit &&
+               this.props.currentSubs.map(subs => (
+                   <Marker
+                       key={subs._id}
+                       draggable={false}
+                       position={[subs.location.lat, subs.location.lon]}
+                       icon={removeIcon}
+                       title={t('Pulsa para borrar')}
+                       onClick={() => { onRemove(subs._id); }}
+                   />
+               ))
+              }
               {this.props.action === action.add &&
                <Fragment>
                  <Marker
@@ -180,7 +193,7 @@ class SelectionMap extends Component {
                      onDragend={this.updatePosition}
                      position={this.state.marker}
                      icon={positionIcon}
-                     title={this.props.t('Arrastrar para seleccionar otro punto')}
+                     title={t('Arrastrar para seleccionar otro punto')}
                      ref={(ref) => { this.marker = ref; }}
                  />
                  <CircleMarker
@@ -242,6 +255,7 @@ SelectionMap.propTypes = {
   onFstBtn: PropTypes.func.isRequired,
   sndBtn: PropTypes.string,
   onSndBtn: PropTypes.func,
+  onRemove: PropTypes.func,
   action: PropTypes.number.isRequired,
   loadingSubs: PropTypes.bool,
   currentSubs: PropTypes.arrayOf(PropTypes.shape({

imports/ui/pages/Subscriptions/Subscriptions.js

@@ -4,7 +4,6 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
 import { Table, Alert, Button } from 'react-bootstrap';
 import { timeago } from '@cleverbeagle/dates';
 import { Meteor } from 'meteor/meteor';
@@ -34,6 +33,7 @@ class Subscriptions extends Component {
   }
 
   onSndBtn() {
+    console.log('Snd btn pressed');
     this.setState({ action: action.edit });
   }
 
@@ -79,51 +79,10 @@ class Subscriptions extends Component {
             onViewportChanged={viewport => this.onViewportChanged(viewport)}
             loadingSubs={this.props.loading}
             currentSubs={this.props.subscriptions}
+            onRemove={(id) => { this.handleRemove(id); }}
         />
-        {subscriptions.length ?
-         <Table responsive>
-           <thead>
-             <tr>
-               <th><Trans>Lugar</Trans></th>
-               <th><Trans>Actualizado</Trans></th>
-               <th><Trans>Creado</Trans>
-               </th>
-               <th />
-               <th />
-             </tr>
-           </thead>
-           <tbody>
-             {subscriptions.map(({
-                _id,
-                location,
-                createdAt,
-                updatedAt
-              }) => (
-                <tr key={_id}>
-                  <td>{location.lat},{location.lon}</td>
-                  <td>{timeago(updatedAt)}</td>
-                  <td>{timeago(createdAt)}</td>
-                  <td>
-                    <Button
-                        bsStyle="primary"
-                        onClick={() => history.push(`${match.url}/${_id}`)}
-                        block
-                    >View
-                    </Button>
-                  </td>
-                  <td>
-                    <Button
-                        bsStyle="danger"
-                        onClick={() => this.handleRemove(_id)}
-                        block
-                    >Delete
-                    </Button>
-                  </td>
-                </tr>
-              ))}
-           </tbody>
-         </Table> :
-         <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert>
+        { subscriptions.length === 0 &&
+          <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert>
         }
       </div>
     ) : <Loading />);