Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dashing pomodoro widget

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.

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()
<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>
// ----------------------------------------------------------------------------
// 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;
}
}
@mmiller458

This comment has been minimized.

Copy link

@mmiller458 mmiller458 commented Nov 24, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment