[v1.11.2] Add support for editing aliases, fix network settings not s…

…aving during setup (#815)

* Add (very sloppy) support for editing an alias that already exists

* Set value of selectize input to alias being edited when edit button is clicked

* Use `setBreakAfterConfig(true)` from WiFiManager to ensure that save settings callback is called even when connection is unsuccessful (or user is just change settings).

src/main.cpp

@@ -307,6 +307,10 @@ void wifiExtraSettingsChange() {
   settings.wifiStaticIPGateway = wifiStaticIPGateway->getValue();
   settings.wifiMode = Settings::wifiModeFromString(wifiMode->getValue());
   settings.save();
+
+  // Restart the device
+  delay(1000);
+  ESP.restart();
 }
 
 // Called when a group is deleted via the REST API.  Will publish an empty message to
@@ -383,7 +387,12 @@ void setup() {
 
   // Allows us to have static IP config in the captive portal. Yucky pointers to pointers, just to have the settings carry through
   wifiManager = new WiFiManager();
+
+  // Setting breakAfterConfig to true causes wifiExtraSettingsChange to be called whenever config params are changed
+  // (even when connection fails or user is just changing settings and not network)
+  wifiManager->setBreakAfterConfig(true);
   wifiManager->setSaveConfigCallback(wifiExtraSettingsChange);
+
   wifiManager->setConfigPortalBlocking(false);
   wifiManager->setConnectTimeout(20);
   wifiManager->setConnectRetries(5);

web/src/js/script.js

@@ -797,9 +797,10 @@ var saveDeviceAliases = function() {
     var deviceAliases = Object.values(aliasesSelectize.options).reduce(
         function (aggregate, x, index) {
           var params = x.savedGroupParams;
+          x.id = index + 1;
 
           aggregate.push([
-            index + 1,
+            x.id,
             x.value,
             params.deviceType,
             params.deviceId,
@@ -1170,6 +1171,26 @@ $(function() {
     createOnBlur: true,
     render: {
       option: function(data, escape) {
+        // Mousedown selects an option -- prevent event from bubbling up to select option
+        // when delete button is clicked.
+        var editBtn = $('<span class="selectize-delete"><a href="#"><i class="glyphicon glyphicon-edit"></i></a></span>')
+            .mousedown(function(e) {
+              e.preventDefault();
+              return false;
+            })
+            .click(function(e) {
+              aliasesSelectize.close();
+              aliasesSelectize.clear();
+
+              // set value in textbox to current alias
+              var alias = aliasesSelectize.options[data.value];
+              $('.selectize-input input#deviceAliases-selectized').val(alias.text).focus();
+
+              deleteDeviceAlias.call($(this).closest('.c-selectize-item'));
+              e.preventDefault();
+              return false;
+            });
+
         // Mousedown selects an option -- prevent event from bubbling up to select option
         // when delete button is clicked.
         var deleteBtn = $('<span class="selectize-delete"><a href="#"><i class="glyphicon glyphicon-trash"></i></a></span>')
@@ -1187,6 +1208,11 @@ $(function() {
         elmt.append('<span>' + data.text + '</span>');
         elmt.append(deleteBtn);
 
+        // only add edit button if item is selected
+        if (aliasesSelectize.getValue() === data.value) {
+          elmt.append(editBtn);
+        }
+
         return elmt;
       }
     },
@@ -1198,6 +1224,7 @@ $(function() {
       };
 
       saveDeviceAliases();
+      aliasesSelectize.clearCache();
     }
   })[0].selectize;
 
@@ -1417,6 +1444,8 @@ $(function() {
     if (selectizeItem && !updatingAlias) {
       updateGroupId(selectizeItem.savedGroupParams);
     }
+
+    aliasesSelectize.clearCache();
   });
 
   $(document).ready( function() {