web/admin.html

@@ -146,7 +146,7 @@
                           </table>                          
                         </div>
                         <div style="width: 100%; overflow-y: scroll; display: none;" id="datapanel" class="controlpanel">
-                          <table>
+                          <table id="dataTable">
                             <thead><tr><th>Published</th><th>What</th><th>Who</th><th>Last sang this song</th><th>Last dueted with performer</th></th></thead>
                             {{ range .SongData }}
                             <tr><td title="{{ .Date }}">{{ .NiceDate }}</td><td>{{ .SongTitle }}</td><td>{{ .OtherSinger }}</td><td title="{{ .LastSungSong }}">{{ .NiceLastSungSong }}</td><td title="{{ .LastSungSinger }}">{{ .NiceLastSungSinger }}</td></tr>
@@ -207,6 +207,62 @@
                             }
                             document.getElementById(self.id+"panel").style.display = "block"
                           }
+                          /**
+                          * Modified and more readable version of the answer by Paul S. to sort a table with ASC and DESC order
+                          * with the <thead> and <tbody> structure easily.
+                          * 
+                          * https://stackoverflow.com/a/14268260/4241030
+                          */
+                          var TableSorter = {
+                              makeSortable: function(table){
+                                  // Store context of this in the object
+                                  var _this = this;
+                                  var th = table.tHead, i;
+                                  th && (th = th.rows[0]) && (th = th.cells);
+
+                                  if (th){
+                                      i = th.length;
+                                  }else{
+                                      return; // if no `<thead>` then do nothing
+                                  }
+
+                                  // Loop through every <th> inside the header
+                                  while (--i >= 0) (function (i) {
+                                      var dir = 1;
+
+                                      // Append click listener to sort
+                                      th[i].addEventListener('click', function () {
+                                          _this._sort(table, i, (dir = 1 - dir));
+                                      });
+                                  }(i));
+                              },
+                              _sort: function (table, col, reverse) {
+                                  var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
+                                  tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
+                                  i;
+
+                                  reverse = -((+reverse) || -1);
+
+                                  // Sort rows
+                                  tr = tr.sort(function (a, b) {
+                                      // `-1 *` if want opposite order
+                                      return reverse * (
+                                          // Using `.textContent.trim()` for test
+                                          a.cells[col].textContent.trim().localeCompare(
+                                              b.cells[col].textContent.trim()
+                                          )
+                                      );
+                                  });
+
+                                  for(i = 0; i < tr.length; ++i){
+                                      // Append rows in new order
+                                      tb.appendChild(tr[i]);
+                                  }
+                              }
+                          };
+                          window.onload = function(){
+                            TableSorter.makeSortable(document.getElementById("dataTable"));
+                          };
                         </script>
                 </main>
                 <footer class="mastfoot mt-auto">