From 6cef7112ae3d0f75ab59e83784e97adf02e89dd3 Mon Sep 17 00:00:00 2001
From: Patrick Fairbank <patfair@gmail.com>
Date: Sun, 29 Mar 2020 17:31:41 -0700
Subject: [PATCH] Prevent display configuration changes from overwriting
 in-progress edits.

---
 static/css/cheesy-arena.css   |  3 +++
 static/js/setup_displays.js   | 13 +++++++++++++
 templates/setup_displays.html | 10 +++++++---
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/static/css/cheesy-arena.css b/static/css/cheesy-arena.css
index 72e8c63..799fade 100644
--- a/static/css/cheesy-arena.css
+++ b/static/css/cheesy-arena.css
@@ -105,3 +105,6 @@ td[data-plc-value="true"] {
   width: 110px;
   text-align: left;
 }
+input[data-changed="true"], select[data-changed="true"] {
+  border: 2px solid #f00;
+}
diff --git a/static/js/setup_displays.js b/static/js/setup_displays.js
index 359dc2f..9d485f3 100644
--- a/static/js/setup_displays.js
+++ b/static/js/setup_displays.js
@@ -5,6 +5,7 @@
 
 var displayTemplate = Handlebars.compile($("#displayTemplate").html());
 var websocket;
+var fieldsChanged = false;
 
 var configureDisplay = function(displayId) {
   // Convert configuration string into map.
@@ -14,6 +15,7 @@ var configureDisplay = function(displayId) {
     configurationMap[keyValuePair[0]] = keyValuePair[1];
   });
 
+  fieldsChanged = false;
   websocket.send("configureDisplay", {
     Id: displayId,
     Nickname: $("#displayNickname" + displayId).val(),
@@ -34,8 +36,19 @@ var reloadAllDisplays = function() {
   websocket.send("reloadAllDisplays");
 };
 
+// Register that an input element has been modified by the user to avoid overwriting with a server update.
+var markChanged = function(element) {
+  fieldsChanged = true;
+  element.setAttribute("data-changed", true);
+};
+
 // Handles a websocket message to refresh the display list.
 var handleDisplayConfiguration = function(data) {
+  if (fieldsChanged) {
+    // Don't overwrite anything if the user has made unsaved changes.
+    return;
+  }
+
   $("#displayContainer").empty();
 
   $.each(data, function(displayId, display) {
diff --git a/templates/setup_displays.html b/templates/setup_displays.html
index 1004df8..4144349 100644
--- a/templates/setup_displays.html
+++ b/templates/setup_displays.html
@@ -34,16 +34,20 @@
     <td>{{"{{DisplayConfiguration.Id}}"}}</td>
     <td>{{"{{ConnectionCount}}"}}</td>
     <td>{{"{{IpAddress}}"}}</td>
-    <td><input type="text" id="displayNickname{{"{{DisplayConfiguration.Id}}"}}" size="30" /></td>
     <td>
-      <select id="displayType{{"{{DisplayConfiguration.Id}}"}}">
+      <input type="text" id="displayNickname{{"{{DisplayConfiguration.Id}}"}}" size="30"
+          oninput="markChanged(this);" />
+    </td>
+    <td>
+      <select id="displayType{{"{{DisplayConfiguration.Id}}"}}" onchange="markChanged(this);">
         {{range $type, $typeName := .DisplayTypeNames}}
           <option value="{{$type}}">{{$typeName}}</option>
         {{end}}
       </select>
     </td>
     <td>
-      <input type="text" id="displayConfiguration{{"{{DisplayConfiguration.Id}}"}}" size="50" />
+      <input type="text" id="displayConfiguration{{"{{DisplayConfiguration.Id}}"}}" size="50"
+          oninput="markChanged(this);" />
     </td>
     <td>
       <button type="button" class="btn btn-info btn-xs" title="Save Changes"