Dashing Countdown Customized for Stock Market

countdown.coffee

#a bunch of dirty hacks right now to the original countdown widget
#original: https://gist.github.com/ruleb/5353056

class Dashing.Countdown extends Dashing.Widget

  ready: ->
    setInterval(@startCountdown, 500)

  startCountdown: =>
    count_to_close = true
    current_timestamp = Math.round(new Date().getTime()/1000)
    end_timestamp = Math.round( Date.parse($(@node).find(".more-info").html())/1000 )
    seconds_until_end = end_timestamp - current_timestamp
    if seconds_until_end < 0
      @set('timeleft', "TIME UP!")
      for i in [0..15] by 1
        $(@node).fadeTo('fast', 0).fadeTo('fast', 1.0)
      if i > 15 && count_to_close == true
        today = new Date()
        tomorrow = new Date()
        tomorrow.setDate(today.getDate()+1)
        tomorrow.setHours(9)
        tomorrow.setMinutes(30)
        tomorrow.setSeconds(0)
        count_to_close = false
        return @set('title', "Opening In") && @set('end', tomorrow.toLocaleString() )
      else
        today = new Date()
        today.setHours(15)
        today.setMinutes(0)
        today.setSeconds(0)
        count_to_close = true
        return @set('title', "Closing In") && @set('end', today.toLocaleString() )
    else
      d = Math.floor(seconds_until_end/86400)
      h = Math.floor((seconds_until_end-(d*86400))/3600)
      m = Math.floor((seconds_until_end-(d*86400)-(h*3600))/60)
      s = seconds_until_end-(d*86400)-(h*3600)-(m*60)
      if d >0
        dayname = 'day'
        if d > 1
          dayname = 'days'
        @set('timeleft', d + " "+dayname+" " + @formatTime(h) + ":" + @formatTime(m) + ":" + @formatTime(s))
      else
        @set('timeleft', @formatTime(h) + ":" + @formatTime(m) + ":" + @formatTime(s))


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

countdown.erb

#snippet

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div style="display: table; width: 100%; height: 100%;">
        <div data-view="Countdown" data-title="Closing In:" data-end='<%= Time.now.strftime("%B %d, %Y 14:19:00") %>'></div>
      </div>
    </li>

countdown.html

<h1 data-bind="title"></h1>
 
<h2 data-bind="timeleft" class="countdown-time"></h2>
 
<p class="more-info" data-bind="end"></p>

countdown.scss

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

// ----------------------------------------------------------------------------
// Widget-clock styles
// ----------------------------------------------------------------------------
.widget-countdown {

  background-color: $background-color;

  .more-info {
    color: rgba(0, 0, 0, 0.3);
    font-size: 15px;
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
  }

}

h2 { 
  font-size: 55px !important;
}