fix team name and rank formatting within table, sort tables during read

trivia/static/script.js

@@ -13,7 +13,7 @@ let REFRESH_TIMEOUT;
 // Scroll table once.
 function ScrollOnce(autoscroll) {
     // If autoscroll has been disabled in between timer, this if statement will prevent it from executing.
-    if (AUTOSCROLL)
+    if (AUTOSCROLL || !autoscroll)
         $(".ui-row:first").appendTo(".js-standings")
 
     // Restart autoscroll as needed.
@@ -56,20 +56,23 @@ function ToggleAutorefresh() {
 
 function sortUsingNestedText(parent, childSelector, keySelector) {
     var items = parent.children(childSelector).sort(function (a, b) {
-        var vA = $(keySelector, a).text();
-        var vB = $(keySelector, b).text();
+        var vA = parseInt($(keySelector, a).text())
+        var vB = parseInt($(keySelector, b).text());
         return (vA < vB) ? 1 : (vA > vB) ? -1 : 0;
     });
     parent.append(items);
 }
 
 // Sorts all Teams, rearranging them by Rank
-function SortTeams(topTeam = 0) {
+function SortTeams(topTeam = 5) {
+    // Sort by total score
     sortUsingNestedText($(".js-standings"), '.ui-row', 'td.js-total-score')
 
-    while($('.js-standings').firstChild.data('row-index') !== topTeam) {
-        $(".ui-row:first").appendTo("tbody")
-    }
+    // Push
+    console.log(parseInt($('.js-standings').find('>:first-child').data('row-index')))
+    // while ( !== topTeam) {
+        // $(".ui-row:first").appendTo("tbody")
+    // }
 }
 
 // Client Initialization
@@ -78,7 +81,7 @@ $().ready(function () {
     $(".js-scroll-row").on("click", ToggleAutoscroll);
     $(".js-refresh").on("click", ToggleAutorefresh);
 
-    ToggleAutoscroll()
-    ToggleAutorefresh()
+    ToggleAutoscroll();
+    ToggleAutorefresh();
     SortTeams();
 })

trivia/static/style.css

@@ -9,17 +9,16 @@ body { font-family: Calibri, Arial, sans-serif; margin: 0; padding: 0; position:
 .score-team-name:before { content: " "; visibility: hidden; }
 
 /* Projector View */
-.ui-content { font-size: 300%; padding: 0.25em 0; }
-tr[data-row-index="0"] td { border-top: 0.25em solid #000; }
 
+.ui-content { font-size: 300%; padding: 0.25em 0; }
 .ui-header { background-color: #b51329; border-bottom: 2px solid #27233a; color: #fff; padding: 0.5em 1em; }
 /*.ui-content { padding: 0.5em 1em; }*/
 .ui-footer { }
-.ui-silent-row {color: #7c7c7c
-}
+.ui-silent-row { color: #7c7c7c }
 
 .center { text-align: center; }
 .pointer { cursor: pointer; }
+.left { text-align: left; }
 .right { text-align: right; }
 .rank-pad { padding-left: 0.3em; padding-right: 0.2em;}
 .small-no-wrap { white-space: nowrap; width: 1%; }
@@ -39,3 +38,5 @@ tr[data-row-index="0"] td { border-top: 0.25em solid #000; }
 .table-striped > tbody > tr.has-warning:nth-child(odd) { background-color: #faf2cc; border-color: #f8e5be; }
 .table-hover > tbody > tr:hover { background-color: #e0e0e0; } /* hover needs to come after striped so that striped rows have hover */
 .table-hover > tbody > tr.has-warning:hover, .table-hover > tbody > tr.has-warning-hover:hover { background-color: #f8edb5; border-color: #f6e79d; }
+
+tr[data-row-index="0"] td { border-top: 0.25em solid #000; }

trivia/templates/index.html

@@ -37,7 +37,7 @@
                     <tr>
                         <th class="small-no-wrap rank-pad">Rank</th>
                         <th class="small-no-wrap">ID</th>
-                        <th>Team Name</th>
+                        <th class="left">Team Name</th>
                         {% for i in range(scoreCount) %}
                             <th class="small-no-wrap">{{ i + 1 }}</th>
                         {% endfor %}
@@ -45,8 +45,8 @@
                 </thead>
                 <tbody class="js-standings">
                     {% for team in teams %}
-                        <tr class="ui-row" data-row-index="{{ team.id }}">
-                            <td>?</td>
+                        <tr class="ui-row" data-row-index="{{ loop.index - 1}}">
+                            <td class="js-rank">?</td>
                             <td>{{ team.id }}</td>
                             {% if team.name | length > 0 %}
                                 <td>{{ team.name }}</td>
@@ -55,7 +55,7 @@
                             {% endif %}
                             <td class="js-total-score">{{ team.scores | sum }}</td>
                             {% for score in team.scores %}
-                                <td>{{ score }}</td>
+                                <td class="small-no-wrap right">{{ score }}</td>
                             {% endfor %}
                         </tr>
                     {% endfor %}

trivia/utils.py

@@ -66,6 +66,7 @@ def refreshScores() -> None:
                         scores=team['scores']
                     ) for team in temp
                 ]
+                temp.sort(key=lambda team : sum(team.scores), reverse=True)
                 current_app.logger.debug(f'Successfully loaded ({len(temp)} teams).')
 
                 global teams