[statistics] Client list: Add option to hide columns

1 files changed, 60 insertions, 1 deletions

diff --git a/modules-available/statistics/templates/clientlist.html b/modules-available/statistics/templates/clientlist.html
index df271591..721617a9 100644
--- a/modules-available/statistics/templates/clientlist.html
+++ b/modules-available/statistics/templates/clientlist.html
@@ -1,10 +1,13 @@
+<button class="pull-right btn btn-default" type="button" data-toggle="modal"
+		  data-target="#column-selector">{{lang_selectColumns}}</button>
+
 <h2>{{lang_clientList}} ({{rowCount}})</h2>
 
 <form method="post" action="?do=statistics" id="list-form">
 <input type="hidden" name="token" value="{{token}}">
 <input type="hidden" name="redirect" value="?{{redirect}}">
 
-<table class="stupidtable table table-condensed table-striped">
+<table id="client-list" class="stupidtable table table-condensed table-striped">
 	<thead>
 		<tr>
 			<td></td>
@@ -277,6 +280,21 @@
 	</div>
 </div>
 
+<div class="modal" id="column-selector" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal">&times;</button>
+			</div>
+			<div class="modal-body"></div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-default"
+						  data-dismiss="modal">{{lang_close}}</button>
+			</div>
+		</div>
+	</div>
+</div>
+
 <script type="application/javascript"><!--
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -335,6 +353,47 @@ document.addEventListener("DOMContentLoaded", function () {
 		}).length;
 		$el.text(result).prop('rows', Math.min(24, Math.max(5, num)));
 	});
+	// Generate list for column selection
+	var $cs = $('#column-selector .modal-body');
+	var idx = 0;
+	$cs.empty();
+	$('#client-list tr > th').each(function() {
+		idx++;
+		var $th = $(this);
+		$cs.append($('<div class="checkbox">')
+				.append($('<input id="shc-' + idx + '" type="checkbox" onclick="toggleColumn(' + idx + ')" checked="checked">'))
+				.append($('<label for="shc-' + idx + '">').text($th.text())));
+	});
+	// Load previous visibility settings
+	var colConf;
+	if (window.localStorage && (colConf = window.localStorage.getItem('cl-col-conf'))) {
+		colConf = JSON.parse(colConf);
+		if (colConf) {
+			for (var k in colConf) {
+				if (k.substring(0, 4) === 'shc-' && colConf[k]) {
+					var $cb = $('#' + k);
+					if ($cb.prop('checked')) {
+						$cb.click();
+					}
+				}
+			}
+		}
+	}
 });
 
+function toggleColumn(idx)
+{
+	var $el = $(this);
+	$('#client-list tr > td:nth-child(' + idx + '), #client-list tr > th:nth-child(' + idx + ')')
+			.css('display', $el.is(':checked') ? '' : 'none');
+	var data = {};
+	$('#column-selector .modal-body .checkbox input').each(function() {
+		var $el = $(this);
+		if (!$el.is(':checked')) {
+			data[$el[0].id] = 1;
+		}
+	});
+	window.localStorage.setItem('cl-col-conf', JSON.stringify(data));
+}
+
 //--></script>