From a2739df985f476be89a95612bbed5c4a059702ed Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 18 Feb 2018 19:54:40 +0100
Subject: [PATCH] sortable tables

---
 app/www/courses.html                    | 28 +++++++--
 app/www/src/css/main.css                | 29 +++++++++
 app/www/src/css/main.css.map            |  5 +-
 app/www/src/js/helper/sortable.js       | 82 +++++++++++++++++++++++++
 app/www/src/js/main.js                  |  3 +-
 app/www/src/scss/main.scss              |  3 +-
 app/www/src/scss/modules/_sortable.scss | 29 +++++++++
 7 files changed, 169 insertions(+), 10 deletions(-)
 create mode 100644 app/www/src/js/helper/sortable.js
 create mode 100644 app/www/src/scss/modules/_sortable.scss

diff --git a/app/www/courses.html b/app/www/courses.html
index 682490b68..fe29d10d2 100644
--- a/app/www/courses.html
+++ b/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>
diff --git a/app/www/src/css/main.css b/app/www/src/css/main.css
index 1ce14a15b..4213ff981 100644
--- a/app/www/src/css/main.css
+++ b/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;
diff --git a/app/www/src/css/main.css.map b/app/www/src/css/main.css.map
index 7dbceaa71..ccbb453a9 100644
--- a/app/www/src/css/main.css.map
+++ b/app/www/src/css/main.css.map
@@ -1,13 +1,14 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "../scss/main.scss",
         "../scss/_grid.scss",
         "../scss/_colors.scss",
         "../scss/_dimensions.scss",
         "../scss/modules/_box.scss",
-        "../scss/_colors.scss"
+        "../scss/_colors.scss",
+        "../scss/modules/_sortable.scss"
     ],
     "names": [],
     "file": "main.css"
diff --git a/app/www/src/js/helper/sortable.js b/app/www/src/js/helper/sortable.js
new file mode 100644
index 000000000..bb784e27e
--- /dev/null
+++ b/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);
+            });
+        },
+    }
+});
\ No newline at end of file
diff --git a/app/www/src/js/main.js b/app/www/src/js/main.js
index e9a481c67..c2d7365be 100644
--- a/app/www/src/js/main.js
+++ b/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();
 });
diff --git a/app/www/src/scss/main.scss b/app/www/src/scss/main.scss
index e463d8803..195e3c20a 100644
--- a/app/www/src/scss/main.scss
+++ b/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;
diff --git a/app/www/src/scss/modules/_sortable.scss b/app/www/src/scss/modules/_sortable.scss
new file mode 100644
index 000000000..54ba71159
--- /dev/null
+++ b/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;
+        }
+    }
+}