round-trip editable fields and checkboxes

2 files changed, 30 insertions, 7 deletions

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 15cf494a..8123a31f 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -1,3 +1,12 @@
+$.postJSON = function(url, data, success=null) {
+    return $.ajax(url, {
+                        type: 'POST',
+                        data: JSON.stringify(data),
+                        contentType: 'application/json',
+                        success: success
+                       });
+};
+
 function ping() {
   $.get("/ping")
    .done(function() { setTimeout(ping, 1000) })
@@ -49,13 +58,22 @@ $(function() {
     var content = $(this).html();
     var field_name = $(this).attr('data-field-name');
     $('[data-field-name="' + field_name + '"]').text(content);
-    $.post('/metadata/' + field_name + '/set', {value: content});
+    $.postJSON('/metadata/' + field_name + '/set', {value: content});
   });
 
   // load up initial metadata values
   $.getJSON('/metadata', function(metadata) {
       $.each(metadata, function(field_name, value) {
-          $('[data-field-name="' + field_name + '"]').text(value);
+          $('[data-field-name="' + field_name + '"]').each(function(i, item) {
+              console.log(item);
+              if ($(item).is(':checkbox')) {
+                  console.log("is a checkbox");
+                  $(item).prop('checked', value).trigger('change');
+              } else {
+                  console.log("is not a checkbox");
+                  $(item).text(value);
+              }
+          });
       });
   });
 
@@ -108,9 +126,14 @@ $(function() {
 
   //Checkbox
   $(':checkbox').change(function() {
-    $('.' + this.id).toggle();
+    var checked = $(this).prop('checked');
+    var field_name = $(this).attr('data-field-name');
+
+    $('.' + field_name).toggle(checked);
     setPageNumbers();
     scaleInksimulation();
+
+    $.postJSON('/metadata/' + field_name + '/set', {value: checked});
   });
 
 });
diff --git a/print/templates/ui.html b/print/templates/ui.html
index 078f1a4c..9acdd1bc 100644
--- a/print/templates/ui.html
+++ b/print/templates/ui.html
@@ -24,10 +24,10 @@
       <div>
        <fieldset>
           <legend>{{ ('Print Layouts') }}:</legend>
-          <p><input type="checkbox" id="client-overview" {{ 'checked' if view.client_overview else '' }}><label for="client-overview">Client Overview</label></p>
-          <p><input type="checkbox" id="client-detailedview" {{ 'checked' if view.client_detailedview else '' }}><label for="client-detailedview">Client Detailed View</label></p>
-          <p><input type="checkbox" id="operator-overview" {{ 'checked' if view.operator_overview else '' }}><label for="operator-overview">Operator Overview</label></p>
-          <p><input type="checkbox" id="operator-detailedview" {{ 'checked' if view.operator_detailedview else '' }}><label for="operator-overview">Operator Detailed View</label></p>
+          <p><input type="checkbox" id="client-overview" data-field-name="client-overview" /><label for="client-overview">Client Overview</label></p>
+          <p><input type="checkbox" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">Client Detailed View</label></p>
+          <p><input type="checkbox" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">Operator Overview</label></p>
+          <p><input type="checkbox" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED /><label for="operator-detailedview">Operator Detailed View</label></p>
         </fieldset>
       </div>
     </div>