Add FTA variant of field monitor with ability to save notes (closes #58).

static/css/field_monitor_display.css

@@ -44,25 +44,29 @@ body {
   width: 42%;
   height: 100%;
   background-color: #333;
-  font-size: 13vw;
   display: flex;
   flex-direction: column;
 }
 .team-id {
   width: 100%;
   height: 80%;
+  font-size: 13vw;
 }
-.team-id[data-status=no-link] {
+.team-id[data-fta="true"] {
+  height: 40%;
+  font-size: 6vw;
+}
+.team-id[data-status=no-link], .team-notes[data-status=no-link] {
   background-color: #963;
 }
-.team-id[data-status=ds-linked] {
+.team-id[data-status=ds-linked], .team-notes[data-status=ds-linked]  {
   background-color: #ff0;
   color: #333;
 }
-.team-id[data-status=robot-linked] {
+.team-id[data-status=robot-linked], .team-notes[data-status=robot-linked]  {
   background-color: #0a3;
 }
-.team-id[data-status=radio-linked] {
+.team-id[data-status=radio-linked], .team-notes[data-status=radio-linked]  {
   background-color: #ff00ff;
 }
 .team-box-row {
@@ -85,3 +89,24 @@ body {
 .team-box i {
   margin-right: 0.5vw;
 }
+.team-notes[data-fta="true"] {
+  height: 40%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5vw;
+  font-size: 1vw;
+}
+.team-notes[data-fta="false"] {
+  display: none;
+}
+.team-notes div {
+  width: 96%;
+  height: 96%;
+  white-space: pre;
+}
+textarea {
+  width: 96%;
+  height: 96%;
+  background-color: #ccc;
+  color: #000;
+}

static/js/field_monitor_display.js

@@ -19,6 +19,8 @@ var handleArenaStatus = function(data) {
       teamElementPrefix = "#" + blueSide + "Team" + station[1];
     }
     var teamIdElement = $(teamElementPrefix + "Id");
+    var teamNotesElement = $(teamElementPrefix + "Notes");
+    var teamNotesTextElement = $(teamElementPrefix + "Notes div");
     var teamEthernetElement = $(teamElementPrefix + "Ethernet");
     var teamDsElement = $(teamElementPrefix + "Ds");
     var teamRadioElement = $(teamElementPrefix + "Radio");
@@ -26,6 +28,8 @@ var handleArenaStatus = function(data) {
     var teamRobotElement = $(teamElementPrefix + "Robot");
     var teamBypassElement = $(teamElementPrefix + "Bypass");
 
+    teamNotesTextElement.attr("data-station", station);
+
     if (stationStatus.Team) {
       // Set the team number and status.
       teamIdElement.text(stationStatus.Team.Id);
@@ -42,10 +46,13 @@ var handleArenaStatus = function(data) {
         }
       }
       teamIdElement.attr("data-status", status);
+      teamNotesTextElement.text(stationStatus.Team.FtaNotes);
+      teamNotesElement.attr("data-status", status);
     } else {
       // No team is present in this position for this match; blank out the status.
       teamIdElement.text("");
-      teamIdElement.attr("data-status", "");
+      teamNotesTextElement.text("");
+      teamNotesElement.attr("data-status", "");
     }
 
     // Format the Ethernet status box.
@@ -119,6 +126,19 @@ var handleEventStatus = function(data) {
   $("#earlyLateMessage").text(data.EarlyLateMessage);
 };
 
+// Makes the team notes section editable and handles saving edits to the server.
+var editFtaNotes = function(element) {
+  var teamNotesElement = $(element);
+  var textArea = $("<textarea />");
+  textArea.val(teamNotesElement.text());
+  teamNotesElement.replaceWith(textArea);
+  textArea.focus();
+  textArea.blur(function() {
+    textArea.replaceWith(teamNotesElement);
+    websocket.send("updateTeamNotes", { station: teamNotesElement.attr("data-station"), notes: textArea.val()});
+  });
+};
+
 $(function() {
   // Read the configuration for this display from the URL query string.
   var urlParams = new URLSearchParams(window.location.search);
@@ -132,6 +152,7 @@ $(function() {
   }
   $(".reversible-left").attr("data-reversed", reversed);
   $(".reversible-right").attr("data-reversed", reversed);
+  $(".fta-dependent").attr("data-fta", urlParams.get("fta"));
 
   // Set up the websocket back to the server.
   websocket = new CheesyWebsocket("/displays/field_monitor/websocket", {