From 21f0727509f84626e7c4755c378ad23157b4abee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <jan.h.boehmer@gmx.de>
Date: Wed, 3 Jun 2020 22:09:13 +0200
Subject: [PATCH] [ReelCalculator] Added the possibility to load common
 presets.

---
 templates/Tools/ReelCalculator/main.html.twig | 124 ++++++++++++------
 translations/messages.en.xlf                  |  12 ++
 2 files changed, 93 insertions(+), 43 deletions(-)

diff --git a/templates/Tools/ReelCalculator/main.html.twig b/templates/Tools/ReelCalculator/main.html.twig
index de6d5cc7..e830cdc2 100644
--- a/templates/Tools/ReelCalculator/main.html.twig
+++ b/templates/Tools/ReelCalculator/main.html.twig
@@ -1,5 +1,7 @@
 {% extends "main_card.html.twig" %}
 
+{# Reel and tape values according to this PDF: https://www.vishay.com/docs/20014/smdpack.pdf #}
+
 {% block title %}{% trans %}tools.reel_calc.title{% endtrans %}{% endblock %}
 
 {% block card_title %}
@@ -7,6 +9,7 @@
 {% endblock %}
 
 {% block card_content %}
+    <p class="text-muted">{% trans %}tools.reel_calc.explanation{% endtrans %}</p>
     <div class="row">
         <div class="col-sm-4">
             <img src="{{ asset('img/smd_reel/smd_reel.svg') }}" alt="Sizes explanation" class="img-fluid img-thumbnail">
@@ -15,7 +18,15 @@
             <div class="form-group row">
                 <label for="reel_dia_inner" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.inner_dia{% endtrans %} <var>d<sub>0</sub></var>:</label>
                 <div class="col-sm-8 input-group">
-                    <input class="form-control" id="reel_dia_inner" value="60" type="number" min="0">
+                    <div class="input-group-prepend">
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                        <div class="dropdown-menu">
+                            <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
+                            <button class="dropdown-item" data-target="reel_dia_inner" data-value="60" onclick="loadPreset(this);">60 mm Reel</button>
+                            <button class="dropdown-item" data-target="reel_dia_inner" data-value="62" onclick="loadPreset(this);">62 mm Reel</button>
+                        </div>
+                    </div>
+                    <input class="form-control" id="reel_dia_inner" type="number" min="0">
                     <div class="input-group-append">
                         <span class="input-group-text">mm</span>
                     </div>
@@ -33,7 +44,20 @@
             <div class="form-group row">
                 <label for="reel_tape_thick" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.tape_thick{% endtrans %} <var>a</var>:</label>
                 <div class="col-sm-8 input-group">
-                    <input class="form-control" id="reel_tape_thick" type="number" min="0,8" value="0.6">
+                    <div class="input-group-prepend">
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                        <div class="dropdown-menu">
+                            <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
+                            <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.8" onclick="loadPreset(this);">8 mm Paper Tape 0603 (0.8 mm)</button>
+                            <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.85" onclick="loadPreset(this);">8 mm Paper Tape 0805 (0.85 mm)</button>
+                            <button class="dropdown-item" data-target="reel_tape_thick" data-value="1" onclick="loadPreset(this);">8 mm Paper Tape 1206 (1 mm)</button>
+                            <div class="dropdown-divider"></div>
+                            <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.9" onclick="loadPreset(this);">8 mm Blister 0603 (0.9 mm)</button>
+                            <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.95" onclick="loadPreset(this);">8 mm Blister 0805 (0.95 mm)</button>
+                            <button class="dropdown-item" data-target="reel_tape_thick" data-value="1.1" onclick="loadPreset(this);">8 mm Blister 1206 (1.1 mm)</button>
+                        </div>
+                    </div>
+                    <input class="form-control" id="reel_tape_thick" type="number" min="0">
                     <div class="input-group-append">
                         <span class="input-group-text">mm</span>
                     </div>
@@ -42,7 +66,15 @@
             <div class="form-group row">
                 <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.part_distance{% endtrans %} <var>b</var>:</label>
                 <div class="col-sm-8 input-group">
-                    <input  class="form-control" id="reel_part_distance" value="4" type="number" min="0">
+                    <div class="input-group-prepend">
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                        <div class="dropdown-menu">
+                            <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
+                            <button class="dropdown-item" data-target="reel_part_distance" data-value="4" onclick="loadPreset(this);">8 mm Paper Tape 0603/0805/1206 (4 mm)</button>
+                        </div>
+                    </div>
+
+                    <input  class="form-control" id="reel_part_distance" type="number" min="0">
                     <div class="input-group-append">
                         <span class="input-group-text">mm</span>
                     </div>
@@ -79,48 +111,54 @@
 {% endblock %}
 
 {% block scripts %}
-<script>
-    function updateReelCalc() {
-        var dia_inner = document.getElementById('reel_dia_inner').value;
-        var dia_outer = document.getElementById('reel_dia_outer').value;
-        var tape_thickness = document.getElementById('reel_tape_thick').value;
-        var part_distance = document.getElementById('reel_part_distance').value;
+    <script>
+        function loadPreset(element) {
+            var target = document.getElementById(element.dataset.target);
 
-        if (dia_inner == "" || dia_outer == "" || tape_thickness == "") {
-            bootbox.alert("{% trans %}tools.reel_calc.missing_values.error{% endtrans %}");
-            return;
+            target.value = element.dataset.value;
         }
 
-        if (dia_outer**dia_outer < dia_inner**dia_inner) {
-            bootbox.alert("{% trans %}tools.reel_calc.outer_greater_inner_error{% endtrans %}");
-            return;
+        function updateReelCalc() {
+            var dia_inner = document.getElementById('reel_dia_inner').value;
+            var dia_outer = document.getElementById('reel_dia_outer').value;
+            var tape_thickness = document.getElementById('reel_tape_thick').value;
+            var part_distance = document.getElementById('reel_part_distance').value;
+
+            if (dia_inner == "" || dia_outer == "" || tape_thickness == "") {
+                bootbox.alert("{% trans %}tools.reel_calc.missing_values.error{% endtrans %}");
+                return;
+            }
+
+            if (dia_outer**dia_outer < dia_inner**dia_inner) {
+                bootbox.alert("{% trans %}tools.reel_calc.outer_greater_inner_error{% endtrans %}");
+                return;
+            }
+
+            var length = Math.PI * (dia_outer * dia_outer - dia_inner * dia_inner ) / (4 * tape_thickness);
+
+            var legth_formatted = length.toFixed(2) + ' mm';
+
+            if (length > 1000) {
+                length_formatted = (length / 1000).toFixed(2) + ' m';
+            } else if (length > 10) {
+                length_formatted = (length / 10).toFixed(2) + ' cm';
+            }
+
+            document.getElementById('result_length').textContent = length_formatted;
+
+            //Skip if no part_distance was given
+            if (part_distance == "" || part_distance == 0) {
+                return;
+            }
+
+            var parts_per_meter = 1 / (part_distance / 1000);
+
+            document.getElementById('result_parts_per_meter').textContent = parts_per_meter.toFixed(2) + ' 1/m';
+
+            var parts_amount = (length/1000) * parts_per_meter;
+
+            document.getElementById('result_amount').textContent = Math.floor(parts_amount);
+
         }
-
-        var length = Math.PI * (dia_outer * dia_outer - dia_inner * dia_inner ) / (4 * tape_thickness);
-
-        var legth_formatted = length.toFixed(2) + ' mm';
-
-        if (length > 1000) {
-            length_formatted = (length / 1000).toFixed(2) + ' m';
-        } else if (length > 10) {
-            length_formatted = (length / 10).toFixed(2) + ' cm';
-        }
-
-        document.getElementById('result_length').textContent = length_formatted;
-
-        //Skip if no part_distance was given
-        if (part_distance == "" || part_distance == 0) {
-            return;
-        }
-
-        var parts_per_meter = 1 / (part_distance / 1000);
-
-        document.getElementById('result_parts_per_meter').textContent = parts_per_meter.toFixed(2) + ' 1/m';
-
-        var parts_amount = (length/1000) * parts_per_meter;
-
-        document.getElementById('result_amount').textContent = Math.floor(parts_amount);
-
-    }
-</script>
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/translations/messages.en.xlf b/translations/messages.en.xlf
index 184f8379..15b0cfa0 100644
--- a/translations/messages.en.xlf
+++ b/translations/messages.en.xlf
@@ -9291,5 +9291,17 @@ Element 3</target>
         <target>Please fill in all values!</target>
       </segment>
     </unit>
+    <unit id="k.OEkUU" name="tools.reel_calc.load_preset">
+      <segment>
+        <source>tools.reel_calc.load_preset</source>
+        <target>Load preset</target>
+      </segment>
+    </unit>
+    <unit id="xIL4yg1" name="tools.reel_calc.explanation">
+      <segment>
+        <source>tools.reel_calc.explanation</source>
+        <target>This calculator gives you an estimation, how many parts are remaining on an SMD reel. Measure the noted the dimensions on the reel (or use some of the presets) and click "Update" to get an result.</target>
+      </segment>
+    </unit>
   </file>
 </xliff>