Skip to content

Instantly share code, notes, and snippets.

@mic159
Last active May 26, 2016 18:21
Show Gist options
  • Save mic159/656f8dc218d3e11d238a to your computer and use it in GitHub Desktop.
Save mic159/656f8dc218d3e11d238a to your computer and use it in GitHub Desktop.
Dashing Widget: Time Since Last (Red Green)

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 })
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')
<h1 data-bind="title"></h1>
<h2 data-bind="time_past"></h2>
<span data-bind="sub"></span>
// ----------------------------------------------------------------------------
// 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment