Print Estimated Time (#341)

9 files changed, 231 insertions, 109 deletions

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index fcc3cb13..a0d61f3c 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -100,11 +100,56 @@ function buildOpd(thumbnail_size = $('#operator-detailedview-thumbnail-size').va
 function setPageNumbers() {
   var totalPageNum = $('body').find('.page:visible').length;
   $('span.total-page-num').text(totalPageNum);
-  $( '.page:visible span.page-num' ).each(function( index ) {
+  $('.page:visible span.page-num').each(function( index ) {
     $(this).text(index + 1);
   });
 }
 
+// Calculate estimated time
+function setEstimatedTime() {
+  var speed = Math.floor($('#machine-speed').val() / 60); // convert to seconds
+  speed = (speed <= 0) ? 1 : speed;
+  var timeTrim = ($('#time-trims').val() == '') ? 0 : parseInt($('#time-trims').val());
+  var addToTotal = ($('#time-additional').val() == '') ? 0 : parseInt($('#time-additional').val());
+  var timeColorChange = ($('#time-color-change').val() == '') ? 0 : parseInt($('#time-color-change').val());
+
+  // operator detailed view
+  $('.estimated-time').each(function(index, item) {
+      var selector = $(this);
+      var stitchCount = parseInt($(selector).closest('p').find('.num-stitches').text().match(/\d+/));
+      var numTrims = parseInt($( selector ).closest('div').find('p span.num-trims').text().match(/\d+/));
+      var estimatedTime = stitchCount/speed + (timeTrim * numTrims);
+      writeEstimatedTime( selector, estimatedTime );
+  });
+  
+  // client detailed view
+  $('.cld-estimated-time').each(function(index, item) {
+      var selector = $(this);
+      var stitchCount = parseInt($(selector).closest('div.page').find('main .detailed .color-info span.num-stitches').text().match(/\d+/));
+      var numTrims = parseInt($( selector ).closest('div.page').find('main .detailed .color-info span.num-trims').text().match(/\d+/));
+      var estimatedTime = stitchCount/speed + (timeTrim * numTrims);
+      writeEstimatedTime( selector, estimatedTime );
+  });
+
+  var stitchCount = parseInt($('.total-num-stitches').first().text().match(/\d+/));
+  var numTrims = parseInt($('.total-trims').first().text().match(/\d+/));
+  var numColorBlocks = parseInt($('.num-color-blocks').first().text().match(/\d+/))-1; // the last color-block is not a color change
+  var selector = '.total-estimated-time';
+  var estimatedTime = stitchCount/speed + (timeTrim * numTrims) + (timeColorChange * numColorBlocks) + addToTotal;
+  writeEstimatedTime( selector, estimatedTime );
+}
+
+function attachLeadingZero(n) {
+    return (n < 10) ? ("0" + n) : n;
+}
+
+function writeEstimatedTime( selector, estimatedTime ) {
+  var hours = attachLeadingZero(Math.floor(estimatedTime / 3600));
+  var minutes = attachLeadingZero(Math.floor((estimatedTime - (hours*3600)) / 60));
+  var seconds = attachLeadingZero(Math.floor(estimatedTime % 60));
+  $(selector).text( hours + ':' + minutes + ':' + seconds );
+}
+
 // Scale SVG (fit || full size)
 function scaleSVG(element, scale = 'fit') {
 
@@ -127,30 +172,30 @@ function scaleSVG(element, scale = 'fit') {
 
 // set preview svg scale to fit into its box if display block and transform is not set
 function scaleAllSvg() {
-    $('.page').each(function() {
-      if( $(this).css('display') == 'block' ) {
-        if( $(this).find('.inksimulation svg').css('transform') == 'none') {
-          scaleSVG($(this).find('.inksimulation'), 'fit');
-        }
+  $('.page').each(function() {
+    if( $(this).css('display') == 'block' ) {
+      if( $(this).find('.inksimulation svg').css('transform') == 'none') {
+        scaleSVG($(this).find('.inksimulation'), 'fit');
       }
-    });
+    }
+  });
 }
 
 var saveTimerHandles = {};
 
 function setSVGTransform(figure, transform) {
-    var field_name = $(figure).data('field-name');
-    var scale = transform.match(/-?[\d\.]+/g)[0];
-    figure.find('svg').css({ transform: transform });
-    figure.find(".scale").text(parseInt(scale*100));
-
-    // avoid spamming updates
-    if (saveTimerHandles[field_name] != null)
-        clearTimeout(saveTimerHandles[field_name]);
-
-    saveTimerHandles[field_name] = setTimeout(function() {
-        $.postJSON('/settings/' + field_name, {value: transform});
-    }, 250);
+  var field_name = $(figure).data('field-name');
+  var scale = transform.match(/-?[\d\.]+/g)[0];
+  figure.find('svg').css({ transform: transform });
+  figure.find(".scale").text(parseInt(scale*100));
+
+  // avoid spamming updates
+  if (saveTimerHandles[field_name] != null)
+    clearTimeout(saveTimerHandles[field_name]);
+
+  saveTimerHandles[field_name] = setTimeout(function() {
+      $.postJSON('/settings/' + field_name, {value: transform});
+  }, 250);
 }
 
 $(function() {
@@ -206,16 +251,16 @@ $(function() {
 
     $(this).css({cursor: 'move'});
     $(this).on('mousemove', function(e) {
-          var p1 = { x: e.pageX, y: e.pageY };
-          // set modified translate
-          var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
-          transform[4] = start_offset.x + (p1.x - p0.x);
-          transform[5] = start_offset.y + (p1.y - p0.y);
-
-          // I'd ike to use setSVGTransform() here but this code runs many
-          // times per second and it's just too CPU-intensive.
-          $(this).find('svg').css({transform: 'matrix(' + transform + ')'});
-      });
+      var p1 = { x: e.pageX, y: e.pageY };
+      // set modified translate
+      var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
+      transform[4] = start_offset.x + (p1.x - p0.x);
+      transform[5] = start_offset.y + (p1.y - p0.y);
+
+      // I'd ike to use setSVGTransform() here but this code runs many
+      // times per second and it's just too CPU-intensive.
+      $(this).find('svg').css({transform: 'matrix(' + transform + ')'});
+    });
   }).on('mouseup', function(e) {
     $(this).css({cursor: 'auto'});
     $(this).data('p0', null);
@@ -263,23 +308,25 @@ $(function() {
   // 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('initialize');
-            } else if (item.is('img')) {
-                item.attr('src', value);
-            } else if (item.is('select')) {
-                item.val(value).trigger('initialize');
-            } else if (item.is('input[type=range]')) {
-                item.val(value).trigger('initialize');
-                $('#display-thumbnail-size').html(value + 'mm');
-            } else if (item.is('figure.inksimulation')) {
-                setSVGTransform(item, value);
-            } else {
-                item.text(value);
-            }
-        });
+      $('[data-field-name="' + field_name + '"]').each(function(i, item) {
+        var item = $(item);
+        if (item.is(':checkbox')) {
+            item.prop('checked', value).trigger('initialize');
+        } else if (item.is('img')) {
+            item.attr('src', value);
+        } else if (item.is('select')) {
+            item.val(value).trigger('initialize');
+        } else if (item.is('input[type=range]')) {
+            item.val(value).trigger('initialize');
+            $('#display-thumbnail-size').text(value + 'mm');
+        } else if (item.is('input[type=number]')) {
+            item.val(value).trigger('initialize');
+        } else if (item.is('figure.inksimulation')) {
+            setSVGTransform(item, value);
+        } else {
+            item.text(value);
+        }
+      });
     });
 
     // wait until page size is set (if they've specified one) and then scale SVGs to fit and build operator detailed view
@@ -290,17 +337,15 @@ $(function() {
   });
 
   $('[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;
-      }
-    });
-
+    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 */
 
@@ -362,9 +407,9 @@ $(function() {
   // Operator detailed view: thumbnail size setting
   $(document).on('input', '#operator-detailedview-thumbnail-size', function() {
     var thumbnail_size_mm = $(this).val()  + 'mm';
-    $('#display-thumbnail-size').html( thumbnail_size_mm );
+    $('#display-thumbnail-size').text( thumbnail_size_mm );
   });
-   
+
   // Operator detailed view: thumbnail size setting action
   $('#operator-detailedview-thumbnail-size').change(function() {
     // set thumbnail size
@@ -411,7 +456,6 @@ $(function() {
   // View selection checkboxes
   $(':checkbox.view').on('change initialize', function() {
     var field_name = $(this).attr('data-field-name');
-
     $('.' + field_name).toggle($(this).prop('checked'));
     scaleAllSvg();
     setPageNumbers();
@@ -420,6 +464,23 @@ $(function() {
     $.postJSON('/settings/' + field_name, {value: $(this).prop('checked')});
   });
 
+  // Estimated Time
+  $('#machine-speed, #time-additional, #time-color-change, #time-trims').on('input initialize', function() {
+    setEstimatedTime();
+  }).on('change', function() {
+    var field_name = $(this).attr('data-field-name');
+    $.postJSON('/settings/' + field_name, {value: $(this).val()});
+  });
+
+  // Display Estimated Time checkboxes
+  $(':checkbox.time-display').on('input initialize', function() {
+    var field_name = $(this).attr('data-field-name');
+    $('.' + field_name).toggle($(this).prop('checked'));
+  }).on('change', function() {
+    var field_name = $(this).attr('data-field-name');
+    $.postJSON('/settings/' + field_name, {value: $(this).prop('checked')});
+  });
+
   // Realistic rendering checkboxes
   $(':checkbox.realistic').on('change', function(e) {
     console.log("realistic rendering checkbox");
@@ -485,37 +546,51 @@ $(function() {
     return true;
   });
 
+  setTimeout(function() {
+    setEstimatedTime();
+  }, 100);
+
   $('button.svg-realistic').click(function(e){
     $(this).find('input').click();
   });
 
   // Logo
   $('#logo-picker').change(function(e) {
-      var file = e.originalEvent.currentTarget.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);
+    var file = e.originalEvent.currentTarget.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["operator-detailedview-thumbnail-size"] = $("[data-field-name='operator-detailedview-thumbnail-size']").val();
-      settings["paper-size"] = $('select#printing-size').find(':selected').val();
-
-      var logo = $("figure.brandlogo img").attr('src');
-      if (logo.startsWith("data:")) {
-          settings["logo"] = logo;
-      }
+  $('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["operator-detailedview-thumbnail-size"] = $("[data-field-name='operator-detailedview-thumbnail-size']").val();
+    settings["paper-size"] = $('select#printing-size').find(':selected').val();
+
+    var logo = $("figure.brandlogo img").attr('src');
+    if (logo.startsWith("data:")) {
+        settings["logo"] = logo;
+    }
+
+    settings["machine-speed"] = $("[data-field-name='machine-speed']").val();
+    settings["time-additional"] = $("[data-field-name='time-additional']").val();
+    settings["time-color-change"] = $("[data-field-name='time-color-change']").val(); 
+    settings["time-trims"] = $("[data-field-name='time-trims']").val();
+
+    settings["time-clo"] = $("[data-field-name='time-clo']").val();
+    settings["time-cld"] = $("[data-field-name='time-cld']").val();
+    settings["time-opo"] = $("[data-field-name='time-opo']").val();
+    settings["time-opd"] = $("[data-field-name='time-opd']").val();
 
-      $.postJSON('/defaults', {'value': settings});
+    $.postJSON('/defaults', {'value': settings});
   });
 });
diff --git a/print/resources/style.css b/print/resources/style.css
index 174b21dd..5a1ccb44 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -198,13 +198,14 @@ body {
     background: transparent;
     border: 1px solid #413232;
     padding: 5px;
+    cursor: pointer;
   }
   
   #settings-ui button.active {
     border-bottom: 1px solid white;
   }
   
-  #settings-ui #ui-design {
+  #settings-ui .ui-tab {
     display: none;
   }
   
@@ -357,10 +358,11 @@ body {
       display: -ms-flexbox;   /* IE 10 */
     width: calc(100% - 50mm);
     height: 50%;
+    flex-grow: 1;
   }
 
   div.headline h1 {
-    font-size: 18pt;
+    font-size: 16pt;
   }
 
   div.headline p {
@@ -377,6 +379,14 @@ body {
     font-size: 10pt;
   }
 
+  .client-detailedview div.job-details {
+    padding-top: 6mm;
+  }
+
+  .operator-overview div.job-details, .client-overview div.job-details {
+    padding-top: 2mm;
+  }
+
   div.job-details > div {
     flex-grow: 1;
   }
@@ -735,7 +745,7 @@ body {
     display: none;
   }
   
-  .opd-color-block.medium span::before {
+  .opd-color-block.medium p > span::before {
     content: ' \00B7 ';
     line-height: 0;
     display: inline-block;
diff --git a/print/templates/color_swatch.html b/print/templates/color_swatch.html
index 71022f6f..fe64c855 100644
--- a/print/templates/color_swatch.html
+++ b/print/templates/color_swatch.html
@@ -37,11 +37,11 @@
        </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.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') }}:</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-trims">{{ _('# trims') }}:</span><span>{{ color_block.num_trims }}</span></p>
+          <p><span class="swatch-stitches">{{ _('# stitches') }}:</span><span class="num-stitches">{{ color_block.num_stitches }}</span></p>
+          <p><span class="swatch-trims">{{ _('# trims') }}:</span><span class="num-trims">{{ color_block.num_trims }}</span></p>
           <p><span class="swatch-stops">{{ _('stop after?') }}:</span><span>{{ _("yes") if color_block.stop_after else _("no") }}</span></p>
         </div>
       </div>
diff --git a/print/templates/headline.html b/print/templates/headline.html
index 369c370e..bf112dea 100644
--- a/print/templates/headline.html
+++ b/print/templates/headline.html
@@ -12,5 +12,5 @@
       <p class="header-field" data-label="{{ _('PURCHASE ORDER #:') }}" contenteditable="true" data-placeholder="{{ _('Enter purchase order number...') }}" data-field-name="purchase-order"></p>
   </div>
 
-  <div class="currentDate">{{ date|datetimeformat(_('%Y.%m.%d')) }}</div>
+  <div class="currentDate">{{ date|datetimeformat(_('%m/%d/%Y')) }}</div>
 </div>
diff --git a/print/templates/operator_detailedview.html b/print/templates/operator_detailedview.html
index ae578d9d..608b3661 100644
--- a/print/templates/operator_detailedview.html
+++ b/print/templates/operator_detailedview.html
@@ -22,16 +22,17 @@
           </p>
           <p>
             <span>{{ _('Unique Colors') }}: {{ job.num_colors }}</span>
-            <span>{{ _('Color Blocks') }}: {{ job.num_color_blocks }}</span>
+            <span class="num-color-blocks">{{ _('Color Blocks') }}: {{ job.num_color_blocks }}</span>
           </p>
           <p>
             <span>{{ _('Design box size') }}: {{ "%0.1fmm X %0.1fmm" | format(*job.dimensions) }}</span>
-            <span>{{ _('Total thread used') }}: {{job.estimated_thread }}</span>
-            <span>{{ _('Total stitch count') }}: {{job.num_stitches }}</span>
+            <!-- <span>{{ _('Total thread used') }}: {{job.estimated_thread }}</span> -->
+            <span class="total-num-stitches">{{ _('Total stitch count') }}: {{job.num_stitches }}</span>
+            <span class="time-opd">{{ ('Estimated time') }}: <span class="total-estimated-time"></span></span>
           </p>
           <p>
-            <span>{{ _('Total stops') }}: {{ job.num_stops }}</span>
-            <span>{{ _('Total trims') }}: {{ job.num_trims }}</span>
+            <span class="total-stops">{{ _('Total stops') }}: {{ job.num_stops }}</span>
+            <span class="total-trims">{{ _('Total trims') }}: {{ job.num_trims }}</span>
           </p>
           <p>
             <span></span>
@@ -53,20 +54,22 @@
                 {{ 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.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') }}:</span>
-              <span>{{ _('# stitches') }}: {{ color_block.num_stitches }}</span>
+              <!-- <span>{{ _('thread used') }}:</span> -->
+              <span class="num-stitches">{{ _('# stitches') }}: {{ color_block.num_stitches }}</span>
+              <span class="time-opd">{{ _('estimated time') }}: <span class="estimated-time"></span></span>
             </p>
             <p>
-              <span>{{ _('trims') }}: {{ color_block.num_trims }}</span>
+              <span class="num-trims">{{ _('trims') }}: {{ color_block.num_trims }}</span>
               <span>{{ _('stop after?') }}: {{ _("yes") if color_block.stop_after else _("no") }}</span>
+              <input type="hidden" class="num-stops" value="{{ '1' if color_block.stop_after else '0' }}" />
             </p>
             <p>
-              <span class="notes" contenteditable="true" data-field-name="operator-notes-block{{ loop.index }}" data-placeholder="{{ _("Enter operator notes...") }}"></span>
+              <span class="notes" contenteditable="true" data-field-name="operator-notes-block{{ loop.index }}" data-placeholder="{{ _('Enter operator notes...') }}"></span>
             </p>
           </div>
         {% endfor %}
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
index 048fd58e..359d4f50 100644
--- a/print/templates/operator_overview.html
+++ b/print/templates/operator_overview.html
@@ -13,13 +13,13 @@
                     <div class="table">
                       <p><span>{{ _('Design box size') }}:</span><span>{{ "%0.1fmm X %0.1fmm" | format(*job.dimensions) }}</span></p>
                       <p><span>{{ _('Total stitch count') }}:</span><span>{{job.num_stitches }}</span></p>
-                      <p><span>{{ _('Total thread used') }}:</span><span>{{job.estimated_thread }}</span></p>
+                      <p><span>{{ _('Total thread used') }}:</span><span>{{job.total_thread_used }}</span></p>
                     </div>
                 </div>
                 <div>
-                    <div class="table">
+                    <div class="table time-opo">
                       <p><span>{{ _('Job estimated time') }}:</span></p>
-                      <p><span>{{ job.estimated_time }}</span></p>
+                      <p><span class="total-estimated-time"></span></p>
                     </div>
                 </div>
             </div>
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
index 241ac88b..0c6bbefe 100644
--- a/print/templates/print_detail.html
+++ b/print/templates/print_detail.html
@@ -3,13 +3,13 @@
             <div class="job-details">
                 <div>
                     <div class="table">
-                      <p><span>{{ _('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>{{ _('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>
                     </div>
                 </div>
                 <div>
-                    <div class="table">
+                    <div class="table time-cld">
                       <p><span>{{ _('Estimated time') }}:</span></p>
-                      <p><span>{{ color_block.estimatedtime }}</span></p>
+                      <p><span class="cld-estimated-time"></span></p>
                   </div>
                 </div>
             </div>
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
index cfbb81d1..a2548070 100644
--- a/print/templates/print_overview.html
+++ b/print/templates/print_overview.html
@@ -17,9 +17,9 @@
                     </div>
                 </div>
                 <div>
-                    <div class="table">
+                    <div class="table time-clo">
                       <p><span>{{ _('Job estimated time') }}:</span></p>
-                      <p><span>{{ job.estimated_time }}</span></p>
+                      <p><span class="total-estimated-time"></span></p>
                     </div>
                 </div>
             </div>
diff --git a/print/templates/ui.html b/print/templates/ui.html
index bc6c57b9..5d565aba 100644
--- a/print/templates/ui.html
+++ b/print/templates/ui.html
@@ -16,6 +16,7 @@
       
       <div id="tabs">
         <button class="tab active">{{ _('Page Setup') }}</button>
+        <button class="tab">{{ _('Estimated Time') }}</button>
         <button class="tab">{{ _('Design') }}</button>
       </div>
       <div id="fieldsets-ui">
@@ -40,10 +41,43 @@
               <p style="text-indent: 1.5em;">{{ _('Thumbnail size') }}: <input type="range" min="15" max="110" value="15" step="5" id="operator-detailedview-thumbnail-size" data-field-name="operator-detailedview-thumbnail-size" style="vertical-align: middle;"> <span id="display-thumbnail-size">15mm</span>
                </p>
             </fieldset>
-            <button id="save-settings" title="{{ _("Includes these Page Setup settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
+            <button class="save-settings" title="{{ _("Includes these Page Setup, estimated time settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
           </div>
         </fieldset>
-        <fieldset id="ui-design">
+        <fieldset id="ui-time" class="ui-tab">
+          <legend>{{ _('Estimated Time') }}</legend>
+          <fieldset>
+            <legend>{{ _('Machine Settings') }}</legend>
+            <p>
+              <input class="view" type="number" id="machine-speed" data-field-name="machine-speed" min="0" value="700" title="{{ _('Average Machine Speed') }}" /> 
+              <label for="machine-speed">{{ _('stitches per minute ') }}</label>
+            </p>
+          </fieldset>
+          <fieldset>
+            <legend>{{ _('Time Factors') }}</legend>
+            <p>
+                <input type="number" id="time-additional" data-field-name="time-additional" min="0" value="0" />
+                <label for="time-additional" title="{{ _('Includes average time for preparing the machine, thread breaks and/or bobbin changes, etc.') }}">{{ _('seconds to add to total time*') }}</label>
+            </p>
+            <p>
+              <input type="number" id="time-color-change" data-field-name="time-color-change" min="0" value="10" />
+              <label for="time-color-change" title="{{ _('This will be added to the total time.') }}">{{ _('seconds needed for a color change*') }}</label></p>
+            <p>
+              <input type="number" id="time-trims" data-field-name="time-trims" min="0" value="10" />
+              <label for="time-trims">{{ _('seconds needed for trim') }}</label></p>
+          </fieldset>
+          <fieldset>
+            <legend>{{ _('Display Time On') }}</legend>
+            <p>
+              <p><input type="checkbox" class="time-display" id="time-clo" data-field-name="time-clo" /><label for="time-clo">{{ _('Client Overview') }}</label></p>
+              <p><input type="checkbox" class="time-display" id="time-cld" data-field-name="time-cld" /><label for="time-cld">{{ _('Client Detailed View') }}</label></p>
+              <p><input type="checkbox" class="time-display" id="time-opo" data-field-name="time-opo" CHECKED /><label for="time-opo">{{ _('Operator Overview') }}</label></p>
+              <p><input type="checkbox" class="time-display" id="time-opd" data-field-name="time-opd" CHECKED /><label for="time-opd">{{ _('Operator Detailed View') }}</label></p>
+            </p>
+          </fieldset>
+          <button class="save-settings" title="{{ _("Includes these Page Setup, estimated time settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
+        </fieldset>
+        <fieldset id="ui-design" class="ui-tab">
           <legend>{{ _('Design') }}</legend>
           <p class="select-container"><label for="thread-palette">{{ _('Thread Palette') }}:</label>
             <select id="thread-palette" data-field-name="thread-palette">