[statistics_reporting] added sorting indicators

2 files changed, 36 insertions, 17 deletions

diff --git a/modules-available/statistics_reporting/style.css b/modules-available/statistics_reporting/style.css
index f0ee4fd3..6cb6de51 100644
--- a/modules-available/statistics_reporting/style.css
+++ b/modules-available/statistics_reporting/style.css
@@ -1,3 +1,7 @@
 .top-row {
     margin-bottom: 20px;
+}
+
+.buttonbar button {
+    margin-bottom: 4px;
 }
\ No newline at end of file
diff --git a/modules-available/statistics_reporting/templates/columnChooser.html b/modules-available/statistics_reporting/templates/columnChooser.html
index 62e20a4a..ccc82a50 100644
--- a/modules-available/statistics_reporting/templates/columnChooser.html
+++ b/modules-available/statistics_reporting/templates/columnChooser.html
@@ -1,21 +1,21 @@
 <div class="container-fluid">
 	<div class="row top-row form-inline">
-		<div class="col-md-12 ">
-			<select id="select-table" onchange="chooseTable(this.value)" class="form-control" style="width:160px">
+		<div class="col-md-2">
+			<select id="select-table" onchange="chooseTable(this.value)" class="form-control">
 				<option value="total" selected="selected">{{lang_total}}</option>
 				<option value="perlocation">{{lang_perlocation}}</option>
 				<option value="perclient">{{lang_perclient}}</option>
 				<option value="peruser">{{lang_peruser}}</option>
 				<option value="pervm">{{lang_pervm}}</option>
 			</select>
-			<div class="btn-group">
-				<button id="button-totaltime" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('totaltime')">{{lang_totalTime}}</button>
-				<button id="button-avgtime" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('avgtime')">{{lang_avgSessionLength}}</button>
-				<button id="button-logincount" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('logincount')">{{lang_totalLogins}}</button>
-				<button id="button-timeoffline" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('timeoffline')">{{lang_totalOffTime}}</button>
-				<button id="button-lastlogout" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('lastlogout')">{{lang_clientLogout}}</button>
-				<button id="button-laststart" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('laststart')">{{lang_clientStart}}</button>
-			</div>
+		</div>
+		<div class="col-md-10 buttonbar">
+			<button id="button-totaltime" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('totaltime')">{{lang_totalTime}}</button>
+			<button id="button-avgtime" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('avgtime')">{{lang_avgSessionLength}}</button>
+			<button id="button-logincount" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('logincount')">{{lang_totalLogins}}</button>
+			<button id="button-timeoffline" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('timeoffline')">{{lang_totalOffTime}}</button>
+			<button id="button-lastlogout" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('lastlogout')">{{lang_clientLogout}}</button>
+			<button id="button-laststart" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('laststart')">{{lang_clientStart}}</button>
 		</div>
 	</div>
 </div>
@@ -24,23 +24,38 @@
 <script type="application/javascript">
 	document.addEventListener("DOMContentLoaded", function () {
 		chooseTable($('#select-table').val());
-		$("table").stupidtable();
+		toggleButton('lastlogout');
+		toggleButton('laststart');
+		var table = $("table").stupidtable();
+		table.on("aftertablesort", function (event, data) {
+			var th = $(this).find("th");
+			th.find(".arrow").remove();
+			var dir = $.fn.stupidtable.dir;
+			var arrow = data.direction === dir.ASC ? "down" : "up";
+			th.eq(data.column).append(' <span class="arrow glyphicon glyphicon-chevron-'+arrow+'"></span>');
+		});
 	});
 
 	function chooseTable(v) {
 		$("[id^=table-]").hide();
 		$('#table-'+v).show();
+		$("[id^=button-]").hide();
+		var re = /column-(\w+)/g;
+		var match;
+		while (match = re.exec($('thead', '#table-'+v).html())) {
+			$('#button-'+match[1]).show();
+		}
 	}
 
 	function toggleButton(v) {
-		$button = $('#button-'+v);
-		if($button.hasClass('btn-default')) {
-			$button.removeClass('btn-default');
-			$button.addClass('btn-primary');
+		var button = $('#button-'+v);
+		if(button.hasClass('btn-default')) {
+			button.removeClass('btn-default');
+			button.addClass('btn-primary');
 			$('.column-'+v).show()
 		} else {
-			$button.removeClass('btn-primary');
-			$button.addClass('btn-default');
+			button.removeClass('btn-primary');
+			button.addClass('btn-default');
 			$('.column-'+v).hide()
 		}
 	}