This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>True Trello Printer</title> | |
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> | |
<style> | |
body{margin:15%;} | |
.panel-body{ | |
font-size: 1.2em; | |
} | |
</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="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script> | |
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js" type="text/javascript"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.0/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] | |
// skip closed list and keep only those which name match 'CR' | |
if(list.closed | !list.name.match(/CR/g)){ | |
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; | |
/* | |
data = { | |
"id": "52a9b37c0fc9b3", | |
"name": "My board", | |
"desc": "", | |
"descData": null, | |
"closed": false, | |
"idOrganization": "502a0988d99341fe81a", | |
"invited": false, | |
"pinned": false, | |
"starred": false, | |
"url": "https://trello.com/b/fsvDkUV1/bec-f-rste-gang-the-movie", | |
...................... | |
} | |
//*/ | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment