add download button to history - exports current view as csv file

debomatic-webui/public/javascripts/page_history.js

@@ -37,7 +37,7 @@ function Page_History() {
         var distribution_url = Utils.get_url_to_package({
             'distribution': p.distribution
         });
-        var row = '<tr id="' + _get_id(package_status) + '">';
+        var row = '<tr class="package" id="' + _get_id(package_status) + '">';
         var package_url = Utils.get_url_to_package(p);
         row += '<td><a href="' + distribution_url + '">' + p.distribution + '</a></td>';
         row += '<td><a href="' + package_url + '">' + p.package + '</td>';
@@ -143,6 +143,49 @@ function Page_History() {
         Chartist.Line('#days-chart', days_data);
     }
 
+    function _exportTableToCSV($table, filename) {
+        // code from http://jsfiddle.net/terryyounghk/KPEGU/
+        var $rows = $table.find('tr.package:visible:has(td)'),
+
+            // Temporary delimiter characters unlikely to be typed by keyboard
+            // This is to avoid accidentally splitting the actual contents
+            tmpColDelim = String.fromCharCode(11), // vertical tab character
+            tmpRowDelim = String.fromCharCode(0), // null character
+
+            // actual delimiter characters for CSV format
+            colDelim = '","',
+            rowDelim = '"\r\n"',
+
+            // Grab text from table into CSV formatted string
+            csv = '"' + $rows.map(function (i, row) {
+                var $row = $(row),
+                    $cols = $row.find('td');
+
+                return $cols.map(function (j, col) {
+                    var $col = $(col),
+                        text = $col.text();
+
+                    return text.replace('"', '""'); // escape double quotes
+
+                }).get().join(tmpColDelim);
+
+            }).get().join(tmpRowDelim)
+            .split(tmpRowDelim).join(rowDelim)
+            .split(tmpColDelim).join(colDelim) + '"',
+
+            // Data URI
+            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
+
+        $(this)
+            .attr({
+                'download': filename,
+                'href': csvData,
+                'target': '_blank'
+            });
+    }
+
+
+
     this.start = function (socket) {
         socket.on(config.events.broadcast.status_update, function (socket_data) {
             // TODO - implements _update_table
@@ -162,4 +205,8 @@ function Page_History() {
     _sort_table();
     _create_graph_distributions();
     _create_graph_days();
+
+    $('#download').on('click', function () {
+        _exportTableToCSV.apply(this, [$('#history'), 'history.csv']);
+    });
 }

debomatic-webui/public/stylesheets/style.css

@@ -258,6 +258,8 @@ footer .info {
   cursor: pointer;
 }
 
+
+/* History page */
 .ct-chart {
   height: 180px;
   width: 50%;
@@ -265,13 +267,17 @@ footer .info {
   margin-bottom: 30px;
 }
 
+.ct-chart .ct-label {
+  font-size: 0.85em;
+}
+
 #distributions-chart.ct-chart {
   height: 200px;
   margin-top: -20px;
 }
 
-.ct-chart .ct-label {
-  font-size: 0.85em;
+#history {
+  margin-top: 15px;
 }
 
 /* add more colors to graphs */

debomatic-webui/views/history.ejs

@@ -10,6 +10,7 @@
         <div id="days-chart" class="ct-chart"></div>
         <div id="distributions-chart" class="ct-chart"></div>
     </div>
+    <a id="download" class="btn btn-primary btn-lg">Download current view</a>
     <table id="history" class="tablesorter">
         <thead>
             <tr>