Gkey improved. New pages. Home improved based in startbootstrap

2017-12-10 03:32:12 +01:00 · 2017-12-10 03:32:12 +01:00 · b6b8f893e3
commit b6b8f893e3
parent 6497278755
19 changed files with 782 additions and 269 deletions
--- a/imports/ui/pages/FireSubscription/FireSubscription.js
+++ b/imports/ui/pages/FireSubscription/FireSubscription.js
@ -5,8 +5,7 @@ import { Trans, translate } from 'react-i18next';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
 import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
 import update from 'immutability-helper';
-import { withTracker } from 'meteor/react-meteor-data';
-import { Gkeys  } from '/imports/startup/client/Gkeys';
+import Gkeys from '/imports/startup/client/Gkeys';
 import SubsAutocomplete from './SubsAutocomplete';
 import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';

@ -16,23 +15,24 @@ class FireSubscription extends React.Component {
    this.state = {
      init: false
    };
+    // console.log(this.props.location.state);
  }

  componentDidMount = () => {
-    Gkeys.load(function(err, key) {
-      this.setState({init: true});
+    Gkeys.load(function (err, key) {
+      this.setState({ init: true });
    }.bind(this));
  }

-  centerOnUserLocation = (value) => {
+  centerOnUserLocation(value) {
    this.setState(update(this.state, {$merge: {lat: value.center[0], lng: value.center[1]}}));
  }

-  onAutocompleteChange = (value) => {
+  onAutocompleteChange(value) {
    this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}}));
  }

-  onSliderChange = (value) => {
+  onSliderChange(value) {
    this.setState(update(this.state, {$merge: {distance: value}}));
  }

@ -42,14 +42,15 @@ class FireSubscription extends React.Component {

    if (!this.state.init) {
      return <div/>
-    } else
-    return (
-      <div>
-        <Row>
+    } else {
+      return (
+        <div>
+          <Row>
            <Col xs={12} sm={12} md={6} lg={6} >
              <div>
                <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
-                <SubsAutocomplete onChange={(value) => this.onAutocompleteChange(value)}/>
+                <SubsAutocomplete
+                    onChange={ (value) => this.onAutocompleteChange(value) }/>
              </div>
            </Col>
            <Col xs={12} sm={12} md={6} lg={6} >
@ -60,11 +61,21 @@ class FireSubscription extends React.Component {
            </Col>
          </Row>
          <Row className="align-items-center justify-content-center">
-            <SelectionMap lat={this.state.lat} lng={this.state.lng} distance={this.state.distance || 10} />
+            <SelectionMap
+                lat={this.state.lat}
+                lng={this.state.lng}
+                distance={this.state.distance || 10}
+                history={this.props.history}
+            />
          </Row>
-      </div>
-    )
+        </div>
+      );
+    }
  }
 }

