mathiasrw/True Trello Printer

## True Trello Printer
<!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" >
{{#lists}}
    <h1>Område: {{name}}</h1>
    {{#cards}}
        <div class="panel panel-default">
              <div class="panel-heading"><h4>{{name}}</h4>{{{desc}}}</div>
              <!--div class="panel-body" >

              </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://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></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]
        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]
         if(card.closed){
            //continue
        }

        data.ref[card.id] = {
                                name: card.name
                                ,
                                desc: marked(card.desc)
                                ,
                                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>
	<!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" >
	{{#lists}}
	<h1>Område: {{name}}</h1>
	{{#cards}}
	<div class="panel panel-default">
	<div class="panel-heading"><h4>{{name}}</h4>{{{desc}}}</div>
	<!--div class="panel-body" >

	</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://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></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]
	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]
	if(card.closed){
	//continue
	}

	data.ref[card.id] = {
	name: card.name
	,
	desc: marked(card.desc)
	,
	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>