152 lines
7.1 KiB
PHP
152 lines
7.1 KiB
PHP
@extends('layouts.layout')
|
||
|
||
<!-- Секция, содержимое которой обычный текст. -->
|
||
@section('title', 'Калькулятор')
|
||
|
||
@section('content')
|
||
<section class="hero">
|
||
<!-- Hero content: will be in the middle -->
|
||
<div class="hero-body is-justify-content-center">
|
||
<div class="field has-addons has-addons-centered">
|
||
<label class="control">
|
||
<input id="calculate" class="input" type="text" placeholder="Введите общий вес заказа, кг" size="30">
|
||
</label>
|
||
<div class="control">
|
||
<button class="button is-static">
|
||
Рассчитать
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="hero">
|
||
<!-- Hero content: will be in the middle -->
|
||
<div class="hero-body is-justify-content-center">
|
||
<div class="table-container">
|
||
|
||
<table class="table is-hoverable is-fullwidth">
|
||
<thead>
|
||
<tr>
|
||
<th>Номер</th>
|
||
<th><abbr title="Наименование ингредиента">Наименование</abbr></th>
|
||
<th><abbr title="Остаток на складе, кг">Остаток</abbr></th>
|
||
<th><abbr title="Эталонный вес одного замеса, кг">Вес замеса</abbr></th>
|
||
<th><abbr title="Общий вес заказа, кг">Общий вес</abbr></th>
|
||
<th><abbr title="Коэффициент в доли рецепта, %">Коэффициент</abbr></th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Номер</th>
|
||
<th><abbr title="Наименование ингредиента">Наименование</abbr></th>
|
||
<th><abbr title="Остаток на складе, кг">Остаток</abbr></th>
|
||
<th><abbr title="Вес одного замеса, кг">Вес замеса</abbr></th>
|
||
<th><abbr title="Общий вес заказа, кг">Общий вес</abbr></th>
|
||
<th><abbr title="Коэффициент в доли рецепта, %">Коэффициент</abbr></th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
|
||
@foreach ($elements as $key => $element)
|
||
<tr>
|
||
<th> {{ $key + 1 }}</th>
|
||
<td>{{ $element['name'] }}</td>
|
||
<td>{{ $element['remainder'] }}</td>
|
||
<td>{{ $element['batch_weight'] }}</td>
|
||
<td id="{{ $element['code'] }}">-</td>
|
||
<td>{{ $element['ratio'] }}</td>
|
||
</tr>
|
||
@endforeach
|
||
|
||
<tr class="is-selected">
|
||
<th></th>
|
||
<th>Итого:</th>
|
||
<td>{{ $allRemainder }}</td>
|
||
<td>{{ $allWeights }}</td>
|
||
<td id="ingridientTotal">-</td>
|
||
<td>-</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div class="content has-text-centered">
|
||
<p>
|
||
<strong>Калькулятор расчета сырья</strong> разработан <a href="https://t.me/dereviankodev"
|
||
target="_blank">@dereviankodev</a>.
|
||
Лицензия кода -
|
||
<a href="https://opensource.org/license/mit" target="_blank">MIT</a>.
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// Get all "navbar-burger" elements
|
||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||
|
||
// Add a click event on each of them
|
||
$navbarBurgers.forEach(el => {
|
||
el.addEventListener('click', () => {
|
||
// Get the target from the "data-target" attribute
|
||
const target = el.dataset.target;
|
||
const $target = document.getElementById(target);
|
||
|
||
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
||
el.classList.toggle('is-active');
|
||
$target.classList.toggle('is-active');
|
||
});
|
||
});
|
||
|
||
let $input = document.getElementById('calculate');
|
||
|
||
$input.addEventListener('input', () => {
|
||
let $target = $input.value;
|
||
let $ingredientFlour = document.getElementById('ingredientFlour');
|
||
let $ingredientResin = document.getElementById('ingredientResin');
|
||
let $ingridientChalk = document.getElementById('ingridientChalk');
|
||
let $ingridientStabilizer = document.getElementById('ingridientStabilizer');
|
||
let $ingridientPaint = document.getElementById('ingridientPaint');
|
||
let $ingridientWax = document.getElementById('ingridientWax');
|
||
let $ingridientModifierYf = document.getElementById('ingridientModifierYf');
|
||
let $ingridientModifierCpe = document.getElementById('ingridientModifierCpe');
|
||
let $ingridientTotal = document.getElementById('ingridientTotal');
|
||
|
||
let $_ingredientFlour = $target === '' ? '-' : $target * (52.045 / 100);
|
||
let $_ingredientResin = $target === '' ? '-' : $target * (18.587 / 100);
|
||
let $_ingridientChalk = $target === '' ? '-' : $target * (26.766 / 100);
|
||
let $_ingridientStabilizer = $target === '' ? '-' : $target * (1.041 / 100);
|
||
let $_ingridientPaint = $target === '' ? '-' : $target * (0.669 / 100);
|
||
let $_ingridientWax = $target === '' ? '-' : $target * (0.149 / 100);
|
||
let $_ingridientModifierYf = $target === '' ? '-' : $target * (0.223 / 100);
|
||
let $_ingridientModifierCpe = $target === '' ? '-' : $target * (0.52 / 100);
|
||
|
||
$ingredientFlour.innerText = $_ingredientFlour.toFixed(2);
|
||
$ingredientResin.innerText = $_ingredientResin.toFixed(2);
|
||
$ingridientChalk.innerText = $_ingridientChalk.toFixed(2);
|
||
$ingridientStabilizer.innerText = $_ingridientStabilizer.toFixed(2);
|
||
$ingridientPaint.innerText = $_ingridientPaint.toFixed(2);
|
||
$ingridientWax.innerText = $_ingridientWax.toFixed(2);
|
||
$ingridientModifierYf.innerText = $_ingridientModifierYf.toFixed(2);
|
||
$ingridientModifierCpe.innerText = $_ingridientModifierCpe.toFixed(2);
|
||
|
||
$ingridientTotal.innerText = $target === ''
|
||
? '-'
|
||
: [
|
||
$_ingredientFlour,
|
||
$_ingredientResin,
|
||
$_ingridientChalk,
|
||
$_ingridientStabilizer,
|
||
$_ingridientPaint,
|
||
$_ingridientWax,
|
||
$_ingridientModifierYf,
|
||
$_ingridientModifierCpe,
|
||
].filter((x) => !isNaN(x)).reduce((a, b) => a + b).toFixed(2);
|
||
});
|
||
});
|
||
</script>
|
||
@endsection |