From 64e0d32b4e0e28cd2c2c5c32506783ad4aec57b2 Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Fri, 20 Jan 2023 15:36:35 +0100
Subject: [statistics] Modernize column handling in JS for filter and show/hide

---
 .../statistics/templates/clientlist.html           | 83 ++++++++--------------
 1 file changed, 29 insertions(+), 54 deletions(-)

(limited to 'modules-available/statistics')

diff --git a/modules-available/statistics/templates/clientlist.html b/modules-available/statistics/templates/clientlist.html
index d0e330e8..fcb98774 100644
--- a/modules-available/statistics/templates/clientlist.html
+++ b/modules-available/statistics/templates/clientlist.html
@@ -17,47 +17,7 @@
 
 <table id="client-list" class="stupidtable table table-condensed table-striped">
 	<thead>
-		<tr>
-			<td></td>
-			<td></td>
-			<td class="text-right">
-				<button type="button" class="btn btn-default btn-xs" onclick="popupFilter('nicspeed')">
-					<span class="glyphicon glyphicon-filter"></span>
-				</button>
-			</td>
-			<td class="text-right">
-				<button type="button" class="btn btn-default btn-xs" onclick="popupFilter('lastseen')">
-					<span class="glyphicon glyphicon-filter"></span>
-				</button>
-			</td>
-			<td>
-				<button type="button" class="btn btn-default btn-xs" onclick="popupFilter('kvmstate')">
-					<span class="glyphicon glyphicon-filter"></span>
-				</button>
-			</td>
-			<td class="text-right">
-				<button type="button" class="btn btn-default btn-xs" onclick="popupFilter('gbram')">
-					<span class="glyphicon glyphicon-filter"></span>
-				</button>
-			</td>
-			<td class="text-right">
-				<button type="button" class="btn btn-default btn-xs" onclick="popupFilter('hddgb')">
-					<span class="glyphicon glyphicon-filter"></span>
-				</button>
-			</td>
-			<td></td>
-			<td>
-				<button type="button" class="btn btn-default btn-xs" onclick="popupFilter('realcores')">
-					<span class="glyphicon glyphicon-filter"></span>
-				</button>
-			</td>
-			<td>
-				<button type="button" class="btn btn-default btn-xs" onclick="popupFilter('location')">
-					<span class="glyphicon glyphicon-filter"></span>
-				</button>
-			</td>
-		</tr>
-		<tr>
+		<tr id="thead">
 			<th data-sort="string">
 				<div class="checkbox checkbox-inline">
 					<input type="checkbox" id="toggle-all">
@@ -65,15 +25,15 @@
 				</div>
 				{{lang_machine}}
 			</th>
-			<th data-sort="ipv4">{{lang_address}}</th>
-			<th data-sort="int" class="text-right">{{lang_nicSpeed}}</th>
-			<th data-sort="int" class="text-right">{{lang_lastSeen}}</th>
-			<th data-sort="string">{{lang_kvmSupport}}</th>
-			<th data-sort="int" class="text-right">{{lang_gbRam}}</th>
-			<th data-sort="int" class="text-right">{{lang_tmpGb}}</th>
-			<th data-sort="int" class="text-right">{{lang_persistentPart}}</th>
-			<th data-sort="int">{{lang_cpuModel}}</th>
-			<th data-sort="string">{{lang_location}}</th>
+			<th data-sort="ipv4" data-column="clientip">{{lang_address}}</th>
+			<th data-sort="int" data-column="nicspeed" class="text-right">{{lang_nicSpeed}}</th>
+			<th data-sort="int" data-column="lastseen" class="text-right">{{lang_lastSeen}}</th>
+			<th data-sort="string" data-column="kvmstate">{{lang_kvmSupport}}</th>
+			<th data-sort="int" data-column="gbram" class="text-right">{{lang_gbRam}}</th>
+			<th data-sort="int" data-column="hddgb" class="text-right">{{lang_tmpGb}}</th>
+			<th data-sort="int" data-column="persistentgb" class="text-right">{{lang_persistentPart}}</th>
+			<th data-sort="int" data-column="realcores">{{lang_cpuModel}}</th>
+			<th data-sort="string" data-column="location">{{lang_location}}</th>
 		</tr>
 	</thead>
 	<tbody>
@@ -319,6 +279,8 @@
 
 <script type="application/javascript"><!--
 
+var lookupTable = {};
+
 document.addEventListener("DOMContentLoaded", function () {
 	var $buttons = $('.btn-machine-action');
 	var $fn = function () {
@@ -377,14 +339,24 @@ document.addEventListener("DOMContentLoaded", function () {
 	});
 	// Generate list for column selection
 	var $cs = $('#column-selector .modal-body');
+	var $filters = $('<tr>');
+	$('#client-list > thead').prepend($filters);
 	var idx = 0;
 	$cs.empty();
-	$('#client-list tr > th').each(function() {
+	$('#client-list > thead > tr#thead > th').each(function() {
 		idx++;
 		var $th = $(this);
+		var $td = $('<td>');
+		$filters.append($td);
+		var column = $th.data('column');
+		if (!column)
+			return;
 		$cs.append($('<div class="checkbox">')
-				.append($('<input id="shc-' + idx + '" type="checkbox" onclick="toggleColumn(this, ' + idx + ')" checked="checked">'))
-				.append($('<label for="shc-' + idx + '">').text($th.text())));
+				.append($('<input id="shc-' + column + '" type="checkbox" onclick="toggleColumn(this, \'' + column + '\')" checked="checked">'))
+				.append($('<label for="shc-' + column + '">').text($th.text())));
+		$td.append($('<button type="button" class="btn btn-default btn-xs" onclick="popupFilter(\'' + column + '\')">'
+				+ '<span class="glyphicon glyphicon-filter"></span></button>'));
+		lookupTable[column] = idx;
 	});
 	// Load previous visibility settings
 	var colConf;
@@ -403,9 +375,12 @@ document.addEventListener("DOMContentLoaded", function () {
 	}
 });
 
-function toggleColumn(e, idx)
+function toggleColumn(e, column)
 {
 	var $el = $(e);
+	if (!(column in lookupTable))
+		return;
+	var idx = lookupTable[column];
 	$('#client-list tr > td:nth-child(' + idx + '), #client-list tr > th:nth-child(' + idx + ')')
 			.css('display', $el.is(':checked') ? '' : 'none');
 	var data = {};
-- 
cgit v1.2.3-55-g7522