London Underground Status Widget

tfl_status.coffee

class Dashing.TflStatus extends Dashing.Widget

tfl_status.html

<h1 class="title" data-bind="title"></h1>

<ul>
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value"><div data-bind-class="item.color"><i data-bind-class="item.arrow"></i></div></span>
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

tfl_status.md

London Underground Realtime Tube Status

This is a simple widget to show the realtime status of the London Underground Tube lines.

You can update the list of the lines you would like to include in the list in the tfl_status.rb.

The widget uses tubeupdates.com as the API source and you can findout about the tube line names over there.

To install, just to a dashing install 8846431 and all should be good!

You might need to include HTTParty to your Gemfile if you haven't already:

gem 'httparty'

Credits

Most of the code is taken from Server Status Widget by willjohnson

tfl_status.rb

require 'httparty'

lines = ['central','circle','hammersmithcity','metropolitan','northern','victoria']

SCHEDULER.every '300s', :first_in => 10 do |job|
	statuses = Array.new

	result = HTTParty.get("http://api.tubeupdates.com/?method=get.status&lines=#{lines.join(',')}&format=json")
	raw_stats = JSON.parse(result.parsed_response)['response']['lines'].select { |s| lines.include? s['id']}
	
	# the API can return dups so we need to sort them and pick the top one
	stats = []
	# group them by line
	grouped = raw_stats.group_by { |i| i['id'] }
	# sort each group and pick the most recent update
	grouped.values.each do |line|
		line_updates = []
		begin
			line_updates = line.sort { |i| DateTime.parse(i['status_starts']) }
			stats << line_updates.first unless line_updates.empty?
		rescue 
			# nop
		end
	end
	
	stats.each do |line|
		if line['status'] == 'good service'
			result = 1
		elsif line['status'] == 'minor delays'
			result = 2
		else
			result = 0
		end
		
		if result == 1
			arrow = "icon-ok-sign"
			color = "green"
		elsif result == 2
			arrow = "icon-warning-sign"
			color = "yellow"
		else
			arrow = "icon-warning-sign"
			color = "red"
		end

		statuses.push({label: line['id'], value: result, arrow: arrow, color: color })
	end

	send_event('tfl_status', {items: statuses})
end

tfl_status.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #12b0c5;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-tfl-status {

  background-color: $background-color;
  vertical-align: top;

  .title {
    color: $title-color;
  }

  ol, ul {
    margin: 0 15px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
    list-style: none;
  }

  .label {
    color: $label-color;
  }

  .value {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: $value-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

  .more-info {
    color: $moreinfo-color;
  }

  .red {
    color: red;
  }

  .yellow {
    color: yellow;
  }

  .green {
    color: green;
  }
}

Has anyone had any luck updating this widget to use the API from tfl as opposed to this defunct 3rd party? Not knowing how the old API was structured I'm struggling to figure out what needs to change in tfl_status.rb.

The new API is here:

https://api.tfl.gov.uk/line/mode/tube,overground,dlr,tflrail/status

cc: @khash

you can add the widget as it is to dashboard file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div style="width:260px"><script language="JavaScript" src="https://www.tfl.gov.uk/tfl/syndication/widgets/serviceboard/embeddable/serviceboard-iframe-stretchy.js"></script></div> </li>