Prevent display configuration changes from overwriting in-progress edits.

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;
+}

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) {

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"