table sorting

master
km0 3 years ago
parent bebcfc5ad0
commit 4c26b4fe5d

@ -42,6 +42,8 @@ fetch(endpoint)
function createTable(data) { function createTable(data) {
table = document.createElement("table"); table = document.createElement("table");
table.appendChild(createHeaders());
// Traverse the rows collection as an array // Traverse the rows collection as an array
[...data.rows].forEach((row, index) => { [...data.rows].forEach((row, index) => {
// Avoid first row that contains column titles // Avoid first row that contains column titles
@ -54,30 +56,36 @@ function createTable(data) {
// Set the categories as classes for future filtering // Set the categories as classes for future filtering
categoryTags.forEach((tag) => tableRow.classList.add(tag)); categoryTags.forEach((tag) => tableRow.classList.add(tag));
// --- --- ---
// --- Beginning of the row // --- Beginning of the row
// Columns order could be modified simply by reordering the next 4 sections // Columns order could be modified simply by reordering the next 4 sections
// Create a cell with date // Create a cell with date
let date = document.createElement("td"); let date = document.createElement("td");
date.innerHTML = row.cells[4].innerText; date.classList.add("date");
date.innerHTML = createDate(row.cells[4].innerText);
tableRow.appendChild(date); tableRow.appendChild(date);
// Create a cell with title + link to the pad // Create a cell with title + link to the pad
let title = document.createElement("td"); let title = document.createElement("td");
title.classList.add("title");
title.appendChild(createTitleLink(row)); title.appendChild(createTitleLink(row));
tableRow.appendChild(title); tableRow.appendChild(title);
// Create a cell with categories // Create a cell with categories
let categories = document.createElement("td"); let categories = document.createElement("td");
categories.classList.add("categories");
categories.appendChild(createTags(categoryTags)); categories.appendChild(createTags(categoryTags));
tableRow.appendChild(categories); tableRow.appendChild(categories);
// Create a cell with the overview // Create a cell with the overview
let overview = document.createElement("td"); let overview = document.createElement("td");
overview.classList.add("overview");
overview.innerHTML = row.cells[2].innerText; overview.innerHTML = row.cells[2].innerText;
tableRow.appendChild(overview); tableRow.appendChild(overview);
// --- End of the row // --- End of the row
// --- --- ---
// Insert the row in the table // Insert the row in the table
table.appendChild(tableRow); table.appendChild(tableRow);
@ -87,6 +95,24 @@ function createTable(data) {
container.appendChild(table); container.appendChild(table);
} }
function createHeaders() {
let firstRow = document.createElement("tr");
firstRow.classList.add("header");
let headers = ["Date", "Title", "Categories", "Overview"];
headers.forEach((header) => {
let th = document.createElement("th");
th.innerHTML = header;
// Add sorting callback for Date and Title
// Do we need to sort also the categories? im not sure!
if (header === "Date" || header === "Title")
th.addEventListener("click", () => sortTable(th));
firstRow.appendChild(th);
});
return firstRow;
}
function createTitleLink(row) { function createTitleLink(row) {
// Take the first cell of the wiki (link) // Take the first cell of the wiki (link)
let url = row.cells[0].innerText; let url = row.cells[0].innerText;
@ -104,6 +130,18 @@ function createTitleLink(row) {
return link; return link;
} }
function createDate(string) {
let parsed = string.replaceAll("/", ".");
let date = new Date(string);
if (date) {
const options = { year: "numeric", month: "short", day: "numeric" };
parsed = date.toLocaleDateString("en-EN", options);
}
return parsed;
}
// Take a list of categories and create an unordered list with them // Take a list of categories and create an unordered list with them
// + store every category to the filters Set // + store every category to the filters Set
function createTags(categories) { function createTags(categories) {
@ -222,6 +260,34 @@ function allActiveCheck() {
} }
} }
// ---
// Sorting table
// kindly adapted from https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript
// TODO: Sorting UI
// ---
const getCellValue = (tr, idx) => {
if (tr.children[idx].classList.contains("date")) return new Date(tr.children[idx].innerText);
else return tr.children[idx].innerText || tr.children[idx].textContent;
};
// wow this is really obscure wtf not happy with it at all
const comparer = (idx, asc) => (a, b) =>
((v1, v2) =>
v1 !== "" && v2 !== "" && !isNaN(v1) && !isNaN(v2)
? v1 - v2
: v1.toString().localeCompare(v2))(
getCellValue(asc ? a : b, idx),
getCellValue(asc ? b : a, idx)
);
// The function is added as callback in the createHeaders function
const sortTable = (th) => {
const table = th.closest("table");
Array.from(table.querySelectorAll("tr:nth-child(n+2)"))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), (this.asc = !this.asc)))
.forEach((tr) => table.appendChild(tr));
};
// --- // ---
// Event Listener // Event Listener
// --- // ---
@ -249,5 +315,4 @@ document.addEventListener("keydown", (event) => {
showSelectedRows(); showSelectedRows();
} }
} }
// do something
}); });

@ -14,6 +14,8 @@ h1 {
text-align: center; text-align: center;
} }
/* FILTERS */
.tag { .tag {
background: none; background: none;
font-size: 20px; font-size: 20px;
@ -47,6 +49,8 @@ ul {
padding: 0; padding: 0;
} }
/* TABLE */
tr { tr {
display: none; display: none;
} }
@ -58,3 +62,8 @@ tr.active {
tr .tag { tr .tag {
cursor: default; cursor: default;
} }
tr.header {
display: table-row;
text-align: left;
}

Loading…
Cancel
Save