From df30be6f2a81735199cf4a75db7c3409ff8d58b1 Mon Sep 17 00:00:00 2001
From: Patrick Fairbank <patfair@gmail.com>
Date: Wed, 29 May 2024 19:49:33 -0700
Subject: [PATCH] Add scoring panel commit statuses to referee panel (closes
 #174).

---
 static/css/referee_panel.css | 11 +++++++++++
 static/js/referee_panel.js   |  4 ++++
 templates/referee_panel.html |  2 ++
 3 files changed, 17 insertions(+)

diff --git a/static/css/referee_panel.css b/static/css/referee_panel.css
index 1eefd8d5..fab66242 100644
--- a/static/css/referee_panel.css
+++ b/static/css/referee_panel.css
@@ -74,6 +74,17 @@ h3 {
 .team-card[data-old-yellow-card="true"] {
   border: 0.3vw solid #ff0;
 }
+.scoring-status {
+  margin-top: 1vw;
+  padding: 0.5vw 1vw;
+  border-radius: 0.5vw;
+  background-color: #e66;
+  font-size: 1.5vw;
+  color: #000;
+}
+.scoring-status[data-ready=true] {
+  background-color: #0c6;
+}
 #fouls {
   display: flex;
   flex-direction: column;
diff --git a/static/js/referee_panel.js b/static/js/referee_panel.js
index 9bea3c1d..8d0ca097 100644
--- a/static/js/referee_panel.js
+++ b/static/js/referee_panel.js
@@ -96,6 +96,10 @@ const handleScoringStatus = function(data) {
   if (data.RefereeScoreReady) {
     $("#commitButton").attr("data-enabled", false);
   }
+  $("#redScoreStatus").text("Red Scoring " + data.NumRedScoringPanelsReady + "/" + data.NumRedScoringPanels);
+  $("#redScoreStatus").attr("data-ready", data.RedScoreReady);
+  $("#blueScoreStatus").text("Blue Scoring " + data.NumBlueScoringPanelsReady + "/" + data.NumBlueScoringPanels);
+  $("#blueScoreStatus").attr("data-ready", data.BlueScoreReady);
 }
 
 // Populates the red/yellow card button for a given team.
diff --git a/templates/referee_panel.html b/templates/referee_panel.html
index e5016db8..45ea7326 100644
--- a/templates/referee_panel.html
+++ b/templates/referee_panel.html
@@ -20,6 +20,8 @@ <h3>Red/Yellow Cards</h3>
         {{template "teamCard" dict "alliance" "blue" "position" $i}}
       {{end}}
     </div>
+    <div class="scoring-status" id="redScoreStatus"></div>
+    <div class="scoring-status" id="blueScoreStatus"></div>
   </div>
   <div id="fouls">
     <h3>Fouls</h3>