Fix hearts on mobile

Author: nickygerritsen

webapp/public/js/domjudge.js

@@ -301,27 +301,20 @@ function getScoreboards(mobile)
 
 function getRank(row)
 {
-    return row.getElementsByTagName("td")[0];
+    return row.querySelector('.rank');
 }
 
 function getHeartCol(row) {
-    var tds = row.getElementsByTagName("td");
-    var td = null;
-    // search for td before the team name
-    for (var i = 1; i < 4; i++) {
-        if (tds[i].classList.contains("scoretn")) {
-            td = tds[i - 1];
+    const tds = row.getElementsByTagName("td");
+    let td = null;
+    // search for td to store the hearts
+    for (let i = 1; i < 5; i++) {
+        if (tds[i] && tds[i].classList.contains("heart")) {
+            td = tds[i];
             break;
         }
     }
-    if (td === null) {
-        td = tds[1];
-    }
-    if (td !== null) {
-        return td;
-    }
-
-    return null;
+    return td;
 }
 
 function getTeamname(row)
@@ -394,10 +387,10 @@ function toggle(id, show, mobile)
     });
 }
 
-function getHeartTd(rank, row, id, isFav, mobile)
+function getHeart(rank, row, id, isFav, mobile)
 {
     var iconClass = isFav ? "fas fa-heart" : "far fa-heart";
-    return "<td class=\"scoreaf heart\"><span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + "," + mobile + ")\"></span></td>";
+    return "<span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + "," + mobile + ")\"></span>";
 }
 
 function initFavouriteTeams()
@@ -422,22 +415,32 @@ function initFavouriteTeams()
             if (teamname === null) {
                 continue;
             }
-            var firstCol = getRank(scoreboard[j]);
+            let rankElement;
+            if (mobile) {
+                rankElement = getRank(scoreboard[j + 1]);
+            } else {
+                rankElement = getRank(scoreboard[j]);
+            }
             var heartCol = getHeartCol(scoreboard[j]);
-            var rank = firstCol.innerHTML;
+            if (!heartCol) {
+                continue;
+            }
+            var rank = rankElement.innerHTML.trim();
             for (var i = 0; i < favTeams.length; i++) {
                 if (teamname === favTeams[i]) {
                     found = true;
-                    let heartTd = getHeartTd(rank, scoreboard[j], teamIndex, found, mobile);
-                    // Insert td after heartCol
-                    heartCol.insertAdjacentHTML('afterend', heartTd);
+                    heartCol.innerHTML = getHeart(rank, scoreboard[j], teamIndex, found, mobile);
                     toAdd[cntFound] = scoreboard[j].cloneNode(true);
                     if (mobile) {
                         toAddMobile[cntFound] = scoreboard[j + 1].cloneNode(true);
                     }
-                    if (rank.trim().length === 0) {
+                    if (rank.length === 0) {
                         // make rank explicit in case of tie
-                        getRank(toAdd[cntFound]).innerHTML += lastRank;
+                        if (mobile) {
+                            getRank(toAddMobile[cntFound]).innerHTML += lastRank;
+                        } else {
+                            getRank(toAdd[cntFound]).innerHTML += lastRank;
+                        }
                     }
                     scoreboard[j].style.background = "lightyellow";
                     const scoretn = scoreboard[j].querySelector('.scoretn');
@@ -453,8 +456,7 @@ function initFavouriteTeams()
                 }
             }
             if (!found) {
-                let heartTd = getHeartTd(rank, scoreboard[j], teamIndex, found, mobile);
-                heartCol.insertAdjacentHTML('afterend', heartTd);
+                heartCol.innerHTML = getHeart(rank, scoreboard[j], teamIndex, found, mobile);
             }
             if (rank !== "") {
                 lastRank = rank;

webapp/templates/partials/scoreboard_table.html.twig

@@ -51,12 +51,12 @@
         {% else %}
             <col/>
         {% endif %}
-        {% if public %}
-            <col id="scorehearts"/>
-        {% endif %}
         {% if showAffiliationLogos %}
             <col id="scorelogos"/>
         {% endif %}
+        {% if public %}
+            <col id="scorehearts"/>
+        {% endif %}
         <col id="scoreteamname"/>
     </colgroup>
     {% if enable_ranking %}
@@ -196,6 +196,9 @@
                     {% endif %}
                 </td>
             {% endif %}
+            {% if public %}
+                <td class="scoreaf heart"></td>
+            {% endif %}
             {% if color is null %}
                 {% set color = "#FFFFFF" %}
                 {% set colorClass = "_FFFFFF" %}
@@ -345,6 +348,9 @@
         {% if showAffiliationLogos %}
             <col id="scorelogosmobile"/>
         {% endif %}
+        {% if public %}
+            <col id="scoreheartmobile"/>
+        {% endif %}
         <col id="scoreteamnamemobile"/>
     </colgroup>
     {% if enable_ranking %}
@@ -358,6 +364,9 @@
     {% if showAffiliationLogos %}
         {% set teamColspan = teamColspan + 1 %}
     {% endif %}
+    {% if public %}
+        {% set teamColspan = teamColspan + 1 %}
+    {% endif %}
 
     <tr class="scoreheader" data-static="{{ static }}" style="font-size: 75%;">
         {% if enable_ranking %}
@@ -436,6 +445,9 @@
                 {% endif %}
             </td>
         {% endif %}
+        {% if public %}
+            <td class="scoreaf heart"></td>
+        {% endif %}
         {% if color is null %}
             {% set color = "#FFFFFF" %}
             {% set colorClass = "_FFFFFF" %}
@@ -489,7 +501,7 @@
         <tr style="height: 32px;">
             <td>
                 {# Only print rank when score is different from the previous team #}
-                <span class="d-block me-2">
+                <span class="d-block me-2 rank">
                     {% if not displayRank %}
                         ?
                     {% elseif previousTeam is null or scoreboard.scores[previousTeam.teamid].rank != score.rank %}
@@ -502,7 +514,10 @@
             {% if showAffiliationLogos %}
                 {% set problemSpan = 3 %}
             {% else %}
-            {% set problemSpan = 2 %}
+                {% set problemSpan = 2 %}
+            {% endif %}
+            {% if public %}
+                {% set problemSpan = problemSpan + 1 %}
             {% endif %}
             <td colspan="{{ problemSpan }}">
                 {% for problem in problems %}