togglOnTrello.user.js

// ==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       [email protected]
// @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();
}