feat: Shared levels table (#1364)

* :c

* :c

* Merge branch 'master' into shared_levels_table

* Make custom levels data available on scoreboard page

* Add data to CSV file

* Hide moderation text from students

* Fix / Add to scoreboard CSV test

* Revert level management changes

* Fix indent

game/static/game/css/scoreboard.css

@@ -7,6 +7,9 @@
 #scoreboardTable_wrapper table,
 #scoreboardTable_wrapper th,
 #scoreboardTable_wrapper td,
+#sharedLevelsTable_wrapper table,
+#sharedLevelsTable_wrapper th,
+#sharedLevelsTable_wrapper td,
 #improvementTable_wrapper table,
 #improvementTable_wrapper th,
 #improvementTable_wrapper td {
@@ -31,31 +34,37 @@ table td.fixed-width {
   white-space: nowrap;
 }
 
-#scoreboardTable_wrapper td.scoreboard--started {
+#scoreboardTable_wrapper td.scoreboard--started,
+#sharedLevelsTable_wrapper td.scoreboard--started {
   background: #e0004d;
   color: white;
 }
 
 #scoreboardTable_wrapper td.scoreboard--completed,
+#sharedLevelsTable_wrapper td.scoreboard--completed,
 .scoreboard--completed {
   color: #eab502;
   font-size: 24px;
   vertical-align: middle;
 }
 
-#scoreboardTable_wrapper td.scoreboard--completed-secondary {
+#scoreboardTable_wrapper td.scoreboard--completed-secondary,
+#sharedLevelsTable_wrapper td.scoreboard--completed-secondary {
   color: #fff;
   font-size: 24px;
 }
 
-#scoreboardTable_wrapper td.scoreboard--medium-performer {
+#scoreboardTable_wrapper td.scoreboard--medium-performer,
+#sharedLevelsTable_wrapper td.scoreboard--medium-performer {
   background: #f6a500;
 }
 
-#scoreboardTable_wrapper td.scoreboard--top-performer {
+#scoreboardTable_wrapper td.scoreboard--top-performer,
+#sharedLevelsTable_wrapper td.scoreboard--top-performer {
   background: #b1ba1d;
 }
 
-#scoreboardTable_wrapper tr.current-student > td {
+#scoreboardTable_wrapper tr.current-student > td,
+#sharedLevelsTable_wrapper tr.current-student > td {
   background: #85ddff; /* $color-tertiary-50 */
 }

game/static/game/js/scoreboard.js

@@ -32,6 +32,7 @@ $(document).ready(function () {
   let improvementPresent = document.getElementById("improvementTable") !== null;
 
   if (scoreboardPresent) {
+    // Setup main scoreboard table
     let table = $("#scoreboardTable").DataTable({
       scrollY: false,
       scrollX: true,
@@ -58,10 +59,6 @@ $(document).ready(function () {
       rightColumns: 1
     });
 
-    $("#scoreboardSearch").on("keyup", function () {
-      table.search(this.value).draw();
-    });
-
     $("#scoreboardTable_next").append(" >");
     $(".next").removeClass("paginate_button");
 
@@ -72,8 +69,49 @@ $(document).ready(function () {
       $(".previous").removeClass("paginate_button");
     });
 
+    // Setup shared levels table
+    let sharedLevelsTable = $("#sharedLevelsTable").DataTable({
+      scrollY: false,
+      scrollX: true,
+      scrollCollapse: false,
+      paging: true,
+      deferRender: true,
+      language: {
+        emptyTable: "No data available in table",
+        loadingRecords: "Loading...",
+        processing: "Processing...",
+        search: "Search:",
+        zeroRecords: "No matching records found"
+      },
+      columnDefs: [
+        {
+          orderable: false,
+          targets: "no-sort"
+        }
+      ]
+    });
+
+    new $.fn.dataTable.FixedColumns(sharedLevelsTable, {
+      leftColumns: 2,
+    });
+
+    $("#sharedLevelsTable_next").append(" >");
+
+    sharedLevelsTable.on("draw", () => {
+      $("#sharedLevelsTable_next").append(" >");
+      $("#sharedLevelsTable_previous").prepend("< ");
+      $(".next").removeClass("paginate_button");
+      $(".previous").removeClass("paginate_button");
+    });
+
+    $("#scoreboardSearch").on("keyup", function () {
+      table.search(this.value).draw();
+      sharedLevelsTable.search(this.value).draw();
+    });
+
     $(window).on("load", function () {
       table.columns.adjust();
+      sharedLevelsTable.columns.adjust();
     });
   }
 

game/templates/game/scoreboard.html

@@ -166,7 +166,7 @@ <h4 class="text-center" id="scoreboardTitle">Scoreboard</h4>
                                 {% else %}
                                 <td class="text-center scoreboard--completed-secondary">
                                 {% endifnotequal %}
-                                    <div class="d-flex justify-content-center">
+                                    <div title="{{ level_score.score }}" class="d-flex justify-content-center">
                                         <span class="iconify" data-icon="mdi:star"></span>
                                     </div>
                                 </td>
@@ -201,6 +201,62 @@ <h4 class="text-center" id="scoreboardTitle">Scoreboard</h4>
     </div>
 </div>
 
+<div class="container">
+
+    <h5>Shared levels</h5>
+    {% if user|is_logged_in_as_teacher %}
+        <p>The shared levels table displays levels that have been shared and then played by others.
+            You can moderate which levels are shared on the <a href="{% url 'level_moderation' %}">moderation page</a>.</p>
+    {% endif %}
+
+    <div class="background tableWrapper" id="tableWrapper">
+        <div class="dataTables_info" role="status" aria-live="polite"></div>
+        <table id="sharedLevelsTable" class="display cell-border wide header-primary data-primary">
+            <thead>
+            <tr>
+                {% for shared_header in shared_headers %}
+                    <th class="fixed-width">{{ shared_header }}</th>
+                {% endfor %}
+                {% for shared_level_header in shared_level_headers %}
+                    <th class="no-sort text-center">{{ shared_level_header }}</th>
+                {% endfor %}
+            </tr>
+            </thead>
+            {% for student in shared_student_data %}
+                {% ifnotequal student.name user.first_name %}
+                <tr>
+                {% else %}
+                <tr class="current-student">
+                {% endifnotequal %}
+                    <td class="fixed-width">{{ student.class_field }}</td>
+                    <td class="fixed-width">{{ student.name }}</td>
+                    {% for level_id, level_score in student.level_scores.items %}
+                        {% if level_score.full_score %}
+                            {% ifnotequal student.name user.first_name %}
+                                <td class="text-center scoreboard--completed">
+                            {% else %}
+                                <td class="text-center scoreboard--completed-secondary">
+                            {% endifnotequal %}
+                                    <div title="{{ level_score.score }}" class="d-flex justify-content-center">
+                                        <span class="iconify" data-icon="mdi:star"></span>
+                                    </div>
+                                </td>
+                        {% elif level_score.is_low_attempt %}
+                            {% if user|is_logged_in_as_teacher %}
+                                <td class="text-center scoreboard--started">{{ level_score.score }}</td>
+                            {% else %}
+                                <td class="text-center">{{ level_score.score }}</td>
+                            {% endif %}
+                        {% else %}
+                            <td class="text-center">{{ level_score.score }}</td>
+                        {% endif %}
+                    {% endfor %}
+                </tr>
+            {% endfor %}
+        </table>
+    </div>
+</div>
+
 {% if user|is_logged_in_as_teacher %}
 <div class="container">
     <h5>Areas for improvement</h5>