emma/humulus
1
0
Fork 0
mirror of https://github.com/shouptech/humulus.git synced 2026-02-03 17:09:44 +00:00
Code Issues Releases Wiki Activity

Javascript for handling mash steps

Browse source
This commit is contained in:
Emma 2019-07-19 21:09:51 -06:00
parent 19ab27b8d3
commit 1c042b860b
No known key found for this signature in database
GPG key ID: 68434BFE85360755
2 changed files with 61 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/humulus/static/recipes.js
View file

@ -90,6 +90,11 @@ function removeHop() {
removeForm($(this), '.hop-form', '#hops');
}
// Remove a mash step
function removeMashStep() {
removeForm($(this), '.mash-form', '#mash');
}
// Add a fermentable
function addFerm() {
var $fermsDiv = $('#ferms');
@ -212,6 +217,58 @@ function addHop() {
rebindChangeEvents();
}
// Add a new mash step
function addMashStep() {
var $mashDiv = $('#mash');
var stepsLength = $mashDiv.data('length');
if (stepsLength == 20) {
window.alert("Can't have more than 20 mash steps.");
return;
}
var newStep = `<div class="border pl-2 pr-2 pt-1 pb-1 mash-form" data-index="${stepsLength}">` +
'<div class="row"><div class="col-sm-8"><div class="form-group">' +
// Step Name Field
`<label for="mash-steps-${stepsLength}-name">Step Name</label>` +
`<input class="form-control form-control-sm" id="mash-steps-${stepsLength}-name" ` +
`name="mash-steps-${stepsLength}-name" required type="text" value="">` +
'</div></div>' + // End Step Name field
// Type field
'<div class="col-sm-4"><div class="form-group">' +
`<label for="mash-steps-${stepsLength}-type">Type</label>` +
`<select class="custom-select custom-select-sm" id="mash-steps-${stepsLength}-type" ` +
`name="mash-steps-${stepsLength}-type">` +
'<option value="Infusion">Infusion</option>' +
'<option value="Temperature">Temperature</option>' +
'<option value="Decoction">Decoction</option></select>' +
'</div></div></div>' + // End Type field
// Temperature field
'<div class="row"><div class="col-sm"><div class="form-group">' +
`<label for="mash-steps-${stepsLength}-temp">Temperature (°F)</label>` +
`<input class="form-control form-control-sm" id="mash-steps-${stepsLength}-temp" ` +
`name="mash-steps-${stepsLength}-temp" required type="text" value="">` +
'</div></div>' + // End temperature field
//Time field
'<div class="col-sm"><div class="form-group">' +
`<label for="mash-steps-${stepsLength}-time">Time (min)</label>` +
`<input class="form-control form-control-sm" id="mash-steps-${stepsLength}-time" ` +
`name="mash-steps-${stepsLength}-time" required type="text" value="">` +
'</div></div>' + // End time field
// Amount field
'<div class="col-sm"><div class="form-group">' +
`<label for="mash-steps-${stepsLength}-amount">Water Amount (gal)</label>` +
`<input class="form-control form-control-sm" id="mash-steps-${stepsLength}-amount" ` +
`name="mash-steps-${stepsLength}-amount" type="text" value="">` +
'</div></div></div>' + // End amount field
'<div class="row"><div class="col">' +
'<button type="button" class="float-right btn btn-sm btn-outline-danger rem-step">Remove Step</button>' +
'</div></div></div>';
$mashDiv.append(newStep);
$('.rem-step').unbind('click');
$('.rem-step').click(removeMashStep);
}
// Calculate recipe's original gravity
function calculateOG() {
var fermsLength = $('#ferms').data('length');
@ -414,6 +471,8 @@ $(document).ready(function() {
$('.rem-ferm').click(removeFerm);
$('#add-hop').click(addHop);
$('.rem-hop').click(removeHop);
$('#add-step').click(addMashStep);
$('.rem-step').click(removeMashStep);
// Register change events
rebindChangeEvents();

4
src/humulus/templates/recipes/_macros.html
View file

@ -134,10 +134,10 @@ function getSpecsURL() {
Mash & Steps
-#}
<div class="row"><div class="col"><h3>Mash</h3></div></div>
<div id="mash">
<div id="mash" data-length="{{ form.mash.form.steps|length }}">
{{ render_field_with_errors(form.mash.form.name, 'form-control-sm') }}
{% for step in form.mash.form.steps %}
<div class="border pl-2 pr-2 pt-1 pb-1 mash-form">
<div class="border pl-2 pr-2 pt-1 pb-1 mash-form" data-index="{{ loop.index0 }}"">
<div class="row">
<div class="col-sm-8">{{ render_field_with_errors(step.form.name, 'form-control-sm') }}</div>
<div class="col-sm-4">{{ render_field_with_errors(step.form.type, 'custom-select-sm', base_class='custom-select') }}</div>