initial sorting

master
km0 3 years ago
parent effebc1ff0
commit 42c9b17475

@ -1,5 +1,5 @@
let page = "Padliography"; let page = "Padliography";
let endpoint = `https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&format=json&origin=*&section=1&page=${page}&prop=text`; let endpoint = `https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&format=json&origin=*&page=${page}&prop=text`;
const container = document.getElementById("wiki-contents"); const container = document.getElementById("wiki-contents");
const filtersContainer = document.getElementById("filters-container"); const filtersContainer = document.getElementById("filters-container");
@ -23,7 +23,9 @@ fetch(endpoint)
// Create a new element to parse the response from the wiki and get an HTML table element out of it // Create a new element to parse the response from the wiki and get an HTML table element out of it
let section = document.createElement("div"); let section = document.createElement("div");
section.innerHTML = data.parse.text["*"]; section.innerHTML = data.parse.text["*"];
let wikiTable = section.getElementsByTagName("table")[0];
// Find the table with the padliography custom class (remember to set it up in the wiki table)
let wikiTable = section.getElementsByClassName("padliography")[0];
// Create a new table using the data in the Wiki table // Create a new table using the data in the Wiki table
createTable(wikiTable); createTable(wikiTable);
@ -34,6 +36,10 @@ fetch(endpoint)
// Initially show all the categories // Initially show all the categories
showAllTags(); showAllTags();
// Sort by date, last first (oke srry for this, the sorting function is a toggle atm)
sortTable(headers["Date"]);
sortTable(headers["Date"]);
}); });
// --- // ---
@ -96,19 +102,24 @@ function createTable(data) {
container.appendChild(table); container.appendChild(table);
} }
let headers = {};
function createHeaders() { function createHeaders() {
let firstRow = document.createElement("tr"); let firstRow = document.createElement("tr");
firstRow.classList.add("header"); firstRow.classList.add("header");
let headers = ["Date", "Title", "Categories", "Overview"]; let titles = ["Date", "Title", "Categories", "Overview"];
headers.forEach((header) => { titles.forEach((title) => {
let th = document.createElement("th"); let th = document.createElement("th");
th.innerHTML = header; th.innerHTML = title;
// Add sorting callback for Date and Title // Add sorting callback for Date and Title
// Do we need to sort also the categories? im not sure! // Do we need to sort also the categories? im not sure!
if (header === "Date" || header === "Title") if (title === "Date" || title === "Title")
th.addEventListener("click", () => sortTable(th)); th.addEventListener("click", () => sortTable(th));
firstRow.appendChild(th); firstRow.appendChild(th);
// Add header to the headers object in order to use the sort later
headers[title] = th;
}); });
return firstRow; return firstRow;

Loading…
Cancel
Save