A dashing widget that displays tickets for Freshdesk.com

Readme.md

Description

A dashing widget that displays tickets for Freshdesk.com

• Displays unassigned tickets subject and time.
• Displays Ticket counts assigned to Agents.
• Time for each ticket changes color depending on age.

Preview

Usage

Add the widget HTML to your dashboard

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">               
      <div data-id="freshdesk" data-view="Freshdesk" data-title="Freshdesk Tickets"></div>
    </li>

2. Create a directory called freshdesk under widgets and copy freshdesk.coffeescript, freshdesk.html, freshdesk.scss into the directory.

3. Copy freshdesk.rb into your jobs folder.

4. Modify the FRESHDESK_URL and FRESHDESK_USERNAME in the freshdesk.rb file.

5. Add freshdesk-background.png to the assets/images folder.

More Info

Freshdesk API Documentation

freshdesk.coffee

clamp = (value) ->
    return Math.max(0, Math.min(Math.floor(value), 255))


gradient = (value) ->

    if value > 1 then value = 1

    start = [255, 255, 255]
    end = [255, 0, 0]

    finalColor = []
    for startChannel, i in start
        finalColor.push(startChannel * (1-value) + end[i])

    return (clamp(x) for x in finalColor)


class Dashing.Freshdesk extends Dashing.Widget
    ready: ->

    onData: (data) =>
    

Batman.mixin Batman.Filters,
    prettyTime: (dateStr) ->
        now = new Date()
        date = new Date(dateStr)

        elapsed = now.getTime() - date.getTime()

        # Percent passed 1 day
        value = elapsed / (24 * 60 * 60 * 1000)
        color = gradient(value)

        days =  Math.floor(elapsed / 24 / 60 / 60 / 1000)

        hours =  Math.floor(elapsed / 60 / 60 / 1000)
        minutes = Math.floor(elapsed / 60 / 1000)
        seconds = Math.floor(elapsed / 1000)

        if days >= 1
            plural = if days is 1 then '' else 's'
            return "<span style='color: rgb(#{color});'>#{days} day#{plural} ago</span>"

        if hours >= 1
            plural = if hours is 1 then '' else 's'
            return "<span style='color: rgb(#{color});'>#{hours} hour#{plural} ago</span>"

        if minutes >= 1
            plural = if minutes is 1 then '' else 's'
            return "<span style='color: rgb(#{color});'>#{minutes} minute#{plural} ago</span>"

        if seconds >= 0
            return "Now"

        return dateStr

    firstName: (name) ->
        name.split(' ')[0]

freshdesk.html

<h1 class="title">Unassigned Tickets</h1>

<ol>
  <li data-foreach-item="items" data-showif="item.unclaimed">
    <span class="subject" data-bind="item.subject | truncate 32"></span>
    <span class="time" data-bind="item.created_at | prettyTime | raw"></span>
  </li>
</ol>

<h1 class="title">Agents</h1>
<table>
    <tr> 
        <th class="name" data-foreach-agent="agents">
            <span data-bind="agent.name | firstName"></span>
        </th>
    </tr>
    <tr>
        <td class="count" data-foreach-agent="agents">
            <span data-bind="agent.count"></span>
            <span data-bind-id="agent.name"></span>
        </td>
    </tr>
</table>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

freshdesk.rb

# Enter your freshdesk url and api key.
FRESHDESK_URL = 'example.freshdesk.com'
FRESHDESK_VIEW_URL = '/helpdesk/tickets.json?filter_name=all_tickets'
FRESHDESK_USERNAME = 'SECRET_API_KEY'
# Password is blank
FRESHDESK_PASSWORD = ''
FRESHDESK_IGNORE_USERS = ['No Agent', ]


SCHEDULER.every '60s' do

    http = Net::HTTP.new(FRESHDESK_URL, 443)
    http.use_ssl = true
    http.verify_mode = OpenSSL::SSL::VERIFY_PEER

    http.start() {|http|
        req = Net::HTTP::Get.new(FRESHDESK_VIEW_URL)
        req.basic_auth FRESHDESK_USERNAME, FRESHDESK_PASSWORD
        response = http.request(req)

        json = JSON.parse(response.body)

        items = []
        agents = {}
        for ticket in json
            if ticket['status'] != 5                                           
                unclaimed = if ticket['responder_id'] then false else true end 
                obj = { subject: ticket['subject'], created_at: ticket['created_at'], unclaimed: unclaimed }
                items << obj                                                   
            end

            agent = agents[ticket['responder_name']]

            if agent
                agent['count'] = agent['count'] + 1
            else
                agents[ticket['responder_name']] = {}
                agents[ticket['responder_name']]['name'] = ticket['responder_name']
                agents[ticket['responder_name']]['count'] = 1
            end

        end

        agents_list = []
        agents.each do |key, value|
            obj = { name: value['name'], count: value['count'] }
            
            # Show only agents that exist
            if !FRESHDESK_IGNORE_USERS.include?(value['name'])
                agents_list << obj
            end
        end

        send_event('freshdesk', { items: items, agents: agents_list })

    }
end

freshdesk.scss

$background-color:  #16a085;
$background-color-name: #067660;
$background-color-count: #4d4b4b;

.widget-freshdesk {
    background: url('/assets/freshdesk-background.png') no-repeat;             
    background-color: $background-color;
    background-position: center;
    color: #ddd;

    ol {
        list-style-type: none;
        font-size: 1.5em;
        font-weight: bold;
    }

    .title {
        font-size: 2em;
        font-weight: bold;
        color: #fff;
    }

    table {
        border-collapse: separate;
        border-spacing: 6px;
        border-color: white;
    }

    .name {
        background-color: $background-color-name;
        font-size: 1.5em;
        font-weight: bold;

    }

    .count {
        background-color: $background-color-count;
        font-size: 1.5em;
        font-weight: 900;
    }
}

I can not get this to display information. i think Freshdesk changed their API is there any way you could check and see if that has affected this widget?