allow user to choose domain ID from High Fidelity domains

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

@@ -4,7 +4,7 @@ var Settings = {
 
 var viewHelpers = {
   getFormGroup: function(groupName, setting, values, isAdvanced, isLocked) {
-    setting_id = groupName + "_" + setting.name
+    setting_name = groupName + "." + setting.name
     
     form_group = "<div class='form-group" + (isAdvanced ? " advanced-setting" : "") + "'>"
     
@@ -24,16 +24,16 @@ var viewHelpers = {
     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_id + "'>"
+      form_group += "<label for='" + setting_name + "'>"
-      form_group += "<input type='checkbox' id='" + setting_id + "' " + 
+      form_group += "<input type='checkbox' name='" + setting_name + "' " + 
         (setting_value ? "checked" : "") + (isLocked ? " disabled" : "") + "/>"
       form_group += " " + setting.help + "</label>";
       form_group += "</div>"
     } else {
       input_type = _.has(setting, 'type') ? setting.type : "text"
       
-      form_group += "<label for='" + setting_id + "' class='" + label_class + "'>" + setting.label + "</label>";
+      form_group += "<label for='" + setting_name + "' class='" + label_class + "'>" + setting.label + "</label>";
-      form_group += "<input type='" + input_type + "' class='form-control' id='" + setting_id + 
+      form_group += "<input type='" + input_type + "' class='form-control' name='" + setting_name + 
         "' placeholder='" + (_.has(setting, 'placeholder') ? setting.placeholder : "") + 
         "' value='" + setting_value + "'" + (isLocked ? " disabled" : "") + "/>"
       form_group += "<span class='help-block'>" + setting.help + "</span>" 
@@ -88,16 +88,7 @@ $(document).ready(function(){
   })
   
   $('#settings-form').on('click', '#choose-domain-btn', function(){
-    // setup the modal to help user pick their domain
+    chooseFromHighFidelityDomains($(this))
-    if (Settings.initialValues.metaverse["access-token"]) {
-      
-    } else {
-      bootbox.alert({
-        message: "You must have an access token to query your High Fidelity domains.<br><br>" + 
-          "Please follow the instructions on the settings page to add an access token.",
-        title: "Access token required"
-      })
-    }
   })
 
   var panelsSource = $('#panels-template').html()
@@ -118,7 +109,7 @@ function reloadSettings() {
     $('.nav-stacked').html(Settings.sidebarTemplate(data))
     $('#panels').html(Settings.panelsTemplate(data))
     
-    Settings.initialValues = form2js('settings-form', "_", false, cleanupFormValues, true);
+    Settings.initialValues = form2js('settings-form', ".", false, cleanupFormValues, true);
     
     // add tooltip to locked settings
     $('label.locked').tooltip({
@@ -131,7 +122,7 @@ function reloadSettings() {
 }
 
 function appendDomainSelectionModal() {
-  var metaverseFormGroup = $('#metaverse_id').parent('.form-group');
+  var metaverseFormGroup = $("[name='metaverse.id']").parent('.form-group');
   var chooseButton = "<button type='button' id='choose-domain-btn' class='btn btn-primary'>Choose from my domains</button>";
   metaverseFormGroup.append(chooseButton);
 }
@@ -145,7 +136,7 @@ $('body').on('click', '.save-button', function(e){
   });
   
   // grab a JSON representation of the form via form2js
-  var formJSON = form2js('settings-form', "_", false, cleanupFormValues, true);
+  var formJSON = form2js('settings-form', ".", false, cleanupFormValues, true);
   
   // re-enable all inputs
   $("input").each(function(){
@@ -180,13 +171,13 @@ function badgeSidebarForDifferences(changedInput) {
   var panelParentID = changedInput.closest('.panel').attr('id')
   
   // get a JSON representation of that section
-  var rootJSON = form2js(panelParentID, "_", false, cleanupFormValues, true);
+  var rootJSON = form2js(panelParentID, ".", false, cleanupFormValues, true);
   var panelJSON = rootJSON[panelParentID]
   
   var badgeValue = 0
   
   for (var setting in panelJSON) {
-    if (panelJSON[setting] != Settings.initialValues[panelParentID][ setting]) {
+    if (panelJSON[setting] != Settings.initialValues[panelParentID][setting]) {
       badgeValue += 1
     }
   }
@@ -238,4 +229,65 @@ function showAlertMessage(message, isSuccess) {
   alertBox.addClass(isSuccess ? 'alert-success' : 'alert-danger');
   alertBox.html(message);
   alertBox.fadeIn();
+}
+
+function chooseFromHighFidelityDomains(clickedButton) {
+  // setup the modal to help user pick their domain
+  if (Settings.initialValues.metaverse.access_token) {
+    
+    // add a spinner to the choose button
+    
+    // get a list of user domains from data-web
+    data_web_domains_url = "https://data.highfidelity.io/api/v1/domains?access_token="
+    $.getJSON(data_web_domains_url + Settings.initialValues.metaverse.access_token, function(data){
+      
+      modal_buttons = {
+        cancel: {
+          label: 'Cancel',
+          className: 'btn-default'
+        }
+      }
+      
+      if (data.data.domains.length) {
+        // setup a select box for the returned domains
+        modal_body = "<p>Choose the High Fidelity domain you want this domain-server to represent.<br/>This will set your domain ID on the settings page.</p>"
+        domain_select = $("<select id='domain-name-select' class='form-control'></select>")
+        _.each(data.data.domains, function(domain){
+          domain_select.append("<option value='" + domain.id + "'>" + domain.name + "</option>")
+        })
+        modal_body += "<label for='domain-name-select'>Domains</label>" + domain_select[0].outerHTML
+        modal_buttons["success"] = {
+          label: 'Choose domain',
+          callback: function() {
+            domainID = $('#domain-name-select').val()
+            // set the domain ID on the form
+            $("[name='metaverse.id']").val(domainID).change();
+          }
+        }
+      } else {
+        modal_buttons["success"] = {
+          label: 'Create new domain',
+          callback: function() {
+            window.open("https://data.highfidelity.io/domains", '_blank');
+          }
+        }
+        modal_body = "<p>You do not have any domains in your High Fidelity account." + 
+          "<br/><br/>Go to your domains page to create a new one. Once your domain is created re-open this dialog to select it.</p>"
+      }
+      
+      
+      bootbox.dialog({
+        title: "Choose matching domain",
+        message: modal_body,
+        buttons: modal_buttons
+      })
+    })
+    
+  } else {
+    bootbox.alert({
+      message: "You must have an access token to query your High Fidelity domains.<br><br>" + 
+        "Please follow the instructions on the settings page to add an access token.",
+      title: "Access token required"
+    })
+  }
 }