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

sortable tables

Browse Source
This commit is contained in:
Felix Hamann 2018-02-18 19:54:40 +01:00
parent 8c792c9243
commit a2739df985
7 changed files with 169 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/www/courses.html
View File

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

29
app/www/src/css/main.css
View File

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

5
app/www/src/css/main.css.map
View File

File diff suppressed because one or more lines are too long

82
app/www/src/js/helper/sortable.js Normal file
View File

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

3
app/www/src/js/main.js
View File

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

3
app/www/src/scss/main.scss
View File

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

29
app/www/src/scss/modules/_sortable.scss Normal file
View File

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