Skip to content

Instantly share code, notes, and snippets.

@marksharrison
Forked from willjohnson/README.md
Created June 11, 2014 17:06
Show Gist options
  • Save marksharrison/8188d9672ef139b77991 to your computer and use it in GitHub Desktop.
Save marksharrison/8188d9672ef139b77991 to your computer and use it in GitHub Desktop.

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.

class Dashing.AsanaTasks extends Dashing.Widget
<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>
<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>
#!/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
// ----------------------------------------------------------------------------
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment