Add field to UI to deal with device aliases

web/src/index.html

@@ -66,6 +66,17 @@
   </nav>
 
   <div class="container" id="content">
+    <div class="row" id="device-id-aliases-row">
+      <div class="col-sm-3">
+        <label for="deviceAliases" id="device-id-aliases">
+          Device Name
+        </label>
+        <select id="deviceAliases" placeholder="Create alias...">
+				</select>
+      </div>
+    </div>
+    <div></div>
+
     <div class="row">
       <div class="col-sm-3">
         <label for="deviceId" id="device-id-label">

web/src/js/script.js

@@ -362,9 +362,16 @@ var UDP_PROTOCOL_VERSIONS = [ 5, 6 ];
 var DEFAULT_UDP_PROTOCL_VERSION = 5;
 
 var selectize;
+var aliasesSelectize;
 var sniffing = false;
 var loadingSettings = false;
 
+// When true, will not attempt to load group parameters
+var updatingGroupId = false;
+
+// When true, will not attempt to update group parameters
+var updatingAlias = false;
+
 // don't attempt websocket if we are debugging locally
 if (location.hostname != "") {
   var webSocket = new WebSocket("ws://" + location.hostname + ":81");
@@ -380,9 +387,60 @@ var toHex = function(v) {
   return "0x" + (v).toString(16).toUpperCase();
 }
 
+var updateGroupId = function(params) {
+  updatingGroupId = true;
+
+  selectize.setValue(params.deviceId);
+  setGroupId(params.groupId);
+  setMode(params.deviceType);
+
+  updatingGroupId = false;
+
+  refreshGroupState();
+}
+
+var setGroupId = function(value) {
+  $('#groupId input[data-value="' + value + '"]').click();
+}
+
+var setMode = function(value) {
+  $('#mode li[data-value="' + value + '"]').click();
+}
+
+var getCurrentDeviceId = function() {
+  // return $('#deviceId option:selected').val();
+  return parseInt(selectize.getValue());
+};
+
+var getCurrentGroupId = function() {
+  return $('#groupId .active input').data('value');
+}
+
+var findAndSelectAlias = function() {
+  if (!updatingGroupId) {
+    var params = {
+      deviceType: getCurrentMode(),
+      deviceId: getCurrentDeviceId(),
+      groupId: getCurrentGroupId()
+    };
+
+    var foundAlias = Object.entries(aliasesSelectize.options).filter(function(x) {
+      return _.isEqual(x[1].savedGroupParams, params);
+    });
+
+    updatingAlias = true;
+    if (foundAlias.length > 0) {
+      aliasesSelectize.setValue(foundAlias[0]);
+    } else {
+      aliasesSelectize.clear();
+    }
+    updatingAlias = false;
+  }
+}
+
 var activeUrl = function() {
-  var deviceId = $('#deviceId option:selected').val()
-    , groupId = $('#groupId .active input').data('value')
+  var deviceId = getCurrentDeviceId()
+    , groupId = getCurrentGroupId()
     , mode = getCurrentMode();
 
   if (deviceId == "") {
@@ -400,6 +458,17 @@ var activeUrl = function() {
   return "/gateways/" + deviceId + "/" + mode + "/" + groupId;
 }
 
+var refreshGroupState = function() {
+  if (! updatingGroupId) {
+    $.getJSON(
+      activeUrl(),
+      function(e) {
+        handleStateUpdate(e);
+      }
+    );
+  }
+}
+
 var getCurrentMode = function() {
   return $('#mode li.active').data('value');
 };
@@ -498,12 +567,34 @@ var loadSettings = function() {
       }
     });
 
+    if (val.group_id_aliases) {
+      aliasesSelectize.clearOptions();
+      Object.entries(val.group_id_aliases).forEach(function(entry) {
+        var label = entry[0]
+          , groupParams = entry[1]
+          , savedParams = {
+                deviceType: groupParams[0],
+                deviceId: groupParams[1],
+                groupId: groupParams[2]
+            }
+          ;
+
+        aliasesSelectize.addOption({
+          text: label,
+          value: label,
+          savedGroupParams: savedParams
+        });
+
+        aliasesSelectize.refreshOptions(false);
+      });
+    }
+
     if (val.device_ids) {
       selectize.clearOptions();
       val.device_ids.forEach(function(v) {
         selectize.addOption({text: toHex(v), value: v});
       });
-      selectize.refreshOptions();
+      selectize.refreshOptions(false);
     }
 
     if (val.group_state_fields) {
@@ -592,6 +683,19 @@ var saveGatewayConfigs = function() {
   }
 };
 
+var patchSettings = function(patch) {
+  if (!loadingSettings) {
+    $.ajax(
+      "/settings",
+      {
+        method: 'put',
+        contentType: 'application/json',
+        data: JSON.stringify(patch)
+      }
+    );
+  }
+};
+
 var saveDeviceIds = function() {
   if (!loadingSettings) {
     var deviceIds = _.map(
@@ -601,14 +705,28 @@ var saveDeviceIds = function() {
       }
     );
 
-    $.ajax(
-      "/settings",
-      {
-        method: 'put',
-        contentType: 'application/json',
-        data: JSON.stringify({device_ids: deviceIds})
-      }
+    patchSettings({device_ids: deviceIds});
+  }
+};
+
+var saveDeviceAliases = function() {
+  if (!loadingSettings) {
+    var deviceAliases = Object.entries(aliasesSelectize.options).reduce(
+      function(aggregate, x) {
+        var params = x[1].savedGroupParams;
+
+        aggregate[x[0]] = [
+          params.deviceType,
+          params.deviceId,
+          params.groupId
+        ]
+
+        return aggregate;
+      },
+      {}
     );
+
+    patchSettings({group_id_aliases: deviceAliases});
   }
 };
 
@@ -618,6 +736,12 @@ var deleteDeviceId = function() {
   saveDeviceIds();
 };
 
+var deleteDeviceAlias = function() {
+  aliasesSelectize.removeOption($(this).data('value'));
+  aliasesSelectize.refreshOptions();
+  saveDeviceAliases();
+};
+
 var deviceIdError = function(v) {
   if (!v) {
     $('#device-id-label').removeClass('error');
@@ -913,23 +1037,63 @@ $(function() {
     return false;
   });
 
-  $('input[name="mode"],input[name="options"],#deviceId').change(function(e) {
+  var onGroupParamsChange = function(e) {
+    findAndSelectAlias();
     try {
-      $.getJSON(
-        activeUrl(),
-        function(e) {
-          handleStateUpdate(e);
-        }
-      );
+      refreshGroupState();
     } catch (e) {
       // Skip
     }
-  });
+  };
+
+  $('input[name="options"],#deviceId').change(onGroupParamsChange);
+  $('#mode li').click(onGroupParamsChange);
+
+  aliasesSelectize = $('#deviceAliases').selectize({
+    create: true,
+    allowEmptyOption: true,
+    openOnFocus: true,
+    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 deleteBtn = $('<span class="selectize-delete"><a href="#"><i class="glyphicon glyphicon-trash"></i></a></span>')
+          .mousedown(function(e) {
+            e.preventDefault();
+            return false;
+          })
+          .click(function(e) {
+            deleteDeviceAlias.call($(this).closest('.c-selectize-item'));
+            e.preventDefault();
+            return false;
+          });
+
+        var elmt = $('<div class="c-selectize-item"></div>');
+        elmt.append('<span>' + data.text + '</span>');
+        elmt.append(deleteBtn);
+
+        return elmt;
+      }
+    },
+    onOptionAdd: function(v, item) {
+      if (!item.savedGroupParams) {
+        item.savedGroupParams = {
+          deviceId: getCurrentDeviceId(),
+          groupId: getCurrentGroupId(),
+          deviceType: getCurrentMode()
+        };
+      }
+
+      saveDeviceAliases();
+    }
+  })[0].selectize;
 
   selectize = $('#deviceId').selectize({
     create: true,
     sortField: 'value',
     allowEmptyOption: true,
+    createOnBlur: true,
     render: {
       option: function(data, escape) {
         // Mousedown selects an option -- prevent event from bubbling up to select option
@@ -1120,6 +1284,16 @@ $(function() {
     input.trigger('fileselect', [label]);
   });
 
+  $(document).on('change', '#deviceAliases', function() {
+    var selectedValue = aliasesSelectize.getValue()
+      , selectizeItem = aliasesSelectize.options[selectedValue]
+      ;
+
+    if (selectizeItem && !updatingAlias) {
+      updateGroupId(selectizeItem.savedGroupParams);
+    }
+  });
+
   $(document).ready( function() {
     $(':file').on('fileselect', function(event, label) {