Trello Replay

by Frank van Puffelen

HTML

<script src="https://api.trello.com/1/client.js?key=00f1dd1e00000f1dd1e00000f1dd1e00&amp;dummy=.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="loggedout">
    <a id="connectLink" href="#">Connect To Trello</a>
</div>

<div id="loggedin">
    <div id="header">
        Logged in to as <span id="fullName"></span> 
        <a id="disconnect" href="#">Log Out</a>
        
        <span id='date' style='float: right'></span>
    </div>
    
    <div id="output"></div>
    
    <div id='chart_div' style='width: 1400px; height: 800px;'></div>
</div>

CSS

body {
    font-family: arial;
    font-size: 12px;
}

#loggedout {
    text-align: center;
    font-size: 20px;
    padding-top: 30px;
}
#loggedin { 
    display: none; 
}

#header {
    padding: 4px;
    border-bottom: 1px solid #000;
    background: #eee;
}

#output {
    padding: 4px;
}

.cards, .boards {
    margin-top: 20px;
}

.list {
    display: inline;
    width: 25%;
    float: left;
}

.card {
    border: 1px solid gray;
    margin-top: 1px;
    white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

var onAuthorize = function() {
    updateLoggedIn();
    $("#output").empty();
    
    Trello.members.get("me", function(member){
        $("#fullName").text(member.fullName);
    
        var $board = $("<div class='board'>")
            .text("Loading Board...")
            .appendTo("#output");
        var $lists = {};
        
        Trello.get("/boards/3dNwVaCp?lists=open", function(board) {
            $board.empty();
            //console.log(board);
            $.each(board.lists, function(ix, list) {
                //console.log(list);
                var $list = $("<div class='list'>")
                    .attr('id', list.id)
                    .text(list.name)
                    .appendTo($board);
                $lists[list.id] = $list;
            });
            Trello.get("/boards/3dNwVaCp?actions=all&actions_limit=1000", function(board) {
                //console.log(board);
                var actions = board.actions.reverse();
                var index = 0;
                var interval = setInterval(function() {
                    if (index+1 >= actions.length) clearInterval(interval);
                    //if (index >= 250) clearInterval(interval);
                    var action = actions[index++];
                    $('#date').text(action.date.substring(0, 10));
                    if (action.type == 'createCard' || action.type == 'copyCard') {
                        var card = $("<div class='card'>")
                          .attr('id', action.data.card.id)
                          .attr('title', action.data.card.name)
                          .text(action.data.card.idShort + ' - ' + action.data.card.name)
                          .appendTo($lists[action.data.list.id]);
                    } else if (action.type == 'convertToCardFromCheckItem') {
                        console.log('Card created from check item');
                        // TODO: we need to know in what list the card appeared
                        // data: {...