Add group_state_fields in UI

web/src/index.html

@@ -10,6 +10,7 @@
   <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.0/css/bootstrap-slider.min.css" rel="stylesheet"/>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@@ -24,6 +25,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.0/bootstrap-slider.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
 
   <script src="js/rgb2hsv.js" lang="text/javascript"></script>
   <script src="js/script.js" lang="text/javascript"></script>

web/src/js/script.js

@@ -10,7 +10,22 @@ var FORM_SETTINGS = [
   "mqtt_topic_pattern", "mqtt_update_topic_pattern", "mqtt_state_topic_pattern",
   "mqtt_username", "mqtt_password", "radio_interface_type", "listen_repeats",
   "state_flush_interval", "mqtt_state_rate_limit", "packet_repeat_throttle_threshold",
-  "packet_repeat_throttle_sensitivity", "packet_repeat_minimum"
+  "packet_repeat_throttle_sensitivity", "packet_repeat_minimum", "group_state_fields"
+];
+
+// TODO: sync this with GroupStateField.h
+var GROUP_STATE_KEYS = [
+  "state",
+  "status",
+  "brightness",
+  "level",
+  "hue",
+  "saturation",
+  "color",
+  "mode",
+  "kelvin",
+  "color_temp",
+  "bulb_mode"
 ];
 
 var FORM_SETTINGS_HELP = {
@@ -177,6 +192,11 @@ var loadSettings = function() {
       selectize.refreshOptions();
     }
 
+    if (val.group_state_fields) {
+      var elmt = $('select[name="group_state_fields"]');
+      elmt.selectpicker('val', val.group_state_fields);
+    }
+
     var gatewayForm = $('#gateway-server-configs').html('');
     if (val.gateway_configs) {
       val.gateway_configs.forEach(function(v) {
@@ -529,7 +549,7 @@ $(function() {
 
     elmt += '</div>';
 
-    if(k === "radio_interface_type") {
+    if (k === "radio_interface_type") {
       elmt += '<div class="btn-group" id="radio_interface_type" data-toggle="buttons">' +
         '<label class="btn btn-secondary active">' +
           '<input type="radio" id="nrf24" name="radio_interface_type" autocomplete="off" value="nRF24" /> nRF24' +
@@ -538,6 +558,12 @@ $(function() {
           '<input type="radio" id="lt8900" name="radio_interface_type" autocomplete="off" value="LT8900" /> PL1167/LT8900' +
         '</label>' +
       '</div>';
+    } else if (k == 'group_state_fields') {
+      elmt += '<select class="selectpicker" name="group_state_fields" multiple>';
+      GROUP_STATE_KEYS.forEach(function(stateKey) {
+        elmt += '<option>' + stateKey + '</option>';
+      });
+      elmt += '</select>';
     } else {
       elmt += '<input type="text" class="form-control" name="' + k + '"/>';
       elmt += '</div>';
@@ -548,17 +574,23 @@ $(function() {
 
   $('#settings').prepend(settings);
   $('#settings').submit(function(e) {
-    var obj = {};
+    e.preventDefault();
 
-    FORM_SETTINGS.forEach(function(k) {
-      var elmt = $('#settings input[name="' + k + '"]');
+    var obj = $('#settings')
+      .serializeArray()
+      .reduce(function(a, x) {
+        var val = a[x.name];
 
-      if (elmt.attr('type') === 'radio') {
-        obj[k] = elmt.filter(':checked').val();
-      } else {
-        obj[k] = elmt.val();
-      }
-    });
+        if (! val) {
+          a[x.name] = x.value;
+        } else if (! Array.isArray(val)) {
+          a[x.name] = [val, x.value];
+        } else {
+          val.push(x.value);
+        }
+
+        return a;
+      }, {});
 
     // pretty hacky. whatever.
     obj.device_ids = _.map(
@@ -568,6 +600,10 @@ $(function() {
       }
     );
 
+    // Make sure we're submitting a value for group_state_fields (will be empty
+    // if no values were selected).
+    obj = $.extend({group_state_fields: []}, obj);
+
     $.ajax(
       "/settings",
       {
@@ -577,7 +613,6 @@ $(function() {
       }
     );
 
-    e.preventDefault();
     return false;
   });