README.md

Description

Simple Dashing widget that tracks time since a certain event. Time Since Last waits for request to be made to your instance of Dashing and will then reset the time since the last occurrence of whatever event you would like to track. An example could be the time since the last exception for one of your applications, or the time since the last accident on the workfloor (better keep that widget green)!

The widget was made by @hannesfostie for use @openminds.

Dependencies

This widget requires HTML5's localStorage in order to keep track of the last time the event occurred in order for it to work across restarts and refreshes.

I also use Moment.js for easier date objects, and to display the time like a few seconds ago rather than something ugly. If you are not a fan of this, I'm sure you can figure out how to remove this. If not, get in touch!

Usage

To use this widget, copy time_since_last.html, time_since_last.coffee, and time_since_last.scss into the /widgets/time_since_last directory.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="time_since_last" data-view="TimeSinceLast" data-title="Time since last event" data-green-after="60"></div>
</li>

Settings

The data-green_after-attribute of the widget takes a number in seconds that have to pass in order for the widget to turn green. You can remove this, and the widget will default to turning the widget green after 100 seconds.

NEW The data-since_date-attribute of the widget takes a string representing a date and updates data-time_past-attribute. This is now the only way to set data-time_past-attribute.

Making things look nice

I made one extra modification to the widget, but I decided to describe it here because it requires additional javascript libraries which you may or may not want to include. In any case this step is not really required, but I prefer to add it.

The second uses RainbowVis-JS to set the background color to a color between two (or more!) colors of your choosing. I changed the backgroundColor function to achieve this. In my case:

 backgroundColor: =>
    if ($(@node).data('green-after'))
      greenAfter = parseInt($(@node).data('green-after'))
    else
      greenAfter = 100

    diff = moment().unix() - moment(@last_event).unix()
    if (diff > greenAfter)
      "#4d9e45"
    else
      rainbow = new Rainbow().setSpectrum('#e84916', '#4d9e45');
      '#'+rainbow.colourAt(diff / greenAfter * 100)

Contributing

Have tips on making this better? Please leave a comment and/or fork the gist. Sending me a tweet on Twitter is probably a good idea as well!

Notes

Because of moment/moment#1407 I have replaced moment() with moment().format() and moment("some string representation") to moment(new Date("some string representation")).format(). This change was to ensure a consistent date/time object was stored in localStorage.

I (@denhua) have renamed all attributes, e.g. green-after, to use an underscore instead, i.e. green_after. This is to allow a scheduled job to send an event to the widget.

I (@denhua) have modified the semantics of class Dashing.TimeSinceLast so that a refresh of the dashboard page does not reset the counter of data-time_past-attribute. The data-since_date-attribute is new and is now the only way to update/reset the counter. You can now use a scheduled job to update the counter.

! (@denhua) have integrated a countdown to the display such that between -hour < 0 < hour will display a countdown/countup timer.

time_since_last.coffee

class Dashing.TimeSinceLast extends Dashing.Widget

  ready: ->
    @last_event = moment(new Date(localStorage.getItem(@get('id')+'_last_event')))
    @last_event = moment().format() unless @last_event
    setInterval(@startTime, 500)

  onData: (data) ->
    if(@get('since_date'))
      localStorage.setItem(@get('id')+'_last_event', moment(new Date(@get('since_date'))).format())

    @last_event = moment(new Date(localStorage.getItem(@get('id')+'_last_event')))
    $(@node).fadeOut().css('background-color', @backgroundColor).fadeIn()

  startTime: =>
    delta = moment().unix() - moment(@last_event).unix()
    t = Math.abs(delta)

    hour = 60 * 60
    m = Math.floor(t / 60)
    s = Math.floor(t % 60)

    if t > hour
      @set('time_past', moment(@last_event).fromNow())
    else if delta > 0
      @set('time_past', "+ " + @formatTime(m) + ":" + @formatTime(s))
    else
      @set('time_past', "- " + @formatTime(m) + ":" + @formatTime(s))

    @set('moreinfo', moment(@last_event).format('MMMM Do YYYY HH:mm a'))

  formatTime: (i) ->
    if i < 10 then "0" + i else i

  backgroundColor: =>
    if (@get('green_after'))
      greenAfter = parseInt(@get('green_after'))
    else
      greenAfter = 100

    diff = moment().unix() - moment(@last_event).unix()
    if (diff > greenAfter)
      "#4d9e45"
    else
      '#e84916'

time_since_last.html

<h1 data-bind="title"></h1>
<p data-bind="time_past"></p>

time_since_last.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #4d9e45;

// ----------------------------------------------------------------------------
// time_since_last styles
// ----------------------------------------------------------------------------
.widget-time-since_last {

  background-color: $background-color;

}