fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clickable ths for toggling of sort-direction

Browse Source
This commit is contained in:
Felix Hamann 2018-04-12 00:37:54 +02:00
parent 73d535d8c3
commit 796f4d0832
6 changed files with 98 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
templates/table/colonnade.hamlet
View File

@ -1,18 +1,12 @@
$if not psShortcircuit
<table id="#{dbtIdent}">
$maybe sortableP <- pSortable
$with toSortable <- toSortable sortableP
<thead>
$forall OneColonnade{..} <- getColonnade dbtColonnade
^{widgetFromCell th $ withSortLinks $ toSortable oneColonnadeHead}
$nothing
<tbody>
$forall row <- rows
<tr>
$forall OneColonnade{..} <- getColonnade dbtColonnade
^{widgetFromCell td $ oneColonnadeEncode row}
$else
$forall row <- rows
<tr>
$forall OneColonnade{..} <- getColonnade dbtColonnade
^{widgetFromCell td $ oneColonnadeEncode row}
<table id="#{dbtIdent}">
$maybe sortableP <- pSortable
$with toSortable <- toSortable sortableP
<thead>
$forall OneColonnade{..} <- getColonnade dbtColonnade
^{widgetFromCell th $ withSortLinks $ toSortable oneColonnadeHead}
$nothing
<tbody>
$forall row <- rows
<tr>
$forall OneColonnade{..} <- getColonnade dbtColonnade
^{widgetFromCell td $ oneColonnadeEncode row}

61
templates/table/colonnade.julius
View File

@ -1,61 +0,0 @@
(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;
url.searchParams.set(#{String $ wIdent "table-only"}, 'yes');
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, {
credentials: 'same-origin',
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);
});
}
});
})();

14
templates/table/layout.hamlet
View File

@ -1,9 +1,7 @@
$if not psShortcircuit
<div .table>
<div ##{dbtIdent}-table-wrapper>
<div .scrolltable>
^{table}
$if pageCount > 1
<p style="text-align:center">
$# TODO: foreach (reachable pages) print link to that page
_{MsgPage (succ psPage) pageCount}
$else
^{table}
$if pageCount > 1
<p style="text-align:center">
$# TODO: foreach (reachable pages) print link to that page
_{MsgPage (succ psPage) pageCount}

79
templates/table/layout.julius Normal file
View File

@ -0,0 +1,79 @@
(function collonadeClosure() {
'use strict';
document.addEventListener('DOMContentLoaded', function DOMContentLoaded() {
var ASC = 'asc';
var DESC = 'desc';
function setupSorting(wrapper) {
var table = wrapper.querySelector('#' + #{String $ wIdent "table-only"}.replace('-table-only', ''));
var ths = Array.from(table.querySelectorAll('th'));
// attach click handler to each table-header
ths.forEach(function(th) {
th.addEventListener('click', clickHandler);
// TODO: Remove this forEach once column-description is link
Array.from(th.querySelectorAll('a')).forEach(function(a) {
a.style.display = 'none';
})
});
// handles click on table header
function clickHandler(event) {
event.preventDefault();
var link = this.querySelector('a');
if (!link) {
return false;
}
var href = link.getAttribute('href');
var url = new URL(window.location.origin + window.location.pathname + href);
var order = this.dataset.order || ASC;
url.searchParams.set(#{String $ wIdent "table-only"}, 'yes');
updateTableFrom(url);
markAsSorted(this, order);
}
function markAsSorted(th, order) {
ths.forEach(function(th) {
th.classList.remove('sorted-asc', 'sorted-desc');
});
th.classList.add('sorted-' + order);
th.dataset.order = order;
}
function replaceContent(content) {
wrapper.innerHTML = content;
setupSorting(wrapper);
}
// fetches new sorted table from url with params and replaces contents of current table
function updateTableFrom(url) {
fetch(url, {
credentials: 'same-origin',
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
replaceContent(data);
table.querySelector('tbody').innerHTML = data;
}).catch(function(err) {
console.error(err);
});
}
}
// TODO: how to get 'terms' only?
var selector = #{String $ wIdent "table-only"}.replace('-only', '-wrapper');
setupSorting(document.querySelector('#' + selector));
});
})();

2
templates/table/sortable-header.hamlet
View File

@ -1,6 +1,5 @@
^{cellContents}
$maybe flag <- sortableKey
<br>
$case directions
$of [SortAsc]
<a href=#{tblLink $ setParam (wIdent "sorting") (Just $ flag <> "-desc")}>desc
@ -8,7 +7,6 @@ $maybe flag <- sortableKey
<a href=#{tblLink $ setParam (wIdent "sorting") (Just $ flag <> "-asc")}>asc
$of []
<a href=#{tblLink $ setParam (wIdent "sorting") (Just $ flag <> "-desc")}>desc
/
<a href=#{tblLink $ setParam (wIdent "sorting") (Just $ flag <> "-asc")}>asc
$of _
$nothing

3
templates/terms.hamlet
View File

@ -1,5 +1,4 @@
<div .container>
<h1>Semesterübersicht
<div .scrolltable>
^{table}
^{table}