Site settings and fires fromNow Reactive
This commit is contained in:
vjrj
parent
e4b0135953
commit
379e72a9e7
15 changed files with 482 additions and 64 deletions
|
|
@ -1,4 +1,3 @@
|
|||
/* global Chronos */
|
||||
/* eslint-disable import/no-absolute-path */
|
||||
/* eslint-disable react/jsx-indent-props */
|
||||
/* eslint-disable react/jsx-indent */
|
||||
|
|
@ -6,13 +5,14 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withTracker } from 'meteor/react-meteor-data';
|
||||
import { translate } from 'react-i18next';
|
||||
import { translate, Trans } from 'react-i18next';
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import { Map, Circle } from 'react-leaflet';
|
||||
import Blaze from 'meteor/gadicc:blaze-react-component';
|
||||
import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
|
||||
import NotFound from '/imports/ui/pages/NotFound/NotFound';
|
||||
import FiresCollection from '/imports/api/Fires/Fires';
|
||||
import FromNow from '/imports/ui/components/FromNow/FromNow';
|
||||
import { dateLongFormat } from '/imports/api/Common/dates';
|
||||
import '/imports/startup/client/comments';
|
||||
import './Fires.scss';
|
||||
|
|
@ -40,10 +40,9 @@ class Fire extends React.Component {
|
|||
|
||||
render() {
|
||||
const { loading, fire, t } = this.props;
|
||||
console.log(`Render ${this.state.when}`);
|
||||
if (fire && fire.when) {
|
||||
this.dateLongFormat = dateLongFormat(fire.when);
|
||||
this.dateFromNow = this.state.when;
|
||||
// this.dateFromNow = () => (<FromNow {...this.props} />);
|
||||
}
|
||||
return (fire ?
|
||||
(<div className="ViewFire">
|
||||
|
|
@ -55,50 +54,50 @@ class Fire extends React.Component {
|
|||
t('Información adicional sobre fuego detectado el {{when}}', { when: this.dateLongFormat })}
|
||||
</h4>
|
||||
|
||||
<Map
|
||||
ref={(map) => {
|
||||
this.fireMap = map;
|
||||
}}
|
||||
animate
|
||||
sleep={false}
|
||||
center={[fire.lat, fire.lon]}
|
||||
className="fire-leaflet-container"
|
||||
zoom={12}
|
||||
>
|
||||
<Fragment>
|
||||
<Circle
|
||||
center={[fire.lat, fire.lon]}
|
||||
color="red"
|
||||
fillColor="red"
|
||||
fillOpacity={0.1}
|
||||
radius={fire.scan ? fire.scan * 1000 : 300}
|
||||
/>
|
||||
</Fragment>
|
||||
<DefMapLayers />
|
||||
</Map>
|
||||
<p>{t('Coordenadas:')} {fire.lat}, {fire.lon}</p>
|
||||
{(fire.type === 'modis' || fire.type === 'viirs') &&
|
||||
<p>{t('Fuego detectado por satélites de la NASA {{when}}', { when: this.dateFromNow })}</p>
|
||||
<Map
|
||||
ref={(map) => {
|
||||
this.fireMap = map;
|
||||
}}
|
||||
animate
|
||||
sleep={false}
|
||||
center={[fire.lat, fire.lon]}
|
||||
className="fire-leaflet-container"
|
||||
zoom={12}
|
||||
>
|
||||
<Fragment>
|
||||
<Circle
|
||||
center={[fire.lat, fire.lon]}
|
||||
color="red"
|
||||
fillColor="red"
|
||||
fillOpacity={0.1}
|
||||
radius={fire.scan ? fire.scan * 1000 : 300}
|
||||
/>
|
||||
</Fragment>
|
||||
<DefMapLayers />
|
||||
</Map>
|
||||
<p>{t('Coordenadas:')} {fire.lat}, {fire.lon}</p>
|
||||
{(fire.type === 'modis' || fire.type === 'viirs') &&
|
||||
<p><Trans>Fuego detectado por satélites de la NASA <FromNow {...this.props} /></Trans></p>
|
||||
}
|
||||
{(fire.type === 'vecinal') &&
|
||||
<p><Trans>Fuego notificado por uno de nuestros usuarios/as <FromNow {...this.props} /></Trans></p>
|
||||
}
|
||||
{(fire.type === 'vecinal') &&
|
||||
<p>{t('Fuego notificado por uno de nuestros usuarios/as {{when}}', { when: this.dateFromNow })}</p>
|
||||
}
|
||||
{/* TODO: marcar tipo de fuego, industria, etc */}
|
||||
<h4>{t('Comentarios')}</h4>
|
||||
<div className="comments-info">
|
||||
{t('Puedes añadir un comentario si tienes información adicional sobre este fuego.')}
|
||||
{' '}
|
||||
{t('Por ejemplo:')}
|
||||
<ul>
|
||||
<li>{t('si conoces esta zona y cómo acceder al fuego (esto puede de ser de ayuda para apagarlo si sigue activo o para investigarlo en un futuro)')}</li>
|
||||
<li>{t('si conoces el motivo por el que comenzó el fuego')}</li>
|
||||
<li>{t('si quieres denunciar algún tipo de ilegalidad, incluso anónimamente')}</li>
|
||||
<li>{t('o cualquier otra información')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="comments-section">
|
||||
<Blaze template="commentsBox" id={`fire-${fire._id}`} />
|
||||
</div>
|
||||
{/* TODO: marcar tipo de fuego, industria, etc */}
|
||||
<h4>{t('Comentarios')}</h4>
|
||||
<div className="comments-info">
|
||||
{t('Puedes añadir un comentario si tienes información adicional sobre este fuego.')}
|
||||
{' '}
|
||||
{t('Por ejemplo:')}
|
||||
<ul>
|
||||
<li>{t('si conoces esta zona y cómo acceder al fuego (esto puede de ser de ayuda para apagarlo si sigue activo o para investigarlo en un futuro)')}</li>
|
||||
<li>{t('si conoces el motivo por el que comenzó el fuego')}</li>
|
||||
<li>{t('si quieres denunciar algún tipo de ilegalidad, incluso anónimamente')}</li>
|
||||
<li>{t('o cualquier otra información')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="comments-section">
|
||||
<Blaze template="commentsBox" id={`fire-${fire._id}`} />
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -109,7 +108,7 @@ class Fire extends React.Component {
|
|||
Fire.propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
when: PropTypes.string,
|
||||
when: PropTypes.instanceOf(Date),
|
||||
fire: PropTypes.object // .isRequired
|
||||
};
|
||||
|
||||
|
|
@ -118,16 +117,14 @@ Fire.defaultProps = {
|
|||
|
||||
// export default translate([], { wait: true })(withTracker((props) => {
|
||||
|
||||
const FireContainer = withTracker(({ match }) => {
|
||||
const FireContainer = withTracker(({ match, i18n }) => {
|
||||
const fireEncrypt = match.params.id;
|
||||
const subscription = Meteor.subscribe('fireFromHash', fireEncrypt);
|
||||
|
||||
// });
|
||||
// console.log(`Subs ready: ${subscription.ready()}, fire: ${JSON.stringify(FiresCollection.findOne())}`);
|
||||
return {
|
||||
loading: !subscription.ready(),
|
||||
fire: FiresCollection.findOne(),
|
||||
when: subscription.ready() ? Chronos.moment(FiresCollection.findOne().when).fromNow() : null
|
||||
when: subscription.ready() ? FiresCollection.findOne().when : null
|
||||
};
|
||||
})(Fire);
|
||||
|
||||
|
|
|
|||
|
|
@ -21,9 +21,11 @@ import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/Center
|
|||
import FireList from '/imports/ui/components/Maps/FireList';
|
||||
import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
|
||||
import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
|
||||
import FromNow from '/imports/ui/components/FromNow/FromNow';
|
||||
import Loading from '/imports/ui/components/Loading/Loading';
|
||||
import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
|
||||
import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
|
||||
import SiteSettings from '/imports/api/SiteSettings/SiteSettings';
|
||||
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
|
||||
import { isNotHomeAndMobile, isChrome } from '/imports/ui/components/Utils/isMobile';
|
||||
|
||||
|
|
@ -140,8 +142,8 @@ class FiresMap extends React.Component {
|
|||
<Col xs={12} sm={6} md={6} lg={6} >
|
||||
<p className="firesmap-legend">
|
||||
{ this.props.activefires.length === 0 ?
|
||||
<Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo.</Trans> :
|
||||
<Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length }}</strong> fuegos activos en el mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo por la NASA.</Trans>
|
||||
<Fragment><Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo.</Trans> <Trans>Datos actualizados <FromNow when={this.props.lastCheck} /></Trans></Fragment> :
|
||||
<Fragment><Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length }}</strong> fuegos activos en el mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo por la NASA.</Trans> <Trans>Datos actualizados <FromNow when={this.props.lastCheck} /></Trans></Fragment>
|
||||
}
|
||||
</p>
|
||||
{isNotHomeAndMobile &&
|
||||
|
|
@ -228,6 +230,7 @@ FiresMap.propTypes = {
|
|||
userSubs: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
activefires: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
firealerts: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
lastCheck: PropTypes.instanceOf(Date),
|
||||
activefirestotal: PropTypes.number.isRequired,
|
||||
center: PropTypes.arrayOf(PropTypes.number),
|
||||
zoom: PropTypes.number,
|
||||
|
|
@ -258,12 +261,14 @@ export default translate([], { wait: true })(withTracker(() => {
|
|||
Meteor.subscribe('activefirestotal');
|
||||
// Right now to all neighborhood alerts
|
||||
Meteor.subscribe('fireAlerts');
|
||||
Meteor.subscribe('settings');
|
||||
const userSubs = Meteor.subscribe('userSubsToFires');
|
||||
// const subscription = Meteor.subscribe('activefiresmyloc', zoom.get());
|
||||
// Warning with the performance of this log:
|
||||
// console.log(`Active fires ${ActiveFiresCollection.find().count()} of ${Counter.get('countActiveFires')}`);
|
||||
// console.log(`Active neighborhood fires ${FireAlertsCollection.find().fetch().length} and users subscribed ${UserSubsToFiresCollection.find().fetch().length}`);
|
||||
// console.log(UserSubsToFiresCollection.find().fetch());
|
||||
const lastCheck = SiteSettings.findOne({ name: 'last-fire-check' });
|
||||
return {
|
||||
loading: !subscription.ready(),
|
||||
userSubs: UserSubsToFiresCollection.find().fetch(),
|
||||
|
|
@ -273,6 +278,7 @@ export default translate([], { wait: true })(withTracker(() => {
|
|||
// activefires: ActiveFiresCollection.find({}).fetch(),
|
||||
activefirestotal: Counter.get('countActiveFires'),
|
||||
firealerts: FireAlertsCollection.find().fetch(),
|
||||
lastCheck: lastCheck ? lastCheck.value : null,
|
||||
center: geolocation.get(),
|
||||
zoom: zoom.get()
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue