Metro Example

Greg Engel

by Alex Azuero

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div id="container">
    
</div>
<div id="container2">
    
</div>

<script id='template' type='text/ractive'>
  <select class="form-control" id="stations" on-change="choose" value="{{selected}}"> 
      {{#stations}}
      <option value="{{Code}}">{{Name}}</option>
      {{/stations}}
    <option value="" disabled selected>Select a station</option>
  </select>

</script>

<script id="times" type='text/ractive'>
      <!-- This div should contain a live updating copy of the selected station -->
<table class="table table-striped" id="status">
    <tr><th>Cars</th><th>Line</th><th>Min</th></tr>
    {{#trains}}
    <tr><td>{{Car}}</td><td>{{Line}}</td><td>{{Min}}</td></tr>
    {{/trains}}
</table>  
</script>

JavaScript

var stations;
var apiKey = 'cq2aqk86k8jsdfafqjkaa7d4';

station_select = new Ractive({
    el: 'container',
    template: '#template',
    data: {
        stations: stations,
        selected: ""
    }
});

trains = new Ractive({
    el: 'container2',
    template: '#times',
    data: {
        trains: [],
    }
});

var get_trains = function() {
    if (station_select.get("selected")) {
         $.ajax({
           url: "http://api.wmata.com/StationPrediction.svc/json/GetPrediction/" + station_select.get("selected"),
           data: { api_key: apiKey }
       }).done(function(data, status, xhr) {
 //            console.log(data);  
           trains.set('trains', data.Trains);
       });
    }
};

station_select.on('choose', function(d) {
//   console.log(station_select.get("selected"))   
   get_trains();   
});

 $.ajax({
        url: 'http://api.wmata.com/Rail.svc/json/jStations?api_key=cq2aqk86k8jsdfafqjkaa7d4',
        dataType: 'jsonp'
    }).done(function(data, status, xhr) {
 //     console.log(data);
    station_select.set('stations', data.Stations);
 });


setInterval(function() {
  get_trains();
} ,1000000)