sortable tables

app/www/courses.html

@@ -61,9 +61,9 @@
                         <ul>
                             <li>
                                 <h4 class="js-show-hide-toggle">Übungsgruppen</h4>
-                                
+
                                 <div>
-                                    <table>
+                                    <table class="sortable">
                                         <tr>
                                             <th>Name (Raum)</th>
                                             <th>Termin</th>
@@ -74,25 +74,41 @@
                                         </tr>
                                         <tr>
                                             <td>Gruppe 1<br>Leopoldstraße 13, Raum 1502</td>
-                                            <td>Fr. 09.02.18, 10:00</td>
+                                            <td>Fr. 10:15</td>
                                             <td>35/35</td>
                                             <td><a href="#">Axel Hösl</a></td>
                                             <td>Fr. 09.02.18, 10:00</td>
                                             <td><a href="#">Verlassen</a></td>
                                         </tr>
+                                        <tr>
+                                            <td>Gruppe 2<br>Leopoldstraße 13, Raum 1502</td>
+                                            <td>Fr. 12:15</td>
+                                            <td>13/20</td>
+                                            <td><a href="#">Sebastian Mader</a></td>
+                                            <td>Fr. 09.02.18, 10:00</td>
+                                            <td><a href="#">Verlassen</a></td>
+                                        </tr>
+                                        <tr>
+                                            <td>Gruppe 3<br>Leopoldstraße 13, Raum 1502</td>
+                                            <td>Fr. 14:15</td>
+                                            <td>7/25</td>
+                                            <td><a href="#">Max Mustermann</a></td>
+                                            <td>Fr. 09.02.18, 10:00</td>
+                                            <td><a href="#">Verlassen</a></td>
+                                        </tr>
                                     </table>
                                 </div>
                             </li>
                             <li>
                                 <h4 class="js-show-hide-toggle">Abgaben</h4>
-                                
+
                                 <div>
                                     Arbitrary content
                                 </div>
                             </li>
                             <li>
                                 <h4 class="js-show-hide-toggle">Klausuren</h4>
-                                
+
                                 <div>
                                     Etwas anderes...
                                 </div>
@@ -104,7 +120,7 @@
                         <ul>
                             <li>
                                 <h4 class="js-show-hide-toggle">Übungsgruppen</h4>
-                                
+
                                 <div>
                                     <table>
                                         <tr>

app/www/src/css/main.css

@@ -153,6 +153,35 @@
   margin-bottom: 7px;
 }
 
+table.sortable th {
+  cursor: pointer;
+  position: relative;
+  padding-right: 20px;
+}
+
+table.sortable th.sorted-asc, table.sortable th.sorted-desc {
+  color: rebeccapurple;
+}
+
+table.sortable th.sorted-asc::after, table.sortable th.sorted-desc::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  width: 0;
+  height: 0;
+  top: 7px;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+}
+
+table.sortable th.sorted-asc::after {
+  border-top: 8px solid rebeccapurple;
+}
+
+table.sortable th.sorted-desc::after {
+  border-bottom: 8px solid rebeccapurple;
+}
+
 * {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

app/www/src/js/helper/sortable.js

@@ -0,0 +1,82 @@
+define(function(require) {
+
+    var tables = [];
+    var ASC = 1;
+    var DESC = -1;
+
+    function initTable(table, tableIndex) {
+        var trs = table.querySelectorAll('tr');
+        var ths = table.querySelectorAll('th');
+        var trContents = [];
+
+        Array.from(trs).forEach(function(tr, rowIndex) {
+            if (rowIndex === 0) {
+                // register table headers as sort-listener
+                Array.from(tr.querySelectorAll('th')).forEach(function(th, thIndex) {
+                    th.addEventListener('click', function(el) {
+                        sortTableBy(tableIndex, thIndex);
+                    });
+                });
+            } else {
+                // register table rows
+                trContents.push(Array.from(tr.querySelectorAll('td')).map(function(td) {
+                    return td.innerHTML;
+                }));
+            }
+        });
+
+        tables.push({
+            el: table,
+            ths: ths,
+            sortBy: 0,
+            sortDir: ASC,
+            trContents,
+        });
+    }
+
+    function updateThs(tableIndex, thIndex, sortOrder) {
+        Array.from(tables[tableIndex].ths).forEach(function (th) {
+            th.classList.remove('sorted-asc', 'sorted-desc');
+        });
+        var suffix = sortOrder > 0 ? 'asc' : 'desc';
+        tables[tableIndex].ths[thIndex].classList.add('sorted-' + suffix);
+    }
+
+    function sortTableBy(tableIndex, thIndex) {
+        var table = tables[tableIndex];
+        var sortKey = thIndex;
+        var sortOrder = ASC;
+        if (table.sortBy === sortKey) {
+            sortOrder = table.sortDir === ASC ? DESC : ASC;
+        }
+
+        table.trContents.sort(dynamicSort(sortKey, sortOrder));
+        tables[tableIndex].sortBy = thIndex;
+        tables[tableIndex].sortDir = sortOrder;
+        updateThs(tableIndex, thIndex, sortOrder);
+
+        Array.from(table.el.querySelectorAll('tr')).forEach(function(tr, trIndex) {
+            if (trIndex > 0) {
+                Array.from(tr.querySelectorAll('td')).forEach(function (td, tdIndex) {
+                    td.innerHTML = table.trContents[trIndex - 1][tdIndex];
+                });
+            }
+        });
+    }
+
+    function dynamicSort(key, order) {
+        return function (a,b) {
+            var result = (a[key] < b[key]) ? -1 : (a[key] > b[key]) ? 1 : 0;
+            return result * order;
+        }
+    }
+
+    return {
+        init: function() {
+            var tables = document.querySelectorAll('.sortable');
+            Array.from(tables).forEach(function(table, i) {
+                initTable(table, i);
+            });
+        },
+    }
+});

app/www/src/js/main.js

@@ -1,4 +1,5 @@
-requirejs(["config", "api", "helper/sticky_menu", "helper/show_hide"], function(config, api, sticky_menu, show_hide) {
+requirejs(["config", "api", "helper/sticky_menu", "helper/show_hide", "helper/sortable"], function(config, api, sticky_menu, show_hide, sortable) {
     sticky_menu.init();
     show_hide.init();
+    sortable.init();
 });

app/www/src/scss/main.scss

@@ -4,6 +4,7 @@
 
 // modules
 @import 'modules/box';
+@import 'modules/sortable';
 
 * {
     box-sizing: border-box;
@@ -110,7 +111,7 @@ th, td {
 }
 
 ul.flat {
-    
+
     > li > a {
         padding: 0 13px;
         position: relative;

app/www/src/scss/modules/_sortable.scss

@@ -0,0 +1,29 @@
+table.sortable {
+    th {
+        cursor: pointer;
+        position: relative;
+        padding-right: 20px;
+
+        &.sorted-asc,
+        &.sorted-desc {
+            color: $base00;
+            &::after {
+                content: '';
+                position: absolute;
+                right: 0;
+                width: 0;
+                height: 0;
+                top: 7px;
+                border-left: 8px solid transparent;
+                border-right: 8px solid transparent;
+            }
+        }
+
+        &.sorted-asc::after {
+            border-top: 8px solid $base00;
+        }
+        &.sorted-desc::after {
+            border-bottom: 8px solid $base00;
+        }
+    }
+}