mirror of
https://github.com/shouptech/humulus.git
synced 2026-02-03 15:59:43 +00:00
Add hops UI
This commit is contained in:
parent
1c3b91bbfc
commit
464be8d595
1 changed files with 145 additions and 45 deletions
|
|
@ -22,15 +22,18 @@ limitations under the License.
|
|||
<div class="row"><h1>Create a new recipe</h1></div>
|
||||
<form method="POST" action="{{ url_for('recipes.create') }}">
|
||||
{{ form.hidden_tag() }}
|
||||
{#-
|
||||
Recipe Details
|
||||
-#}
|
||||
<div class="row">
|
||||
<div class="col-sm-6">{{ render_field_with_errors(form.name) }}</div>
|
||||
<div class="col-sm-3">{{ render_field_with_errors(form.efficiency) }}</div>
|
||||
<div class="col-sm-3">{{ render_field_with_errors(form.volume) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col"><h3>Fermentables</h3></div>
|
||||
</div>
|
||||
{#-
|
||||
Fermentable Ingredients
|
||||
-#}
|
||||
<div class="row"><div class="col"><h3>Fermentables</h3></div></div>
|
||||
<div id="ferms" data-length="{{ form.fermentables|length }}">
|
||||
{% for fermentable in form.fermentables %}
|
||||
<div class="border pl-2 pr-2 pt-1 pb-1 ferm-form" data-index="{{ loop.index0 }}">
|
||||
|
|
@ -58,24 +61,100 @@ limitations under the License.
|
|||
<button type="button" id="add-ferm" class="btn btn-secondary btn-sm">Add a fermentable</button>
|
||||
</div>
|
||||
</div>
|
||||
{#-
|
||||
Hop ingredients
|
||||
-#}
|
||||
<div class="row"><div class="col"><h3>Hops</h3></div></div>
|
||||
<div id="hops" data-length="{{ form.hops|length }}">
|
||||
{% for hop in form.hops %}
|
||||
<div class="border pl-2 pr-2 pt-1 pb-1 hop-form" data-index="{{ loop.index0 }}">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ render_field_with_errors(hop.form.name, 'form-control-sm') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">{{ render_field_with_errors(hop.form.use, 'form-control-sm') }}</div>
|
||||
<div class="col-sm">{{ render_field_with_errors(hop.form.alpha, 'form-control-sm') }}</div>
|
||||
<div class="col-sm">{{ render_field_with_errors(hop.form.duration, 'form-control-sm') }}</div>
|
||||
<div class="col-sm">{{ render_field_with_errors(hop.form.amount, 'form-control-sm') }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button type="button" class="float-right btn btn-sm btn-outline-danger rem-hop">Remove Hop</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="row pt-1 pb-1">
|
||||
<div class="col">
|
||||
<button type="button" id="add-hop" class="btn btn-secondary btn-sm">Add a hop</button>
|
||||
</div>
|
||||
</div>
|
||||
{#-
|
||||
Recipe Notes
|
||||
-#}
|
||||
<div class="row">
|
||||
<div class="col">{{ render_field_with_errors(form.notes) }}</div>
|
||||
</div>
|
||||
{#-
|
||||
Submit recipe
|
||||
-#}
|
||||
<div class="row">
|
||||
<div class="col"><button type="submit" class="btn btn-primary">Create Recipe</button></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// Remove a fermentable
|
||||
function removeFerm() {
|
||||
var $removedForm = $(this).closest('.ferm-form');
|
||||
// Correct all the indices for forms matching item.
|
||||
function adjustIndices(removedIndex, item) {
|
||||
var $forms = $(item);
|
||||
$forms.each(function(i) {
|
||||
var $form = $(this);
|
||||
var index = parseInt($form.data('index'));
|
||||
var newIndex = index - 1;
|
||||
if (index <= removedIndex) {
|
||||
// Skip this one
|
||||
return true;
|
||||
}
|
||||
|
||||
// Change form index
|
||||
$form.data('index', newIndex);
|
||||
|
||||
// Change ID in form input, select, and labels
|
||||
$form.find('input').each(function(j) {
|
||||
var $item = $(this)
|
||||
$item.attr('id', $item.attr('id').replace(index, newIndex));
|
||||
$item.attr('name', $item.attr('name').replace(index, newIndex));
|
||||
});
|
||||
$form.find('select').each(function(j) {
|
||||
var $item = $(this)
|
||||
$item.attr('id', $item.attr('id').replace(index, newIndex));
|
||||
$item.attr('name', $item.attr('name').replace(index, newIndex));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Remove a subform from a form matching `formClass` closest to `$remButton`.
|
||||
// Adjust length on element matching `formsId`. Also adjust indices.
|
||||
function removeForm($remButton, formClass, formsId) {
|
||||
var $removedForm = $remButton.closest(formClass);
|
||||
var removedIndex = parseInt($removedForm.data('index'));
|
||||
$removedForm.remove();
|
||||
var $fermsDiv = $('#ferms');
|
||||
var $fermsDiv = $(formsId);
|
||||
$fermsDiv.data('length', $fermsDiv.data('length') - 1);
|
||||
console.log('calling adjust');
|
||||
adjustFermIndices(removedIndex);
|
||||
adjustIndices(removedIndex, formClass);
|
||||
}
|
||||
|
||||
// Remove a fermentable
|
||||
function removeFerm() {
|
||||
removeForm($(this), '.ferm-form', '#ferms');
|
||||
}
|
||||
|
||||
// Remove a hop
|
||||
function removeHop() {
|
||||
removeForm($(this), '.hop-form', '#hops');
|
||||
}
|
||||
|
||||
// Add a fermentable
|
||||
|
|
@ -137,48 +216,69 @@ limitations under the License.
|
|||
$('.rem-ferm').click(removeFerm);
|
||||
}
|
||||
|
||||
// Correct all the indexes for the removed form
|
||||
function adjustFermIndices(removedIndex) {
|
||||
var $forms = $('.ferm-form')
|
||||
console.log($forms)
|
||||
$forms.each(function(i) {
|
||||
var $form = $(this);
|
||||
var index = parseInt($form.data('index'));
|
||||
var newIndex = index - 1;
|
||||
console.log('index: ' + index)
|
||||
console.log('newIndex:' + newIndex);
|
||||
console.log('removedIndex: ' + removedIndex);
|
||||
if (index <= removedIndex) {
|
||||
// Skip this one
|
||||
console.log('index < removedIndex is true');
|
||||
return true;
|
||||
function addHop() {
|
||||
var $hopsDiv = $('#hops');
|
||||
var hopsLength = $hopsDiv.data('length');
|
||||
if (hopsLength == 20) {
|
||||
window.alert("Can't have more than 20 hops.");
|
||||
return;
|
||||
}
|
||||
console.log("I didn't quit");
|
||||
|
||||
// Change form index
|
||||
$form.data('index', newIndex);
|
||||
var newHop = `<div class="border pl-2 pr-2 pt-1 pb-1 hop-form" data-index="${hopsLength}">` +
|
||||
// Name field
|
||||
'<div class="row"><div class="col"><div class="form-group">' +
|
||||
`<label for="hops-${hopsLength}-name">Name</label>` +
|
||||
`<input class="form-control form-control-sm" id="hops-${hopsLength}-name"` +
|
||||
` name="hops-${hopsLength}-name" required type="text" value="">` +
|
||||
'</div></div></div>' + // End name field
|
||||
'<div class="row">' +
|
||||
// Usage field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="hops-${hopsLength}-use">Usage</label>` +
|
||||
`<select class="form-control form-control-sm" id="hops-${hopsLength}-use"` +
|
||||
` name="hops-${hopsLength}-use" required>` +
|
||||
'<option value="Boil">Boil</option>' +
|
||||
'<option value="FWH">FWH</option>' +
|
||||
'<option value="Whirlpool">Whirlpool</option>' +
|
||||
'<option value="Dry-Hop">Dry-Hop</option></select>' +
|
||||
'</div></div>' + // End usage field
|
||||
// Alpha acid % field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="hops-${hopsLength}-alpha">Alpha Acid %</label>` +
|
||||
`<input class="form-control form-control-sm" id="hops-${hopsLength}-alpha"` +
|
||||
` name="hops-${hopsLength}-alpha" required type="text" value="">` +
|
||||
'</div></div>' + // End alpha acid % field
|
||||
// Duration field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="hops-${hopsLength}-duration">Duration (min/day)</label>` +
|
||||
`<input class="form-control form-control-sm" id="hops-${hopsLength}-duration"` +
|
||||
` name="hops-${hopsLength}-duration" required type="text" value="">` +
|
||||
'</div></div>' + // End duration field
|
||||
// Amount field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="hops-${hopsLength}-amount">Amount (oz)</label>` +
|
||||
`<input class="form-control form-control-sm" id="hops-${hopsLength}-amount"` +
|
||||
` name="hops-${hopsLength}-amount" required type="text" value="">` +
|
||||
'</div></div>' + // End amount field
|
||||
'</div>' +
|
||||
// Remove button
|
||||
'<div class="row"><div class="col">' +
|
||||
'<button type="button" class="float-right btn btn-sm btn-outline-danger rem-hop">' +
|
||||
'Remove Hop</button>' +
|
||||
'</div></div>' + // End remove button
|
||||
'</div>';
|
||||
|
||||
// Change ID in form input, select, and labels
|
||||
$form.find('input').each(function(j) {
|
||||
var $item = $(this)
|
||||
$item.attr('id', $item.attr('id').replace(index, newIndex));
|
||||
$item.attr('name', $item.attr('name').replace(index, newIndex));
|
||||
});
|
||||
$form.find('select').each(function(j) {
|
||||
var $item = $(this)
|
||||
$item.attr('id', $item.attr('id').replace(index, newIndex));
|
||||
$item.attr('name', $item.attr('name').replace(index, newIndex));
|
||||
});
|
||||
//$form.find('label').each(function(j) {
|
||||
// var $item = $(this)
|
||||
// $item.attr('for', $item.attr('id').replace(index, newIndex));
|
||||
//});
|
||||
});
|
||||
$hopsDiv.append(newHop);
|
||||
$hopsDiv.data('length', hopsLength + 1);
|
||||
$('.rem-hop').unbind('click');
|
||||
$('.rem-hop').click(removeHop);
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#add-ferm').click(addFerm);
|
||||
$('.rem-ferm').click(removeFerm);
|
||||
$('#add-hop').click(addHop);
|
||||
$('.rem-hop').click(removeHop);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue