1 files changed, 92 insertions, 31 deletions

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index c6e88e52..253e9243 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) })
@@ -130,45 +139,62 @@ $(function() {
       
     })
   });
-  
+
   /* Contendeditable Fields */
-  
-  document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) {
-    elem.addEventListener('focusout', function() {
+
+  $('[contenteditable="true"]').on('focusout', function() {
         /* change svg scale */
-        var content    = $(this).html();
-        var field_name = $(this).attr('data-field-name');
-        if(field_name == 'svg-scale') {
-          var scale     = parseInt(content);
-          var svg       = $(this).parent().siblings('svg');
-          var transform = svg.css('transform').match(/-?[\d\.]+/g);
-          
-          transform[0] = scale / 100;
-          transform[3] = scale / 100;
-          svg.css({ transform: 'matrix(' + transform + ')' });
-        }
-        /* When we focus out from a contenteditable field, we want to
-           set the same content to all fields with the same classname */
-        else {
-          $('[data-field-name="' + field_name + '"]').html(content);
-        }
-    });
+    var content = $(this).html();
+    var field_name = $(this).attr('data-field-name');
+    if(field_name == 'svg-scale') {
+      var scale     = parseInt(content);
+      var svg       = $(this).parent().siblings('svg');
+      var transform = svg.css('transform').match(/-?[\d\.]+/g);
+
+      transform[0] = scale / 100;
+      transform[3] = scale / 100;
+      svg.css({ transform: 'matrix(' + transform + ')' });
+    } else {
+      /* When we focus out from a contenteditable field, we want to
+       * set the same content to all fields with the same classname */
+      $('[data-field-name="' + field_name + '"]').html(content);
+      $.postJSON('/settings/' + field_name, {value: content});
+    }
   });
-  
+
+  // load up initial metadata values
+  $.getJSON('/settings', function(settings) {
+      $.each(settings, function(field_name, value) {
+          $('[data-field-name="' + field_name + '"]').each(function(i, item) {
+              var item = $(item);
+              if (item.is(':checkbox')) {
+                  item.prop('checked', value).trigger('change');
+              } else if (item.is('img')) {
+                  item.attr('src', value);
+              } else if (item.is('select')) {
+                  item.val(value).trigger('change');
+              } else {
+                  item.text(value);
+              }
+          });
+      });
+  });
+
   $('[contenteditable="true"]').keypress(function(e) {
       if (e.which == 13) {
           // pressing enter defocuses the element
           this.blur();
+
           // also suppress the enter keystroke to avoid adding a new line
           return false;
       } else {
           return true;
       }
     });
-  
-  
+
+
   /* Settings Bar */
-  
+
   $('button.close').click(function() {
     $.post('/shutdown', {})
      .done(function(data) {
@@ -193,20 +219,55 @@ $(function() {
   $('#close-settings').click(function(){
       $('#settings-ui').hide();
   });
-  
+
   /* Settings */
-  
+
   // Paper Size
   $('select#printing-size').change(function(){
-    $('.page').toggleClass('a4');
+    var size = $(this).find(':selected').val();
+    $('.page').toggleClass('a4', size == 'a4');
+    $.postJSON('/settings/paper-size', {value: size});
   });
-  
+
   //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();
     scaleAllSvg();
+
+    $.postJSON('/settings/' + field_name, {value: checked});
+  });
+
+  // Logo
+  $('#logo-picker').change(function(e) {
+      var file = e.originalEvent.srcElement.files[0];
+      var reader = new FileReader();
+      reader.onloadend = function() {
+          var data = reader.result;
+          $('figure.brandlogo img').attr('src', data);
+          $.postJSON('/settings/logo', {value: data});
+      };
+      reader.readAsDataURL(file);
+  });
+
+  // "save as defaults" button
+  $('#save-settings').click(function(e) {
+      var settings = {};
+      settings["client-overview"] = $("[data-field-name='client-overview']").is(':checked');
+      settings["client-detailedview"] = $("[data-field-name='client-detailedview']").is(':checked');
+      settings["operator-overview"] = $("[data-field-name='operator-overview']").is(':checked');
+      settings["operator-detailedview"] = $("[data-field-name='operator-detailedview']").is(':checked');
+      settings["paper-size"] = $('select#printing-size').find(':selected').val();
+
+      var logo = $("figure.brandlogo img").attr('src');
+      if (logo.startsWith("data:")) {
+          settings["logo"] = logo;
+      }
+
+      $.postJSON('/defaults', {'value': settings});
   });
-  
 });