Merge pull request #2 from Salec/develop_public

Multilanguage
Salec · Dec 19, 2017 · 419b9c0 · 419b9c0
2 parents 6401776 + 5ba43ca
commit 419b9c0
Show file tree

Hide file tree

Showing 13 changed files with 214 additions and 136 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -4,20 +4,20 @@ React-Redux web application to check the path and time to reach destination of t
 
 Open API used: http://datos.santander.es
 
-Currently cors is disabled datos.santander.es API, to make it work under chrome install [this extension](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi)
+Currently cors is disabled for datos.santander.es API, to make it work under chrome install [this extension](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi)
 
-See http://www.tusantander.es/red-lineas for more information
+See http://www.tusantander.es/red-lineas for more information of the current Santander coach system.
 
 
 ### Install
-Run ```npm start``` to download all the dependencies 
+Run ```npm install``` to download all the dependencies 
 
-###Run
+### Run
 * In development start server with ```npm start``` Server will be deployed in [http://localhost:8080/](http://localhost:8080/) 
 * To generate production code, run  ```npm run build```
 
 #### TODO LIST
-- [ ] Add multilanguage 
+- [X] Add multilanguage 
 - [ ] Show load on fetch times
 - [ ] Update webpack
 - [X] Publish --> Add ccs

diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
   "repository": "git@github.com/Salec/SDRBuses.git",
   "scripts": {
     "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "build": "webpack -p --config ./webpack.prod.js --define process.env.NODE_ENV='\"production\"' --progress --colors  --display-modules"
+    "build": "webpack -p --config ./webpack.prod.js --define process.env.NODE_ENV='\"production\"' --progress --colors  --display-modules",
+    "extract": "i18n_extract",
+    "import": "i18n_import --translations=src/translations"
   },
   "license": "MIT",
   "devDependencies": {
@@ -38,6 +40,7 @@
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",
     "redux-form": "^4.1.3",
+    "redux-i18n": "^1.5.11",
     "redux-promise": "^0.5.3",
     "underscore": "^1.8.3"
   }

diff --git a/src/auxFunctions/common.js b/src/auxFunctions/common.js
@@ -2,37 +2,43 @@
  * Created by Fernando on 8/11/2017.
  */
 import _ from  'underscore';
-//90 min max time to show
+//60 min max time to show
 const MAX_TIME_TO_CONSIDER = 5400;
+//4 minutes max time ignore the result (time in miliseconds)
+const MAX_DIFF_TO_CONSIDER = 240000;
 
-export function timesTable(times,Nstop,nameStop, title = true) {
-    let titleInfo =(title) ? `<div class="infoStop">Parada <b>${Nstop}</b>: <span class="badge badge-pill badge-info">${nameStop}</span></div>` : '';
+export function timesTable(times, Nstop, nameStop, title = true) {
+    let titleInfo = (title) ? `<div class="infoStop">Parada <b>${Nstop}</b>: <span class="badge badge-pill badge-info">${nameStop}</span></div>` : '';
     let content = `${titleInfo}<table id="infoTable"><tbody>`;
     let filterArray = _.filter(
-
         times,
-        (it) => {return (it['ayto:tiempo1'] != 0 && it['ayto:tiempo1'] < MAX_TIME_TO_CONSIDER)
+        (it) => {
+            return (it['ayto:tiempo1'] != 0 && it['ayto:tiempo1'] < MAX_TIME_TO_CONSIDER && !isTooOldToConsider(it))
         }
     );
-    let order = _.sortBy(filterArray, info =>{
+    let order = _.sortBy(filterArray, info => {
         return parseInt(info['ayto:tiempo1']);
     });
     _.map(order, info => {
-        content += "<tr><td>"+ info['ayto:etiqLinea']+'</td><td>'+info['ayto:destino1'] +"</td><td><b>" +
+        content += "<tr><td>" + info['ayto:etiqLinea'] + '</td><td>' + info['ayto:destino1'] + "</td><td><b>" +
             Math.round(info['ayto:tiempo1'] / 60) + "</b> min</td></tr>";
     });
-    content +=' </tbody></table>';
+    content += ' </tbody></table>';
     return content;
 }
-export function orderTimes(times){
+export function orderTimes(times) {
     let filterArray = _.filter(
-
         times,
-        (it) => {return (it['ayto:tiempo1'] != 0 && it['ayto:tiempo1'] < MAX_TIME_TO_CONSIDER)
+        (it) => {
+            return (it['ayto:tiempo1'] != 0 && it['ayto:tiempo1'] < MAX_TIME_TO_CONSIDER && !isTooOldToConsider(it))
         }
     );
-    let order = _.sortBy(filterArray, info =>{
+    let order = _.sortBy(filterArray, info => {
         return parseInt(info['ayto:tiempo1']);
     });
     return order;
+}
+function isTooOldToConsider(row) {
+    return (new Date(row['dc:modified']) - new Date(row['ayto:fechActual']) >
+    MAX_DIFF_TO_CONSIDER);
 }
diff --git a/src/components/about.js b/src/components/about.js
@@ -1,67 +1,75 @@
-/**
- * Created by Fernando on 13/11/2017.
- */
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
-export default class About extends Component{
-    render(){
-        return(<div>
-            <h3 className="text-center text-primary mt-2">Sobre esta página</h3>
-                <p className="text-left">
-                    Proyecto de código abierto creado por Fernando Martín usando técnologias de react y redux
+export default class About extends Component {
+    render() {
+        return (<div>
+                <h3 className="text-center text-primary mt-2">{this.context.t("About this page")}</h3>
+                <p className="text-left">{this.context.t("Open source project created by Fernando Martín García usign react and redux tecnologies")}
                 </p>
-                <p className="text-left">Puedes contribuir con el projecto en github:
-
-
+                <p className="text-left">{this.context.t("You can collaborate with the project in github:")}
                     <a target="_blank" href="https://github.com/Salec/SDRBuses">
-                    <button type="button" className="ml-3 btn btn-outline-info m">
-                        <svg height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
-                        Colabora
-                    </button>
+                        <button type="button" className="ml-3 btn btn-outline-info m">
+                            <svg height="32" version="1.1" viewBox="0 0 16 16" width="32">
+                                <path
+                                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
+                                </path>
+                            </svg>
+                            {this.context.t("Collaborate")}
+                        </button>
                     </a>
-                    
+
                 </p>
                 <div className="container">
                     <div className="row justify-content-md-center">
-                        
+
                         <h6 className="col-md-auto mt-5">
-                        Actuales Colaboradores
+                            {this.context.t("Current Colaborators")}
                         </h6>
                     </div>
 
                     <div className="row">
-                        <div class="col-sm-3">   
-                            <div className="card" >
-                                <img className="card-img-top" src="https://avatars1.githubusercontent.com/u/4624133?s=460&v=4" alt="Fernando Martín García"/>
+                        <div className="col-sm-3">
+                            <div className="card">
+                                <img className="card-img-top"
+                                     src="https://avatars1.githubusercontent.com/u/4624133?s=460&v=4"
+                                     alt="Fernando Martín García"/>
                                 <div className="card-body">
                                     <h4 className="card-title">Fernando Martín García</h4>
-                                    <button type="button" className="btn btn-primary">Contacto</button>
-                                    <button type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown">
-                                        <span className="caret"/><span className="sr-only"></span>
+                                    <button type="button"
+                                            className="btn btn-primary">{this.context.t("Contacto")}</button>
+                                    <button type="button" className="btn btn-primary dropdown-toggle"
+                                            data-toggle="dropdown">
+                                        <span className="caret"/>
                                     </button>
                                     <ul className="dropdown-menu" role="menu">
-                                        <li><a target="_blank" href="https://www.linkedin.com/in/fermartingar/">LinkedIn</a></li>
+                                        <li><a target="_blank"
+                                               href="https://www.linkedin.com/in/fermartingar/">LinkedIn</a></li>
                                         <li><a target="_blank" href="https://github.com/Salec">Github</a></li>
                                     </ul>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-sm-3">   
-                            <div className="card" >
-                                <img className="card-img-top" src="..." alt="Tu cara aquí"/>
+                        <div className="col-sm-3">
+                            <div className="card">
+                                <img className="card-img-top" src="" alt="Your photo here"/>
                                 <div className="card-body">
-                                    <h4 className="card-title">Tu nombre aquí</h4>
-                                    <button type="button" className="btn btn-primary">Contacto</button>
-                                    <button type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown">
-                                        <span className="caret"/><span className="sr-only"></span>
+                                    <h4 className="card-title">{this.context.t("Your name here")}</h4>
+                                    <button type="button"
+                                            className="btn btn-primary">{this.context.t("Contact")}</button>
+                                    <button type="button" className="btn btn-primary dropdown-toggle"
+                                            data-toggle="dropdown">
+                                        <span className="caret"/>
                                     </button>
-
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-        </div>
+            </div>
         );
     }
+}
+About.contextTypes = {
+    t: PropTypes.func
 }
diff --git a/src/components/app.js b/src/components/app.js
@@ -1,9 +1,11 @@
 import React, {Component} from 'react';
+import I18n from "redux-i18n";
 import Main from './main'
+import {translations} from '../translations/translations';
 
 const App = () => (
-    <div>
+    <I18n translations={translations} initialLang="es">
         <Main />
-    </div>
+    </I18n>
 );
 export default App
diff --git a/src/components/buses_lines.js b/src/components/buses_lines.js
@@ -1,18 +1,14 @@
-/**
- * Created by Fernando on 4/10/2017.
- */
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
 import {fecthListBuses} from '../actions/index';
 
-
 class BusLines extends Component {
 
     constructor(props) {
         super(props);
-
-        this.state = { isOpen: false };
+        this.state = {isOpen: false};
     }
 
     toggleModal = () => {
@@ -35,24 +31,23 @@ class BusLines extends Component {
         })
     }
 
-    goto = (event) =>{
+    goto = (event) => {
         this.props.history.push(event.target.parentElement.dataset.url)
     }
 
     render() {
         if (!this.props.lines) {
-            return <div>Cargando...</div>
+            return <div>{this.context.t("Loading...")}</div>
         }
-
         return (<div>
 
-                <h3 className="text-center text-primary mt-2">Índice de líneas</h3>
+                <h3 className="text-center text-primary mt-2">{this.context.t("Line Index")}</h3>
 
                 <table className="table table-striped">
                     <thead>
                     <tr>
-                        <th>Nombre</th>
-                        <th>Linea</th>
+                        <th>{this.context.t("Name")}</th>
+                        <th>{this.context.t("Line")}</th>
                     </tr>
                     </thead>
                     <tbody>
@@ -65,18 +60,18 @@ class BusLines extends Component {
     };
 
     componentWillMount() {
-
         this.props.fecthListBuses();
     };
 }
-
+BusLines.contextTypes = {
+    t: PropTypes.func
+}
 function mapStateToProps(state) {
-    let order = _.sortBy(state.lines.busLines.resources, info =>{
+    let order = _.sortBy(state.lines.busLines.resources, info => {
         return parseInt(info['dc:identifier']);
     });
     return {lines: order};
 
 }
 
-
 export default connect(mapStateToProps, {fecthListBuses})(BusLines);
diff --git a/src/components/languageSelector.js b/src/components/languageSelector.js
@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {setLanguage} from "redux-i18n";
+
+class LanguageSelector extends Component {
+    render() {
+        return (
+            <div className="dropdown">
+                <button className="ml-2 btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Idioma
+                </button>
+                <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                    <a className="dropdown-item" onClick={() => {this.props.dispatch(setLanguage("es"))}} href="#">Español</a>
+                    <a className="dropdown-item" onClick={() => {this.props.dispatch(setLanguage("en"))}} href="#">English</a>
+                </div>
+            </div>
+        );
+    }
+}
+export default connect(state => ({
+    lang: state.i18nState.lang,
+}))(LanguageSelector)