Dashing Widget: Time Since Last (Red Green)

README.md

Dashing Widget: Time Since Last (Red Green)

This is a modified version of the Time Since Last widget by hannesfostie that is a bit simplified and with the red-green inverted (goes red when too much time has passed).

It does not use HTML local storage (no need, the server remembers it for us) and the threshold is just called 'threshold' and it is in hours.

Installation

dashing install 656f8dc218d3e11d238a

Then add this to your dashboard's erb.

    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="example_widget" data-view="TimeSinceLast" data-title="Example Widget" data-threshold="24"></div>
    </li>

Change data-threshold (in hours) to make the tile go red if it exceeds this value.

Sending Data

The widget takes a unix epoch time (in seconds) from the key time.

An example of sending a value would be:

the_time = Time.new()
send_event('example_widget', { time: the_time.to_i })

time_since_last.coffee

class Dashing.TimeSinceLast extends Dashing.Widget

  ready: ->
    if not @last_event? and this.time?
      @onData(this)
    setInterval(@startTime, 500)
 
  onData: (data) ->
    @last_event = moment(data.time*1000)
    @startTime()
    @set('sub', @last_event.format("ddd h:mm a"))
 
  startTime: =>
    node = $(@node)
    if @last_event? and @last_event.isValid()
      @set('time_past', @last_event.fromNow(true))
      if @get('threshold')
        if @last_event < moment().subtract(@get('threshold'), 'hours')
          node.addClass('bad')
          node.removeClass('good')
        else
          node.addClass('good')
          node.removeClass('bad')
    else
      @set('time_past', "?")
      node.removeClass('bad')
      node.removeClass('good')

time_since_last.html

<h1 data-bind="title"></h1>
<h2 data-bind="time_past"></h2>
<span data-bind="sub"></span>

time_since_last.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color-default:  #D35400;
$background-color-good:  #1D8147;
$background-color-bad:  #C0392B;
 
// ----------------------------------------------------------------------------
// time_since_last styles
// ----------------------------------------------------------------------------
.widget-time-since-last {
  background-color: $background-color-default;
}

.widget-time-since-last.good {
  background-color: $background-color-good;
}

.widget-time-since-last.bad {
  background-color: $background-color-bad;
}