Merge pull request #3568 from birarda/master

add array type to domain-server setting tables

domain-server/resources/describe-settings.json

@@ -59,19 +59,6 @@
         "type": "password",
         "help": "Password used for basic HTTP authentication. Leave this blank if you do not want to change it.",
         "value-hidden": true
-      },
-      {
-        "name": "allowed_users",
-        "type": "table",
-        "label": "Allowed Users",
-        "help": "A list of usernames for the High Fidelity users you want to allow into your domain. Users not found in this list will not be allowed to connect.",
-        "numbered": false,
-        "can_add": true,
-        "can_delete": true,
-        "key": {
-          "name": "username",
-          "label": "Username"
-        }
       }
     ]
   },
@@ -86,8 +73,6 @@
         "label": "Zones",
         "help": "In this table you can define a set of zones in which you can specify various audio properties.",
         "numbered": false,
-        "can_add": true,
-        "can_delete": true,
         "key": {
           "name": "name",
           "label": "Name",

domain-server/resources/web/css/style.css

@@ -82,4 +82,5 @@ td.buttons {
 td.buttons .glyphicon {
   display: block;
   text-align: center;
+  font-size: 12px;
 }

domain-server/resources/web/js/settings.js

@@ -21,12 +21,14 @@ var viewHelpers = {
       label_class += ' locked'
     }
     
+    common_attrs = " class='" + (setting.type !== 'checkbox' ? 'form-control' : '')
+      + " trigger-change' data-short-name='" + setting.name + "' name='" + setting_name + "' "
+    
     if (setting.type === 'checkbox') {
       form_group += "<label class='" + label_class + "'>" + setting.label + "</label>"
       form_group += "<div class='checkbox" + (isLocked ? " disabled" : "") + "'>"
       form_group += "<label for='" + setting_name + "'>"
-      form_group += "<input type='checkbox' name='" + setting_name + "' " +
-        (setting_value ? "checked" : "") + (isLocked ? " disabled" : "") + "/>"
+      form_group += "<input type='checkbox'" + common_attrs + (setting_value ? "checked" : "") + (isLocked ? " disabled" : "") + "/>"
       form_group += " " + setting.help + "</label>";
       form_group += "</div>"
     } else if (setting.type === 'table') {
@@ -46,15 +48,15 @@ var viewHelpers = {
         
         form_group += "</select>"
         
-        form_group += "<input type='hidden' name='" + setting_name + "' value='" + setting_value + "'>"
+        form_group += "<input type='hidden'" + common_attrs + "value='" + setting_value + "'>"
       } else {
         
         if (input_type == 'integer') {
           input_type = "text"
         }
         
-        form_group += "<input type='" + input_type + "' class='form-control' name='" + setting_name + 
-          "' placeholder='" + (_.has(setting, 'placeholder') ? setting.placeholder : "") + 
+        form_group += "<input type='" + input_type + "'" +  common_attrs +
+          "placeholder='" + (_.has(setting, 'placeholder') ? setting.placeholder : "") + 
           "' value='" + setting_value + "'" + (isLocked ? " disabled" : "") + "/>"
       }
       
@@ -88,89 +90,14 @@ $(document).ready(function(){
   })
                   
   $('#settings-form').on('click', '.add-row', function(){
-    var row = $(this).parents("tr")
-    var data = row.parent().children(".row-data")
-        
-    // Check key spaces
-    var name = row.children(".key").children("input").val()
-    if (name.indexOf(' ') !== -1) {
-      showErrorMessage("Error", "Key contains spaces")
-      return
-    }
-    // Check keys with the same name
-    var equals = false;
-    _.each(data.children(".key"), function(element) {
-      if ($(element).text() === name) {
-        equals = true
-        return
-      }
-    })
-    if (equals) {
-      showErrorMessage("Error", "Two keys cannot be identical")
-      return
-    }
-        
-    // Check empty fields
-    var empty = false;
-    _.each(row.children(".row-data").children("input"), function(element) {
-      if ($(element).val().length === 0) {
-        empty = true
-        return
-      }
-    })
-    if (empty) {
-      showErrorMessage("Error", "Empty field(s)")
-      return
-    }
-        
-    var input_clone = row.clone()
-    // Change input row to data row
-    var full_name = row.parents("table").attr("name") + "." + name
-    row.attr("class", "row-data")
-        
-    _.each(row.children(), function(element) {
-      if ($(element).hasClass("number")) { // Index row
-        var numbers = data.children(".number")
-        if (numbers.length > 0) {
-          $(element).html(parseInt(numbers.last().text()) + 1)
-        } else {
-          $(element).html(1)
-        }
-      } else if ($(element).hasClass("buttons")) { // Change buttons
-        var prevSpan = $(element).parent().prev().children(".buttons").children("span")
-        var span = $(element).children("span")
-        if (prevSpan.hasClass("del-row")) {
-          span.removeClass("glyphicon-ok add-row")
-          span.addClass("glyphicon-remove del-row")
-        } else {
-          span.remove()
-        }
-      } else if ($(element).hasClass("key")) {
-        var input = $(element).children("input")
-        $(element).html(input.val())
-        input.remove()
-      } else if($(element).hasClass("row-data")) { // Hide inputs
-        var input = $(element).children("input")
-        input.attr("type", "hidden")
-        input.attr("name", full_name + "." + $(element).attr("name"))
-        input.attr("value", input.val())
-        input.attr("data-changed", "true")
-               
-        $(element).html($(element).html() + input.val())
-      } else {
-        console.log("Unknown table element")
-      }
-    })
-    row.parent().append(input_clone)
+    addTableRow(this);
   })
     
   $('#settings-form').on('click', '.del-row', function(){
-    var row = $(this).parents("tr")
-    row.empty()
-    row.html("<input type='hidden' class='form-control' name='" + row.attr("name") + "' data-changed='true' value=''>");
+    deleteTableRow(this);
   })
     
-  $('#settings-form').on('change', 'input', function(){
+  $('#settings-form').on('change', 'input.trigger-change', function(){
     // this input was changed, add the changed data attribute to it
     $(this).attr('data-changed', true)
     
@@ -279,53 +206,65 @@ $('body').on('click', '.save-button', function(e){
 });
 
 function makeTable(setting, setting_name, setting_value) {
+  var isArray = !_.has(setting, 'key')
+  
   var html = "<label class='control-label'>" + setting.label + "</label>"
   html += "<span class='help-block'>" + setting.help + "</span>"
-  html += "<table class='table table-bordered' name='" + setting_name + "'>"
+  html += "<table class='table table-bordered' data-short-name='" + setting.name + "' name='" + setting_name + (isArray ? "[]" : "") 
+    + "' data-setting-type='" + (isArray ? 'array' : 'hash') + "'>"
     
   // Column names
   html += "<tr class='headers'>"
-  if (setting.number === true) {
+  
+  if (setting.numbered === true) {
     html += "<td class='number'><strong>#</strong></td>" // Row number
   }
-  html += "<td class='key'><strong>" + setting.key.label + "</strong></td>" // Key
+  
+  if (setting.key) {
+    html += "<td class='key'><strong>" + setting.key.label + "</strong></td>" // Key
+  }
+  
   _.each(setting.columns, function(col) {
     html += "<td class='data'><strong>" + col.label + "</strong></td>" // Data
   })
-  if (setting.can_delete === true || setting.can_add === true) {
-    html += "<td class='buttons'><strong>+/-</strong></td>" // Buttons
-  }
-  html += "</tr>"
+  
+  html += "<td class='buttons'><strong>+/-</strong></td></tr>"
     
-  // Rows
+  // populate rows in the table from existing values
   var row_num = 1
-  _.each(setting_value, function(row, name) {
-    html += "<tr class='row-data' name='" + setting_name + "." + name + "'>"
+  
+  _.each(setting_value, function(row, indexOrName) {
+    html += "<tr class='row-data'" + (isArray ? "" : "name='" + setting_name + "." + indexOrName + "'") + ">"
+    
     if (setting.numbered === true) {
       html += "<td class='numbered'>" + row_num + "</td>"
     }
-    html += "<td class='key'>" + name + "</td>"
+    
+    if (setting.key) {
+        html += "<td class='key'>" + indexOrName + "</td>"
+    }
+    
     _.each(setting.columns, function(col) {
       html += "<td class='row-data'>"
-      if (row.hasOwnProperty(col.name)) {
-        html += row[col.name]
+      
+      if (isArray) {
+        html += row
+        // for arrays we add a hidden input to this td so that values can be posted appropriately
+        html += "<input type='hidden' name='" + setting_name + "[]' value='" + row + "'/>"
+      } else if (row.hasOwnProperty(col.name)) {
+        html += row[col.name] 
       }
+      
       html += "</td>"
     })
-    if (setting.can_delete === true) {
-      html += "<td class='buttons'><span class='glyphicon glyphicon-remove del-row'></span></td>"
-    } else if (setting.can_add === true) {
-      html += "<td class='buttons'></td>"
-    }
+    
+    html += "<td class='buttons'><span class='glyphicon glyphicon-remove del-row'></span></td>"
     html += "</tr>"
     row_num++
   })
     
-  // Inputs
-  if (setting.can_add === true) {
-    html += makeTableInputs(setting)
-  }
-  
+  // populate inputs in the table for new values
+  html += makeTableInputs(setting)
   html += "</table>"
     
   return html;
@@ -333,35 +272,43 @@ function makeTable(setting, setting_name, setting_value) {
 
 function makeTableInputs(setting) {
   var html = "<tr class='inputs'>"
+  
   if (setting.numbered === true) {
     html += "<td class='numbered'></td>"
   }
-  html += "<td class='key' name='" + setting.key.name + "'>\
-           <input type='text' class='form-control' placeholder='" + (_.has(setting.key, 'placeholder') ? setting.key.placeholder : "") + "' value=''>\
-           </td>"
+  
+  if (setting.key) {
+    html += "<td class='key' name='" + setting.key.name + "'>\
+             <input type='text' class='form-control' placeholder='" + (_.has(setting.key, 'placeholder') ? setting.key.placeholder : "") + "' value=''>\
+             </td>"
+  }
+  
   _.each(setting.columns, function(col) {
     html += "<td class='row-data'name='" + col.name + "'>\
-             <input type='text' class='form-control' placeholder='" + col.placeholder + "' value=''>\
+             <input type='text' class='form-control' placeholder='" + (col.key ? col.key : "") + "' value=''>\
              </td>"
   })
-  html += "<td class='buttons'><span class='glyphicon glyphicon-ok add-row'></span></td>"
+  
+  html += "<td class='buttons'><span class='glyphicon glyphicon-plus add-row'></span></td>"
   html += "</tr>"
     
   return html
 }
 
-function badgeSidebarForDifferences(changedInput) {
+function badgeSidebarForDifferences(changedElement) {
   // figure out which group this input is in
-  var panelParentID = changedInput.closest('.panel').attr('id')
+  var panelParentID = changedElement.closest('.panel').attr('id')
   
   // get a JSON representation of that section
-  var rootJSON = form2js(panelParentID, ".", false, cleanupFormValues, true);
-  var panelJSON = rootJSON[panelParentID]
+  var panelJSON = form2js(panelParentID, ".", false, cleanupFormValues, true)[panelParentID]
+  var initialPanelJSON = Settings.initialValues[panelParentID]
   
   var badgeValue = 0
   
+  // badge for any settings we have that are not the same or are not present in initialValues
   for (var setting in panelJSON) {
-    if (panelJSON[setting] != Settings.initialValues[panelParentID][setting]) {
+    if (!_.isEqual(panelJSON[setting], initialPanelJSON[setting]) 
+        && (panelJSON[setting] !== "" || _.has(initialPanelJSON, setting))) {
       badgeValue += 1
     }
   }
@@ -374,6 +321,165 @@ function badgeSidebarForDifferences(changedInput) {
   $("a[href='#" + panelParentID + "'] .badge").html(badgeValue);
 }
 
+function addTableRow(add_glyphicon) {
+  var row = $(add_glyphicon).closest('tr')
+  
+  var table = row.parents('table')
+  var isArray = table.data('setting-type') === 'array'
+  
+  var data = row.parent().children(".row-data")
+  
+  if (!isArray) {
+    // Check key spaces
+    var name = row.children(".key").children("input").val()
+    if (name.indexOf(' ') !== -1) {
+      showErrorMessage("Error", "Key contains spaces")
+      return
+    }
+    // Check keys with the same name
+    var equals = false;
+    _.each(data.children(".key"), function(element) {
+      if ($(element).text() === name) {
+        equals = true
+        return
+      }
+    })
+    if (equals) {
+      showErrorMessage("Error", "Two keys cannot be identical")
+      return
+    }
+  }
+      
+  // Check empty fields
+  var empty = false;
+  _.each(row.children(".row-data").children("input"), function(element) {
+    if ($(element).val().length === 0) {
+      empty = true
+      return
+    }
+  })
+  if (empty) {
+    showErrorMessage("Error", "Empty field(s)")
+    return
+  }
+      
+  var input_clone = row.clone()
+  
+  // Change input row to data row
+  var table = row.parents("table")
+  var setting_name = table.attr("name") 
+  var full_name = setting_name + "." + name
+  row.addClass("row-data new-row")
+  row.removeClass("inputs")
+      
+  _.each(row.children(), function(element) {
+    if ($(element).hasClass("numbered")) { 
+      // Index row
+      var numbers = data.children(".numbered")
+      if (numbers.length > 0) {
+        $(element).html(parseInt(numbers.last().text()) + 1)
+      } else {
+        $(element).html(1)
+      }
+    } else if ($(element).hasClass("buttons")) { 
+      // Change buttons
+      var span = $(element).children("span")
+      span.removeClass("glyphicon-ok add-row")
+      span.addClass("glyphicon-remove del-row")
+    } else if ($(element).hasClass("key")) {
+      var input = $(element).children("input")
+      $(element).html(input.val())
+      input.remove()
+    } else if ($(element).hasClass("row-data")) { 
+      // Hide inputs
+      var input = $(element).children("input")
+      input.attr("type", "hidden")
+      
+      if (isArray) {
+        input.attr("name", setting_name)
+      } else {
+        input.attr("name", full_name + "." + $(element).attr("name"))
+      }
+      
+      input.attr("data-changed", "true")
+             
+      $(element).append(input.val())
+    } else {
+      console.log("Unknown table element")
+    }
+  })
+  
+  input_clone.find('input').each(function(){
+    $(this).val('')
+  });
+  
+  if (isArray) {
+    updateDataChangedForSiblingRows(row, true)
+  }
+  
+  badgeSidebarForDifferences($(table))
+  
+  row.parent().append(input_clone)
+}
+
+function deleteTableRow(delete_glyphicon) {
+  var row = $(delete_glyphicon).closest('tr')
+  
+  var table = $(row).closest('table')
+  var isArray = table.data('setting-type') === 'array'
+  
+  if (!isArray) {
+    // this is a hash row, so we empty it but leave the hidden input blank so it is cleared when we save
+    row.empty()
+    row.html("<input type='hidden' class='form-control' name='" + table.attr("name") + "' data-changed='true' value=''>");
+  } else if (table.find('tr.row-data').length > 1) {
+    updateDataChangedForSiblingRows(row)
+    
+    // this isn't the last row - we can just remove it
+    row.remove()
+  } else {
+    // this is the last row, we can't remove it completely since we need to post an empty array
+    row.empty()
+    
+    row.html("<input type='hidden' class='form-control' name='" + table.attr("name").replace('[]', '') 
+      + "' data-changed='true' value=''>");
+  }
+  
+  // we need to fire a change event on one of the remaining inputs so that the sidebar badge is updated
+  badgeSidebarForDifferences($(table))
+} 
+
+function updateDataChangedForSiblingRows(row, forceTrue) {
+  // anytime a new row is added to an array we need to set data-changed for all sibling row-data inputs to true
+  // unless it matches the inital set of values
+  
+  if (!forceTrue) {
+    // figure out which group this row is in
+    var panelParentID = row.closest('.panel').attr('id')
+    // get the short name for the setting from the table
+    var tableShortName = row.closest('table').data('short-name')
+  
+    // get a JSON representation of that section
+    var panelSettingJSON = form2js(panelParentID, ".", false, cleanupFormValues, true)[panelParentID][tableShortName]
+    var initialPanelSettingJSON = Settings.initialValues[panelParentID][tableShortName]
+    
+    // if they are equal, we don't need data-changed
+    isTrue = _.isEqual(panelSettingJSON, initialPanelSettingJSON)
+  } else {
+    isTrue = true
+  }
+  
+  row.siblings('.row-data').each(function(){
+    var hiddenInput = $(this).find('td.row-data input')
+    if (isTrue) {
+      hiddenInput.attr('data-changed', isTrue)
+    } else {
+      hiddenInput.removeAttr('data-changed')
+    }
+    
+  })
+}
+
 function showRestartModal() {
   $('#restart-modal').modal({
     backdrop: 'static',

domain-server/src/DomainServerSettingsManager.cpp

@@ -289,6 +289,9 @@ void DomainServerSettingsManager::updateSetting(const QString& key, const QJsonV
             // we've cleared all of the settings below this value, so remove this one too
             settingMap.remove(key);
         }
+    } else if (newValue.isArray()) {
+        // we just assume array is replacement
+        settingMap[key] = newValue.toArray().toVariantList();
     }
 }