mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-21 09:35:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Migrated SMD reel calculator tool logic to stimulus.

Browse source
This commit is contained in:
Jan Böhmer 2022-08-03 20:56:00 +02:00
parent cfd9713e5d
commit 1c7c3bf2c5
3 changed files with 123 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

16
assets/controllers/elements/preset_input_controller.js Normal file
View file

@ -0,0 +1,16 @@
import {Controller} from "@hotwired/stimulus";
export default class extends Controller {
static targets = ["input"];
connect() {
if(!this.inputTarget) {
throw new Error("Target input not found");
}
}
load(event) {
//Use the data-value attribute to load the value of our target input
this.inputTarget.value = event.target.dataset.value;
}
}

53
assets/controllers/pages/reelCalculator_controller.js Normal file
View file

@ -0,0 +1,53 @@
import {Controller} from "@hotwired/stimulus";
import * as bootbox from "bootbox";
export default class extends Controller {
static values = {
errorMissingValues: String,
errorOuterGreaterInner: String,
}
updateReelCalc() {
const dia_inner = document.getElementById('reel_dia_inner').value;
const dia_outer = document.getElementById('reel_dia_outer').value;
const tape_thickness = document.getElementById('reel_tape_thick').value;
const part_distance = document.getElementById('reel_part_distance').value;
if (dia_inner == "" || dia_outer == "" || tape_thickness == "") {
bootbox.alert(this.errorMissingValuesValue);
return;
}
if (dia_outer**dia_outer < dia_inner**dia_inner) {
bootbox.alert(this.errorOuterGreaterInnerValue);
return;
}
const length = Math.PI * (dia_outer * dia_outer - dia_inner * dia_inner ) / (4 * tape_thickness);
let length_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);
}
}

145
templates/Tools/ReelCalculator/main.html.twig
View file

