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);

imports/ui/layouts/App/App.js

@@ -83,6 +83,7 @@ const App = props => (
                 <Authenticated exact path="/profile" component={Profile} {...props} />
                 <Authenticated exact path="/status" component={Status} {...props} />
                 <Route path="/fires" component={FiresMap} {...props} />
+                <Route path="/fire/:type(active|archive)/:id" component={Fires} {...props} />
                 <Route path="/fire/:id" component={Fires} {...props} />
                 <Public path="/auth/:token" component={Auth} {...props} />
                 <Public path="/signup" component={Signup} {...props} />

imports/ui/pages/Fires/Fires.js

@@ -34,6 +34,10 @@ class Fire extends React.Component {
   componentWillReceiveProps(nextProps) {
     if (this.props.when !== nextProps.when || this.props.loading !== nextProps.loading || this.props.notfound !== nextProps.notfound) {
       // console.log(`Next when ${nextProps.when}`);
+      if (nextProps.fire && (nextProps.active || nextProps.fromHash)) {
+        // change url to archive with new _id
+        nextProps.history.replace(`/fire/archive/${nextProps.fire._id}`);
+      }
       this.setState({
         loading: nextProps.loading,
         notfound: nextProps.notfound,
@@ -124,7 +128,7 @@ class Fire extends React.Component {
                       {Object.keys(FalsePositiveTypes).map(key => (
                          <button
                              className="dropdown-item"
-                             onClick={() => this.onTypeSelect(key)}
+                           onClick={() => this.onTypeSelect(key)}
                              key={key}
                              type="button"
                          >
@@ -161,8 +165,11 @@ class Fire extends React.Component {
 
 Fire.propTypes = {
   t: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
   loading: PropTypes.bool.isRequired,
   notfound: PropTypes.bool.isRequired,
+  fromHash: PropTypes.bool.isRequired,
+  active: PropTypes.bool.isRequired,
   when: PropTypes.instanceOf(Date),
   fire: PropTypes.object
 };
@@ -173,8 +180,24 @@ Fire.defaultProps = {
 // export default translate([], { wait: true })(withTracker((props) => {
 
 const FireContainer = withTracker(({ match }) => {
-  const fireEncrypt = match.params.id;
-  const subscription = Meteor.subscribe('fireFromHash', fireEncrypt);
+  const id = match.params.id;
+  const fireType = match.params.type;
+  let subscription;
+  const active = fireType === 'active';
+  const archive = fireType === 'archive';
+  let fromHash = false;
+
+  if (active) {
+    subscription = Meteor.subscribe('fireFromActiveId', id);
+  } else if (archive) {
+    subscription = Meteor.subscribe('fireFromId', id);
+  } else {
+    console.log('Seems a fire from enc hash');
+    fromHash = true;
+    subscription = Meteor.subscribe('fireFromHash', id);
+  }
+
+  // console.log(`Type of '${fireType}' fire, active: ${active}, archive: ${archive}, fromHash: ${fromHash}`);
   // console.log(`Subs ready: ${subscription.ready()}, fire: ${JSON.stringify(FiresCollection.findOne())}`);
   const loading = !subscription.ready();
   const notfound = !loading && FiresCollection.find().count() === 0;
@@ -182,6 +205,8 @@ const FireContainer = withTracker(({ match }) => {
    * console.log(`Not found fire: ${notfound}`); */
   return {
     loading,
+    active,
+    fromHash,
     fire: FiresCollection.findOne(),
     notfound,
     when: subscription.ready() && FiresCollection.findOne() ? FiresCollection.findOne().when : null

imports/ui/pages/FiresMap/FiresMap.js

@@ -211,12 +211,16 @@ class FiresMap extends React.Component {
            {!this.props.loading &&
            <Fragment>
              <FireList
+                 t={t}
+                 history={this.props.history}
                  fires={this.props.activefires}
                  scale={this.state.viewport.zoom >= MAXZOOM}
                  useMarkers={this.state.useMarkers}
                  nasa
              />
              <FireList
+                 t={t}
+                 history={this.props.history}
                  fires={this.props.firealerts}
                  scale={false}
                  useMarkers={this.state.useMarkers}
@@ -250,6 +254,7 @@ FiresMap.propTypes = {
   activefirestotal: PropTypes.number.isRequired,
   center: PropTypes.arrayOf(PropTypes.number),
   zoom: PropTypes.number,
+  history: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired
 };
 

imports/ui/pages/Index/Index.js

@@ -42,12 +42,12 @@ class Index extends Component {
     this.myScaleFunction();
   }
 
-  getMap(isMobile) {
+  getMap(isMobile, props) {
     if (!isMobile) {
       return (
         <section className="sect5">
           <div className="container">
-            <FiresMap />
+            <FiresMap {...props} />
           </div>
         </section>);
     }
@@ -233,7 +233,7 @@ class Index extends Component {
             </div>
           </section>
 
-          {this.getMap(isAnyMobile)}
+          {this.getMap(isAnyMobile, this.props)}
 
           <section className="platf sect6">
             <div className="container">

imports/ui/stylesheets/custom.scss

@@ -39,4 +39,14 @@ h4.page-header {
 
 #react-root > div > div.container > div > div.alert {
   margin-top: 20px;
-}
+}
+
+div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p,
+div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a {
+  font-size: 12px;
+}
+
+div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a:hover,
+div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a {
+//   color: $todos-palette2;
+}