2016-05-19 14:54:56 +02:00
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>A Trello Dashboard</title>
|
2016-05-19 14:59:10 +02:00
|
|
|
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
2016-05-19 14:54:56 +02:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<h1>Trello Estimates Dashboard</h1>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<p>This small tool reads descriptions of cards and looks for:
|
|
|
|
|
<quoute>Estimate: [number]</quote> line and sums the estimates.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>Number is expected to be amount of hours estimated, and it must be a whole number.</p>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<form class="form-horizontal" id="boards_form">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label">Choose your board</label>
|
|
|
|
|
<select class="form-control" id="boards">
|
|
|
|
|
<option> - select - </option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<h2> Total hours by label </h2>
|
|
|
|
|
<div id="labels"> (select board first)</div>
|
|
|
|
|
|
|
|
|
|
<h2> Total hours by list </h2>
|
|
|
|
|
<div id="lists"> (select board first) </div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
2016-05-19 14:59:10 +02:00
|
|
|
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
|
2016-05-19 14:54:56 +02:00
|
|
|
<script src="https://api.trello.com/1/client.js?key=f13dd6c2dcc65f48b9a56c6d420e32e7"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var initialValues = function() {
|
|
|
|
|
return {
|
|
|
|
|
lists: {},
|
|
|
|
|
labels: {}
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var values = initialValues();
|
|
|
|
|
|
|
|
|
|
var loadedBoards = function(boards) {
|
|
|
|
|
$.each(boards, function(index, value) {
|
|
|
|
|
$('#boards')
|
|
|
|
|
.append($("<option></option>")
|
|
|
|
|
.attr("value", value.id)
|
|
|
|
|
.text(value.name));
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var loadBoards = function() {
|
|
|
|
|
//Get the users boards
|
|
|
|
|
Trello.get(
|
|
|
|
|
'/members/me/boards/',
|
|
|
|
|
loadedBoards,
|
|
|
|
|
function() {
|
|
|
|
|
console.log("Failed to load boards");
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var loadedLabels = function(labels) {
|
|
|
|
|
$.each(labels, function(index, label) {
|
|
|
|
|
values.labels[label.id] = 0;
|
|
|
|
|
|
|
|
|
|
var label = $("<p><span id='label_" + label.id + "' class='badge' style='background:" + label.color + ";'>?</span> " + label.name + "</p>");
|
|
|
|
|
$('#labels').append(label)
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var loadedLists = function(lists) {
|
|
|
|
|
$.each(lists, function(index, list) {
|
|
|
|
|
values.lists[list.id] = 0;
|
|
|
|
|
var label = $("<p><span id='list_" + list.id + "' class='badge' style='background: purple" + ";'>?</span> " + list.name + "</p>");
|
|
|
|
|
$('#lists').append(label)
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var getHours = function(desc) {
|
|
|
|
|
var hours = 0;
|
|
|
|
|
var estimateRE = /Estimate:\s+(\d+)/m;
|
|
|
|
|
var matches = desc.match(estimateRE);
|
|
|
|
|
if (matches && matches[1]) {
|
|
|
|
|
hours = parseInt(matches[1]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return hours;
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-19 16:57:16 +02:00
|
|
|
var printOutValues = function() {
|
|
|
|
|
$.each(values.labels, function(labelId, value) {
|
|
|
|
|
$("#label_" + labelId).html("" + value + "h");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$.each(values.lists, function(listId, value) {
|
|
|
|
|
$("#list_" + listId).html("" + value + "h");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
2016-05-19 14:54:56 +02:00
|
|
|
|
|
|
|
|
var loadedCards = function(cards) {
|
|
|
|
|
if (!cards) return;
|
|
|
|
|
$.each(cards, function(index, card) {
|
|
|
|
|
var hours = getHours(card.desc);
|
|
|
|
|
values.lists[card.idList] += hours;
|
2016-05-19 16:57:16 +02:00
|
|
|
|
2016-05-19 14:54:56 +02:00
|
|
|
if (!card.idLabels) return true;
|
|
|
|
|
$.each(card.idLabels, function(_index, labelId) {
|
|
|
|
|
values.labels[labelId] += hours;
|
|
|
|
|
});
|
|
|
|
|
});
|
2016-05-19 16:57:16 +02:00
|
|
|
|
|
|
|
|
printOutValues();
|
2016-05-19 14:54:56 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var changedBoard = function() {
|
|
|
|
|
|
|
|
|
|
var boardId = $("option:selected", this).val();
|
|
|
|
|
|
|
|
|
|
$('#labels').empty();
|
|
|
|
|
$('#lists').empty();
|
|
|
|
|
values = initialValues();
|
|
|
|
|
|
|
|
|
|
Trello.get(
|
|
|
|
|
'/boards/' + boardId + '/lists',
|
|
|
|
|
loadedLists,
|
|
|
|
|
function() {
|
|
|
|
|
console.log("Failed to load lists");
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
Trello.get(
|
|
|
|
|
'/boards/' + boardId + '/labels',
|
|
|
|
|
loadedLabels,
|
|
|
|
|
function() {
|
|
|
|
|
console.log("Failed to load labels");
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
Trello.get(
|
|
|
|
|
'/boards/' + boardId + '/cards?fields=idList,idLabels,desc',
|
|
|
|
|
loadedCards,
|
|
|
|
|
function() {
|
|
|
|
|
console.log("Failed to load labels");
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$('#boards').change(changedBoard);
|
|
|
|
|
|
|
|
|
|
Trello.authorize({
|
2016-05-19 15:01:35 +02:00
|
|
|
type: "redirect",
|
2016-05-19 14:54:56 +02:00
|
|
|
name: "Trello Estimates",
|
|
|
|
|
scope: {
|
|
|
|
|
read: true,
|
|
|
|
|
write: false
|
|
|
|
|
},
|
|
|
|
|
expiration: "never",
|
|
|
|
|
success: loadBoards,
|
|
|
|
|
error: function() {
|
|
|
|
|
console.log("Failed authentication");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
