Dashing pomodoro widget

readme.md

Pomodoro widget for Dashing

A countdown timer that can be started from the dashboard. The timer is shared between everyone that is using the dashboard, useful for team pomodoros.

Note: The widget needs your auth_token, so it becomes public to anyone that uses the dashboard. If this is a problem for you, don't use it.

pomodoro.coffee

class Dashing.Pomodoro extends Dashing.Widget
  ready: ->
    setInterval(@startCountdown, 500)

  startCountdown: =>
    current_timestamp = Math.round(new Date().getTime()/1000)
    end = parseInt($(@node).find("#pomodoro-end-time").html())
    end_timestamp = Math.round(end / 1000)
    seconds_until_end = end_timestamp - current_timestamp

    if seconds_until_end < 0
      @set('timeleft', "Done!")
    else
      m = Math.floor(seconds_until_end / 60)
      s = seconds_until_end - m * 60
      @set('timeleft', @formatTime(m) + ":" + @formatTime(s))

    if seconds_until_end == 0
      @playSound()


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

  # Set your auth_token here
  # Having the auth_token in the widget is really bad, but not a problem for
  # us. If you are not OK with it, find some other solution.
  setEnd: (time) ->
    data = {auth_token: "YOUR_AUTH_TOKEN", end: time}
    $.ajax 'widgets/pomodoro',
          type: 'POST'
          dataType: 'json'
          data: JSON.stringify(data)

  start: (minutes) =>
    now = new Date().getTime()
    end = now + minutes * 60 * 1000
    @setEnd(end)

  stop: =>
    @setEnd(0)

  # Place your sound file in assets/images to get a notification when done
  playSound: ->
    audio = new Audio('assets/blip.wav')
    audio.play()

pomodoro.html

<h2 data-bind="title"></h2>

<h1 data-bind="timeleft" class="countdown-time"></h1>
<p id="pomodoro-end-time" class="hidden" data-bind="end"></p>
<ul>
    <li>
        <button data-event-click="stop">Stop</button>
    </li>
    <li>
        <button data-event-click="start | withArguments 1">Start 1 minute</button>
    </li>
    <li>
        <button data-event-click="start | withArguments 5">Start 5 minutes</button>
    </li>
    <li>
        <button data-event-click="start | withArguments 10">Start 10 minutes</button>
    </li>
    <li>
        <button data-event-click="start | withArguments 20">Start 20 minutes</button>
    </li>
    <li>
        <button data-event-click="start | withArguments 25">Start 25 minutes</button>
    </li>
</ul>

pomodoro.scss

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

// ----------------------------------------------------------------------------
// Widget-pomodoro styles
// ----------------------------------------------------------------------------
.widget-pomodoro {

  background-color: $background-color;

  h2 { font-size: 2em;}

  h1 { font-size: 2em;}

  .countdown-time {
    margin-top: 10px;
    color: gold;
  }

  .hidden {
    display: none;
  }
}

How do I get it to display on my dashboard? I tried, but failed. :(