Merge pull request #155 from lexelby/lexelby-thread-names

set thread names in PDF printout

5 files changed, 142 insertions, 61 deletions

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 498b1211..daa2cf4b 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -24,17 +24,17 @@ function setPageNumbers() {
 
 // Scale SVG (fit || full size)
 function scaleSVG(element, scale = 'fit') {
-  
+
   // always center svg
   transform = "translate(-50%, -50%)";
-  
+
   if(scale == 'fit') {
     var scale = Math.min(
-      element.width() / element.find('svg').width(),    
+      element.width() / element.find('svg').width(),
       element.height() / element.find('svg').height()
     );
   }
-  
+
   transform += " scale(" + scale + ")";
   var label = parseInt(scale*100);
 
@@ -71,17 +71,17 @@ function setSVGTransform(figure, transform) {
 $(function() {
   setTimeout(ping, 1000);
   setPageNumbers();
-  
+
   /* SCALING AND MOVING SVG  */
-  
+
   /* Mousewheel scaling */
   $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
     if(e.ctrlKey == true) {
-    
+
       var svg       = $(this).find('svg');
       var transform = svg.css('transform').match(/-?[\d\.]+/g);
       var scale     = parseFloat(transform[0]);
-      
+
       if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
         // scroll down = zoom out
         scale *= 0.97;
@@ -91,7 +91,7 @@ $(function() {
         //scroll up
         scale *= 1.03;
       }
-      
+
       // set modified scale
       transform[0] = scale;
       transform[3] = scale;
@@ -102,19 +102,19 @@ $(function() {
       return false;
     }
   });
-  
+
   /* Fit SVG */
   $('button.svg-fit').click(function() {
     var svgfigure = $(this).closest('figure');
     scaleSVG(svgfigure, 'fit');
   });
-  
+
   /* Full Size SVG */
   $('button.svg-full').click(function() {
     var svgfigure = $(this).closest('figure');
     scaleSVG(svgfigure, '1');
   });
-  
+
   /* Drag SVG */
   $('figure.inksimulation').on('mousedown', function(e) {
     var p0 = { x: e.pageX, y: e.pageY };
@@ -141,7 +141,7 @@ $(function() {
     // set it using setSVGTransform() to ensure that it's saved to the server
     setSVGTransform($(this), $(this).find('svg').css('transform'));
   });
-  
+
   /* Apply transforms to All */
   $('button.svg-apply').click(function() {
     var transform = $(this).parent().siblings('svg').css('transform');
@@ -178,11 +178,11 @@ $(function() {
         $('[data-field-name="' + field_name + '"]').each(function(i, item) {
             var item = $(item);
             if (item.is(':checkbox')) {
-                item.prop('checked', value).trigger('change');
+                item.prop('checked', value).trigger('initialize');
             } else if (item.is('img')) {
                 item.attr('src', value);
             } else if (item.is('select')) {
-                item.val(value).trigger('change');
+                item.val(value).trigger('initialize');
             } else if (item.is('figure.inksimulation')) {
                 setSVGTransform(item, value);
             } else {
@@ -249,21 +249,53 @@ $(function() {
   /* Settings */
 
   // Paper Size
-  $('select#printing-size').change(function(){
-    var size = $(this).find(':selected').val();
-    $('.page').toggleClass('a4', size == 'a4');
-    $.postJSON('/settings/paper-size', {value: size});
+  $('select#printing-size').on('change initialize', function(){
+    $('.page').toggleClass('a4', $(this).find(':selected').val() == 'a4');
+  }).on('change', function() {
+    $.postJSON('/settings/paper-size', {value: $(this).find(':selected').val()});
+  });
+
+  // Thread Palette
+  $('select#thread-palette').change(function(){
+    $('.modal').show();
+  }).on('update', function() {
+    $(this).data('current-value', $(this).find(':selected').val());
+  }).trigger('update');
+
+  $('#modal-yes').on('click', function(){
+    $("select#thread-palette").trigger("update");
+    $('.modal').hide();
+    var body = {'name': $('select#thread-palette').find(':selected').val()};
+    $.postJSON('/palette', body, function() {
+      $.getJSON('/threads', function(threads) {
+        console.log("threads: " + JSON.stringify(threads));
+        $.each(threads, function(i, thread) {
+          console.log("doing: " + JSON.stringify(thread));
+          $('[data-field-name="color-' + thread.hex + '"]').text(thread.name);
+          var thread_description = thread.manufacturer;
+          if (thread.number) {
+            thread_description += " #" + thread.number;
+          }
+          $('[data-field-name="thread-' + thread.hex + '"]').text(thread_description);
+        });
+      });
+    });
+  });
+
+  $('#modal-no').on('click', function(){
+    var select = $("select#thread-palette");
+    select.find('[value="' + select.data('current-value') + '"]').prop('selected', true);
+    $('.modal').hide();
   });
 
   //Checkbox
-  $(':checkbox').change(function() {
-    var checked = $(this).prop('checked');
+  $(':checkbox').on('change initialize', function() {
     var field_name = $(this).attr('data-field-name');
 
-    $('.' + field_name).toggle(checked);
+    $('.' + field_name).toggle($(this).prop('checked'));
     setPageNumbers();
-
-    $.postJSON('/settings/' + field_name, {value: checked});
+  }).on('change', function() {
+    $.postJSON('/settings/' + field_name, {value: $(this).prop('checked')});
   });
 
   // Logo
@@ -295,4 +327,3 @@ $(function() {
       $.postJSON('/defaults', {'value': settings});
   });
 });
-
diff --git a/print/resources/style.css b/print/resources/style.css
index 97dee6a8..58ec8714 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -214,9 +214,6 @@ body {
     border-bottom: 1px solid rgb(188, 188, 188);
     border-bottom: 1px solid rgba(129, 129, 129, 0.5);
     box-shadow: 0 1px 1px 1px rgba(194, 191, 191, 0.5);
-  }
-
-  #settings-ui div {
     text-align: left;
     font-size: 12pt;
   }
@@ -238,6 +235,33 @@ body {
     margin-bottom: 1em;
   }
 
+  #modal-background {
+    display: none;
+    z-index: 3;
+    position: fixed;
+    background: black;
+    opacity: 0.5;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  #modal-content {
+    display: none;
+    z-index: 4;
+    position: fixed;
+    width: 50%;
+    height: 25%%;
+    top: 200px;
+    left: 25%;
+    background: rgb(255, 255, 255);
+    border-bottom: 1px solid rgb(188, 188, 188);
+    box-shadow: 0 1px 1px 1px rgb(194, 191, 191);
+    text-align: center;
+    font-size: 16pt;
+  }
+
 /* Header */
 
 
diff --git a/print/templates/color_swatch.html b/print/templates/color_swatch.html
index 21cc0c21..6785b080 100644
--- a/print/templates/color_swatch.html
+++ b/print/templates/color_swatch.html
@@ -1,18 +1,18 @@
-  
+
   {% if printview != 'detailedview' %}
   <div class="color-swatch">
     <div class="swatch-info">
        <svg width="100%" height="100%" class="color-swatch-svg" xmlns="http://www.w3.org/2000/svg">
         <rect fill="rgb{{ color_block.color.rgb }}" stroke="rgb(192, 192, 192)" stroke-width="1px" width="100%" height="100%" />
         <text fill="rgb{{ color_block.color.font_color }}">
-            <tspan dy="1.2em" x="2mm" y="2mm" class="color-name">{{ _('Color') }}: </tspan><tspan data-field-name="color-{{ color_block.color.hex_digits }}">{{ color_block.color.thread_name }}</tspan>
+            <tspan dy="1.2em" x="2mm" y="2mm" class="color-name">{{ _('Color') }}: </tspan><tspan data-field-name="color-{{ color_block.color.hex_digits }}">{{ color_block.color.name }}</tspan>
             {# We don't want to see rgb if we have more than 7 colorSwatches #}
             {% if color_blocks|length < 7 %}
             <tspan dy="1.2em" x="2mm" class="color-rgb">{{ _('rgb') }}: {{ color_block.color.rgb }}</tspan>
             {% endif %}
             {# We don't want to see thread_used if we have more than 7 colorSwatches to show #}
-            {% if color_blocks|length < 7 %}       
-            <tspan dy="1.2em" x="2mm" class="swatch-thread">{{ _('thread used') }}: {{ color_block.color.thread_description }}</tspan>
+            {% if color_blocks|length < 7 %}
+            <tspan dy="1.2em" x="2mm" class="swatch-thread" data-field-name="thread-{{ color_block.color.hex_digits }}">{{ _('thread') }}: {{ color_block.color.manufacturer }} {{ "#" + color_block.color.number if color_block.color.number }}</tspan>
             {% endif %}
             {# We don't want to see num_stitch if we have more than 49 colorSwatches to show #}
             {% if color_blocks|length < 49 %}
@@ -27,9 +27,9 @@
       </svg>
     </div>
   </div>
-  
+
   {% else %}
-  
+
   <div class="color-swatch">
     <div class="swatch-info">
        <svg width="100%" height="100%" class="colorSwatchSVG" xmlns="http://www.w3.org/2000/svg">
@@ -37,9 +37,9 @@
        </svg>
        <div class="color-info">
         <div>
-          <p><span class="color-name">{{ _('Color') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span></p>
+          <p><span class="color-name">{{ _('Color') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.name }}</span></p>
           <p><span class="color-rgb">{{ _('rgb') }}:</span><span>{{ color_block.color.rgb }}</span></p>
-          <p><span class="swatch-thread">{{ _('thread used') }}:</span><span>{{ color_block.color.thread_description }}</span></p>
+          <p><span class="swatch-thread">{{ _('thread') }}:</span><span data-field-name="thread-{{ color_block.color.hex_digits }}" contenteditable="true">{{ color_block.color.manufacturer }} {{ "#" + color_block.color.number if color_block.color.number }}</span></p>
           <p><span class="swatch-stitches">{{ _('# stitches') }}:</span><span>{{ color_block.num_stitches }}</span></p>
           <p><span class="swatch-stops">{{ _('# stops') }}:</span><span>{{ color_block.num_stops }}</span></p>
           <p><span class="swatch-trims">{{ _('# trims') }}:</span><span>{{ color_block.num_trims }}</span></p>
@@ -47,5 +47,5 @@
       </div>
     </div>
   </div>
-  
+
   {%endif %}
diff --git a/print/templates/operator_detailedview.html b/print/templates/operator_detailedview.html
index f78028d7..0b948cb0 100644
--- a/print/templates/operator_detailedview.html
+++ b/print/templates/operator_detailedview.html
@@ -1,7 +1,7 @@
         <header>
           {% include 'headline.html' %}
         </header>
-        
+
         <main>
           <div class="operator-job-info">
             <div class="job-headline">
@@ -39,7 +39,7 @@
             </div>
             {% endif %}
             {% for color_block in color_block_part %}
-            
+
             <div style="display: table-row;">
               <p class="operator-svg operator-colorswatch">
                 <svg xmlns="http://www.w3.org/2000/svg">
@@ -53,11 +53,12 @@
                   {{ color_block.svg_preview|safe }}
               </p>
               <p>
-                <span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span>
+                <span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.name }}</span>
                 <span>{{ color_block.color.rgb }}</span>
+                <span data-field-name="thread-{{ color_block.color.hex_digits }}" contenteditable="true">{{ color_block.color.manufacturer }} {{ "#" + color_block.color.number if color_block.color.number }}</span>
               </p>
               <p>
-                <span>{{ _('thread used') }}: {{ color_block.color.thread_description }}</span>
+                <span>{{ _('thread used') }}:</span>
                 <span>{{ _('# stitches') }}: {{ color_block.num_stitches }}</span>
               </p>
               <p>
@@ -71,7 +72,5 @@
           {% endfor %}
           </div>
         </main>
-        
+
         {% include 'footer.html' %}
-        
-           
diff --git a/print/templates/ui.html b/print/templates/ui.html
index f7246962..112a342e 100644
--- a/print/templates/ui.html
+++ b/print/templates/ui.html
@@ -9,26 +9,53 @@
           {{ _('⚠ lost connection to Ink/Stitch') }}
         </div>
     </div>
-    
+
     <div id="settings-ui">
       <p id="close-settings">X</p>
       <h1>{{ _('Settings') }}</h1>
-      <div>
-        <p>{{ _('Printing Size') }}: 
-          <select id="printing-size" data-field-name="paper-size">
-            <option value="letter" selected="selected">Letter</option>
-            <option value="a4">A4</option>
+      <fieldset>
+        <legend>{{ _('Page Setup') }}</legend>
+        <div>
+          <p>{{ _('Printing Size') }}:
+            <select id="printing-size" data-field-name="paper-size">
+              <option value="letter" selected="selected">Letter</option>
+              <option value="a4">A4</option>
+            </select>
+          </p>
+        </div>
+        <div>
+         <fieldset>
+            <legend>{{ _('Print Layouts') }}</legend>
+            <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>
+          <button id="save-settings" title="{{ _("Includes these Page Setup settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>{{ _('Design') }}</legend>
+        <p>{{ _('Thread Palette') }}:
+          <select id="thread-palette" data-field-name="thread-palette">
+            {% if selected_palette is none %}
+              <option value="" selected>None</option>
+            {% endif %}
+            {% for palette in palettes %}
+              <option value="{{ palette }}" {{ "selected" if palette == selected_palette else "" }}>{{ palette }}</option>
+            {% endfor %}
           </select>
         </p>
-      </div>
-      <div>
-       <fieldset>
-          <legend>{{ _('Print Layouts') }}:</legend>
-          <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>
-        <button id="save-settings" title="{{ _("Includes all settings visible here and also the icon.") }}">{{ _("Save as defaults") }}</button>
-      </div>
+      </fieldset>
+    </div>
+
+    <div id="modal-background" class="modal"></div>
+    <div id="modal-content" class="modal">
+        <p>
+          {{ _("Changing the thread palette will cause thread names and catalog numbers to be recalculated based on the new palette.  Any changes you have made to color or thread names will be lost.  Are you sure?") }}
+        </p>
+        <p>
+          <button id="modal-yes">{{ _("Yes") }}</button>
+          <button id="modal-no">{{ _("No") }}</button>
+        </p>
     </div>