From c18b8897f13eb5978032261a6c612ffe66e8bfd8 Mon Sep 17 00:00:00 2001 From: Lucas Bergholz Date: Tue, 13 Aug 2024 17:13:34 -0300 Subject: [PATCH 1/2] Adding Sort Button Signed-off-by: Lucas Bergholz --- site/static/img/up-down-arrows-icon.png | Bin 0 -> 11285 bytes src/index.js | 53 +++++++++++++++++++++++- 2 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 site/static/img/up-down-arrows-icon.png diff --git a/site/static/img/up-down-arrows-icon.png b/site/static/img/up-down-arrows-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f412906a4efddfa8cb4e6098de96dd6bebc46f6d GIT binary patch literal 11285 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 literal 0 HcmV?d00001 diff --git a/src/index.js b/src/index.js index 5579a7ce8..3c02f59e4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,6 @@ +/* eslint-disable max-len */ +/* eslint-disable no-trailing-spaces */ +/* eslint-disable indent */ // JS Goes here - ES6 supported import "./css/main.css"; @@ -53,6 +56,9 @@ document.addEventListener("DOMContentLoaded", function() { // Add input for filtering function addInput(el, label, idx) { + const container = document.createElement('div'); + container.setAttribute('style', 'display: flex; align-items: center;'); + const input = document.createElement('input'); input.addEventListener("change", function(e) { widget.filters[idx] = e.target.value; @@ -65,7 +71,11 @@ document.addEventListener("DOMContentLoaded", function() { input.setAttribute('type', 'text'); input.setAttribute('name', 'filter_' + label); input.setAttribute('list', 'opts_for_' + label); - el.appendChild(input); + + container.appendChild(input); + addSortButton(container, idx); + + el.appendChild(container); } const tbody = el.querySelector('tbody'); const headings = Array.from(el.querySelectorAll('thead th')).map((el, idx) => { @@ -95,6 +105,47 @@ document.addEventListener("DOMContentLoaded", function() { }; }); + function addSortButton(el, idx) { + const img = document.createElement('img'); + img.src = "/img/up-down-arrows-icon.png" + img.addEventListener("click", function() { + sortTable(idx); + }); + img.setAttribute('style', 'width: 16px; margin-left: 5px' ) + + el.appendChild(img) + } + + let direction = false; + function sortTable(columnIndex) { + removeAllChildNodes(tbody); + if (isNaN(rows[0].columns[columnIndex][0]) && isNaN(rows[rows.length - 1].columns[columnIndex][0])) { + rows.sort((a, b) => { + a = a.columns[columnIndex]; + b = b.columns[columnIndex]; + return direction ? a.localeCompare(b) : b.localeCompare(a); + }); + } else { + if (!columnIndex && window.location.href.includes("docs/alerts")) { + rows.sort((a, b) => { + a = a.columns[columnIndex].split("-"); + b = b.columns[columnIndex].split("-"); + return direction ? a[0] - b[0] : b[0] - a[0]; + }); + } else { + rows.sort((a, b) => { + a = a.columns[columnIndex]; + b = b.columns[columnIndex]; + return direction ? a - b : b - a; + }); + } + } + for (let i = 0; i <= rows.length - 1; i++) { + tbody.appendChild(rows[i].el); + } + direction = !direction; + } + // Go through options elements and populate lists with column aggregates // gathered in previous loop Object.entries(widget.options).map(pair => { From c8f7104215c6be3abed0c525c3a8459e606a920f Mon Sep 17 00:00:00 2001 From: Lucas Bergholz Date: Mon, 26 Aug 2024 21:06:38 -0300 Subject: [PATCH 2/2] fix: Fixing sort and filter so they work at the same time Co-authored-by: Ana Rocha Signed-off-by: Lucas Bergholz --- src/index.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 3c02f59e4..a8ae7201c 100644 --- a/src/index.js +++ b/src/index.js @@ -63,9 +63,12 @@ document.addEventListener("DOMContentLoaded", function() { input.addEventListener("change", function(e) { widget.filters[idx] = e.target.value; removeAllChildNodes(tbody); + elements = []; rows.filter(isFilterMatch).map(r => { tbody.appendChild(r.el) + elements.push(r) }); + console.log(elements); }); input.setAttribute('style', 'width:100%;display:block') input.setAttribute('type', 'text'); @@ -104,6 +107,7 @@ document.addEventListener("DOMContentLoaded", function() { columns, // Needed for filtered }; }); + let elements = rows; function addSortButton(el, idx) { const img = document.createElement('img'); @@ -118,30 +122,31 @@ document.addEventListener("DOMContentLoaded", function() { let direction = false; function sortTable(columnIndex) { + console.log(elements); removeAllChildNodes(tbody); - if (isNaN(rows[0].columns[columnIndex][0]) && isNaN(rows[rows.length - 1].columns[columnIndex][0])) { - rows.sort((a, b) => { + if (isNaN(elements[0].columns[columnIndex][0]) && isNaN(elements[elements.length - 1].columns[columnIndex][0])) { + elements.sort((a, b) => { a = a.columns[columnIndex]; b = b.columns[columnIndex]; return direction ? a.localeCompare(b) : b.localeCompare(a); }); } else { if (!columnIndex && window.location.href.includes("docs/alerts")) { - rows.sort((a, b) => { + elements.sort((a, b) => { a = a.columns[columnIndex].split("-"); b = b.columns[columnIndex].split("-"); return direction ? a[0] - b[0] : b[0] - a[0]; }); } else { - rows.sort((a, b) => { + elements.sort((a, b) => { a = a.columns[columnIndex]; b = b.columns[columnIndex]; return direction ? a - b : b - a; }); } } - for (let i = 0; i <= rows.length - 1; i++) { - tbody.appendChild(rows[i].el); + for (let i = 0; i <= elements.length - 1; i++) { + tbody.appendChild(elements[i].el); } direction = !direction; }