TfL SignalR Predictions Demo

HTML

<script src="https://tfl.gov.uk/cdn/static/scripts//plugins/includes/jquery.signalR-2.0.2.min.js"></script>
<script src="https://push-api.tfl.gov.uk/signalr/hubs"></script>
<table id="board"><tr><td>Predictions loading...</td><td>Due</td><td>Please wait...</table>

CSS

table {
    border: 16px solid #333;
    color: yellow;
    background-color: #111;
    font-family: monospace;
}

td { 
    padding: 8px; 
}

JavaScript

$.connection.hub.logging = true;
$.connection.hub.url = "https://push-api.tfl.gov.uk/signalr/hubs/signalr";

var hub = $.connection.predictionsRoomHub;
hub.client.showPredictions = updateBoard;

$.connection.hub.start()
                .done(function() {
console.log("tfl.predictions: connection started");
    
var lineRooms = [{ "LineId": "northern" }, { "LineId": "central" }];

hub.server.addLineRooms(lineRooms)
          .done(function () {
             console.log("tfl.predictions: Invocation of addLineRooms succeeded");
             return;
          })
         .fail(function (error) {
             console.log("tfl.predictions: Invocation of addLineRooms failed. Error: " + error);
             return;
         });
    
});

function updateBoard(data) {
            $("#board").empty();
            data.sort(sortByTts);
  
            $.each(data, function( index, prediction ) {
              var mins = Math.floor(prediction.TimeToStation/60);
              var due = mins === 0 ? "Due" : mins + "m"; 
                $("#board").append("<tr><td>" + prediction.Towards + "</td><td>" + due + "</td><td>" + prediction.CurrentLocation + "</td></tr>");
            });
    
            console.log(data);
            return true;
};

function sortByTts(a, b) {
  return ((a.TimeToStation < b.TimeToStation) ? -1 : ((a.TimeToStation > b.TimeToStation) ? 1 : 0));
};