clickable ths for toggling of sort-direction

templates/table/colonnade.hamlet

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

templates/table/colonnade.julius

@@ -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);
-      });
-    }
-
-  });
-})();

templates/table/layout.hamlet

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

templates/table/layout.julius

@@ -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));
+  });
+})();

templates/table/sortable-header.hamlet

@@ -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

templates/terms.hamlet

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