OC Transo widget for Dashing

dashboard.erb

    <!-- from jobs/oc_transpo.rb -->
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="octranspo-0867" data-view="OcTranspo" data-title="OC Transpo: Stop 0867"
      ></div>
      <i class="icon-road icon-background"></i>
    </li>

OC Transpo for Dashing.md

Fetches times for the next buses at a given OC Transpo stop.

Add the following to your gemspec:

gem 'octranspo_fetch', '>= 0.0.4'

Then configure the constants at the top of oc_transpo.rb.

oc_transpo.coffee

class Dashing.OcTranspo extends Dashing.Widget

oc_transpo.html

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

<ul class="list-nostyle">
  <li class="trip" data-foreach-trip="trips" data-bind-data-live="trip.live">
    <span class="value"><span data-bind="trip.arrival_in_minutes"></span> min</span>
    <span class="label">
        <span class="route"><span data-bind="trip.route_no"></span> @ <span data-bind="trip.stop_description"></span></span>
        <span class="busInfo"><span class="dest" data-bind="trip.destination"></span> <span data-bind="trip.bus_type"></span></span>
    </span>
  </li>
</ul>

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

oc_transpo.rb

require 'octranspo_fetch'

APPLICATION_ID = "xxx"
APPLICATION_KEY = "yyy"
MAX_RESULTS = 4
STOPS = {
    "0867" => {description: "Carling & March"},
    "7988" => {description: "Legget"},
    "3000" => {description: "Rideau Center", buses: [98, 35]}
}


oct = OCTranspo.new({application_id: APPLICATION_ID, application_key: APPLICATION_KEY})

SCHEDULER.every '1m', :first_in => 0 do
    # Get data for each stop
    no_data = []
    trips = []
    STOPS.each do |stop_no, stop_info|
        route_nos = stop_info[:buses]
        trips_for_stop = oct.simple_get_next_trips_for_stop stop_no, route_nos
        if trips_for_stop.length == 0
            no_data.push (stop_info[:description] or stop_no)
        else
            trips_for_stop.each do |trip|
                if stop_info[:description]
                    trip[:stop_description] = stop_info[:description]
                end
            end
            trips.concat trips_for_stop
        end
    end

    # Sort everything by arrival time.
    trips.sort! { |a,b| a[:arrival_in_minutes] <=> b[:arrival_in_minutes] }

    # Limit number of trips we return
    trips = trips[0...MAX_RESULTS]

    moreinfo = if no_data.length > 0
        "No data for stops: #{no_data.join ", "}"
    else
        cache_stats = oct.cache_stats()
        "Cache: #{cache_stats[:hits]} hits, #{cache_stats[:misses]} misses"
    end

    send_event('octranspo', { trips: trips, moreinfo: moreinfo})
end

oc_transpo.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #A2211F;

$title-color:        rgba(255, 255, 255, 0.7);
$moreinfo-color:     rgba(255, 255, 255, 0.7);
$live-color:         rgba(255, 255, 255, 0.7);
$unlive-color:       rgba(255, 255, 255, 0.4);
$bus-type-color:     rgba(0,0,0, 0.7);
$live-value-color:   #fff;
$unlive-value-color: rgba(255, 255, 255, 0.7);


// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-oc-transpo {

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

  .title {
    color: $title-color;
  }

  ul {
    margin: 0 15px;
    text-align: left;
    color: $live-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
    white-space: nowrap;
  }

  .label {
  }

  .trip[data-live="false"] .label {
    color: $unlive-color;
  }

  .trip[data-live="true"] .label {
    color: $live-color;
  }

  .dest:before {
    content: "To: ";
  }

  .busInfo {
    color: $bus-type-color;
    font-size: 60%;
    display: block;
  }

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

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

  .trip[data-live="true"] .value {
    color: $live-value-color;
  }

  .trip[data-live="false"] .value {
    color: $unlive-value-color;
  }

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

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

}

screenshot.png

I loaded your OC Transpo app in to Smashing and ran the bundle command. A widget appears on the dashboard but only says OC Transpo Stop:"8677" I don't get any bus times etc. Can you tell me what I might be doing wrong.

Thanks

@pctuneup, on your dashboard, change the data-id from octranspo-0867 to octranspo

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="octranspo" data-view="OcTranspo" data-title="OC Transpo: Stop 0867"></div>
      <i class="icon-road icon-background"></i>
    </li>