replace handlebars with underscore for templating

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

@@ -1,16 +1,8 @@
 var Settings = {};
 
-$(document).ready(function(){
-  Handlebars.registerHelper('setGroup', function(value){
-    this.group = value;
-  });
-  
-  Handlebars.registerHelper('settingsValue', function(values, key, group){
-    return values[group][key];
-  });
-  
-  var source = $('#template').html();
-  Settings.template = Handlebars.compile(source);
+$(document).ready(function(){  
+  var source = $('#settings-template').html();
+  Settings.template = _.template(source);
   
   reloadSettings();
 });

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

@@ -1,11 +1,19 @@
 {
   "audio": {
     "label": "Audio",
+    "types": [0],
     "settings": {
       "unattenuated-zone": {
         "label": "Unattenuated Zone",
         "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": "no zone"
+        "placeholder": "no zone",
+        "default": ""
+      },
+      "dynamic-jitter-buffer": {
+        "type": "checkbox",
+        "label": "Dynamic Jitter Buffers",
+        "help": "Dynamically buffer client audio based on perceived jitter in packet receipt timing",
+        "default": "false"
       }
     }
   }

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

@@ -4,24 +4,31 @@
 <div class="alert" style="display:none;"></div>
 <form class="form-horizontal" id="settings-form" role="form">
   
-<script id="template" type="text/x-handlebars-template">
-  {{#each descriptions}}
-    {{setGroup @key}}
+<script id="settings-template" type="text/template">
+  <% _.each(descriptions, function(group, group_key){ %>
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="panel-title">{{label}}</h3>
+        <h3 class="panel-title"><%- group.label %></h3>
       </div>
       <div class="panel-body">
-        {{#each settings}}
+        <% _.each(group.settings, function(setting, setting_key){ %>
           <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="{{../group}}.{{@key}}" placeholder="{{placeholder}}" value="{{settingsValue ../../values @key ../group}}"></div>
-            <p class="help-block col-sm-offset-2 col-sm-10">{{help}}</p>
+            <label for="{{=group}}.{{=setting}}" class="col-sm-2 control-label"><%- setting.label %></label>
+            <div class="col-sm-10">
+              <% if(setting.type) %>
+                <% if (setting.type === "checkbox") { %>
+                  <input type="checkbox">
+                <% } else { %>
+                <input type="text" class="form-control" id="<%- group %>.<%- setting %>" placeholder="<%- setting.placeholder %>" value="<%- values[group_key][setting_key] %>">
+              <% } %>
+              
+            </div>
+            <p class="help-block col-sm-offset-2 col-sm-10"><%- setting.help %></p>
           </div>
-        {{/each}}
+        <% }); %>
       </div>
     </div>
-  {{/each}}
+  <% }); %>
   <button type="submit" class="btn btn-default">Save</button>
 </script>
 
@@ -31,5 +38,5 @@
 <!--#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>
+<script src='/js/underscore-1.5.0.min.js'></script>
 <!--#include virtual="page-end.html"-->