diff --git a/designs/web-tcef.svg b/designs/web-tcef.svg index 40b885d..93b6b29 100644 --- a/designs/web-tcef.svg +++ b/designs/web-tcef.svg @@ -26,16 +26,16 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="0.34787809" - inkscape:cx="482.26239" - inkscape:cy="500.72871" + inkscape:zoom="0.17393905" + inkscape:cx="-1241.6741" + inkscape:cy="980.29345" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" inkscape:window-width="1920" - inkscape:window-height="1016" + inkscape:window-height="983" inkscape:window-x="0" - inkscape:window-y="867" + inkscape:window-y="438" inkscape:window-maximized="1" inkscape:showpageshadow="false" /> FUEGOS ACTIVOS + + + + + + diff --git a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js index ebcd9a0..ca80743 100644 --- a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js +++ b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js @@ -37,7 +37,7 @@ class CenterInMyPosition extends React.Component { render() { return ( ); } } diff --git a/imports/ui/components/SelectionMap/SelectionMap.scss b/imports/ui/components/SelectionMap/SelectionMap.scss index 1ad7616..d56b5ac 100644 --- a/imports/ui/components/SelectionMap/SelectionMap.scss +++ b/imports/ui/components/SelectionMap/SelectionMap.scss @@ -16,8 +16,8 @@ div.selectionmap-leaflet-container { @include breakpoint(mobile) { .selectionmap-leaflet-container { - height: 80%; - min-width: 90vw; + height: 80%; + min-width: 90vw; } } diff --git a/imports/ui/pages/Index/Index-custom.scss b/imports/ui/pages/Index/Index-custom.scss index e62f8ab..89bf4da 100644 --- a/imports/ui/pages/Index/Index-custom.scss +++ b/imports/ui/pages/Index/Index-custom.scss @@ -223,4 +223,26 @@ .full-width .page-header { // section titles margin-top: 20px; +} + +.sect1 { +} + +.sect2 { +} + +.sect3 { + background-color: $todos-back4; +} + +.sect4 { + background-color: $todos-back5; +} + +.sect5 { + background-color: $todos-back6; +} + +.sect6 { + background-color: $todos-back5; } \ No newline at end of file diff --git a/imports/ui/pages/Index/Index.js b/imports/ui/pages/Index/Index.js index 23bac5a..0427177 100644 --- a/imports/ui/pages/Index/Index.js +++ b/imports/ui/pages/Index/Index.js @@ -14,6 +14,7 @@ import { ScrollToTopOnMount, SectionsContainer, Section } from 'react-fullpage'; import 'html5-device-mockups/dist/device-mockups.min.css'; import { isAnyMobile } from '/imports/ui/components/Utils/isMobile'; import SubscriptionEditor from '/imports/ui/components/SubscriptionEditor/SubscriptionEditor'; +import SubscriptionsMap from '/imports/ui/pages/Subscriptions/SubscriptionsMap'; import FiresMap from '../FiresMap/FiresMap'; import './Index.scss'; @@ -43,7 +44,7 @@ class Index extends Component { getMap(isMobile) { if (!isMobile) { return ( -
+
@@ -70,7 +71,7 @@ class Index extends Component { render() { // https://github.com/subtirelumihail/react-fullpage const fullPageOptions = { - anchors: isAnyMobile ? ['home', 'crowdsourcing', 'participe', 'platforms'] : ['home', 'crowdsourcing', 'participe', 'fires', 'platforms'], // the anchors for each sections + anchors: isAnyMobile ? ['home', 'crowdsourcing', 'users', 'participe', 'platforms'] : ['home', 'crowdsourcing', 'users', 'participe', 'fires', 'platforms'], // the anchors for each sections activeClass: 'active', // the class that is appended to the sections links arrowNavigation: true, // use arrow keys (true after development) className: 'section-container', // the class name for the section container @@ -89,7 +90,7 @@ class Index extends Component { -
+
-
+
@@ -170,7 +171,13 @@ class Index extends Component {
-
+
+
+ +
+
+ +

Suscríbete a alertas de fuegos

-
{this.getMap(isAnyMobile)} -
+

Somos muchos ojos

diff --git a/imports/ui/pages/Subscriptions/SubscriptionsMap.js b/imports/ui/pages/Subscriptions/SubscriptionsMap.js new file mode 100644 index 0000000..407bf51 --- /dev/null +++ b/imports/ui/pages/Subscriptions/SubscriptionsMap.js @@ -0,0 +1,137 @@ +/* global L */ +/* eslint-disable import/no-absolute-path */ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable react/jsx-indent */ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { ButtonGroup, Row, Col } from 'react-bootstrap'; +import { Meteor } from 'meteor/meteor'; +import { withTracker } from 'meteor/react-meteor-data'; +import { Trans, translate } from 'react-i18next'; +import { Map } from 'react-leaflet'; +import 'leaflet/dist/leaflet.css'; +import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css'; +import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js'; +import 'leaflet-sleep/Leaflet.Sleep.js'; +import Control from 'react-leaflet-control'; +import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition'; +import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion'; +import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers'; +import Loading from '/imports/ui/components/Loading/Loading'; +import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; + +import './SubscriptionsMap.scss'; + +// Remove map in subscription +class SubscriptionsMap extends React.Component { + constructor(props) { + super(props); + this.state = { + viewport: { + center: [0, 0], + zoom: 0 + }, + init: true + }; + } + + componentDidMount() { + if (this.subscriptionsMap) { + this.addScale(); + } + } + + getMap() { + return this.subscriptionsMap.leafletElement; + } + + addScale() { + // https://www.npmjs.com/package/leaflet-graphicscale + const map = this.getMap(); + const options = { + fill: 'fill', + showSubunits: true + }; + L.control.graphicScale([options]).addTo(map); + } + + handleLeafletLoad(map) { + // console.log('Map loading'); + // console.log(map); + if (map) { + this.state.union = subsUnion(this.state.union, { + map, + subs: this.props.userSubs, + show: true, + fit: this.state.init + }); + } + } + + centerOnUserLocation(viewport) { + console.log(`viewport: ${JSON.stringify(viewport)}`); + this.setState({ init: false, viewport }); + } + + render() { + console.log(`Rendering Subs users ready ${this.props.subsready} subs: ${this.props.userSubs.length} viewport: ${JSON.stringify(this.state.viewport)}`); + return ( + + {!this.props.subsready ? + + + + : ''} +

Zonas vigiladas

+ + + En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa! (*) + + { + this.subscriptionsMap = map; + this.handleLeafletLoad(map); + }} + zoom={this.state.viewport.zoom} + center={this.state.viewport.center} + className="subscriptionsmap-leaflet-container" + animate + sleep={window.location.pathname === '/'} + sleepTime={10750} + wakeTime={750} + sleepNote + hoverToWake + wakeMessage={this.props.t('Pulsa para activar')} + sleepOpacity={0.6} + > + + + + this.centerOnUserLocation(viewport)} {... this.props} /> + + + + + + +

(*)Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.

+ + + + ); + } +} + +SubscriptionsMap.propTypes = { + subsready: PropTypes.bool.isRequired, + userSubs: PropTypes.arrayOf(PropTypes.object).isRequired, + t: PropTypes.func.isRequired +}; + +export default translate([], { wait: true })(withTracker(() => { + const userSubs = Meteor.subscribe('userSubsToFires'); + return { + userSubs: UserSubsToFiresCollection.find().fetch(), + subsready: userSubs.ready() + }; +})(SubscriptionsMap)); diff --git a/imports/ui/pages/Subscriptions/SubscriptionsMap.scss b/imports/ui/pages/Subscriptions/SubscriptionsMap.scss new file mode 100644 index 0000000..908ef8e --- /dev/null +++ b/imports/ui/pages/Subscriptions/SubscriptionsMap.scss @@ -0,0 +1,63 @@ +@import '../../stylesheets/mixins'; +@import '../../stylesheets/colors'; + +.subscriptionsmap-leaflet-container { + height: 100%; + min-height: 60vh; + width: 100%; + /* min-width: 75vw; */ + display: flex; + margin: 20px auto; +} + +div.selectionmap-leaflet-container { + position: relative; + margin: 0; +} + +@include breakpoint(mobile) { + .subscriptionsmap-leaflet-container { + height: 80%; + min-width: 90vw; + } +} + +.Loading { + position: absolute; + top: calc(50% - 150px); + left: calc(50% - 150px); + z-index: 1000; +} + +.Loading > svg { + width: 300px; + height: 300px; + stroke: grey; +} + +.mark-checkbox { + margin-left: 5px; +} + +.leaflet-control-layers-toggle { + background-image: url(/images/layers.png); +} + +.leaflet-retina .leaflet-control-layers-toggle { + background-image: url(/images/layers.png); + background-size: 26px 26px; +} + +.glyphicon .glyphicon-thumbs-up { + +} + +.subscriptionsmap-legend { + font-size: 16px; +} + +.subscriptionsmap-note, +.subscriptionsmap-footnote { + font-size: 14px; + color: $light; +} diff --git a/imports/ui/stylesheets/colors.scss b/imports/ui/stylesheets/colors.scss index 199c017..3d42bc9 100644 --- a/imports/ui/stylesheets/colors.scss +++ b/imports/ui/stylesheets/colors.scss @@ -42,6 +42,15 @@ $todos-palette3: $todos-palette3b; $todos-palette4: $todos-palette4b; $todos-palette5: $todos-palette5b; +$todos-back1: #0D2E0E; +$todos-back2: #A8AB9E; +$todos-back3: #869686; +$todos-back4: #DCD4CE; +$todos-back5: #B7C1B7; +$todos-back6: #E0E0E0; + + + // It seems that we are not using bootstrap scss version so does not work $primary: $todos-palette1; $success: $todos-palette2; diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 328b93a..6e7e110 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -70,7 +70,7 @@ "noActiveFireInMapCount": "There are no active fires in this area of the map. There is a total of <1><0>{{countTotal}} active fires detected worldwide.", "activeFireInMapCount": "On the map marked in red <1><0>{{count,number}} active fires. There is a total of <3><0>{{countTotal,number}} active fires detected worldwide by NASA.", "activeNeigFireInMapCount": "In Orange, the fires recently reported by our users.", - "Centrar el mapa en tu ubicación": "Center the map on your location", + "Centrar en tu ubicación": "Center on your location", "Resaltar en verde el área vigilada por nuestros usuarios/as": "The area monitored by our users is highlighted in green", "Resaltar los fuegos con un marcador": "Highlight the fires with a marker", "mapPrivacy": "<0>In order to preserve the privacy of our users, the reflected data are randomly altered and are only indicative.", @@ -158,5 +158,7 @@ "Más información sobre este fuego": "More information about this fire", "termsAccept": "I accept the <1>conditions of service of this site", "Bienvenid@!": "Welcome!", - "Verifica tu dirección de correo": "Verify Your Email Address" + "Verifica tu dirección de correo": "Verify Your Email Address", + "Zonas vigiladas": "Monitored areas", + "En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa!": "In green, the areas monitored by our users currently. Participate!" } diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 1d6bb2c..33ef869 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -116,8 +116,8 @@ "En rojo, <1><0>{{count,number}} fuegos activos en el mapa. Hay un total de <3><0>{{countTotal,number}} fuegos activos detectados en todo el mundo por la NASA.", "activeNeigFireInMapCount": "En naranja, los fuegos notificados por nuestros usuarios/as recientemente.", - "Centrar el mapa en tu ubicación": - "Centrar el mapa en tu ubicación", + "Centrar en tu ubicación": + "Centrar en tu ubicación", "Resaltar en verde el área vigilada por nuestros usuarios/as": "Resaltar en verde el área vigilada por nuestros usuarios/as", "Resaltar los fuegos con un marcador": @@ -229,5 +229,7 @@ "Bienvenid@!": "Bienvenid@!", "Has iniciado sesión con {{service}} usando la dirección de correo {{email}}.": "Has iniciado sesión con {{service}} usando la dirección de correo {{email}}.", "Verifica tu dirección de correo": - "Verifica tu dirección de correo" + "Verifica tu dirección de correo", + "Zonas vigiladas": "Zonas vigiladas", + "En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa!": "En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa!" }