|
|
@ -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=*§ion=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;
|
|
|
|