Skip to content

Instantly share code, notes, and snippets.

@simplix-fr

simplix-fr/Trello Printer

Forked from kmtu/True Trello Printer
Last active March 2, 2017 00:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simplix-fr/1c56c4d00814463658c75c86be96e11f to your computer and use it in GitHub Desktop.
Save simplix-fr/1c56c4d00814463658c75c86be96e11f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Trello Printer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trello Printer</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
margin: 5%;
}
.panel-body {
font-size: .8em;
}
h1 {
font-size: 1.2em;
font-weight: bold;
}
h5 {
font-size: 1em;
}
h4 {
font-size: 1.1em;
font-weight: bold;
}
.checklist_title {
text-decoration: underline;
font-weight: bold;
}
</style>
<STYLE type="text/css" media="print">
body {
margin: 0;
}
</STYLE>
</head>
<body>
<div id="out">
No Trello JSON data found
</div>
</ul>
</div>
<script type="text/html" id="template-output">
<h1>{{board}}</h1> {{#lists}}
<h1>{{name}}</h1> {{#cards}}
<div class="panel panel-default">
<div class="panel-heading">
<h4>{{name}}</h4>{{{desc}}}</div>
<!--div class="panel-body"-->
{{#attachments}}
<li class="list-group-item"><a href="{{url}}">{{url}}</a>
</li>
{{/attachments}}
<!--</div-->
<ul class="list-group">
{{#actions}}
<li class="list-group-item"><tt style="color:gray;">{{date}} </tt> {{{text}}}</li>
{{/actions}}
</ul>
</div>
{{/cards}}
<hr>
<br>
<br> {{/lists}}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js" type="text/javascript"></script>
<script type="text/javascript">
function eatData(trelloJson) {
var data = {
board: trelloJson.name,
lists: [],
ref: {}
}
for (i in trelloJson.lists) {
var list = trelloJson.lists[i]
if (list.closed) {
//continue
}
data.ref[list.id] = {
name: list.name,
cards: []
}
data.lists.push(data.ref[list.id])
}
for (i in trelloJson.cards) {
var card = trelloJson.cards[i]
// skip closed card and those from ignored list
if (card.closed | !data.ref[card.idList]) {
continue
}
data.ref[card.id] = {
name: card.name,
desc: marked(card.desc),
attachments: card.attachments,
actions: []
}
data.ref[card.idList].cards.push(data.ref[card.id])
}
for (i in trelloJson.actions) {
var action = trelloJson.actions[i]
if (action.type != "commentCard") {
continue
}
data.ref[action.id] = {
text: marked(action.data.text),
date: moment(action.date).format('YYYY-MM-DD')
}
try {
data.ref[action.data.card.id].actions.push(data.ref[action.id])
} catch (e) {}
}
return data;
}
function showData(data) {
var template = $('#template-output').html()
console.log(JSON.stringify(data, null, 2))
$('#out').html(Mustache.render(template, data))
}
function autorun() {
if (null == data) {
return alert('Please insert JSON data from Trello in the code')
}
showData(eatData(data));
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
else window.onload = autorun;
data = null;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment