Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// ==UserScript==
// @name Toggl on Trello
// @namespace http://tampermonkey.net/
// @version 0.4
// @description Shows toggl entries that match C### where ### is the card number.
// @author sdebaun@sparks.network
// @match https://trello.com/c/*/*
// @match https://trello.com/b/*/*
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
var entryPrefix = 'C';
var togglAPIKey = GM_getValue('togglAPIKey');
var togglWorkspaceId = GM_getValue('togglWorkspaceId');
var togglUserAgentString = 'tampermonkey';
var beforeSelector = '.card-detail-item.card-detail-item-block';
(function() {
'use strict';
console.log('TM: waiting for page to load...');
waitForKeyElements('.card-detail-data', modifyCardDOM);
waitForKeyElements('.list-card-details', modifyBoardDOM);
})();
function modifyBoardDOM() {
unhideCardIds();
}
function modifyCardDOM() {
unhideCardIds();
addViewedCardId();
addTimeLoggedElement();
getTogglData();
}
function addViewedCardId() {
var cardId = window.location.href.split('/')[5].split('-')[0];
$('.window-title').prepend('<h4>#' + cardId + '</h4>');
}
function unhideCardIds() {
$(".card-short-id").append(" ").removeClass("hide");
}
function addTimeLoggedElement() {
var content = '<div class="card-detail-item card-detail-item-block" id="timeSpent">' +
'<h3 class="card-detail-item-header">Time Spent</h3>' +
'<a class="card-detail-item-header-edit" href="#" id="setTogglKey">API key</a>' +
'&nbsp;' +
'<a class="card-detail-item-header-edit" href="#" id="setWorkspaceId">workspace ID</a>' +
'&nbsp;' +
'<a class="card-detail-item-header-edit" href="#" id="clearSettings">clear</a>' +
'</div>';
$(beforeSelector).before(content);
$('#setTogglKey').click(requestAPIKey);
$('#setWorkspaceId').click(requestWorkspaceId);
$('#clearSettings').click(clearSettings);
}
function getTrelloCardId() {
var last = window.location.href.split('/')[5];
return last.split('-')[0];
}
function getTogglData() {
console.log('TM: fetching toggl data');
$.ajax({
url: 'https://toggl.com/reports/api/v2/details?description=' + entryPrefix + getTrelloCardId(),
success: successTogglData,
error: errorTogglData,
headers: {
Authorization: 'Basic ' + window.btoa(togglAPIKey + ':api_token'),
},
data: {
user_agent: togglUserAgentString,
workspace_id: togglWorkspaceId,
},
});
}
function togglDateFormat(date) {
return date.split('T')[0];
}
function togglDurationFormat(ms) {
return new Date(ms).toISOString().substr(11, 8);
}
function successTogglData(data) {
$('#timeSpent').append('<table id="timeEntries"></table>');
var totalDur = 0;
$.each(data.data, function(index, row) {
totalDur = totalDur + row.dur;
var tr = '<tr>' +
'<td>' + togglDateFormat(row.start) + '</td>' +
'<td>' + row.user + '</td>' +
'<td>' + togglDurationFormat(row.dur) + '</td>' +
'<td>' + row.description + '</td>' +
'</tr>';
$('#timeEntries').append(tr);
});
$('#timeSpent h3').prepend(togglDurationFormat(totalDur) + ' ');
}
function errorTogglData(data) {
renderMessage(data.responseJSON.error.message + ': ' + data.responseJSON.error.tip);
}
function renderMessage(msg) {
$('#timeSpent').append('<div class="u-quiet"><p>' + msg + '</p></div>');
}
function requestAPIKey() {
requestSetting('togglAPIKey', 'What is your Toggl API Key?');
}
function requestWorkspaceId() {
requestSetting('togglWorkspaceId', 'What is the Toggl Workspace ID?');
}
function requestSetting(key, label) {
var response = prompt(label);
if (response) {
GM_setValue(key,response);
location.reload();
}
}
function clearSettings() {
GM_setValue('togglAPIKey', null);
GM_setValue('togglWorkspaceId', null);
location.reload();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment