Fire popupsand active/archive urls

imports/ui/components/Maps/FireCircleMark.js

@@ -1,19 +1,32 @@
 import React from 'react';
 import { Circle } from 'react-leaflet';
 import PropTypes from 'prop-types';
+import FirePopup from './FirePopup';
 
 const FireCircleMark = ({
   lat,
   lon,
-  scan
+  nasa,
+  scan,
+  id,
+  when,
+  history,
+  t
 }) => (
-  <Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 1000} />
+  <Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 1000}>
+    <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
+  </Circle>
 );
 
 FireCircleMark.propTypes = {
   scan: PropTypes.number.isRequired,
   lat: PropTypes.number.isRequired,
-  lon: PropTypes.number.isRequired
+  lon: PropTypes.number.isRequired,
+  nasa: PropTypes.bool.isRequired,
+  id: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+  when: PropTypes.instanceOf(Date).isRequired,
+  t: PropTypes.func.isRequired
 };
 
 export default FireCircleMark;

imports/ui/components/Maps/FireIconMark.js

@@ -3,15 +3,25 @@ import React from 'react';
 import { CircleMarker, Marker } from 'react-leaflet';
 import PropTypes from 'prop-types';
 import { fireIcon, nFireIcon } from '/imports/ui/components/Maps/Icons';
+import { translate } from 'react-i18next';
+import FirePopup from './FirePopup';
 
 const FireIconMark = ({
   lat,
   lon,
-  nasa
+  nasa,
+  id,
+  history,
+  when,
+  t
 }) => (
   <div>
-    <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon} />
-    <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1} />
+    <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon}>
+      <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
+    </Marker>
+    <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1}>
+      <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
+    </CircleMarker>
   </div>
 );
 
@@ -19,7 +29,11 @@ FireIconMark.propTypes = {
   // https://github.com/PaulLeCam/react-leaflet/tree/master/src/propTypes
   lat: PropTypes.number.isRequired,
   lon: PropTypes.number.isRequired,
-  nasa: PropTypes.bool.isRequired
+  nasa: PropTypes.bool.isRequired,
+  id: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+  when: PropTypes.instanceOf(Date).isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default FireIconMark;
+export default translate([], { wait: true })(FireIconMark);

imports/ui/components/Maps/FireList.js

@@ -9,18 +9,18 @@ import FirePixel from '/imports/ui/components/Maps/FirePixel';
 
 export default function FireList(props) {
   const {
-    fires, scale, useMarkers, nasa
+    fires, scale, useMarkers, nasa, t, history
   } = props;
   const useMarks = useMarkers && scale;
   const usePixel = !nasa || !scale;
   /* console.log(`Using marks: ${useMarks}, using pixels: ${usePixel}`); */
   let items;
   if (useMarks) {
-    items = fires.map(({ _id, ...otherProps }) => (<FireIconMark key={_id} nasa={nasa} {...otherProps} />));
+    items = fires.map(({ _id, ...otherProps }) => (<FireIconMark t={t} history={history} id={_id} key={_id} nasa={nasa} {...otherProps} />));
   } else if (usePixel) {
     items = fires.map(({ _id, ...otherProps }) => (<FirePixel key={_id} nasa={nasa} {...otherProps} />));
   } else {
-    items = fires.map(({ _id, ...otherProps }) => (<FireCircleMark key={_id} nasa={nasa} {...otherProps} />));
+    items = fires.map(({ _id, ...otherProps }) => (<FireCircleMark t={t} history={history} id={_id} key={_id} nasa={nasa} {...otherProps} />));
   }
   return (<div style={{ display: 'none' }}>{items}</div>);
 }
@@ -29,5 +29,7 @@ FireList.propTypes = {
   fires: PropTypes.array.isRequired,
   scale: PropTypes.bool.isRequired,
   useMarkers: PropTypes.bool.isRequired,
-  nasa: PropTypes.bool.isRequired
+  nasa: PropTypes.bool.isRequired,
+  history: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired
 };

imports/ui/components/Maps/FirePopup.js

@@ -0,0 +1,43 @@
+/* eslint-disable import/no-absolute-path */
+import React, { Fragment } from 'react';
+import { Popup, Tooltip } from 'react-leaflet';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import moment from 'moment';
+
+const FirePopup = ({
+  lat,
+  lon,
+  nasa,
+  id,
+  history,
+  when,
+  t
+}) => (
+  <Fragment>
+    <Popup className="fire-popup">
+      <Fragment>
+        <span>{t('Coordenadas:')} {lat}, {lon}</span><br />
+        <span>{t('Fuente')}: {t(nasa ? 'NASA' : 'nuestros usuarios/as')}</span><br />
+        <span>{t('Detectado')}: {moment(when).fromNow()}</span><br />
+        <span>
+          <a href="#" onClick={() => history.push(`/fire/active/${id}`)}>{t('Más información sobre este fuego')}</a>
+        </span>
+      </Fragment>
+    </Popup>
+    <Tooltip><Fragment>{t('Pulsa para más información')}</Fragment></Tooltip>
+  </Fragment>
+);
+
+FirePopup.propTypes = {
+  // https://github.com/PaulLeCam/react-leaflet/tree/master/src/propTypes
+  lat: PropTypes.number.isRequired,
+  lon: PropTypes.number.isRequired,
+  nasa: PropTypes.bool.isRequired,
+  id: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+  when: PropTypes.instanceOf(Date).isRequired,
+  t: PropTypes.func.isRequired
+};
+
+export default translate([], { wait: true })(FirePopup);