Client side table sorting for AWS contest ranking

Author: gregoreesmaa

cms/server/admin/static/aws_style.css

@@ -390,6 +390,18 @@ table td.wrapping-options label {
     margin-right: 15px;
 }
 
+table td.partial::after {
+    content: "*";
+}
+
+table.sortable th {
+    white-space: nowrap;
+}
+
+th .column-sort {
+    text-decoration: none;
+    margin-left: 8px;
+}
 
 /* TODO */
 

cms/server/admin/static/aws_utils.js

@@ -3,6 +3,7 @@
  * Copyright © 2012-2014 Luca Wehrstedt <luca.wehrstedt@gmail.com>
  * Copyright © 2013 Fabian Gundlach <320pointsguy@gmail.com>
  * Copyright © 2014 Artem Iglikov <artem.iglikov@gmail.com>
+ * Copyright © 2018 Gregor Eesmaa <gregoreesmaa1@gmail.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -52,7 +53,7 @@ CMS.AWSUtils = function(url_root, timestamp,
 CMS.AWSUtils.create_url_builder = function(url_root) {
     return function() {
         var url = url_root;
-        for (let component of arguments) {
+        for (var component in arguments) {
             if (url.substr(-1) != "/") {
                 url += "/";
             }
@@ -311,6 +312,121 @@ CMS.AWSUtils.prototype.close_notification = function(item) {
 };
 
 
+/**
+ * Provides table row comparator for specified column and order.
+ */
+function get_table_row_comparator(column_idx, numeric, ascending) {
+    return function(a, b) {
+        var valA = $(a).children("td").eq(column_idx).text();
+        var valB = $(b).children("td").eq(column_idx).text();
+        var result = numeric
+            ? Number(valA) - Number(valB)
+            : valA.localeCompare(valB);
+        return ascending ? -result : result;
+    }
+}
+
+
+/**
+ * Sorts specified table by specified column in specified order.
+ */
+CMS.AWSUtils.sort_table = function(table, column_idx, ascending) {
+    var initial_column_idx = table.data("initial_sort_column_idx");
+    var ranks_column = table.data("ranks_column");
+    column_idx += ranks_column ? 1 : 0;
+    var table_rows = table
+        .children("tbody")
+        .children("tr");
+    var column_header = table
+        .children("thead")
+        .children("tr")
+        .children("th")
+        .eq(column_idx);
+    var settings = (column_header.attr("data-sort-settings") || "").split(" ");
+
+    var numeric = settings.indexOf("numeric") >= 0;
+
+    // If specified, flip column's natural order, e.g. due to meaning of values.
+    if (settings.indexOf("reversed") >= 0) {
+        ascending = !ascending;
+    }
+
+    // Normalize column index, converting negative to positive from the end.
+    column_idx = column_header.index();
+
+    // Reassign arrows to headers
+    table.find(".column-sort").html("&varr;");
+    column_header.find(".column-sort").html(ascending ? "&uarr;" : "&darr;");
+
+    // Do the sorting, by initial column and then by selected column.
+    table_rows
+        .sort(get_table_row_comparator(initial_column_idx, numeric, ascending))
+        .sort(get_table_row_comparator(column_idx, numeric, ascending))
+        .each(function(idx, row) {
+            table.children("tbody").append(row)
+        });
+
+    if (ranks_column) {
+        table_rows.each(function(idx, row) {
+            $(row).children("td").first().text(idx + 1)
+        });
+    }
+};
+
+
+/**
+ * Makes table sortable, adding ranks column and sorting buttons in header.
+ */
+CMS.AWSUtils.init_table_sort = function(table, ranks_column,
+                                        initial_column_idx,
+                                        initial_ascending) {
+    table.addClass("sortable");
+    var table_column_headers = table
+        .children("thead")
+        .children("tr");
+    var table_rows = table
+        .children("tbody")
+        .children("tr");
+
+    // Normalize column index, converting negative to positive from the end.
+    initial_column_idx = table_column_headers
+        .children("th")
+        .eq(initial_column_idx)
+        .index();
+
+    table.data("ranks_column", ranks_column);
+    table.data("initial_sort_column_idx", initial_column_idx);
+
+    // Declaring sort settings.
+    var previous_column_idx = initial_column_idx;
+    var ascending = initial_ascending;
+
+    // Add sorting indicators to column headers
+    table_column_headers
+        .children("th")
+        .each(function(column_idx, header) {
+            $("<a/>", {
+                href: "#",
+                class: "column-sort",
+                click: function() {
+                    ascending = !ascending && previous_column_idx == column_idx;
+                    previous_column_idx = column_idx;
+                    CMS.AWSUtils.sort_table(table, column_idx, ascending);
+                }
+            }).appendTo(header);
+        });
+
+    // Add ranks column
+    if (ranks_column) {
+        table_column_headers.prepend("<th>#</th>");
+        table_rows.prepend("<td></td>");
+    }
+
+    // Do initial sorting
+    CMS.AWSUtils.sort_table(table, initial_column_idx, initial_ascending);
+};
+
+
 /**
  * Return a string representation of the number with two digits.
  *

cms/server/admin/templates/ranking.html

@@ -5,7 +5,7 @@
   <h1>Ranking</h1>
 </div>
 Download as <a href="{{ url("contest", contest.id, "ranking", "csv") }}">csv</a>, <a href="{{ url("contest", contest.id, "ranking", "txt") }}">text</a>.
-<table class="bordered">
+<table id="ranking-table" class="bordered">
   <thead>
     <tr>
       <th>Username</th>
@@ -14,17 +14,16 @@ <h1>Ranking</h1>
       <th>Team</th>
       {% endif %}
       {% for task in contest.tasks %}
-      <th><a href="{{ url("task", task.id) }}">{{ task.name }}</a></th>
+      <th data-sort-settings="numeric reversed"><a href="{{ url("task", task.id) }}">{{ task.name }}</a></th>
       {% endfor %}
-      <th>Global</th>
+      <th data-sort-settings="numeric reversed">Global</th>
     </tr>
   </thead>
   <tbody>
-    {# TODO: Consider client-side sorting #}
     {# This template assumes participations have two fields in addition to those in the DB: #}
     {# - scores: a list of pairs (score, is score partial) for each task; #}
     {# - total_score: the total score for the contest. #}
-    {% for p in contest.participations|sort(attribute="total_score")|reverse %}
+    {% for p in contest.participations %}
       {% if not p.hidden %}
     <tr>
       <td><a href="{{ url("contest", contest.id, "user", p.user.id, "edit") }}">{{ p.user.username }}</a></td>
@@ -37,13 +36,18 @@ <h1>Ranking</h1>
         {% endif %}
       {% endif %}
       {% for t_score, t_partial in p.scores %}
-      <td>{{ t_score }}{% if t_partial %}*{% endif %}</td>
+      <td {%- if t_partial %} class="partial" {%- endif -%}>{{ t_score }}</td>
       {% endfor %}
       {% set total_score, partial = p.total_score %}
-      <td>{{ total_score }}{% if partial %}*{% endif %}</td>
+      <td {%- if partial %} class="partial" {%- endif -%}>{{ total_score }}</td>
     </tr>
       {% endif %}
     {% endfor %}
   </tbody>
 </table>
+<script>
+  $(document).ready(function() {
+    CMS.AWSUtils.init_table_sort($("#ranking-table"), true, -1);
+  })
+</script>
 {% endblock core %}