Skip to content

Instantly share code, notes, and snippets.

@garlandkr
Forked from masha256/README.md
Last active August 29, 2015 14:18
Show Gist options
  • Save garlandkr/81767fa95e9294455351 to your computer and use it in GitHub Desktop.
Save garlandkr/81767fa95e9294455351 to your computer and use it in GitHub Desktop.

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="hipchat-presence-user1@domain.com" data-view="HipchatPresence"></div>
    </li>
    
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="hipchat-presence-user2@domain.com" 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.
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}"
<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>
require 'hipchat'
options = {
:api_token => '<YOUR TOKEN HERE>',
:users => %w(user1@domain.com user2@domain.com)
}
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
// ----------------------------------------------------------------------------
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment