Skip to content

Commit

Permalink
Allow to ❤️ on mobile scoreboard
Browse files Browse the repository at this point in the history 
Fixes #2762.

(cherry picked from commit a53c481)
  • Loading branch information
@nickygerritsen
nickygerritsen committed Nov 22, 2024
1 parent 7ee7fa0 commit 121276b
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 69 deletions.
164 changes: 111 additions & 53 deletions webapp/public/js/domjudge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,13 +207,29 @@ function getSelectedTeams()
return JSON.parse(cookieVal);
}

function getScoreboard()
function getScoreboards(mobile)
{
var scoreboard = document.getElementsByClassName("scoreboard");
if (scoreboard === null || scoreboard[0] === null || scoreboard[0] === undefined) {
const scoreboards = document.getElementsByClassName("scoreboard");
if (scoreboards === null || scoreboards[0] === null || scoreboards[0] === undefined) {
return null;
}
return scoreboard[0].rows;
let scoreboardRows = {};
const mobileScoreboardClass = 'mobile-scoreboard';
const desktopScoreboardClass = 'desktop-scoreboard';
for (let i = 0; i < scoreboards.length; i++) {
if (scoreboards[i].classList.contains(mobileScoreboardClass)) {
scoreboardRows.mobile = scoreboards[i].rows;
} else if (scoreboards[i].classList.contains(desktopScoreboardClass)) {
scoreboardRows.desktop = scoreboards[i].rows;
}
}
if (mobile === undefined) {
return scoreboardRows;
} else if (mobile) {
return scoreboardRows.mobile;
} else {
return scoreboardRows.desktop;
}
}

function getRank(row)
Expand All @@ -226,7 +242,7 @@ function getHeartCol(row) {
var td = null;
// search for td before the team name
for (var i = 1; i < 4; i++) {
if (tds[i].className == "scoretn") {
if (tds[i].classList.contains("scoretn")) {
td = tds[i - 1];
break;
}
Expand All @@ -249,16 +265,28 @@ function getTeamname(row)
return row.getAttribute("data-team-id");
}

function toggle(id, show)
function toggle(id, show, mobile)
{
var scoreboard = getScoreboard();
var scoreboard = getScoreboards(mobile);
if (scoreboard === null) return;

// Filter out all rows that do not have a data-team-id attribute or have
// the class `scoreheader`.
// The mobile scoreboard has them, and we need to ignore them.
scoreboard = Array.from(scoreboard)
.filter(
row => row.getAttribute("data-team-id")
|| row.classList.contains("scoreheader")
);

var favTeams = getSelectedTeams();
// count visible favourite teams (if filtered)
var visCnt = 0;
for (var i = 0; i < favTeams.length; i++) {
for (var j = 0; j < scoreboard.length; j++) {
if (!scoreboard[j].getAttribute("data-team-id")) {
continue;
}
var scoreTeamname = getTeamname(scoreboard[j]);
if (scoreTeamname === null) {
continue;
Expand Down Expand Up @@ -302,69 +330,99 @@ function toggle(id, show)
});
}

function addHeart(rank, row, id, isFav)
function addHeart(rank, row, id, isFav, mobile)
{
var heartCol = getHeartCol(row);
var iconClass = isFav ? "fas fa-heart" : "far fa-heart";
return heartCol.innerHTML + "<span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + ")\"></span>";
return heartCol.innerHTML + "<span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + "," + mobile + ")\"></span>";
}

function initFavouriteTeams()
{
var scoreboard = getScoreboard();
if (scoreboard === null) {
const scoreboards = getScoreboards();
if (scoreboards === null) {
return;
}

var favTeams = getSelectedTeams();
var toAdd = new Array();
var cntFound = 0;
var lastRank = 0;
for (var j = 0; j < scoreboard.length; j++) {
var found = false;
var teamname = getTeamname(scoreboard[j]);
if (teamname === null) {
continue;
}
var firstCol = getRank(scoreboard[j]);
var heartCol = getHeartCol(scoreboard[j]);
var rank = firstCol.innerHTML;
for (var i = 0; i < favTeams.length; i++) {
if (teamname === favTeams[i]) {
found = true;
heartCol.innerHTML = addHeart(rank, scoreboard[j], j, found);
toAdd[cntFound] = scoreboard[j].cloneNode(true);
if (rank.trim().length === 0) {
// make rank explicit in case of tie
getRank(toAdd[cntFound]).innerHTML += lastRank;
Object.keys(scoreboards).forEach(function(key) {
var toAdd = new Array();
var toAddMobile = new Array();
var cntFound = 0;
var lastRank = 0;
const scoreboard = scoreboards[key];
const mobile = key === 'mobile';
let teamIndex = 1;
for (var j = 0; j < scoreboard.length; j++) {
var found = false;
var teamname = getTeamname(scoreboard[j]);
if (teamname === null) {
continue;
}
var firstCol = getRank(scoreboard[j]);
var heartCol = getHeartCol(scoreboard[j]);
var rank = firstCol.innerHTML;
for (var i = 0; i < favTeams.length; i++) {
if (teamname === favTeams[i]) {
found = true;
heartCol.innerHTML = addHeart(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) {
// make rank explicit in case of tie
getRank(toAdd[cntFound]).innerHTML += lastRank;
}
scoreboard[j].style.background = "lightyellow";
const scoretn = scoreboard[j].querySelector('.scoretn');
if (scoretn && scoretn.classList.contains('cl_FFFFFF')) {
scoretn.classList.remove('cl_FFFFFF');
scoretn.classList.add('cl_FFFFE0');
}
if (mobile) {
scoreboard[j + 1].style.background = "lightyellow";
}
cntFound++;
break;
}
scoreboard[j].style.background = "lightyellow";
cntFound++;
break;
}
if (!found) {
heartCol.innerHTML = addHeart(rank, scoreboard[j], teamIndex, found, mobile);
}
if (rank !== "") {
lastRank = rank;
}

teamIndex++;
}
if (!found) {
heartCol.innerHTML = addHeart(rank, scoreboard[j], j, found);
}
if (rank !== "") {
lastRank = rank;
}
}

// copy favourite teams to the top of the scoreboard
for (var i = 0; i < cntFound; i++) {
var copy = toAdd[i];
var style = "";
if (i === 0) {
style += "border-top: 2px solid black;";
let addCounter = 1;
const copyRow = function (i, copy, addTopBorder, addBottomBorder, noMiddleBorder) {
let style = "";
if (noMiddleBorder) {
style += "border-bottom-width: 0;";
}
if (addTopBorder && i === 0) {
style += "border-top: 2px solid black;";
}
if (addBottomBorder && i === cntFound - 1) {
style += "border-bottom: thick solid black;";
}
copy.setAttribute("style", style);
const tbody = scoreboard[1].parentNode;
tbody.insertBefore(copy, scoreboard[addCounter]);
addCounter++;
}
if (i === cntFound - 1) {
style += "border-bottom: thick solid black;";

// copy favourite teams to the top of the scoreboard
for (let i = 0; i < cntFound; i++) {
copyRow(i, toAdd[i], true, !mobile, mobile);
if (mobile) {
copyRow(i, toAddMobile[i], false, true, false);
}
}
copy.setAttribute("style", style);
var tbody = scoreboard[1].parentNode;
tbody.insertBefore(copy, scoreboard[i + 1]);
}
});
}

// This function is a specific addition for using DOMjudge within a
Expand Down
30 changes: 14 additions & 16 deletions webapp/templates/partials/scoreboard_table.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</style>
{% endif %}
<table class="d-none d-md-table scoreboard center {% if jury %}scoreboard_jury{% endif %}">
<table class="d-none d-md-table scoreboard desktop-scoreboard center {% if jury %}scoreboard_jury{% endif %}">
{% set teamColspan = 2 %}
{% if showAffiliationLogos %}
Expand All @@ -38,22 +38,22 @@
{# output table column groups (for the styles) #}
<colgroup>
{% if enable_ranking %}
<col id="scorerankmobile"/>
<col id="scorerank"/>
{% endif %}
{% if showFlags %}
<col id="scoreflagsmobile"/>
<col id="scoreflags"/>
{% else %}
<col/>
{% endif %}
{% if showAffiliationLogos %}
<col id="scorelogosmobile"/>
<col id="scorelogos"/>
{% endif %}
<col id="scoreteamnamemobile"/>
<col id="scoreteamname"/>
</colgroup>
{% if enable_ranking %}
<colgroup>
<col id="scoresolvmobile"/>
<col id="scoretotalmobile"/>
<col id="scoresolv"/>
<col id="scoretotal"/>
</colgroup>
{% endif %}
<colgroup>
Expand Down Expand Up @@ -106,7 +106,7 @@
<tbody>
{% set previousSortOrder = -1 %}
{% set previousTeam = null %}
{% set backgroundColors = {"#FFFFFF": 1} %}
{% set backgroundColors = {"#FFFFFF": 1, '#FFFFE0': 1} %}
{% set medalCount = 0 %}
{% for score in scores %}
{% set classes = [] %}
Expand Down Expand Up @@ -315,25 +315,25 @@
</tbody>
</table>
<table class="d-md-none scoreboard center {% if jury %}scoreboard_jury{% endif %}">
<table class="d-md-none scoreboard mobile-scoreboard center {% if jury %}scoreboard_jury{% endif %}">
{# output table column groups (for the styles) #}
<colgroup>
{% if enable_ranking %}
<col id="scorerank"/>
<col id="scorerankmobile"/>
{% endif %}
{% if showFlags %}
<col id="scoreflags"/>
<col id="scoreflagsmobile"/>
{% else %}
<col/>
{% endif %}
{% if showAffiliationLogos %}
<col id="scorelogos"/>
<col id="scorelogosmobile"/>
{% endif %}
<col id="scoreteamname"/>
<col id="scoreteamnamemobile"/>
</colgroup>
{% if enable_ranking %}
<colgroup>
<col id="scoresolv"/>
<col id="scoresolvmobile"/>
</colgroup>
{% endif %}
<thead>
Expand All @@ -356,7 +356,6 @@
<tbody>
{% set previousSortOrder = -1 %}
{% set previousTeam = null %}
{% set backgroundColors = {"#FFFFFF": 1} %}
{% set medalCount = 0 %}
{% for score in scores %}
{% set classes = [] %}
Expand Down Expand Up @@ -431,7 +430,6 @@
{% set colorClass = "_FFFFFF" %}
{% else %}
{% set colorClass = color | replace({"#": "_"}) %}
{% set backgroundColors = backgroundColors | merge({(color): 1}) %}
{% endif %}
<td class="scoretn cl{{ colorClass }}" title="{{ score.team.effectiveName }}">
{% set link = null %}
Expand Down

0 comments on commit 121276b

Please sign in to comment.