Flips the aliance side for the FTA monitor

cpapplefamily · Nov 30, 2024 · e54d3c0 · e54d3c0
1 parent 30e8108
commit e54d3c0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/static/js/field_monitor_display.js b/static/js/field_monitor_display.js
@@ -227,17 +227,39 @@ var editFtaNotes = function(element) {
 };
 
 $(function() {
-  // Read the configuration for this display from the URL query string.
   var urlParams = new URLSearchParams(window.location.search);
-  var reversed = urlParams.get("reversed");
-  if (reversed === "true") {
+  var reversed = urlParams.get("reversed") === "true"; // Initialize reversed variable
+  updateSides(reversed);
+
+  // Add event listener to Flip button
+  $("#flipButton").click(function() {
+    reversed = !reversed; // Toggle reversed state
+    updateSides(reversed);
+
+    // Update the data-reversed attribute for visual updates
+    $(".reversible-left").attr("data-reversed", reversed);
+    $(".reversible-right").attr("data-reversed", reversed);
+
+    // Optional: Persist state to the URL (if needed)
+    const newUrl = new URL(window.location);
+    newUrl.searchParams.set("reversed", reversed);
+    window.history.replaceState({}, "", newUrl);
+  });
+
+function updateSides(isReversed) {
+  if (isReversed) {
     redSide = "right";
     blueSide = "left";
   } else {
     redSide = "left";
     blueSide = "right";
   }
 
+  // Update the DOM to reflect the new sides
+  $(".reversible-left").attr("data-reversed", isReversed);
+  $(".reversible-right").attr("data-reversed", isReversed);
+}
+
   //Read if display to be used in a Driver Station, ignore FTA flag if so.
   var driverStation = urlParams.get("ds");
   if (driverStation === "true") {

diff --git a/templates/field_monitor_display.html b/templates/field_monitor_display.html
@@ -74,6 +74,7 @@
   <script src="/static/js/lib/bootstrap.bundle.min.js"></script>
   <script src="/static/js/match_timing.js"></script>
   <script src="/static/js/field_monitor_display.js"></script>
+
   {{range $sound := .MatchSounds}}
   <audio id="sound-{{$sound.Name}}" src="/static/audio/{{$sound.Name}}.{{$sound.FileExtension}}" preload="auto">
   </audio>
@@ -82,7 +83,7 @@
 
 {{define "row"}}
 <div class="position-row center ds-dependent">
-  <div class="left-position center reversible-left">{{.leftPosition}}</div>
+  <div class="left-position center reversible-left" id="flipButton" role="button">{{.leftPosition}}</div>
   {{template "team" dict "side" "left" "position" .leftPosition}}
   {{template "team" dict "side" "right" "position" .rightPosition}}
   <div class="right-position center ds-dependent reversible-right">{{.rightPosition}}</div>