Übersicht date widget example

date-widget-example.coffee

# This is a simple example Widget, written in CoffeeScript, to get you started
# with Übersicht. For the full documentation please visit:
#
# https://github.com/felixhageloh/uebersicht
#
# You can modify this widget as you see fit, or simply delete this file to
# remove it.

# this is the shell command that gets executed every time this widget refreshes
command: "echo $(whoami) && TZ=Australia/Adelaide date && TZ=Australia/Melbourne date"

# the refresh frequency in milliseconds
refreshFrequency: 60000

# render gets called after the shell command has executed. The command's output
# is passed in as a string. Whatever it returns will get rendered as HTML.
render: (output) -> """
   <div class="my-widget"></div>
"""

renderInfo: (username, timeAdelaide, timeMelbourne) -> """
  <h1>Hi, #{username}</h1>
  <table>
    <tr>
      <td>Adelaide:</td><td>#{timeAdelaide}</td>
    </tr>
    <tr>
      <td>Melbourne:</td><td>#{timeMelbourne}</td>
    </tr>
  </table>
"""

update: (output, domEl) ->
   params = output.split('\n')
   widgetHtml = @renderInfo(params...)
   widget = $(domEl).find('.my-widget')
   widget.html(widgetHtml)

# the CSS style for this widget, written using Stylus
# (http://learnboost.github.io/stylus/)
style: """
    left: 3%
    top: 3%
    width: 370px

  .my-widget 
    border-radius: 2px
    border: 2px solid #fff
    background-color: #fff
    box-sizing: border-box
    color: #141f33
    font-family: Helvetica Neue
    font-weight: 300
    line-height: 1.5
    padding: 20px
    text-align: justify

  h1
    font-size: 20px
    font-weight: 300
    margin: 0 0 8px

  h2 
    font-size: 18px;
    font-weight: 300

  p
    margin: 0
    padding: 0
    margin-bottom: 5px

"""