elwinschmitz/True Trello Printer.html

## True Trello Printer.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>True Trello Printer</title>
    <link href="vendor/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0 15%;
        }

        .list {
            margin: 0 0 3em 0;
        }
        @media print {
            body {
                margin: 0;
            }
            .card,
            .list {
                page-break-inside: avoid;
            }
        }
    </style>
</head>

<body>

    <form id="in">
        <h1>Trello JSON Printer</h1>
        <input type="file" id="data" accept="application/json">
    </form>

    <output id="out"></output>

    <script type="text/html" id="template-output">
        {{#lists}}
        <div class="list">
            <h1>{{name}}</h1>
            {{#cards}}
            <div class="card panel panel-default">
                <div class="panel-heading">
                    <h4>
                        {{name}}
                        {{#labels}}
                            <small class="label label-default label-{{color}}">{{name}}</small>
                        {{/labels}}
                    </h4>
                </div>
                {{#desc}}
                <div class="panel-body">
                    {{{desc}}}
                </div>
                {{/desc}}
                {{#checklists}}
                    <div class="panel-body">
                        <h4>{{name}}</h4>
                        <ul class="list-group">
                        {{#items}}
                            <li class="list-group-item">
                                <input type="checkbox" {{#done}}checked{{/done}} disabled>
                                {{name}}
                            </li>
                        {{/items}}
                        </ul>
                    </div>
                {{/checklists}}
                <ul class="list-group">
                    {{#actions}}
                    <li class="list-group-item">
                        <tt style="color:gray;">{{date}}</tt> {{{text}}}
                    </li>
                    {{/actions}}
                </ul>
            </div>
            {{/cards}}
        </div>
        {{/lists}}
    </script>

    <script src="vendor/mustache.min.js"></script>
    <script src="vendor/marked.min.js"></script>
    <script>
        function formatDate(date) {
            return new Date(date).toISOString().substr(0, 10);
        }

        function eatData(trelloJson) {
            var data = {
                board: trelloJson.name,
                lists: [],
                ref: {}
            };

            // LISTS
            for (i in trelloJson.lists) {
                var list = trelloJson.lists[i];
                if (list.closed) {
                    continue;
                }
                data.ref[list.id] = {
                    name: list.name,
                    cards: []
                };
                try {
                    data.lists.push(data.ref[list.id]);
                } catch (e) {};
            }

            // CARDS
            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),
                    labels: card.labels,
                    checklists: [],
                    actions: []
                };
                try {
                    data.ref[card.idList].cards.push(data.ref[card.id]);
                } catch (e) {};
            }

            // CHECKLISTS
            for (i in trelloJson.checklists) {
                var list = trelloJson.checklists[i];
                var items = [];

                for (i in list.checkItems) {
                    var item = list.checkItems[i];

                    items[i] = {
                        name: item.name,
                        done: (item.state === 'complete'),
                    };
                }

                data.ref[list.id] = {
                    name: list.name,
                    items: items,
                };
                try {
                    data.ref[list.idCard].checklists.push(data.ref[list.id]);
                } catch (e) {};
            }


            // COMMENTS
            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: formatDate(action.date)
                };
                try {
                    data.ref[action.data.card.id].actions.push(data.ref[action.id]);
                } catch (e) {};
            }

            console.log('data:', data);

            return data;
        }

        function showData(data) {
            var template = document.getElementById('template-output').innerHTML;

            document.getElementById('out').innerHTML = Mustache.render(template, data);
        }

        function downloadString(text, fileType, fileName) {
            var blob = new Blob([text], {
                type: fileType
            });
            var a = document.createElement('a');

            a.download = fileName;
            a.href = URL.createObjectURL(blob);
            a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.setTimeout(function() {
                URL.revokeObjectURL(a.href);
            }, 1500);
        }

        function openFile(event) {
            var reader = new FileReader();

            reader.onload = function() {
                var data = JSON.parse(reader.result);

                showData(eatData(data));

                var exportName = formatDate(Date.now()) + '--' + data.name;

                document.title = exportName;

                document.getElementById('in').remove();
                document.querySelectorAll('script').forEach(function(element) {
                    element.remove();
                });

                if (window.confirm('Save to file?')) {
                    downloadString("<!DOCTYPE html>\n" + document.documentElement.outerHTML, 'text/html', exportName + '.html');
                }
            };
            reader.readAsText(event.target.files[0]);
        };

        document.getElementById('data').addEventListener('change', openFile);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>True Trello Printer</title>
	<link href="vendor/bootstrap.min.css" rel="stylesheet">
	<style>
	body {
	margin: 0 15%;
	}

	.list {
	margin: 0 0 3em 0;
	}
	@media print {
	body {
	margin: 0;
	}
	.card,
	.list {
	page-break-inside: avoid;
	}
	}
	</style>
	</head>

	<body>

	<form id="in">
	<h1>Trello JSON Printer</h1>
	<input type="file" id="data" accept="application/json">
	</form>

	<output id="out"></output>

	<script type="text/html" id="template-output">
	{{#lists}}
	<div class="list">
	<h1>{{name}}</h1>
	{{#cards}}
	<div class="card panel panel-default">
	<div class="panel-heading">
	<h4>
	{{name}}
	{{#labels}}
	<small class="label label-default label-{{color}}">{{name}}</small>
	{{/labels}}
	</h4>
	</div>
	{{#desc}}
	<div class="panel-body">
	{{{desc}}}
	</div>
	{{/desc}}
	{{#checklists}}
	<div class="panel-body">
	<h4>{{name}}</h4>
	<ul class="list-group">
	{{#items}}
	<li class="list-group-item">
	<input type="checkbox" {{#done}}checked{{/done}} disabled>
	{{name}}
	</li>
	{{/items}}
	</ul>
	</div>
	{{/checklists}}
	<ul class="list-group">
	{{#actions}}
	<li class="list-group-item">
	<tt style="color:gray;">{{date}}</tt> {{{text}}}
	</li>
	{{/actions}}
	</ul>
	</div>
	{{/cards}}
	</div>
	{{/lists}}
	</script>

	<script src="vendor/mustache.min.js"></script>
	<script src="vendor/marked.min.js"></script>
	<script>
	function formatDate(date) {
	return new Date(date).toISOString().substr(0, 10);
	}

	function eatData(trelloJson) {
	var data = {
	board: trelloJson.name,
	lists: [],
	ref: {}
	};

	// LISTS
	for (i in trelloJson.lists) {
	var list = trelloJson.lists[i];
	if (list.closed) {
	continue;
	}
	data.ref[list.id] = {
	name: list.name,
	cards: []
	};
	try {
	data.lists.push(data.ref[list.id]);
	} catch (e) {};
	}

	// CARDS
	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),
	labels: card.labels,
	checklists: [],
	actions: []
	};
	try {
	data.ref[card.idList].cards.push(data.ref[card.id]);
	} catch (e) {};
	}

	// CHECKLISTS
	for (i in trelloJson.checklists) {
	var list = trelloJson.checklists[i];
	var items = [];

	for (i in list.checkItems) {
	var item = list.checkItems[i];

	items[i] = {
	name: item.name,
	done: (item.state === 'complete'),
	};
	}

	data.ref[list.id] = {
	name: list.name,
	items: items,
	};
	try {
	data.ref[list.idCard].checklists.push(data.ref[list.id]);
	} catch (e) {};
	}


	// COMMENTS
	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: formatDate(action.date)
	};
	try {
	data.ref[action.data.card.id].actions.push(data.ref[action.id]);
	} catch (e) {};
	}

	console.log('data:', data);

	return data;
	}

	function showData(data) {
	var template = document.getElementById('template-output').innerHTML;

	document.getElementById('out').innerHTML = Mustache.render(template, data);
	}

	function downloadString(text, fileType, fileName) {
	var blob = new Blob([text], {
	type: fileType
	});
	var a = document.createElement('a');

	a.download = fileName;
	a.href = URL.createObjectURL(blob);
	a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
	a.style.display = 'none';
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	window.setTimeout(function() {
	URL.revokeObjectURL(a.href);
	}, 1500);
	}

	function openFile(event) {
	var reader = new FileReader();

	reader.onload = function() {
	var data = JSON.parse(reader.result);

	showData(eatData(data));

	var exportName = formatDate(Date.now()) + '--' + data.name;

	document.title = exportName;

	document.getElementById('in').remove();
	document.querySelectorAll('script').forEach(function(element) {
	element.remove();
	});

	if (window.confirm('Save to file?')) {
	downloadString("<!DOCTYPE html>\n" + document.documentElement.outerHTML, 'text/html', exportName + '.html');
	}
	};
	reader.readAsText(event.target.files[0]);
	};

	document.getElementById('data').addEventListener('change', openFile);
	</script>
	</body>

	</html>