@ -10,86 +10,96 @@
{% block card_content %} {% block card_content %}
<p class="text-muted">{% trans %}tools.reel_calc.explanation{% endtrans %}</p> <p class="text-muted">{% trans %}tools.reel_calc.explanation{% endtrans %}</p>
<div class="row"> <div class="row" {{ stimulus_controller('pages/reelCalculator', {
'errorMissingValues': 'tools.reel_calc.missing_values.error' | trans,
'errorOuterGreaterInner': 'tools.reel_calc.outer_greater_inner_error' | trans,
}) }}>
<div class="col-sm-4"> <div class="col-sm-4">
<img src="{{ asset('img/smd_reel/smd_reel.svg') }}" alt="Sizes explanation" class="img-fluid img-thumbnail"> <img src="{{ asset('img/smd_reel/smd_reel.svg') }}" alt="Sizes explanation" class="img-fluid img-thumbnail">
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<div class="form-group row"> <div class="row mb-2">
<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> <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"> <div class="col-sm-8">
<div class="input-group" {{ stimulus_controller('elements/preset_input') }}>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6> <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-value="60" {{ stimulus_action('elements/preset_input', 'load') }}>60 mm Reel</button>
<button class="dropdown-item" data-target="reel_dia_inner" data-value="62" onclick="loadPreset(this);">62 mm Reel</button> <button class="dropdown-item" data-value="62" {{ stimulus_action('elements/preset_input', 'load') }}>62 mm Reel</button>
</div>
<input class="form-control" id="reel_dia_inner" type="number" min="0" {{ stimulus_target('elements/preset_input', 'input') }}>
<span class="input-group-text">mm</span>
</div> </div>
<input class="form-control" id="reel_dia_inner" type="number" min="0">
<span class="input-group-text">mm</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="row mb-2">
<label for="reel_dia_outer" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.outer_dia{% endtrans %} <var>d<sub>1</sub></var>:</label> <label for="reel_dia_outer" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.outer_dia{% endtrans %} <var>d<sub>1</sub></var>:</label>
<div class="col-sm-8 input-group"> <div class="col-sm-8">
<input class="form-control" id="reel_dia_outer" type="number" min="0"> <div class="input-group">
<span class="input-group-text">mm</span> <input class="form-control" id="reel_dia_outer" type="number" min="0">
<span class="input-group-text">mm</span>
</div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="mb-2 row">
<label for="reel_tape_thick" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.tape_thick{% endtrans %} <var>a</var>:</label> <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"> <div class="col-sm-8">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="input-group" {{ stimulus_controller('elements/preset_input') }}>
<div class="dropdown-menu"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6> <div class="dropdown-menu">
<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> <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
<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="0.8" {{ stimulus_action('elements/preset_input', 'load') }}>8 mm Paper Tape 0603 (0.8 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> <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.85" {{ stimulus_action('elements/preset_input', 'load') }}>8 mm Paper Tape 0805 (0.85 mm)</button>
<div class="dropdown-divider"></div> <button class="dropdown-item" data-target="reel_tape_thick" data-value="1" {{ stimulus_action('elements/preset_input', 'load') }}>8 mm Paper Tape 1206 (1 mm)</button>
<button class="dropdown-item" data-target="reel_tape_thick" data-value="0.9" onclick="loadPreset(this);">8 mm Blister 0603 (0.9 mm)</button> <div class="dropdown-divider"></div>
<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="0.9" {{ stimulus_action('elements/preset_input', 'load') }}>8 mm Blister 0603 (0.9 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> <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.95" {{ stimulus_action('elements/preset_input', 'load') }}>8 mm Blister 0805 (0.95 mm)</button>
<button class="dropdown-item" data-target="reel_tape_thick" data-value="1.1" {{ stimulus_action('elements/preset_input', 'load') }}>8 mm Blister 1206 (1.1 mm)</button>
</div>
<input class="form-control" id="reel_tape_thick" type="number" min="0" {{ stimulus_target('elements/preset_input', 'input') }}>
<span class="input-group-text">mm</span>
</div> </div>
<input class="form-control" id="reel_tape_thick" type="number" min="0">
<span class="input-group-text">mm</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="mb-2 row">
<label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.part_distance{% endtrans %} <var>b</var>:</label> <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"> <div class="col-sm-8">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="input-group" {{ stimulus_controller('elements/preset_input') }}>
<div class="dropdown-menu"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6> <div class="dropdown-menu">
<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> <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
</div> <button class="dropdown-item" data-target="reel_part_distance" data-value="4" {{ stimulus_action('elements/preset_input', 'load') }}>8 mm Paper Tape 0603/0805/1206 (4 mm)</button>
</div>
<input class="form-control" id="reel_part_distance" type="number" min="0"> <input class="form-control" id="reel_part_distance" type="number" min="0" {{ stimulus_target('elements/preset_input', 'input') }}>
<span class="input-group-text">mm</span> <span class="input-group-text">mm</span>
</div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="row mb-2">
<div class="col-sm-8 offset-sm-4 input-group"> <div class="col-sm-8 offset-sm-4 ">
<button type="button" onclick="updateReelCalc()" class="btn btn-primary">{% trans %}tools.reel_calc.update{% endtrans %}</button> <button type="button" {{ stimulus_action('pages/reelCalculator', 'updateReelCalc') }} class="btn btn-primary">{% trans %}tools.reel_calc.update{% endtrans %}</button>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.parts_per_meter{% endtrans %}:</label> <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.parts_per_meter{% endtrans %}:</label>
<div class="col-sm-8 input-group"> <div class="col-sm-8">
<span class="form-control-plaintext" id="result_parts_per_meter"></span> <span class="form-control-plaintext" id="result_parts_per_meter"></span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.result_length{% endtrans %}:</label> <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.result_length{% endtrans %}:</label>
<div class="col-sm-8 input-group"> <div class="col-sm-8">
<span class="form-control-plaintext" id="result_length"></span> <span class="form-control-plaintext" id="result_length"></span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.result_amount{% endtrans %}:</label> <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.result_amount{% endtrans %}:</label>
<div class="col-sm-8 input-group"> <div class="col-sm-8">
<span class="form-control-plaintext" id="result_amount"></span> <span class="form-control-plaintext" id="result_amount"></span>
</div> </div>
</div> </div>
@ -99,53 +109,6 @@
{% block scripts %} {% block scripts %}
<script> <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;
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);
}
</script> </script>
{% endblock %} {% endblock %}