comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added industries collection

Browse source
This commit is contained in:
vjrj 2018-02-26 12:11:23 +01:00
parent 1ad6bf17cb
commit ccbfe642a8
19 changed files with 277 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

48
imports/ui/components/Maps/FireCircleMark.js
View file

@ -1,22 +1,40 @@
import React from 'react';
import React, { Component } from 'react';
import { Circle } from 'react-leaflet';
import PropTypes from 'prop-types';
import { onMarkClick } from './MarkListeners';
import FirePopup from './FirePopup';
const FireCircleMark = ({
lat,
lon,
nasa,
scan,
id,
when,
history,
t
}) => (
<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>
);
class FireCircleMark extends Component {
constructor(props) {
super(props);
this.t = props.t;
this.onClick = this.onClick.bind(this);
}
onClick() {
const { history, nasa, id } = this.props;
onMarkClick(history, nasa, id);
}
render() {
const {
lat,
lon,
scan,
nasa,
id,
history,
when,
t
} = this.props;
return (
<Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 500} onClick={this.onClick}>
<FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
</Circle>
);
}
}
FireCircleMark.propTypes = {
scan: PropTypes.number.isRequired,

26
imports/ui/components/Maps/FireIconMark.js
View file

@ -2,7 +2,8 @@
import React, { Component, Fragment } from 'react';
import { CircleMarker, Marker, Tooltip } from 'react-leaflet';
import PropTypes from 'prop-types';
import { fireIconS, fireIconM, fireIconL, nFireIcon, industryIcon } from '/imports/ui/components/Maps/Icons';
import { fireIconS, fireIconM, fireIconL, nFireIcon, industryIcon, regIndustryIcon } from '/imports/ui/components/Maps/Icons';
import { onMarkClick } from './MarkListeners';
import { translate } from 'react-i18next';
import FirePopup from './FirePopup';
@ -14,8 +15,8 @@ class FireIconMark extends Component {
}
onClick() {
// console.log('onClick fired');
this.props.history.push(`/fire/${this.props.nasa ? 'active' : 'alert'}/${this.props.id}`);
const { history, nasa, id } = this.props;
onMarkClick(history, nasa, id);
}
// Some docs:
@ -36,22 +37,34 @@ class FireIconMark extends Component {
id,
history,
falsePositives,
industries,
when,
t
} = this.props;
return (
<div>
{ !falsePositives &&
{ !falsePositives && !industries &&
<Marker position={[lat, lon]} icon={nasa ? this.getIcon(scan) : nFireIcon} onClick={this.onClick} >
<FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
</Marker> }
{ falsePositives &&
{ industries && <Marker position={[lat, lon]} icon={regIndustryIcon}>
<Tooltip><Fragment>{t('Es una industria (fuente: registro oficial)')}</Fragment></Tooltip>
</Marker> }
{ /* disabled */ industries && false && <CircleMarker
center={[lat, lon]}
color="violet"
stroke={false}
fillOpacity="1"
fill
radius={1}
/>}
{ falsePositives && !industries &&
<Marker position={[lat, lon]} icon={industryIcon} onClick={this.onClick}>
<Tooltip><Fragment>{t('Es una industria')}</Fragment></Tooltip>
{ /* disabled because was a past fire (and can be marked multiple times) */ false && <FirePopup t={t} history={history} id={id} lat={lat} lon={lon} /> }
</Marker>
}
{ !falsePositives &&
{ !falsePositives && !industries &&
<CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1} onClick={this.onClick}>
<FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
</CircleMarker> }
@ -67,6 +80,7 @@ FireIconMark.propTypes = {
scan: PropTypes.number,
nasa: PropTypes.bool,
falsePositives: PropTypes.bool.isRequired,
industries: PropTypes.bool.isRequired,
id: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
when: PropTypes.instanceOf(Date),

9
imports/ui/components/Maps/FireList.js
View file

@ -9,17 +9,17 @@ import FirePixel from '/imports/ui/components/Maps/FirePixel';
export default function FireList(props) {
const {
fires, scale, useMarkers, nasa, t, history, falsePositives
fires, scale, useMarkers, nasa, t, history, falsePositives, industries
} = 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 t={t} history={history} id={_id} key={_id} nasa={nasa} falsePositives={falsePositives} {...otherProps} />));
} else if (usePixel && !falsePositives) {
items = fires.map(({ _id, ...otherProps }) => (<FireIconMark t={t} history={history} id={_id} key={_id} nasa={nasa} falsePositives={falsePositives} industries={industries} {...otherProps} />));
} else if (usePixel && !falsePositives && !industries) {
items = fires.map(({ _id, ...otherProps }) => (<FirePixel t={t} key={_id} id={_id} history={history} nasa={nasa} {...otherProps} />));
} else if (!falsePositives) {
} else if (!falsePositives && !industries) {
items = fires.map(({ _id, ...otherProps }) => (<FireCircleMark t={t} history={history} id={_id} key={_id} nasa={nasa} {...otherProps} />));
}
return (<div style={{ display: 'none' }}>{items}</div>);
@ -31,6 +31,7 @@ FireList.propTypes = {
useMarkers: PropTypes.bool.isRequired,
nasa: PropTypes.bool.isRequired,
falsePositives: PropTypes.bool.isRequired,
industries: PropTypes.bool.isRequired,
history: PropTypes.object.isRequired,
t: PropTypes.func.isRequired
};

6
imports/ui/components/Maps/Icons.js
View file

@ -36,6 +36,12 @@ export const industryIcon = new Leaflet.Icon({
iconAnchor: [16, 20]
});
export const regIndustryIcon = new Leaflet.Icon({
iconUrl: '/industry-marker-reg.png',
iconSize: [32, 37],
iconAnchor: [16, 20]
});
export const nFireIcon = new Leaflet.Icon({
iconUrl: '/n-fire-marker.png',
iconSize: [16, 24], // size of the icon

4
imports/ui/components/Maps/MarkListeners.js Normal file
View file

@ -0,0 +1,4 @@
export const onMarkClick = (history, nasa, id) => {
// console.log('onClick fired');
history.push(`/fire/${nasa ? 'active' : 'alert'}/${id}`);
};

3
imports/ui/layouts/App/App.js
View file

@ -115,7 +115,8 @@ const App = props => (
<Authenticated exact path="/subscriptions/:_id/edit" component={EditSubscription} {...props} />
<Authenticated exact path="/profile" component={Profile} {...props} />
<Authenticated exact path="/status" component={Status} {...props} />
<Route path="/fires" component={FiresMap} {...props} />
{/* <Route path="/fires/:type(with-industries)" component={FiresMap} industries {...props} /> */}
<Route path="/fires" component={FiresMap} industries={false} {...props} />
<Route path="/zones" component={ZonesMap} {...props} />
<Route path="/fire/:type(active|archive|alert)/:id" component={Fires} {...props} />
<Route path="/fire/:id" component={Fires} {...props} />

20
imports/ui/pages/Fires/Fires.js
View file

@ -21,6 +21,7 @@ import { dateLongFormat } from '/imports/api/Common/dates';
import '/imports/startup/client/comments';
import FalsePositiveTypes from '/imports/api/FalsePositives/FalsePositiveTypes';
import FalsePositivesCollection, { falsePositivesRemap } from '/imports/api/FalsePositives/FalsePositives';
import IndustriesCollection, { industriesRemap } from '/imports/api/Industries/Industries';
import ShareIt from '/imports/ui/components/ShareIt/ShareIt';
import './Fires.scss';
@ -76,6 +77,7 @@ class Fire extends React.Component {
notfound, loading, fire, t
} = this.props;
if (Meteor.isDevelopment) console.log(`False positives total: ${this.props.falsePositives.length}`);
if (Meteor.isDevelopment) console.log(`Industries total: ${this.props.industries.length}`);
/* console.log(`loading fire: ${loading}`);
* console.log(`Not found fire: ${notfound}`); */
if (fire && fire.when) {
@ -109,7 +111,7 @@ class Fire extends React.Component {
fillColor="red"
fillOpacity={0.0}
interactive={false}
radius={fire.scan ? fire.scan * 1000 : 300}
radius={fire.scan ? fire.scan * 500 : 300}
ref={(circle) => { this.circle = circle; this.handleLeafletLoad(circle); }}
/>
</Fragment>
@ -121,6 +123,17 @@ class Fire extends React.Component {
useMarkers
nasa={false}
falsePositives
industries={false}
/>
<FireList
t={t}
history={this.props.history}
fires={this.props.industries}
scale
useMarkers
nasa={false}
falsePositives={false}
industries
/>
<DefMapLayers satellite />
</Map>
@ -136,7 +149,7 @@ class Fire extends React.Component {
{(fire.type !== 'vecinal') &&
<Fragment>
{ this.props.falsePositives.length > 0 &&
{ (this.props.falsePositives.length > 0 || this.props.industries.length > 0) &&
<Row>
<Col>
<Alert bsStyle="success"><Trans>Parece que este fuego no es un fuego forestal.</Trans></Alert>
@ -196,6 +209,7 @@ Fire.propTypes = {
loading: PropTypes.bool.isRequired,
notfound: PropTypes.bool.isRequired,
falsePositives: PropTypes.arrayOf(PropTypes.object).isRequired,
industries: PropTypes.arrayOf(PropTypes.object).isRequired,
fromHash: PropTypes.bool.isRequired,
active: PropTypes.bool.isRequired,
alert: PropTypes.bool.isRequired,
@ -236,12 +250,14 @@ const FireContainer = withTracker(({ match }) => {
/* console.log(`loading fire: ${loading}`);
* console.log(`Not found fire: ${notfound}`); */
const falsePositives = FalsePositivesCollection.find().fetch().map(falsePositivesRemap);
const industries = IndustriesCollection.find().fetch().map(industriesRemap);
return {
loading,
active,
alert,
fromHash,
falsePositives,
industries,
fire: FiresCollection.findOne(),
notfound,
when: subscription.ready() && FiresCollection.findOne() ? FiresCollection.findOne().when : null

37
imports/ui/pages/FiresMap/FiresMap.js
View file

@ -27,6 +27,7 @@ import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
import FromNow from '/imports/ui/components/FromNow/FromNow';
import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
import IndustriesCollection, { industriesRemap } from '/imports/api/Industries/Industries';
import FalsePositivesCollection, { falsePositivesRemap } from '/imports/api/FalsePositives/FalsePositives';
import SiteSettings from '/imports/api/SiteSettings/SiteSettings';
import { isNotHomeAndMobile, isChrome } from '/imports/ui/components/Utils/isMobile';
@ -187,6 +188,8 @@ class FiresMap extends React.Component {
if (Meteor.isDevelopment) console.log(`False positives total: ${this.props.falsePositives.length}`);
if (Meteor.isDevelopment) console.log(`Industries total: ${this.props.industries.length}`);
return (
/* Large number of markers:
https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */
@ -270,6 +273,17 @@ class FiresMap extends React.Component {
useMarkers={this.state.useMarkers}
nasa={false}
falsePositives
industries={false}
/>
<FireList
t={t}
history={this.props.history}
fires={this.props.industries}
scale={this.state.viewport.zoom >= MAXZOOM}
useMarkers={this.state.useMarkers}
nasa={false}
falsePositives={false}
industries
/>
<FireList
t={t}
@ -279,6 +293,7 @@ class FiresMap extends React.Component {
useMarkers={this.state.useMarkers}
nasa
falsePositives={false}
industries={false}
/>
<FireList
t={t}
@ -288,6 +303,7 @@ class FiresMap extends React.Component {
useMarkers={this.state.useMarkers}
nasa={false}
falsePositives={false}
industries={false}
/>
</Fragment> }
<DefMapLayers gray />
@ -318,6 +334,7 @@ FiresMap.propTypes = {
activefires: PropTypes.arrayOf(PropTypes.object).isRequired,
firealerts: PropTypes.arrayOf(PropTypes.object).isRequired,
falsePositives: PropTypes.arrayOf(PropTypes.object).isRequired,
industries: PropTypes.arrayOf(PropTypes.object).isRequired,
lastCheck: PropTypes.instanceOf(Date),
activefirestotal: PropTypes.number.isRequired,
center: PropTypes.arrayOf(PropTypes.number),
@ -331,6 +348,10 @@ FiresMap.propTypes = {
let geoInit = true;
export default translate([], { wait: true })(withTracker(() => {
// const firesType = match.params.type;
// const withIndustries = firesType === 'with-industries';
// console.log(`With industries: ${withIndustries}`);
let subscription;
let alertSubscription;
@ -339,6 +360,7 @@ export default translate([], { wait: true })(withTracker(() => {
const marksStored = store.get('firesmap_marks');
const showUnionStored = store.get('firesmap_showunion');
zoom.set(zoomStored || 8);
center.set(centerStored || [0, 0]);
if (typeof marksStored === 'boolean') {
marks.set(marksStored);
}
@ -346,7 +368,7 @@ export default translate([], { wait: true })(withTracker(() => {
showUnion.set(showUnionStored);
}
Meteor.autorun(() => {
if ((centerStored || geolocation.get()) && geoInit) {
if ((centerStored !== [0, 0] || geolocation.get()) && geoInit) {
center.set(centerStored || geolocation.get());
// console.log(`Geolocation ${geolocation.get()}`);
geoInit = false;
@ -367,16 +389,28 @@ export default translate([], { wait: true })(withTracker(() => {
mapSize.get()[1].lng,
mapSize.get()[1].lat
);
/* if (withIndustries) {
Meteor.subscribe(
'industriesMyloc',
mapSize.get()[0].lng,
mapSize.get()[0].lat,
mapSize.get()[1].lng,
mapSize.get()[1].lat
);
} */
}
});
Meteor.subscribe('activefirestotal');
const settingsSubs = Meteor.subscribe('settings');
const lastCheck = SiteSettings.findOne({ name: 'last-fire-check' });
const userSubs = SiteSettings.findOne({ name: 'subs-public-union' });
const userSubsBounds = SiteSettings.findOne({ name: 'subs-public-union-bounds' });
const fireAlerts = FireAlertsCollection.find().fetch();
const falsePositives = FalsePositivesCollection.find().fetch().map(falsePositivesRemap);
const industries = IndustriesCollection.find().fetch().map(industriesRemap);
return {
loading: !subscription ? true : !(subscription.ready() && settingsSubs.ready() && alertSubscription.ready()),
userSubs: userSubs ? userSubs.value : null,
@ -387,6 +421,7 @@ export default translate([], { wait: true })(withTracker(() => {
activefirestotal: Counter.get('countActiveFires') + fireAlerts.length,
firealerts: fireAlerts,
falsePositives,
industries,
lastCheck: lastCheck ? lastCheck.value : null,
center: center.get(),
marks: marks.get(),