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

FiresMap refactor

Browse source
This commit is contained in:
vjrj 2018-03-06 15:55:27 +01:00
parent c025ec5ce8
commit 6e0282d679
1 changed files with 53 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -152,7 +152,7 @@ class FiresMap extends React.Component {
} }
centerOnUserLocation(viewport) { centerOnUserLocation(viewport) {
this.setState({ viewport }); this.setState({ viewport: { center: viewport.center, zoom: 10 } });
} }
useMarkers(use) { useMarkers(use) {
@ -218,50 +218,51 @@ class FiresMap extends React.Component {
<title>{title}</title> <title>{title}</title>
<meta name="description" content={t('Fuegos activos en el mundo actualizados en tiempo real')} /> <meta name="description" content={t('Fuegos activos en el mundo actualizados en tiempo real')} />
</Helmet> } </Helmet> }
<h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4> <h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4>
<Row> <Row>
<Col xs={12} sm={6} md={6} lg={6} > <Col xs={12} sm={6} md={6} lg={6}>
<p className="firesmap-legend"> {isNotHomeAndMobile() &&
{ (this.props.activefires.length + this.props.firealerts.length) === 0 ? <Fragment>
<Fragment><Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos en el mundo.</Trans> <Trans>Actualizado <FromNow when={this.props.lastCheck} />.</Trans></Fragment> : <LocationAutocomplete
<Fragment><Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length + this.props.firealerts.length }}</strong> fuegos activos. <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos en el mundo.</Trans> <Trans>Actualizado <FromNow when={this.props.lastCheck} />.</Trans></Fragment> focusInput={false}
} label=""
</p> placeHolder="Escribe un lugar para centrar el mapa"
{isNotHomeAndMobile() && this.props.firealerts.length > 0 && helpText=""
<p className="firesmap-legend"><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p> } onChange={value => this.onAutocompleteChange(value)}
{isNotHomeAndMobile() && this.props.firealerts.length === 0 && !isAnyMobile && />
<Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
<Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
</Checkbox>
{(this.state.viewport.zoom >= MAXZOOM) &&
<Checkbox inline={false} defaultChecked={this.state.useMarkers} onClick={e => this.useMarkers(e.target.checked)}>
<Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
</Checkbox>}
</Fragment>}
</Col>
<Col xs={12} sm={6} md={6} lg={6} >
<p className="firesmap-legend">
{ (this.props.activefires.length + this.props.firealerts.length) === 0 ?
<Fragment><Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos en el mundo.</Trans> <Trans>Actualizado <FromNow when={this.props.lastCheck} />.</Trans></Fragment> :
<Fragment><Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length + this.props.firealerts.length }}</strong> fuegos activos. <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos en el mundo.</Trans> <Trans>Actualizado <FromNow when={this.props.lastCheck} />.</Trans></Fragment>
}
</p>
{isNotHomeAndMobile() && this.props.firealerts.length > 0 &&
<p className="firesmap-legend"><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p> }
{ /* disabled */ false && isNotHomeAndMobile() && this.props.firealerts.length === 0 && !isAnyMobile &&
<p className="firesmap-legend"><Trans parent="span" i18nKey="noActiveNeigFireInMap">No hay fuegos notificados recientemente por nuestros usuarios/as en esta zona.</Trans></p> } <p className="firesmap-legend"><Trans parent="span" i18nKey="noActiveNeigFireInMap">No hay fuegos notificados recientemente por nuestros usuarios/as en esta zona.</Trans></p> }
</Col>
<Col xs={12} sm={6} md={6} lg={6}> <p className="firesmap-note">
{isNotHomeAndMobile() && <em>{ this.state.viewport.zoom >= MAXZOOMREACTIVE ?
<Fragment> <Trans>Los fuegos activos se actualizan en tiempo cuasi real.</Trans> :
<LocationAutocomplete <Trans>Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.</Trans>
focusInput={false} }
label="" </em>
placeHolder="Escribe un lugar para centrar el mapa" </p>
helpText="" </Col>
onChange={value => this.onAutocompleteChange(value)} </Row>
/> {this.props.loading || !this.props.subsready ?
<Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}> <LoadingBar progress={this.props.loading ? 0.9 : 1} />
<Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*) : ''}
</Checkbox>
{(this.state.viewport.zoom >= MAXZOOM) &&
<Checkbox inline={false} defaultChecked={this.state.useMarkers} onClick={e => this.useMarkers(e.target.checked)}>
<Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
</Checkbox>}
</Fragment>}
<p className="firesmap-note">
<em>{ this.state.viewport.zoom >= MAXZOOMREACTIVE ?
<Trans>Los fuegos activos se actualizan en tiempo cuasi real.</Trans> :
<Trans>Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.</Trans>
}
</em>
</p>
</Col>
</Row>
{this.props.loading || !this.props.subsready ?
<LoadingBar progress={this.props.loading ? 0.9 : 1} />
: ''}
{/* https://github.com/CliffCloud/Leaflet.Sleep */} {/* https://github.com/CliffCloud/Leaflet.Sleep */}
<Map <Map
ref={(map) => { ref={(map) => {
@ -419,14 +420,14 @@ export default translate([], { wait: true })(withTracker(() => {
mapSize.get()[1].lat mapSize.get()[1].lat
); );
/* if (withIndustries) { /* if (withIndustries) {
Meteor.subscribe( Meteor.subscribe(
'industriesMyloc', 'industriesMyloc',
mapSize.get()[0].lng, mapSize.get()[0].lng,
mapSize.get()[0].lat, mapSize.get()[0].lat,
mapSize.get()[1].lng, mapSize.get()[1].lng,
mapSize.get()[1].lat mapSize.get()[1].lat
); );
} */ } */
} }
}); });