Commit 43dbff64 authored by Leigh Stoller's avatar Leigh Stoller

Add Download option at Rob's request, to get raw data. Using the

builtin tablesorter widget and code from their demo page.
parent adc0b305
This diff is collapsed.
require(window.APT_OPTIONS.configObject,
['js/quickvm_sup', 'moment'],
function (sup, moment)
['js/quickvm_sup', 'moment',
'js/lib/text!template/output-dropdown.html'],
function (sup, moment, dropdownString)
{
'use strict';
......@@ -16,6 +17,7 @@ function (sup, moment)
if (window.MAX) {
default_max = new Date(window.MAX * 1000);
}
$('#output_dropdown').html(dropdownString);
// Format dates with moment before display.
$('.format-date').each(function() {
......@@ -31,8 +33,7 @@ function (sup, moment)
defaultValues: {min: default_min, max: default_max},
arrows: false,
});
InitTable("uid");
InitTable("pid");
InitTable("sumstats");
// Handler for the date range search button.
$('#slider-go-button').click(function() {
......@@ -48,6 +49,7 @@ function (sup, moment)
{
var tablename = "#tablesorter_" + name;
var searchname = "#search_" + name;
var $this = $('#output_dropdown');
var table = $(tablename)
.tablesorter({
......@@ -56,7 +58,7 @@ function (sup, moment)
//cssChildRow: "tablesorter-childRow",
// initialize zebra and filter widgets
widgets: ["zebra", "filter", "resizable", "math"],
widgets: ["zebra", "filter", "resizable", "math", "output"],
widgetOptions: {
// include child row content while filtering, if true
......@@ -78,6 +80,49 @@ function (sup, moment)
math_ignore : [0],
// integers
math_mask : '',
// ',' 'json', 'array' or separator (e.g. ',')
output_separator : ',',
// columns to ignore [0, 1,... ] (zero-based index)
output_ignoreColumns : [],
// include hidden columns in the output
output_hiddenColumns : false,
// include footer rows in the output
output_includeFooter : true,
// data-attribute containing alternate cell text
output_dataAttrib : 'data-name',
// output all header rows (multiple rows)
output_headerRows : true,
// (p)opup, (d)ownload
output_delivery : 'p',
// (a)ll, (f)iltered or (v)isible
output_saveRows : 'f',
// duplicate output data in tbody colspan/rowspan
output_duplicateSpans: true,
// change quote to left double quote
output_replaceQuote : '\u201c;',
// output includes all cell HTML (except header cells)
output_includeHTML : true,
// remove extra white-space characters (trim)
output_trimSpaces : false,
// wrap every cell output in quotes
output_wrapQuotes : false,
output_popupStyle : 'width=580,height=310',
output_saveFileName : 'mytable.csv',
// callbackJSON used when outputting JSON &
// any header cells has a colspan - unique
// names required
output_callbackJSON : function($cell,txt,cellIndex) {
return txt + '(' + cellIndex + ')'; },
// callback executed when processing completes
// return true to continue download/output
// return false to stop delivery & do
// something else with the data
output_callback : function(config, data) {
return true; },
output_encoding :
'data:application/octet-stream;charset=utf8,'
}
});
// Target the $('.search') input using built in functioning
......@@ -85,6 +130,57 @@ function (sup, moment)
// Allows using filter_liveSearch or delayed search &
// pressing escape to cancel the search
$.tablesorter.filter.bindSearch(table, $(searchname));
//
// All this output stuff from the example page.
//
$this.find('.dropdown-toggle').click(function(e){
// this is needed because clicking inside the dropdown will close
// the menu with only bootstrap controlling it.
$this.find('.dropdown-menu').toggle();
return false;
});
// make separator & replace quotes buttons update the value
$this.find('.output-separator').click(function(){
$this.find('.output-separator').removeClass('active');
var txt = $(this).addClass('active').html()
$this.find('.output-separator-input').val( txt );
$this.find('.output-filename').val(function(i, v){
// change filename extension based on separator
var filetype = (txt === 'json' || txt === 'array') ? 'js' :
txt === ',' ? 'csv' : 'txt';
return v.replace(/\.\w+$/, '.' + filetype);
});
return false;
});
$this.find('.output-quotes').click(function(){
$this.find('.output-quotes').removeClass('active');
$this.find('.output-replacequotes')
.val( $(this).addClass('active').text() );
return false;
});
// clicking the download button; all you really need is to
// trigger an "output" event on the table
$this.find('.download').click(function(){
var typ,
wo = table[0].config.widgetOptions;
var saved = $this.find('.output-filter-all :checked').attr('class');
wo.output_separator = $this.find('.output-separator-input').val();
wo.output_delivery =
$this.find('.output-download-popup :checked')
.attr('class') === "output-download" ? 'd' : 'p';
wo.output_saveRows = saved === "output-filter" ? 'f' :
saved === 'output-visible' ? 'v' : 'a';
wo.output_replaceQuote = $this.find('.output-replacequotes').val();
wo.output_trimSpaces = $this.find('.output-trim').is(':checked');
wo.output_includeHTML = $this.find('.output-html').is(':checked');
wo.output_wrapQuotes = $this.find('.output-wrap').is(':checked');
wo.output_headerRows = $this.find('.output-headers').is(':checked');
wo.output_saveFileName = $this.find('.output-filename').val();
table.trigger('outputTable');
return false;
});
}
$(document).ready(initialize);
......
......@@ -116,9 +116,10 @@ function ShowByCreator()
$uid_array[$uid][$cluster]["pcount"] = $pcount;
$uid_array[$uid][$cluster]["phours"] = $phours;
}
echo "<div id='output_dropdown'></div>\n";
echo "<input class='form-control search' type='search' data-column='0'
id='search_uid' placeholder='Search'>\n";
echo " <table class='tablesorter' id='tablesorter_uid'>
id='search_sumstats' placeholder='Search'>\n";
echo " <table class='tablesorter' id='tablesorter_sumstats'>
<thead>
<tr>
<th rowspan=2>UID</th>
......@@ -285,9 +286,10 @@ function ShowByProject()
$pid_array[$pid][$cluster]["pcount"] = $pcount;
$pid_array[$pid][$cluster]["phours"] = $phours;
}
echo "<div id='output_dropdown'></div>\n";
echo "<input class='form-control search' type='search' data-column='0'
id='search_pid' placeholder='Search'>\n";
echo " <table class='tablesorter' id='tablesorter_pid'>
id='search_sumstats' placeholder='Search'>\n";
echo " <table class='tablesorter' id='tablesorter_sumstats'>
<thead>
<tr>
<th rowspan=2>PID</th>
......@@ -443,6 +445,7 @@ echo "<script src='js/lib/jQRangeSlider/jQRuler.js'></script>\n";
echo "<script src='js/lib/jquery.tablesorter.min.js'></script>\n";
echo "<script src='js/lib/jquery.tablesorter.widgets.min.js'></script>\n";
echo "<script src='js/lib/jquery.tablesorter.widget-math.js'></script>\n";
echo "<script src='js/lib/jquery.tablesorter.widget-output.js'></script>\n";
echo "<script src='js/lib/bootstrap.js'></script>\n";
echo "<script src='js/lib/require.js' data-main='js/sumstats'></script>\n";
......
<style>
#output-dropdown {
min-width: 280px;
font-size: 12px;
padding: 10px;
}
#output-dropdown h5 {
text-align: right;
margin-right: 4px;
}
div.output-download-popup {
margin-bottom: 5px;
}
</style>
<!-- Split button -->
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default btn-sm download">Download</button>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" id='output-dropdown' role="menu">
<li><h5><strong>Output options</strong></h5></li>
<li>
<label>Separator: <input class="output-separator-input" type="text" size="2" value=","></label>
<button type="button" class="output-separator btn btn-default btn-xs active" title="comma">,</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="semi-colon">;</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="tab"> </button>
<button type="button" class="output-separator btn btn-default btn-xs" title="space"> </button>
<button type="button" class="output-separator btn btn-default btn-xs" title="output JSON">json</button>
<button type="button" class="output-separator btn btn-default btn-xs" title="output Array (see note)">array</button>
</li>
<li>
<div class="btn-group output-download-popup" data-toggle="buttons" title="Download file or open in Popup window">
<label class="btn btn-default btn-sm active">
<input type="radio" name="delivery1" class="output-popup" checked=""> Popup
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="delivery1" class="output-download"> Download
</label>
</div>
</li>
<li>
<div class="btn-group output-filter-all" data-toggle="buttons" title="Output only filtered, visible or all rows">
<label class="btn btn-default btn-sm active">
<input type="radio" name="getrows1" class="output-filter" checked="checked"> Filtered
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="getrows1" class="output-visible"> Visible
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="getrows1" class="output-all"> All
</label>
</div>
</li>
<li class="divider"></li>
<li>
<label>Replace quotes: <input class="output-replacequotes" type="text" size="2" value="'"></label>
<button type="button" class="output-quotes btn btn-default btn-xs active" title="single quote">'</button>
<button type="button" class="output-quotes btn btn-default btn-xs" title="left double quote">?</button>
<button type="button" class="output-quotes btn btn-default btn-xs" title="escaped quote">\"</button>
</li>
<li><label title="Remove extra white space from each cell">Trim spaces: <input class="output-trim" type="checkbox" checked=""></label></li>
<li><label title="Include HTML from cells in output">Include HTML: <input class="output-html" type="checkbox"></label></li>
<li><label title="Wrap all values in quotes">Wrap in Quotes: <input class="output-wrap" type="checkbox"></label></li>
<li><label title="Choose a download filename">Filename: <input class="output-filename" type="text" size="15" value="mytable.csv"></label></li>
</ul>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment