I'm building an app that shows progress of each Trello board as the the total number of checklist items compared to the number of completed checklist items. I Am able to do this for each board individually but cannot figure out how to display a total for the board.
I guess the main thing I need is how to differentiate between each board while going through the card .each loop. Once I get all the checklist items for that board I need to do something with that data and then move on to the next board.
Here's the code I have so far:
Trello.members.get("me", function (member) {
var memberID = member.id;
Trello.get("members/" + memberID + "/boards", function (boards) {
$.each(boards, function (index, board) {
var boardName = board.name,
boardID = board.shortLink;
var boardLi = $('<li>', {
class: 'boardCard'
}).appendTo($trelloBoards);
var titleHeader = $('<div>', {
class: 'boardHeader',
html: '<h3>' + boardName + '</h3>'
}).appendTo(boardLi);
var progressBar = $('<progress>', {
value: 10,
max: 100,
class: 'boardProgress'
}).appendTo(boardLi);
//get all the cards for a specific board
Trello.get("boards/" + boardID + "/cards", function (cards) {
$.each(cards, function (index, card) {
var boardItemsChecked = card.badges.checkItemsChecked,
boardTotalItems = card.badges.checkItems;
//here I need to display the total number of complete
// and incomplete checklist tasks for each board
});
});
This is the closest I'm able to get. It shows multiple progress bars (one for each card that exists on the board). The problem is I need a total checked out of all checkItems for the board:
Trello.get("boards/" + boardID + "/cards", function(cards) {
$.each(cards, function(ix, card) {
var checked = card.badges.checkItemsChecked,
totalChecks = card.badges.checkItems;
var totalChecked = 0;
totalChecked = totalChecked + checked;
var sumTotalChecks = 0;
sumTotalChecks = sumTotalChecks + totalChecks;
var progressBar = $('<progress>', {
value: totalChecked,
max: sumTotalChecks,
class: 'boardProgress'
}).appendTo(titleHeader);
});
});
Here's the solution:
Trello.get("boards/" + boardID + "/cards", function(cards) {
var totalChecked = 0,
totalExisting = 0;
$.each(cards, function(ix, card) {
var checked = card.badges.checkItemsChecked,
totalChecks = card.badges.checkItems;
totalChecked += checked;
totalExisting += totalChecks;
$('progress' + "#" + boardID).attr({
value: totalChecked,
max: totalExisting
});
});
});