-export default translate([], { wait: true }) (FireSubscription);
+FireSubscription.propTypes = {
+  history: PropTypes.object.isRequired
+};
+
+export default translate([], { wait: true })(FireSubscription);
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@ -39,7 +39,7 @@ const fireIcon = new Leaflet.Icon({
  iconAnchor:   [8, 26] // point of the icon which will correspond to marker's location
  /* shadowAnchor: [4, 62],  // the same for the shadow
   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor*/
-})
+});

 const nFireIcon = new Leaflet.Icon({
  iconUrl: "/n-fire-marker.png",
@ -49,7 +49,7 @@ const nFireIcon = new Leaflet.Icon({
  iconAnchor:   [8, 26] // point of the icon which will correspond to marker's location
  /* shadowAnchor: [4, 62],  // the same for the shadow
   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor*/
-})
+});

 // http://leafletjs.com/reference-1.2.0.html#icon
 const MyPopupMarker = ({ children, lat, lon, nasa}) => (
--- a/imports/ui/pages/Index/Index.js
+++ b/imports/ui/pages/Index/Index.js
@ -1,11 +1,13 @@
 import React, {Component} from 'react';
 import { Button } from 'react-bootstrap';
-import { translate } from 'react-i18next';
+import { translate, Trans } from 'react-i18next';
 import {render} from 'react-dom';
 import { Link } from 'react-router-dom';
 // https://www.npmjs.com/package/react-resize-detector
 import ReactResizeDetector from 'react-resize-detector';
 import FiresMap from  '../FiresMap/FiresMap';
+import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
+import './new-age.js';

 import './Index.scss';
 import './Index-custom.scss';
@ -121,6 +123,125 @@ class Index extends Component {
          </div>
        </section>

+        <section className="download bg-primary text-center" id="download">
+          <div className="container">
+            <div className="row">
+              <div className="col-md-8 mx-auto">
+                <h2 className="section-heading">Discover what all the buzz is about!</h2>
+                <p>Our app is available on any mobile device! Download now to get started!</p>
+                <div className="badges">
+                  <a className="badge-link" href="#"><img src="img/google-play-badge.svg" alt=""/></a>
+                  <a className="badge-link" href="#"><img src="img/app-store-badge.svg" alt=""/></a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="features" id="features">
+          <div className="container">
+            <div className="section-heading text-center">
+              <h2>Unlimited Features, Unlimited Fun</h2>
+              <p className="text-muted">Check out what you can do with this app theme!</p>
+              <hr/>
+            </div>
+            <div className="row">
+              <div className="col-lg-4 my-auto">
+                <div className="device-container">
+                  <div className="device-mockup iphone6_plus portrait white">
+                    <div className="device">
+                      <div className="screen">
+                        {/* Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! */}
+                        <img src="img/demo-screen-1.jpg" className="img-fluid" alt=""/>
+                      </div>
+                      <div className="button">
+                        {/* You can hook the "home button" to some JavaScript events or just remove it  */}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="col-lg-8 my-auto">
+                <div className="container-fluid">
+                  <div className="row">
+                    <div className="col-lg-6">
+                      <div className="feature-item">
+                        <i className="fa fa-telegram text-primary"></i>
+                        <h3>Telegram</h3>
+                        <p className="text-muted"><Trans>Usa nuestro bot de Telegram</Trans></p>
+                      </div>
+                    </div>
+                    <div className="col-lg-6">
+                      <div className="feature-item">
+                        <i className="icon-envelope-open text-primary"></i>
+                        <h3><Trans>Correo electronico</Trans></h3>
+                        <p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo</Trans></p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="row">
+                    <div className="col-lg-6">
+                      <div className="feature-item">
+                        <i className="icon-lock-open text-primary"></i>
+                        <h3>Open Source</h3>
+                        <p className="text-muted">Since this theme is MIT licensed, you can use it commercially!</p>
+                      </div>
+                    </div>
+                    <div className="col-lg-6">
+                      <div className="feature-item">
+                        <i className="icon-screen-smartphone text-primary"></i>
+                        <h3>Device Mockups</h3>
+                        <p className="text-muted">Ready to use HTML/CSS device mockups, no Photoshop required!</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="cta">
+          <div className="cta-content">
+            <div className="container">
+              <h2>Stop waiting.<br/>Start building.</h2>
+              <a href="#contact" className="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>
+            </div>
+          </div>
+          <div className="overlay"></div>
+        </section>
+
+        <section className="contact bg-primary" id="contact">
+          <div className="container">
+            <h2>We
+              <i className="fa fa-heart"></i>
+              new friends!</h2>
+            <ul className="list-inline list-social">
+              <li className="list-inline-item social-twitter">
+                <a href="#">
+                  <i className="fa fa-twitter"></i>
+                </a>
+              </li>
+              {/* <li className="list-inline-item social-facebook">
+              <a href="#">
+              <i className="fa fa-facebook"></i>
+              </a>
+              </li>
+              <li className="list-inline-item social-google-plus">
+              <a href="#">
+              <i className="fa fa-google-plus"></i>
+              </a>
+              </li> */}
+            </ul>
+          </div>
+        </section>
+
+        <section className="py-5">
+          <div className="container">
+            <FireSubscription history={this.props.history} />
+          </div>
+        </section>
+
        <section className="py-5">
          <div className="container">
            <FiresMap />
--- a/imports/ui/pages/Index/new-age.js
+++ b/imports/ui/pages/Index/new-age.js
@ -0,0 +1,42 @@
+(function($) {
+  "use strict"; // Start of use strict
+
+  // Smooth scrolling using jQuery easing
+  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
+    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+      var target = $(this.hash);
+      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+      if (target.length) {
+        $('html, body').animate({
+          scrollTop: (target.offset().top - 48)
+        }, 1000, "easeInOutExpo");
+        return false;
+      }
+    }
+  });
+
+  // Closes responsive menu when a scroll trigger link is clicked
+  $('.js-scroll-trigger').click(function() {
+    $('.navbar-collapse').collapse('hide');
+  });
+
+  // Activate scrollspy to add active class to navbar items on scroll
+  $('body').scrollspy({
+    target: '#mainNav',
+    offset: 54
+  });
+
+  // Collapse Navbar
+  /* var navbarCollapse = function() {
+   *   if ($("#mainNav").offset().top > 100) {
+   *     $("#mainNav").addClass("navbar-shrink");
+   *   } else {
+   *     $("#mainNav").removeClass("navbar-shrink");
+   *   }
+   * };
+   * // Collapse now if page is not at top
+   * navbarCollapse();
+   * // Collapse the navbar when page is scrolled
+   * $(window).scroll(navbarCollapse); */
+
+})(jQuery); // End of use strict
--- a/imports/ui/pages/Login/Login.js
+++ b/imports/ui/pages/Login/Login.js
@ -1,21 +1,22 @@
 import React from 'react';
