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

Map of active fires

Browse source
This commit is contained in:
vjrj 2017-12-01 13:33:24 +01:00
parent f87cf02c2d
commit 0b4f895506
7 changed files with 430 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

132
imports/ui/pages/Index/Index.js
View file

@ -3,17 +3,22 @@ import { Button } from 'react-bootstrap';
import { translate } 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';
import './Index.scss';
import './Index-custom.scss';
class Index extends Component {
// Debounce by David Walsch
// https://davidwalsh.name/javascript-debounce-function
constructor(props) {
super(props);
}
debounce = (func, wait, immediate) => {
var timeout;
return function() {
@ -51,72 +56,77 @@ class Index extends Component {
render() {
return (
<div className="IndexDisabled full-width">
{/* https://v4-alpha.getbootstrap.com/components/carousel/ */}
<header>
<ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div className="carousel-inner" role="listbox">
{/* https://v4-alpha.getbootstrap.com/components/carousel/ */}
<header>
<ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div className="carousel-inner" role="listbox">
<div className="carousel-item carousel-item-1 active">
<div className="slide-1-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-map-pointer" aria-hidden="true"></i>Elige un lugar</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-2">
<div className="slide-2-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-dot-circle-o" aria-hidden="true"></i>Elige un radio de vigilancia</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-3">
<div className="slide-3-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-podcast" aria-hidden="true"></i>Recibe alertas de fuegos en esa zona</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-4">
<div className="slide-4-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-bell-o" aria-hidden="true"></i>Alerta cuando hay un fuego</h3>
<p></p>
<div className="carousel-item carousel-item-1 active">
<div className="slide-1-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-map-pointer" aria-hidden="true"></i>Elige un lugar</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-2">
<div className="slide-2-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-dot-circle-o" aria-hidden="true"></i>Elige un radio de vigilancia</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-3">
<div className="slide-3-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-podcast" aria-hidden="true"></i>Recibe alertas de fuegos en esa zona</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-4">
<div className="slide-4-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-bell-o" aria-hidden="true"></i>Alerta cuando hay un fuego</h3>
<p></p>
</div>
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
</header>
</header>
<section className="py-5">
<div className="container">
<div className="scale__container--js">
<h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
<section className="py-5">
<div className="container">
<div className="scale__container--js">
<h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
</div>
<p>Siempre alerta a los fuegos en nuestro vecindario</p>
<Link className="participe-btn btn btn-lg btn-warning" role="button" to="/signup">{this.props.t('Participa')}</Link>
</div>
<p>Siempre alerta a los fuegos en nuestro vecindario</p>
<Link className="participe-btn btn btn-lg btn-warning" role="button" to="/signup">{this.props.t('Participa')}</Link>
</div>
</section>
</div>
);
</section>
<section className="py-5">
<a id="fires" name="fires"></a>
<FiresMap />
</section>
</div>
);
};
}