add POSTing of settings to DS via form2js

domain-server/resources/web/js/form2js.min.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2010 Maxim Vasiliev
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * @author Maxim Vasiliev
+ * Date: 09.09.2010
+ * Time: 19:02:33
+ */
+(function(e,t){if(typeof define==="function"&&define.amd){define(t)}else{e.form2js=t()}})(this,function(){"use strict";function e(e,r,i,s,o,u){u=u?true:false;if(typeof i=="undefined"||i==null)i=true;if(typeof r=="undefined"||r==null)r=".";if(arguments.length<5)o=false;e=typeof e=="string"?document.getElementById(e):e;var a=[],f,l=0;if(e.constructor==Array||typeof NodeList!="undefined"&&e.constructor==NodeList){while(f=e[l++]){a=a.concat(n(f,s,o,u))}}else{a=n(e,s,o,u)}return t(a,i,r)}function t(e,t,n){var r={},i={},s,o,u,a,f,l,c,h,p,d,v,m,g;for(s=0;s<e.length;s++){f=e[s].value;if(t&&(f===""||f===null))continue;m=e[s].name;g=m.split(n);l=[];c=r;h="";for(o=0;o<g.length;o++){v=g[o].split("][");if(v.length>1){for(u=0;u<v.length;u++){if(u==0){v[u]=v[u]+"]"}else if(u==v.length-1){v[u]="["+v[u]}else{v[u]="["+v[u]+"]"}d=v[u].match(/([a-z_]+)?\[([a-z_][a-z0-9_]+?)\]/i);if(d){for(a=1;a<d.length;a++){if(d[a])l.push(d[a])}}else{l.push(v[u])}}}else l=l.concat(v)}for(o=0;o<l.length;o++){v=l[o];if(v.indexOf("[]")>-1&&o==l.length-1){p=v.substr(0,v.indexOf("["));h+=p;if(!c[p])c[p]=[];c[p].push(f)}else if(v.indexOf("[")>-1){p=v.substr(0,v.indexOf("["));d=v.replace(/(^([a-z_]+)?\[)|(\]$)/gi,"");h+="_"+p+"_"+d;if(!i[h])i[h]={};if(p!=""&&!c[p])c[p]=[];if(o==l.length-1){if(p==""){c.push(f);i[h][d]=c[c.length-1]}else{c[p].push(f);i[h][d]=c[p][c[p].length-1]}}else{if(!i[h][d]){if(/^[0-9a-z_]+\[?/i.test(l[o+1]))c[p].push({});else c[p].push([]);i[h][d]=c[p][c[p].length-1]}}c=i[h][d]}else{h+=v;if(o<l.length-1){if(!c[v])c[v]={};c=c[v]}else{c[v]=f}}}}return r}function n(e,t,n,s){var o=i(e,t,n,s);return o.length>0?o:r(e,t,n,s)}function r(e,t,n,r){var s=[],o=e.firstChild;while(o){s=s.concat(i(o,t,n,r));o=o.nextSibling}return s}function i(e,t,n,i){if(e.disabled&&!i)return[];var u,a,f,l=s(e,n);u=t&&t(e);if(u&&u.name){f=[u]}else if(l!=""&&e.nodeName.match(/INPUT|TEXTAREA/i)){a=o(e,i);if(null===a){f=[]}else{f=[{name:l,value:a}]}}else if(l!=""&&e.nodeName.match(/SELECT/i)){a=o(e,i);f=[{name:l.replace(/\[\]$/,""),value:a}]}else{f=r(e,t,n,i)}return f}function s(e,t){if(e.name&&e.name!="")return e.name;else if(t&&e.id&&e.id!="")return e.id;else return""}function o(e,t){if(e.disabled&&!t)return null;switch(e.nodeName){case"INPUT":case"TEXTAREA":switch(e.type.toLowerCase()){case"radio":if(e.checked&&e.value==="false")return false;case"checkbox":if(e.checked&&e.value==="true")return true;if(!e.checked&&e.value==="true")return false;if(e.checked)return e.value;break;case"button":case"reset":case"submit":case"image":return"";break;default:return e.value;break}break;case"SELECT":return u(e);break;default:break}return null}function u(e){var t=e.multiple,n=[],r,i,s;if(!t)return e.value;for(r=e.getElementsByTagName("option"),i=0,s=r.length;i<s;i++){if(r[i].selected)n.push(r[i].value)}return n}return e})

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

@@ -1,13 +1,42 @@
+var Settings = {};
+
 $(document).ready(function(){
-  $.getJSON('describe.json', function(data){
-    
-    Handlebars.registerHelper('setKey', function(value){
-        this.key = value;
-    });
-    
-    var source = $('#template').html();
-    var template = Handlebars.compile(source);
-    
-    $('#settings').html(template(data));
+  Handlebars.registerHelper('setKey', function(value){
+      this.key = value;
   });
-});
+  
+  var source = $('#template').html();
+  Settings.template = Handlebars.compile(source);
+  
+  reloadSettings();
+});
+
+function reloadSettings() {
+  $.getJSON('describe.json', function(data){
+    $('#settings').html(Settings.template(data));
+  });
+}
+
+$('#settings').on('click', 'button', function(e){  
+  // grab a JSON representation of the form via form2js
+  var formJSON = form2js('settings-form', ".", false, null, true);
+  
+  // POST the form JSON to the domain-server settings.json endpoint so the settings are saved
+  $.ajax('/settings.json', {
+    data: JSON.stringify(formJSON),
+    contentType: 'application/json',
+    type: 'POST'
+  }).done(function(){
+    
+  }).fail(function(){
+    var alertBox = $('.alert');
+    alertBox.attr('class', 'alert');
+    alertBox.addClass('alert-danger');
+    alertBox.html("There was a problem saving domain settings. Please try again!");
+    alertBox.fadeIn();
+    
+    reloadSettings();
+  });
+  
+  return false;
+});

domain-server/resources/web/settings/index.shtml

@@ -1,8 +1,10 @@
 <!--#include virtual="header.html"-->
 <div id="settings-lead" class="table-lead"><h3>Settings</h3><div class="lead-line"></div></div>
 <div style="clear: both;"></div>
+<div class="alert" style="display:none;"></div>
+<form class="form-horizontal" id="settings-form" role="form">
+  
 <script id="template" type="text/x-handlebars-template">
-  <form class="form-horizontal" role="form">
   {{#each groups}}
     {{setKey @key}}
     <div class="panel panel-default">
@@ -12,8 +14,8 @@
       <div class="panel-body">
         {{#each settings}}
           <div class="form-group">
-            <label for="{{../key}}[{{@key}}]" class="col-sm-2 control-label">{{label}}</label>
-            <div class="col-sm-10"><input type="text" class="form-control" id="{{../key}}[{{@key}}]" placeholder="{{placeholder}}"></div>
+            <label for="{{../key}}.{{@key}}" class="col-sm-2 control-label">{{label}}</label>
+            <div class="col-sm-10"><input type="text" class="form-control" id="{{../key}}.{{@key}}" placeholder="{{placeholder}}"></div>
             <p class="help-block col-sm-offset-2 col-sm-10">{{help}}</p>
           </div>
         {{/each}}
@@ -21,11 +23,13 @@
     </div>
   {{/each}}
   <button type="submit" class="btn btn-default">Save</button>
-  </form>
 </script>
 
 <div id="settings"></div>
+ </form>
+ 
 <!--#include virtual="footer.html"-->
 <script src='/js/settings.js'></script>
+<script src='/js/form2js.min.js'></script>
 <script src='/js/handlebars-v1.3.0.min.js'></script>
 <!--#include virtual="page-end.html"-->