-import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
-import Col from '../../components/Col/Col';
 import PropTypes from 'prop-types';
+import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
+import { translate } from 'react-i18next';
+import { T9n } from 'meteor-accounts-t9n';
+import Col from '../../components/Col/Col';
 import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButtons';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
 import validate from '../../../modules/validate';
-import { translate } from 'react-i18next';
-import { T9n } from 'meteor-accounts-t9n';

 class Login extends React.Component {
  constructor(props) {
    super(props);
    this.t = props.t;
    this.handleSubmit = this.handleSubmit.bind(this);
+    console.log(this.props.location.state);
  }

  componentDidMount() {
@ -25,26 +26,26 @@ class Login extends React.Component {
      rules: {
        emailAddress: {
          required: true,
-          email: true,
+          email: true
        },
        password: {
-          required: true,
-        },
+          required: true
+        }
      },
      messages: {
        emailAddress: {
-          required: this.t("Necesitamos un correo aquí."),
-          email: this.t("¿Es este correo correcto?"),
+          required: this.t('Necesitamos un correo aquí.'),
+          email: this.t('¿Es este correo correcto?')
        },
        password: {
-          required: this.t("Necesitamos una contraseña aquí."),
-        },
+          required: this.t('Necesitamos una contraseña aquí.')
+        }
      },
-      submitHandler() { component.handleSubmit(); },
+      submitHandler() { component.handleSubmit(); }
    });
  }

