Added popup to alerts

imports/api/Fires/server/publications.js

@@ -8,6 +8,7 @@ import { Promise } from 'meteor/promise';
 import NodeGeocoder from 'node-geocoder';
 import { gmapServerKey } from '/imports/startup/server/IPGeocoder';
 import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
+import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
 import FiresCollection from '../Fires';
 
 function findFire(unsealed) {
@@ -70,6 +71,24 @@ const findOrCreateFire = (obj) => {
   return findFire(obj);
 };
 
+Meteor.publish('fireFromAlertId', function fireFromAlertId(_id) {
+  try {
+    check(_id, String);
+    // console.log(`Looking for alert fire ${_id}`);
+    const fire = FireAlertsCollection.findOne(new Meteor.Collection.ObjectID(_id));
+    if (fire) {
+      // console.info(`Active fire found: ${_id}`);
+      return findOrCreateFire(fixConfidence(fire));
+    }
+    console.info(`Alert fire not found: ${_id}`);
+    // Not found in active fires!
+    return this.ready();
+  } catch (e) {
+    console.info(`Alert fire not found (with error): ${_id}`);
+    return this.ready();
+  }
+});
+
 Meteor.publish('fireFromActiveId', function fireFromActiveId(_id) {
   try {
     check(_id, String);

imports/ui/components/Maps/FireList.js

@@ -18,7 +18,7 @@ export default function FireList(props) {
   if (useMarks) {
     items = fires.map(({ _id, ...otherProps }) => (<FireIconMark t={t} history={history} id={_id} key={_id} nasa={nasa} falsePositives={falsePositives} {...otherProps} />));
   } else if (usePixel && !falsePositives) {
-    items = fires.map(({ _id, ...otherProps }) => (<FirePixel key={_id} nasa={nasa} {...otherProps} />));
+    items = fires.map(({ _id, ...otherProps }) => (<FirePixel t={t} key={_id} id={_id} history={history} nasa={nasa} {...otherProps} />));
   } else if (!falsePositives) {
     items = fires.map(({ _id, ...otherProps }) => (<FireCircleMark t={t} history={history} id={_id} key={_id} nasa={nasa} {...otherProps} />));
   }

imports/ui/components/Maps/FirePixel.js

@@ -3,9 +3,13 @@
 import React from 'react';
 import { CircleMarker } from 'react-leaflet';
 import PropTypes from 'prop-types';
+import FirePopup from './FirePopup';
+import { translate } from 'react-i18next';
 
 /* Less acurate (1 pixel per fire) but faster */
-const FirePixel = ({ lat, lon, nasa }) => (
+const FirePixel = ({
+  lat, lon, nasa, id, when, t, history
+}) => (
   <CircleMarker
       center={[lat, lon]}
       color={nasa ? 'red' : '#D35400'}
@@ -13,14 +17,20 @@ const FirePixel = ({ lat, lon, nasa }) => (
       fillOpacity="1"
       fill
       radius={nasa ? 1 : 2}
-  />
+  >
+    <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
+  </CircleMarker>
 );
 
 
 FirePixel.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),
+  nasa: PropTypes.bool.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default FirePixel;
+export default translate([], { wait: true })(FirePixel);

imports/ui/components/Maps/FirePopup.js

@@ -22,7 +22,7 @@ const FirePopup = ({
         {when && <Fragment><span>{t('Detectado')}: {moment(when).fromNow()}</span><br /></Fragment> }
         <span>
           { /* if nasa === null means that the is a false positive fire */ }
-          <a href="#" onClick={() => history.push(`/fire/${nasa ? 'active' : 'archive'}/${id}`)}>{t('Más información sobre este fuego')}</a>
+          <a href="#" onClick={() => history.push(`/fire/${nasa ? 'active' : 'alert'}/${id}`)}>{t('Más información sobre este fuego')}</a>
         </span>
       </Fragment>
     </Popup>

imports/ui/layouts/App/App.js

@@ -116,7 +116,7 @@ const App = props => (
                 <Authenticated exact path="/status" component={Status} {...props} />
                 <Route path="/fires" component={FiresMap} {...props} />
                 <Route path="/zones" component={ZonesMap} {...props} />
-                <Route path="/fire/:type(active|archive)/:id" component={Fires} {...props} />
+                <Route path="/fire/:type(active|archive|alert)/: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

@@ -35,7 +35,7 @@ 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)) {
+      if (nextProps.fire && (nextProps.alert || nextProps.active || nextProps.fromHash)) {
         // change url to archive with new _id
         nextProps.history.replace(`/fire/archive/${nextProps.fire._id}`);
       }
@@ -173,6 +173,7 @@ Fire.propTypes = {
   notfound: PropTypes.bool.isRequired,
   fromHash: PropTypes.bool.isRequired,
   active: PropTypes.bool.isRequired,
+  alert: PropTypes.bool.isRequired,
   when: PropTypes.instanceOf(Date),
   fire: PropTypes.object
 };
@@ -188,10 +189,13 @@ const FireContainer = withTracker(({ match }) => {
   let subscription;
   const active = fireType === 'active';
   const archive = fireType === 'archive';
+  const alert = fireType === 'alert';
   let fromHash = false;
 
   if (active) {
     subscription = Meteor.subscribe('fireFromActiveId', id);
+  } else if (alert) {
+    subscription = Meteor.subscribe('fireFromAlertId', id);
   } else if (archive) {
     subscription = Meteor.subscribe('fireFromId', id);
   } else {
@@ -209,6 +213,7 @@ const FireContainer = withTracker(({ match }) => {
   return {
     loading,
     active,
+    alert,
     fromHash,
     fire: FiresCollection.findOne(),
     notfound,