finish up handlebars template for settings

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

@@ -1,8 +1,8 @@
-#nodes-lead {
+#nodes-lead, #settings-lead {
   color: #66CCCC;
 }
 
-#nodes-lead .lead-line {
+#nodes-lead .lead-line, #settings-lead .lead-line {
   background-color: #66CCCC;
 }
 

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

@@ -1,5 +1,10 @@
 $(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);
     

domain-server/resources/web/settings/describe.json

@@ -1,9 +1,13 @@
 {
   "groups": {
-    "Audio": {
+    "audio": {
+      "label": "Audio",
+      "settings": {
         "unattenuated-zone": {
           "label": "Unattenuated Zone",
-        "desc": "Define two axis-aligned boxes for an unattenuated zone of audio (source x, source y, source z, size x, size y, size z, listener x, listener y, listener z)"
+          "help": "Boxes for source and listener (corner x, corner y, corner z, size x, size y, size z, corner x, corner y, corner z, size x, size y, size z)",
+          "placeholder": "0,0,0,20,20,20,50,50,50,10,10,10"
+        }
       }
     }
   }

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

@@ -1,12 +1,30 @@
 <!--#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>
 <script id="template" type="text/x-handlebars-template">
+  <form class="form-horizontal" role="form">
   {{#each groups}}
-    <h1>{{@key}}</h1>
+    {{setKey @key}}
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">{{label}}</h3>
+      </div>
+      <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>
+            <p class="help-block col-sm-offset-2 col-sm-10">{{help}}</p>
+          </div>
         {{/each}}
+      </div>
+    </div>
+  {{/each}}
+  <button type="submit" class="btn btn-default">Save</button>
+  </form>
 </script>
-<div id="settings">
 
-</div>
+<div id="settings"></div>
 <!--#include virtual="footer.html"-->
 <script src='/js/settings.js'></script>
 <script src='/js/handlebars-v1.3.0.min.js'></script>