Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button for exporting tables as csv #429

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Button for exporting tables as csv #429

Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ed18dd9
WIP: button for exporting tables as csv
emlun007 Oct 19, 2017
8d2745d
Merge pull request #1 from emlun007/emlun007-button-csv
emlun007 Oct 19, 2017
d6ca8e1
Add files via upload
emlun007 Oct 25, 2017
63816af
Button for export finally works
emlun007 Oct 27, 2017
a68c855
Add files via upload
emlun007 Nov 7, 2017
c34a858
Update layout.html
emlun007 Nov 28, 2017
fc0c9a0
Update layout.html
emlun007 Nov 30, 2017
ca7d238
Add files via upload
emlun007 Dec 8, 2017
868d11f
Add files via upload
emlun007 Dec 21, 2017
4c57a22
Update layout.html
emlun007 Dec 21, 2017
fd32dca
Update _macros.html
emlun007 Dec 21, 2017
f9edc83
Update _macros.html
emlun007 Feb 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 100 additions & 4 deletions puppetboard/templates/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{config.PAGE_TITLE}}</title>
<title>Puppetboard</title>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You shouldn't change this line in the commit

<button id="export" style="color:#b53f3f;box-shadow: 4px 4px #0a214a;margin-top: 5 px; margin-left: 5 px">Export data as csv</button>
{% if config.OFFLINE_MODE %}
<style>
@font-face {
Expand All @@ -19,13 +20,14 @@
<link href="{{ url_for('static', filename='Semantic-UI-2.1.8/semantic.min.css') }}" rel="stylesheet" />
<link href='//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/css/dataTables.semanticui.min.css' rel='stylesheet' type='text/css'>
{% endif %}
<link href="{{ url_for('static', filename='css/c3.min.css') }}" rel="stylesheet" />
<link href="{{ url_for('static', filename='css/puppetboard.css') }}" rel="stylesheet" />

{% if config.OFFLINE_MODE %}
<script src="{{ url_for('static', filename='jquery-2.1.1/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='jquery-datatables-1.10.13/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='jquery-datatables-1.10.13/dataTables.semanticui.min.js') }}"></script>


{% if config.LOCALISE_TIMESTAMP %}
<script src="{{ url_for('static', filename='moment.js-2.7.0/moment.min.js') }}"></script>
{% endif %}
Expand All @@ -45,8 +47,9 @@
<script src="{{ url_for('static', filename='js/scroll.top.js') }}"></script>
<script src="{{url_for('static', filename='js/d3.min.js')}}"></script>
<script src="{{url_for('static', filename='js/c3.min.js')}}"></script>
<script src="{{url_for('static',
filename='jquery-tablesort-v.0.0.11/jquery.tablesort.min.js')}}"></script>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lines 48 and 50 are identical. No changes

<script src="{{url_for('static', filename='jquery-tablesort-v.0.0.11/jquery.tablesort.min.js')}}"></script>


{% block script %} {% endblock script %}
<script type="text/javascript">
{% block javascript %} {% endblock javascript %}
Expand All @@ -56,8 +59,101 @@
$.getScript('{{url_for('static', filename='js/tables.js')}}')
{% block onload_script %} {% endblock onload_script %}
})


$('#export').click(function() {
var titles = [];
var data = [];

/*
* Get the table headers, this will be CSV headers
* The count of headers will be CSV string separator
*/
$('.dataTable th').each(function() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving my comment about indentation, as this where you stopped indenting.

If line 67 is indented and no block has ended this should also be indented.

Also another small thing lines 66 and 67 should have a 2 space indent as children of the function starting on 65.

titles.push($(this).text());
});

/*
* Get the actual data, this will contain all the data, in 1 array
*/
$('.dataTable td').each(function() {
data.push($(this).text());
});

/*
* Convert our data to CSV string
*/
var CSVString = prepCSVRow(titles, titles.length, '');
CSVString = prepCSVRow(data, titles.length, CSVString);

/*
* Make CSV downloadable
*/
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", CSVString]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "data.csv";

/*
* Actually download CSV
*/
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});

/*
* Convert data array to CSV string
* @param arr {Array} - the actual data
* @param columnCount {Number} - the amount to split the data into columns
* @param initial {String} - initial string to append to CSV string
* return {String} - ready CSV string
*/
function prepCSVRow(arr, columnCount, initial) {
var row = ''; // this will hold data
var delimeter = ','; // data slice separator, in excel it's `;`, in usual CSv it's `,`
var newLine = '\r\n'; // newline separator for CSV row

/*
* Convert [1,2,3,4] into [[1,2], [3,4]] while count is 2
* @param _arr {Array} - the actual array to split
* @param _count {Number} - the amount to split
* return {Array} - splitted array
*/
function splitArray(_arr, _count) {
var splitted = [];
var result = [];
_arr.forEach(function(item, idx) {
if ((idx + 1) % _count === 0) {
splitted.push(item);
result.push(splitted);
splitted = [];
} else {
splitted.push(item);
}
});
return result;
}
var plainArr = splitArray(arr, columnCount);
// don't know how to explain this
// you just have to like follow the code
// and you understand, it's pretty simple
// it converts `['a', 'b', 'c']` to `a,b,c` string
plainArr.forEach(function(arrItem) {
arrItem.forEach(function(item, idx) {
row += item + ((idx + 1) === arrItem.length ? '' : delimeter);
});
row += newLine;
});
return initial + row;
}


</script>
</script>
{% block head %} {% endblock head %}

</head>

<body>
Expand Down