j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-09 03:36:48 +00:00
Code Issues Projects Releases Wiki Activity

fix(templates): the list pages search their rows as text, with one script

Browse source 
The list pages' search (filter-table.js) read what was typed as a
regular expression: a "(" or "[" stopped it with an error. It also
needed jQuery, while the instance list had its own script for the same
search. Both are now static/js/table_filter.js: plain text in any case,
the instance list's state list and host groups where a page has them,
remembered for a day as before. A group's header row is marked as one
(data-group-header) instead of being any row without a state.
This commit is contained in:
catborise 2026-10-25 22:59:36 +03:00
parent b4c999a22f
commit e5c7dc338d
14 changed files with 58 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

18
static/js/filter-table.js
View file

@ -1,18 +0,0 @@
function filter_table() {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
Cookies.set(document.title + "_filter", $(this).val(), { expires: 1 });
}
$(document).ready(function () {
filter_cookie = Cookies.get(document.title + "_filter");
if (filter_cookie) {
$('#filter').val(filter_cookie);
$('#filter').each(filter_table);
}
(function ($) {
$('#filter').keyup(filter_table)
}(jQuery));
});

37
static/js/instance_filter.js → static/js/table_filter.js
View file

@ -1,22 +1,25 @@
// The instance list's search box and state list.
// The search box of a list page, and the instance list's state list.
//
// A VM row shows when its text contains the search, in any case, and the VM is
// in the chosen state. In the grouped list a search for a host's name shows
// all of its VMs, and the host's row shows while any of its VMs does.
function filterInstances(doc) {
// A row shows when its text contains the search, in any case: plain text,
// not a pattern. With a state list, the row's [data-state] must be the
// chosen state too. In a grouped list a search for a group's host shows all
// of its rows, and its header row (data-group-header) shows while any of its
// rows does. The search is remembered for a day, per page.
function filterTable(doc) {
var text = doc.getElementById("filter").value.toLowerCase();
var state = doc.getElementById("state-filter").value;
var states = doc.getElementById("state-filter");
var state = states ? states.value : "";
doc.querySelectorAll(".searchable").forEach(function (group) {
var host = group.dataset.host;
var hostMatches = host !== undefined && host.toLowerCase().includes(text);
var header = null, shown = false;
group.querySelectorAll("tr").forEach(function (row) {
var mark = row.querySelector("[data-state]");
if (!mark) {
if (row.hasAttribute("data-group-header")) {
header = row;
return;
}
row.hidden = !((!state || mark.dataset.state === state) &&
var mark = row.querySelector("[data-state]");
row.hidden = !((!state || (mark && mark.dataset.state === state)) &&
(hostMatches || row.textContent.toLowerCase().includes(text)));
shown = shown || !row.hidden;
});
@ -27,17 +30,19 @@ function filterInstances(doc) {
}
if (typeof module !== "undefined") {
module.exports = {filterInstances: filterInstances};
module.exports = {filterTable: filterTable};
} else {
// the search is remembered for a day, as on the other lists
var search = document.getElementById("filter");
var states = document.getElementById("state-filter");
search.value = Cookies.get(document.title + "_filter") || "";
search.addEventListener("input", function () {
Cookies.set(document.title + "_filter", search.value, {expires: 1});
filterInstances(document);
filterTable(document);
});
document.getElementById("state-filter").addEventListener("change", function () {
filterInstances(document);
});
filterInstances(document);
if (states) {
states.addEventListener("change", function () {
filterTable(document);
});
}
filterTable(document);
}