74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
// simple javascript support
|
|
|
|
//https://www.w3schools.com/howto/howto_js_treeview.asp
|
|
var toggler = document.getElementsByClassName("caret");
|
|
var i;
|
|
|
|
for (i = 0; i < toggler.length; i++) {
|
|
toggler[i].addEventListener("click", function () {
|
|
this.parentElement.querySelector(".nested").classList.toggle("active");
|
|
this.classList.toggle("caret-down");
|
|
});
|
|
}
|
|
// table sort https://stackoverflow.com/questions/10683712/html-table-sort#10683805
|
|
document.querySelectorAll('th').forEach((element) => { // Table headers
|
|
element.addEventListener('click', function () {
|
|
let table = this.closest('table');
|
|
|
|
// If the column is sortable
|
|
if (this.querySelector('span')) {
|
|
let order_icon = this.querySelector('span');
|
|
let order = encodeURI(order_icon.innerHTML).includes('%E2%86%91') ? 'desc' : 'asc';
|
|
let separator = '-----'; // Separate the value of it's index, so data keeps intact
|
|
|
|
let value_list = {}; // <tr> Object
|
|
let obj_key = []; // Values of selected column
|
|
|
|
let string_count = 0;
|
|
let number_count = 0;
|
|
|
|
// <tbody> rows
|
|
table.querySelectorAll('tbody tr').forEach((line, index_line) => {
|
|
// Value of each field
|
|
let key = line.children[element.cellIndex].textContent.toUpperCase();
|
|
|
|
// Check if value is date, numeric or string
|
|
if (line.children[element.cellIndex].hasAttribute('data-timestamp')) {
|
|
// if value is date, we store it's timestamp, so we can sort like a number
|
|
key = line.children[element.cellIndex].getAttribute('data-timestamp');
|
|
}
|
|
else if (key.replace('-', '').match(/^[0-9,.]*$/g)) {
|
|
number_count++;
|
|
}
|
|
else {
|
|
string_count++;
|
|
}
|
|
|
|
value_list[key + separator + index_line] = line.outerHTML.replace(/(\t)|(\n)/g, ''); // Adding <tr> to object
|
|
obj_key.push(key + separator + index_line);
|
|
});
|
|
if (string_count === 0) { // If all values are numeric
|
|
obj_key.sort(function (a, b) {
|
|
return a.split(separator)[0] - b.split(separator)[0];
|
|
});
|
|
}
|
|
else {
|
|
obj_key.sort();
|
|
}
|
|
|
|
if (order === 'desc') {
|
|
obj_key.reverse();
|
|
order_icon.innerHTML = '↓';
|
|
}
|
|
else {
|
|
order_icon.innerHTML = '↑';
|
|
}
|
|
|
|
let html = '';
|
|
obj_key.forEach(function (chave) {
|
|
html += value_list[chave];
|
|
});
|
|
table.getElementsByTagName('tbody')[0].innerHTML = html;
|
|
}
|
|
});
|
|
});
|