README.md

Description

A Dashing widget for displaying tasks assigned to you in Asana.

Dependencies

You need an account with Asana to use this.

Add to dashing's gemfile:

gem 'asana'
gem 'json'

and run bundle install.

Usage

Add the widget HTML to your dashboard

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
      <div data-id="asana_tasks" data-view="AsanaTasks" data-title="Today's Tasks"></div>
    </li>

Create a directory titled "asana_tasks" under your widgets directory and move asana_tasks.coffee, asana_tasks.html, and asana_tasks.scss into that directory.

Get your API key from Asana by logging into asana.com, clicking on your name in the bottom left, and selecting account settings. Select the Apps tab and click on API key.

You also need the name of the workspace that you want to show tasks from.

Modify the api_key and workspace_name variables of the asana_tasks.rb file.

Move asana_tasks.rb into your jobs folder.

asana_tasks.coffee

class Dashing.AsanaTasks extends Dashing.Widget

asana_tasks.erb

<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
  <div data-id="asana_tasks" data-view="AsanaTasks" data-title="Today's Tasks"></div>
</li>

asana_tasks.html

<h1 class="title" data-bind="title"></h1>

<ul>
  <li data-foreach-item="items">
    <i data-bind-class="item.icon"></i>
    <span class="label" data-bind="item.label"></span>
  </li>
</ul>

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

asana_tasks.rb

#!/usr/bin/env ruby
require 'asana'
require 'json'

# You need to enter your API key to query Asana.
# You can find that by clicking on your name in the bottom left and selecting Account Settings.
# Click on the Apps tab.
api_key = 'ASANA API KEY'
# The name of the workspace you would like to query. Case sensitive so you might need to go to Edit Workspace Settings to see.
workspace_name = 'WORKSPACE NAME'
# Number of tasks to show
num_tasks = 10

Asana.configure do |client|
	client.api_key = api_key
end


# get workspace id
workspace_id = nil
workspaces = Asana::Workspace.all
workspaces.each do |workspace|
	if workspace.attributes['name'] == workspace_name
		workspace_id = workspace.attributes['id']
	end
end
# set workspace
workspace = Asana::Workspace.find(workspace_id)

# :first_in sets how long it takes before the job is first run. In this case, it is run immediately
SCHEDULER.every '30m', :first_in => 0 do |job|
	list = Array.new
	tasks = workspace.tasks(:me)

	i = 0
	tasks.each do |task|
		task_detail = Asana::Task.find(task.attributes['id'])
		if task_detail.attributes['assignee_status'] == 'today'
			if task_detail.attributes['completed'] == true
				icon = 'icon-check'
			else
				icon = 'icon-check-empty'
				list.push({label: task.attributes['name'], icon: icon}) # moved here due to no longer being able to archive tasks
				i += 1 # moved here due to no longer being able to archive tasks
			end
		end
		break if i == num_tasks
	end

	send_event('asana_tasks', {items: list})
end

asana_tasks.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #12b0c5;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-asana-tasks {

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

  .title {
    color: $title-color;
  }

  ol, ul {
    margin: 0 15px;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
    margin-left: 0px;
    text-align: left;
  }

  .list-nostyle {
    list-style: none;
  }

  .label {
    color: $label-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

  .more-info {
    color: $moreinfo-color;
  }
}