diff options
author | Simon Rettberg | 2023-01-20 15:36:35 +0100 |
---|---|---|
committer | Simon Rettberg | 2023-01-20 15:36:35 +0100 |
commit | 64e0d32b4e0e28cd2c2c5c32506783ad4aec57b2 (patch) | |
tree | 61a9a6c4f7b6104882e810623b8fb19729574754 /modules-available/statistics | |
parent | [statistics] Expose proper id44/45 values in ~poweron event filtering (diff) | |
download | slx-admin-64e0d32b4e0e28cd2c2c5c32506783ad4aec57b2.tar.gz slx-admin-64e0d32b4e0e28cd2c2c5c32506783ad4aec57b2.tar.xz slx-admin-64e0d32b4e0e28cd2c2c5c32506783ad4aec57b2.zip |
[statistics] Modernize column handling in JS for filter and show/hide
Diffstat (limited to 'modules-available/statistics')
-rw-r--r-- | modules-available/statistics/templates/clientlist.html | 83 |
1 files changed, 29 insertions, 54 deletions
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 = {}; |