diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..6866ac2
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+ "directory": "vendor"
+}
diff --git a/.gitignore b/.gitignore
index fc428e3..4fc7c8d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,6 @@ Thumbs.db
.grunt
node_modules
bower_components
+
+heroku
+heroku.pub
diff --git a/Procfile b/Procfile
new file mode 100644
index 0000000..489b270
--- /dev/null
+++ b/Procfile
@@ -0,0 +1 @@
+web: node server.js
diff --git a/app/bootstrap.jsx b/app/bootstrap.jsx
new file mode 100644
index 0000000..81a4e7b
--- /dev/null
+++ b/app/bootstrap.jsx
@@ -0,0 +1,20 @@
+/** @jsx React.DOM */
+(function() {
+ var feature;
+
+ var requiredFeatures = {
+ "the selectors API": document.querySelector,
+ "ES5 array methods": Array.prototype.forEach,
+ "DOM level 2 events": window.addEventListener,
+ "the HTML5 history API": window.history.pushState
+ };
+
+ for (feature in requiredFeatures) {
+ if (!requiredFeatures[feature]) {
+ return alert("Sorry, but your browser does not support " + feature + " so this app won't work properly.");
+ }
+ }
+
+ window.app = React.renderComponent(, document.body);
+
+})();
diff --git a/app/component/network.jsx b/app/component/network.jsx
new file mode 100644
index 0000000..be88698
--- /dev/null
+++ b/app/component/network.jsx
@@ -0,0 +1,88 @@
+/** @jsx React.DOM */
+var Network = React.createClass({
+
+ getInitialState: function() {
+ return {
+ collapsible: window.innerWidth <= 800,
+ open: false
+ };
+ },
+
+ handleToggle: function() {
+ this.setState({ open: !this.state.open });
+ },
+
+ handleResize: function() {
+ this.setState({ collapsible: window.innerWidth <= 800 });
+ },
+
+ componentWillMount: function() {
+ // Simple event debouncing to avoid multiple recalculations
+ this.debounce = utils.debounceEvent(this.handleResize, 250);
+ window.addEventListener("resize", this.debounce, false);
+ },
+
+ componentWillUnmount: function() {
+ window.removeEventListener("resize", this.debounce, false);
+ },
+
+ render: function() {
+ var networkData = this.props.networkData;
+ var networkLineCodes = Object.keys(networkData.lines);
+
+ var toggleText = this.state.open ? "Close" : "Open";
+ var toggleClass = this.state.collapsible ? (this.state.open ? "is-open" : "is-closed") : "is-static";
+
+ var generatedForms = networkLineCodes.map(function(lineCode, i) {
+ return ;
+ }, this);
+
+ return (
+
+ {generatedForms}
+
+
+ );
+ }
+
+});
+
+var Line = React.createClass({
+
+ handleSubmit: function(event) {
+ event.preventDefault();
+
+ // Dispatch an event for other components to capture
+ var updateEvent = new CustomEvent("tt:update", {
+ detail: {
+ station: this.refs.station.getDOMNode().value,
+ line: this.props.lineCode
+ },
+ bubbles: true
+ });
+
+ this.refs.form.getDOMNode().dispatchEvent(updateEvent);
+ },
+
+ render: function() {
+ var lineCode = this.props.lineCode;
+ var networkData = this.props.networkData;
+ var stationsOnThisLine = networkData.stationsOnLines[lineCode];
+
+ var generatedOptions = stationsOnThisLine.map(function(stationCode, i) {
+ return ;
+ });
+
+ return (
+
+ );
+ }
+
+});
diff --git a/app/component/predictions.jsx b/app/component/predictions.jsx
new file mode 100644
index 0000000..c5b3e8b
--- /dev/null
+++ b/app/component/predictions.jsx
@@ -0,0 +1,173 @@
+/** @jsx React.DOM */
+var Predictions = React.createClass({
+
+ getInitialState: function() {
+ return { status: this.props.line && this.props.station ? "loading" : "welcome" };
+ },
+
+ fetchPredictions: function(line, station) {
+ // The circle line isn't defined in the API but shares platforms with other lines
+ if (line === "O") {
+ line = utils.mapCircleLineStation(station, this.props.networkData);
+ }
+
+ var api = "http://cloud.tfl.gov.uk/TrackerNet/PredictionDetailed/" + line + "/" + station;
+
+ this.setState({ status: "loading" });
+
+ // The TrackerNet API does not support cross-origin requests so we must use a proxy
+ utils.httpRequest(utils.proxyRequestURL(api), this.predictionsSuccess, this.predictionsError);
+ },
+
+ predictionsError: function(error) {
+ this.setState({
+ status: "error",
+ predictionData: null
+ });
+
+ // Pipe the error into your error logging setup
+ // Airbrake.push({ error: error });
+ },
+
+ predictionsSuccess: function(responseDoc) {
+ // Because we're using a proxy it will return a 200 and XML even if the
+ // TrackerNet API is unavailble or request was invalid.
+ if (!utils.validateResponse(responseDoc)) {
+ return this.predictionError(new Error("Invalid API response"));
+ }
+
+ this.setState({
+ status: "success",
+
+ // Dealing with XML in the browser is so ugly that I've
+ // used 'models' to abstract it away.
+ predictionData: new Prediction(responseDoc)
+ });
+ },
+
+ resetPoll: function(line, station) {
+ this.fetchPredictions(line, station);
+
+ if (this.poll) {
+ clearInterval(this.poll);
+ }
+
+ this.poll = setInterval(this.fetchPredictions.bind(this, line, station), 1000 * 30);
+ },
+
+ componentDidMount: function() {
+ if (this.props.line && this.props.station) {
+ this.resetPoll(this.props.line, this.props.station);
+ }
+ },
+
+ componentWillUnmount: function() {
+ clearInterval(this.poll);
+ },
+
+ componentWillReceiveProps: function(newProps) {
+ this.resetPoll(newProps.line, newProps.station);
+ },
+
+ shouldComponentUpdate: function(newProps, newState) {
+ // Only update when line/station changes or new predictions load otherwise the
+ // loading notice will be displayed when refreshing current predictions.
+ return this.props !== newProps || this.state.predictionData !== newState.predictionData;
+ },
+
+ render: function() {
+ if (this.state.status === "success") {
+ return ;
+ }
+
+ return ;
+ }
+
+});
+
+var DepartureBoard = React.createClass({
+
+ render: function() {
+ var predictionData = this.props.predictionData;
+ var station = predictionData.station();
+
+ var generatedPlatforms = station.platforms().map(function(platform) {
+ return (
+
+
{platform.name()}
+
+
+ );
+ });
+
+ // Heading does not account for circle line mapping, meh
+ return (
+
+
{station.name() + " " + predictionData.line()}
+ {generatedPlatforms}
+
+ );
+ }
+
+});
+
+var Trains = React.createClass({
+
+ render: function() {
+ var generatedTrains = this.props.trains.map(function(train) {
+ return (
+
+ | {train.timeTo()} |
+ {train.destination()} |
+ {train.location()} |
+
+ );
+ });
+
+ return (
+
+
+
+ | Time |
+ Destination |
+ Current location |
+
+
+
+ {generatedTrains}
+
+
+ );
+ }
+
+});
+
+var Notice = React.createClass({
+
+ statusText: function(status) {
+ var text;
+
+ switch (status) {
+ case "error":
+ text = "Sorry an error occured, please try again.";
+ break;
+ case "loading":
+ text = "Loading predictions…"
+ break;
+ case "welcome":
+ text = "Please choose a station.";
+ break;
+ }
+
+ return text;
+ },
+
+ render: function() {
+ return (
+
+
{this.statusText(this.props.type)}
+