Added popup to alerts

This commit is contained in:
vjrj 2018-02-15 18:10:38 +01:00
parent aec4c2a0b0
commit 2477c985d6
6 changed files with 42 additions and 8 deletions

View file

@ -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} />));
}

View file

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

View file

@ -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>