round-trip editable fields and checkboxes

embroider_print.py

@@ -133,7 +133,7 @@ class PrintPreviewServer(Thread):
 
         @self.app.route('/metadata/<field_name>/set', methods=['POST'])
         def set_field(field_name):
-            self.metadata[field_name] = request.form['value']
+            self.metadata[field_name] = request.json['value']
             return "OK"
 
         @self.app.route('/metadata/<field_mame>', methods=['GET'])

inkstitch/extensions.py

@@ -1,5 +1,6 @@
 import inkex
 import re
+import json
 from collections import MutableMapping
 from .elements import AutoFill, Fill, Stroke, SatinColumn, Polyline, EmbroideryElement
 from . import SVG_POLYLINE_TAG, SVG_GROUP_TAG, SVG_DEFS_TAG, INKSCAPE_GROUPMODE, EMBROIDERABLE_TAGS, PIXELS_PER_MM
@@ -49,15 +50,23 @@ class InkStitchMetadata(MutableMapping):
     # implement these five methods and we get a full dict-like interface.
 
     def __setitem__(self, name, value):
-        self[name].text = value
+        self._find_item(name).text = json.dumps(value)
 
-    def __getitem__(self, name):
+    def _find_item(self, name):
         tag = inkex.addNS(name, "inkstitch")
         item = self.metadata.find(tag)
         if item is None:
             item = inkex.etree.SubElement(self.metadata, tag)
 
-        return item.text
+        return item
+
+    def __getitem__(self, name):
+        item = self._find_item(name)
+
+        try:
+            return json.loads(item.text)
+        except ValueError:
+            return None
 
     def __delitem__(self, name):
         item = self[name]
@@ -71,6 +80,7 @@ class InkStitchMetadata(MutableMapping):
                 yield strip_namespace(child.tag)
 
     def __len__(self):
+        i = 0
         for i, item in enumerate(self):
             pass
 

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});
   });
 
 });

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>