62 lines
1.9 KiB
Plaintext
62 lines
1.9 KiB
Plaintext
(function collonadeClosure() {
|
|
'use strict';
|
|
|
|
document.addEventListener('DOMContentLoaded', function DOMContentLoaded() {
|
|
|
|
var ASC = 'asc';
|
|
var DESC = 'desc';
|
|
|
|
// TODO: Make use of interpolated dbtIdent
|
|
var table = document.querySelector('table');
|
|
var ths = Array.from(table.querySelectorAll('th'));
|
|
|
|
// attach click handler to each table-header
|
|
ths.map(function(th) {
|
|
var link = th.querySelector('a');
|
|
if (link) {
|
|
link.addEventListener('click', clickHandler);
|
|
}
|
|
});
|
|
|
|
// handles click on table header
|
|
function clickHandler(event) {
|
|
event.preventDefault();
|
|
var url = new URL(window.location.origin + window.location.pathname + this.getAttribute('href'));
|
|
var order = this.parentNode.dataset.order || ASC;
|
|
// TODO: not working here... getting whole page as response...
|
|
url.searchParams.set('table-only', 'true');
|
|
updateTableFrom(url);
|
|
markSorted(this.parentNode, order);
|
|
}
|
|
|
|
function markSorted(th, order) {
|
|
ths.forEach(function(th) {
|
|
th.classList.remove('sorted-asc', 'sorted-desc');
|
|
});
|
|
th.classList.add('sorted-' + order);
|
|
th.dataset.order = order;
|
|
}
|
|
|
|
// fetches new sorted table from url with params and replaces contents of current table
|
|
function updateTableFrom(url) {
|
|
fetch(url, {
|
|
headers: {
|
|
'Accept': 'text/html'
|
|
}
|
|
}).then(function(response) {
|
|
var contentType = response.headers.get("content-type");
|
|
if (!response.ok) {
|
|
throw ('Looks like there was a problem fetching ' + url.toString() + '. Status Code: ' + response.status);
|
|
}
|
|
return response.text();
|
|
}).then(function(data) {
|
|
// replace contents of table body
|
|
table.querySelector('tbody').innerHTML = data;
|
|
}).catch(function(err) {
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
});
|
|
})();
|