From e54d3c0f2456a249f403d80a6c8332635fca7fdb Mon Sep 17 00:00:00 2001
From: Corey Applegate <cpapplefamily@gmail.com>
Date: Sat, 30 Nov 2024 08:26:57 -0600
Subject: [PATCH] Flips the aliance side for the FTA monitor

---
 static/js/field_monitor_display.js   | 28 +++++++++++++++++++++++++---
 templates/field_monitor_display.html |  3 ++-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/static/js/field_monitor_display.js b/static/js/field_monitor_display.js
index 2a66d3d5..4a022c36 100644
--- a/static/js/field_monitor_display.js
+++ b/static/js/field_monitor_display.js
@@ -227,10 +227,27 @@ 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 {
@@ -238,6 +255,11 @@ $(function() {
     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
index 621a8530..4fffbd32 100644
--- 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>