-  handleSubmit() {
+  handleSubmit = () => {
    const { history } = this.props;

    Meteor.loginWithPassword(this.emailAddress.value, this.password.value, (error) => {
@ -52,61 +53,69 @@ class Login extends React.Component {
        Bert.alert(T9n.get(`error.accounts.${error.reason}`), 'danger');
      } else {
        Bert.alert(this.t('Bienvenid@ de nuevo'), 'success');
+        console.log(this.props.location.state);
+        if (this.props.location.state &&
+            this.props.location.state.center &&
+            this.props.location.state.distance) {
+          this.props.history.push('/subscriptions', this.props.location.state);
+        }
      }
    });
  }

  render() {
-    return (<div className="Login">
-      <Row className="align-items-center justify-content-center">
-        <Col xs={12} sm={6} md={5} lg={4}>
-          <h4 className="page-header">{this.t("Iniciar sesión")}</h4>
-          <Row>
-            <Col xs={12}>
-              <OAuthLoginButtons
-                services={['google']}
-                emailMessage={{
-                  offset: 100,
-                  text: this.t('o inicia sesión con un correo'),
-                }}
-              />
-            </Col>
-          </Row>
-          <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-            <FormGroup>
-              <ControlLabel>{this.t("Correo electrónico")}</ControlLabel>
-              <input
-                type="email"
-                name="emailAddress"
-                ref={emailAddress => (this.emailAddress = emailAddress)}
-                className="form-control"
-              />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel className="clearfix">
-                <span className="pull-left">{this.t("Contraseña")}</span>
-                <Link className="pull-right" to="/recover-password">{this.t("¿Olvidaste tu contraseña?")}</Link>
-              </ControlLabel>
-              <input
-                type="password"
-                name="password"
-                ref={password => (this.password = password)}
-                className="form-control"
-              />
-            </FormGroup>
-            <Button type="submit" bsStyle="success">{this.t("Iniciar sesión")}</Button>
-            <AccountPageFooter>
-              <p>{this.t("¿No tienes una cuenta?")} <Link to="/signup">{this.t("Regístrate")}</Link>.</p>
-            </AccountPageFooter>
-          </form>
-        </Col>
-      </Row>
-    </div>);
+    return (
+      <div className="Login">
+        <Row className="align-items-center justify-content-center">
+          <Col xs={12} sm={6} md={5} lg={4}>
+            <h4 className="page-header">{this.t('Iniciar sesión')}</h4>
+            <Row>
+              <Col xs={12}>
+                <OAuthLoginButtons
+                  services={['google']}
+                  emailMessage={{
+                    offset: 100,
+                    text: this.t('o inicia sesión con un correo')
+                  }}
+                />
+              </Col>
+            </Row>
+            <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
+              <FormGroup>
+                <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+                <input
+                  type="email"
+                  name="emailAddress"
+                  ref={emailAddress => (this.emailAddress = emailAddress)}
+                  className="form-control"
+                />
+              </FormGroup>
+              <FormGroup>
+                <ControlLabel className="clearfix">
+                  <span className="pull-left">{this.t('Contraseña')}</span>
+                  <Link className="pull-right" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
+                </ControlLabel>
+                <input
+                  type="password"
+                  name="password"
+                  ref={password => (this.password = password)}
+                  className="form-control"
+                />
+              </FormGroup>
+              <Button type="submit" bsStyle="success">{this.t('Iniciar sesión')}</Button>
+              <AccountPageFooter>
+                <p>{this.t('¿No tienes una cuenta?')} <Link to="/signup">{this.t('Regístrate')}</Link>.</p>
+              </AccountPageFooter>
+            </form>
+          </Col>
+        </Row>
+      </div>);
  }
 }

 Login.propTypes = {
  history: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
 };

 export default translate([], { wait: true })(Login);
--- a/imports/ui/pages/Sandbox/Sandbox.js
+++ b/imports/ui/pages/Sandbox/Sandbox.js
@ -1,33 +1,28 @@
 import React from 'react';
-import { Trans, translate } from 'react-i18next';
-import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
-import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
-import update from 'immutability-helper';
-import { Gkeys } from '/imports/startup/client/Gkeys';
-import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
+// import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';

 class Sandbox extends React.Component {
  constructor(props) {
    super(props);
-    this.state = {
-      init: false
-    };
+    /* this.state = {
+     *   init: false
+     * }; */
  }

-  componentDidMount = () => {
-    this.setState({init: true});
-    Gkeys.load(function(err, key) {
-      console.log(key);
-    }.bind(this));
+  componentDidMount() {
+    // this.setState({init: true});
  }

  render() {
    return (
-      <div>
-        <FireSubscription />
-      </div>
+      <div></div>
    );
  }
 }

+Sandbox.propTypes = {
+  // history: PropTypes.object.isRequired
+};
+
 export default translate([], { wait: true }) (Sandbox);
--- a/imports/ui/pages/Signup/Signup.js
+++ b/imports/ui/pages/Signup/Signup.js
@ -10,7 +10,6 @@ import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButt
 import InputHint from '../../components/InputHint/InputHint';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
 import validate from '../../../modules/validate';
-import Icon from '../../components/Icon/Icon';
 import './Signup.scss';
 import { translate } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
@ -164,7 +163,7 @@ class Signup extends React.Component {
 }

 Signup.propTypes = {
-  history: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
 };

-export default translate([], { wait: true })(Signup)
+export default translate([], { wait: true })(Signup);