React Caltrain App

A simple React JS app that illustrates the caltrain time table functionality.

HTML

<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.padded-container{
    padding:5px;
}

JavaScript 1.7

/** @jsx React.DOM */

// ListView render a list of train schedule
// from a given source to destination
var ListView = React.createClass({
    render: function(){
        var createListItem = function(item){
               return (
               <tr>
                       <td>
                          <b>{item.trainNumber}</b>
                        </td>
                        <td>
                           {item.time}
                        </td>
                        <td>
                           <b>{item.duration}</b>
                        </td>
                </tr>);
        }
        return (
            <table className="table table-striped">
            <thead>
            <tr>
                <th>Train #</th>
                <th>Schedule</th>
                <th>Duration</th>            
            </tr>
            </thead>
            <tbody>
            {this.props.schedule.map(createListItem)}
            </tbody>
            </table>            
        );
    }
});

// InfoView renders a friendly label when there are no
// schedule available from a give source to destination
var InfoView = React.createClass({
    render : function(){
        return (
        <div className="alert alert-info">
            Please select different stations.
        </div>
        );
    }    
});

// SelectionView renders two select inputs that show a 
// list of available stations
var SelectionView = React.createClass({    
    //called when either of the select inputs
    //value get changed
    handleSelectionChange: function(ev){
        //get the current from and to values
        var fromSelection = this.refs.fromSelection.getDOMNode().value;
        var toSelection = this.refs.toSelection.getDOMNode().value;
        
        //Call the parent onChange callback
        //to notify the current from and to selections
        this.props.onChange({
            ev : ev,
            from : fromSelection,
            to : toSelection
        });
    },
...