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 api.tfl.gov.uk as the API source. You need to register there to get an app id and app key.

To install, just to a dashing install c3a54f74ada9bb65dc5c 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'

# add the lines you want to display to this array, 7 at most can be displayed in a 1x1 square. line ids are on below line, substitute them into the lines array
# bakerloo central circle district hammersmith-city jubilee metropolitan northern piccadilly victoria waterloo-city
lines = ['central','circle','hammersmith-city', 'jubilee', 'metropolitan','northern','victoria']

SCHEDULER.every '10s', :first_in => 10 do
	statuses = Array.new
	app_id = 'YOUR_APP_ID'
	app_key = 'YOUR_APP_KEY'

	result = HTTParty.get("https://api.tfl.gov.uk/Line/Mode/tube/Status?detail=False&app_id=#{app_id}&app_key=#{app_key}")
	parsed_result = result.parsed_response

	parsed_result.each do |line|
		if lines.include? line['id']
			if line['lineStatuses'].first['statusSeverityDescription'] == 'Good Service'
				result = 1
			elsif line['lineStatuses'].first['statusSeverityDescription'] == '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['name'], value: result, arrow: arrow, color: color })
		else
			# line is not in lines array so we ignore
		end

	end

	puts statuses
	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;
  }
}

Ugh, ignore this comment. Didn't realize the widget was calling icons that no longer existed in font awesome. Updated the icon names and it is all good. Thanks for updating this widget to the new/correct API!!