Hipchat presence widget for Dashing

README.md

Description

A Dashing widget to show Hipchat user presence on a dashboard.

Dependencies

Add the following to your dashing Gemfile

gem 'hipchat'

And run bundle install

Installation

Copy the hipchat_presence.coffee, hipchat_presence.html and hipchat_presence.scss file to into /widgets/hipchat_presence directory and the hipchat_presence.rb into the /jobs directory.

Then to include widgets on the dashboard, add one or more of the following items to your dashboard file:

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="[email protected]" data-view="HipchatPresence"></div>
    </li>
    
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="[email protected]" data-view="HipchatPresence"></div>
    </li>

The data-id attribute should be in the form of hipchat-presence-<hipchat email>. You can have as many different widgets representing users as you want. Just make sure the email address used in the widget is added to the options hash in the :users key inside your jobs/hipchat_presence.rb file.

Options

The following options need to be set in the /jobs/hipchat_presence.rb file in the options hash:

• :api_token - Your hipchat v2 API token.
• :users - An array of user email addresses that correspond to their hipchat accounts.

hipchat_presence.coffee

class Dashing.HipchatPresence extends Dashing.Widget

  ready: ->
    super

  onData: (data) ->
    node = $(@node)
    node.removeClass('status-chat status-away status-dnd status-xa status-offline')
    node.addClass "status-#{data.presence_class}"

hipchat_presence.html

<div class="userinfo">
    <div  data-bind-class="presence_class">
        <span class="label fullname" data-bind="fullname"></span>

        <img data-bind-src="img" />
        <span class="label presence_name" data-bind="presence_name"></span>

        <br>
        <span class="label small presence_message" data-bind="presence_message"></span>
    </div>
</div>

hipchat_presence.rb

require 'hipchat'


options = {
    :api_token => '<YOUR TOKEN HERE>',
    :users => %w([email protected] [email protected])
}


hc_client = HipChat::Client.new(options[:api_token], :api_version => 'v2')

status_map = {
    'chat' => 'Available',
    'away' => 'Idle',
    'dnd' => 'Do Not Disturb',
    'xa' => 'Away',

    'offline' => 'Offline'
}

SCHEDULER.every '30s' do

  options[:users].each do |user|

    begin
      hc_user = hc_client.user(user).view

      if hc_user
        target = "hipchat-presence-#{user}"

        data = {
            :fullname => hc_user['name'],
            :img => hc_user['photo_url']
        }

        if hc_user['presence']
          data[:presence_class] = hc_user['presence']['show'] || 'offline'
          data[:presence_message] = hc_user['presence']['status'] || ''
        else
          data[:presence_class] = 'offline'
          data[:presence_message] = ''
        end

        data[:presence_name] = status_map[data[:presence_class]]


        send_event(target, data)
      end

    rescue => e
      puts "Hipchat exception: #{e}"
    end

  end

end

hipchat_presence.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color-chat: rgb(40, 185, 61);
$background-color-away: rgb(27, 91, 204);
$background-color-dnd: rgb(249, 46, 25);
$background-color-xa: rgb(244, 151, 9);
$background-color-offline: rgb(204, 204, 204);

$label-color:       rgba(255, 255, 255, 0.7);
$label-small-color: rgba(222, 222, 222, 0.70);

// ----------------------------------------------------------------------------
// Widget-hipchat_presence styles
// ----------------------------------------------------------------------------
.widget-hipchat-presence {

  background-color: $background-color-offline;
  vertical-align: top;

  .userinfo {
    width: 250px;
    height: 250px;
    margin: 0 auto;

    img {
      border-radius: 10px;
      margin: 5px;
    }
  }

  .label {
    text-align: center;
    display: block;
    color: $label-color;
    font-size: 24px;
    word-wrap: break-word;

    &.small {
      font-size: 18px;
      color: $label-small-color;
    }
  }


  &.status-chat{
    background-color: $background-color-chat;
  }

  &.status-away {
    background-color: $background-color-away;
  }

  &.status-dnd {
    background-color: $background-color-dnd;
  }

  &.status-xa {
    background-color: $background-color-xa;
  }

  &.status-offline {
    background-color: $background-color-offline;
  }
}