README.md

Description

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

Dependencies

Add the following to your dashing Gemfile

gem 'slack-api'
gem 'emoji_data'

And run bundle install

Installation

Copy the slack_presence.coffee, slack_presence.html and slack_presence.scss file to into /widgets/slack_presence directory and the slack_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="slack-presence-user1" data-view="SlackPresence"></div>
    </li>
    
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="slack-presence-user2" data-view="SlackPresence"></div>
    </li>

The data-id attribute should be in the form of slack-presence-<slack username>. You can have as many different widgets representing users as you want. Just make sure the slack username used in the data attribute matches the users slack mention name.

Options

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

• :api_token - Your slack API token.

slack_presence.coffee

class Dashing.SlackPresence extends Dashing.Widget

  ready: ->
    super

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

slack_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>

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

slack_presence.rb

require 'slack'
require 'emoji_data'


options = {
    :api_token => ENV['SLACK_TOKEN'],
}


slack_client = Slack::Client.new token: options[:api_token]

status_map = {
    'active' => 'Active',
    'away' => 'Away',
    'dnd' => 'Do Not Disturb',
    '' => 'Offline'
}

SCHEDULER.every '60s' do

  users_response = slack_client.users_list(presence: 1)
  dnd_response = slack_client.dnd_teamInfo

  slack_members = users_response["members"]
  slack_dnd = dnd_response["users"]

  slack_members.each do |u|

    target = "slack-presence-#{u['name']}"

    data = {
        :fullname => u['real_name'],
        :img => u['profile']['image_72'],
        :presence_class => u['presence'],
    }

    if slack_dnd[u['id']] && slack_dnd[u['id']]['dnd_enabled']
      now = Time.now.to_i
      dnd_data = slack_dnd[u['id']]
      if now >= dnd_data['next_dnd_start_ts'] && now <= dnd_data['next_dnd_end_ts']
        data[:presence_class] = 'dnd'
      end
    end

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

    if u['profile']['status_emoji'] != ''
      emoji = EmojiData.find_by_short_name(u['profile']['status_emoji'].gsub(':','')).first
      if emoji
        data[:presence_message] = emoji.render || ''
      end
    end

    if data[:presence_message] != ''
      data[:presence_message] = "#{data[:presence_message]} #{u['profile']['status_text']}"
    else
      data[:presence_message] = u['profile']['status_text'] || ''
    end


    send_event(target, data)
  end

end

slack_presence.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color-active: rgb(40, 185, 61);
$background-color-away: rgb(27, 91, 204);
$background-color-dnd: rgb(249, 46, 25);
$background-color-offline: rgb(146, 146, 146);

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

// ----------------------------------------------------------------------------
// Widget-slack_presence styles
// ----------------------------------------------------------------------------
.widget-slack-presence {

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

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

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

    .presence_message {
      margin-top: 15px;
    }

  }

  .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-active{
    background-color: $background-color-active;
  }

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

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

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