Added area removing

designs/icons-tcef.svg

@@ -245,14 +245,14 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="0.24748737"
-     inkscape:cx="-594.08486"
-     inkscape:cy="654.87036"
+     inkscape:zoom="0.25"
+     inkscape:cx="-324.9908"
+     inkscape:cy="1157.3585"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
      inkscape:window-width="1920"
-     inkscape:window-height="983"
+     inkscape:window-height="1016"
      inkscape:window-x="0"
      inkscape:window-y="867"
      inkscape:window-maximized="1" />
@@ -264,7 +264,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -481,5 +481,21 @@
            style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:9.36170292;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
       </g>
     </g>
-  </g>
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot8482"
+       style="font-style:normal;font-weight:normal;font-size:192px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;"
+       transform="matrix(0.26458333,0,0,0.26458333,433.29892,-64.826953)"
+       inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/remove-marker.png"
+       inkscape:export-xdpi="14.000002"
+       inkscape:export-ydpi="14.000002"><flowRegion
+         id="flowRegion8484"
+         style="font-size:192px;fill:#ff0000;"><rect
+           id="rect8486"
+           width="476.79202"
+           height="367.69553"
+           x="-1499.0664"
+           y="-142.19131"
+           style="font-size:192px;fill:#ff0000;" /></flowRegion><flowPara
+         id="flowPara8488"></flowPara></flowRoot>  </g>
 </svg>

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,50 +79,9 @@ 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> :
+        { subscriptions.length === 0 &&
           <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert>
         }
       </div>