[ReelCalculator] Added the possibility to load common presets.

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>
@@ -80,6 +112,12 @@
 
 {% block scripts %}
     <script>
+        function loadPreset(element) {
+            var target = document.getElementById(element.dataset.target);
+
+            target.value = element.dataset.value;
+        }
+
         function updateReelCalc() {
             var dia_inner = document.getElementById('reel_dia_inner').value;
             var dia_outer = document.getElementById('reel_dia_outer').value;

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>