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>
|
<div class="row"><h1>Create a new recipe</h1></div>
|
||||||
<form method="POST" action="{{ url_for('recipes.create') }}">
|
<form method="POST" action="{{ url_for('recipes.create') }}">
|
||||||
{{ form.hidden_tag() }}
|
{{ form.hidden_tag() }}
|
||||||
|
{#-
|
||||||
|
Recipe Details
|
||||||
|
-#}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6">{{ render_field_with_errors(form.name) }}</div>
|
<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.efficiency) }}</div>
|
||||||
<div class="col-sm-3">{{ render_field_with_errors(form.volume) }}</div>
|
<div class="col-sm-3">{{ render_field_with_errors(form.volume) }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
{#-
|
||||||
<div class="row">
|
Fermentable Ingredients
|
||||||
<div class="col"><h3>Fermentables</h3></div>
|
-#}
|
||||||
</div>
|
<div class="row"><div class="col"><h3>Fermentables</h3></div></div>
|
||||||
<div id="ferms" data-length="{{ form.fermentables|length }}">
|
<div id="ferms" data-length="{{ form.fermentables|length }}">
|
||||||
{% for fermentable in form.fermentables %}
|
{% for fermentable in form.fermentables %}
|
||||||
<div class="border pl-2 pr-2 pt-1 pb-1 ferm-form" data-index="{{ loop.index0 }}">
|
<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>
|
<button type="button" id="add-ferm" class="btn btn-secondary btn-sm">Add a fermentable</button>
|
||||||
</div>
|
</div>
|
||||||
</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="row">
|
||||||
<div class="col">{{ render_field_with_errors(form.notes) }}</div>
|
<div class="col">{{ render_field_with_errors(form.notes) }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
{#-
|
||||||
|
Submit recipe
|
||||||
|
-#}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col"><button type="submit" class="btn btn-primary">Create Recipe</button></div>
|
<div class="col"><button type="submit" class="btn btn-primary">Create Recipe</button></div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Remove a fermentable
|
// Correct all the indices for forms matching item.
|
||||||
function removeFerm() {
|
function adjustIndices(removedIndex, item) {
|
||||||
var $removedForm = $(this).closest('.ferm-form');
|
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'));
|
var removedIndex = parseInt($removedForm.data('index'));
|
||||||
$removedForm.remove();
|
$removedForm.remove();
|
||||||
var $fermsDiv = $('#ferms');
|
var $fermsDiv = $(formsId);
|
||||||
$fermsDiv.data('length', $fermsDiv.data('length') - 1);
|
$fermsDiv.data('length', $fermsDiv.data('length') - 1);
|
||||||
console.log('calling adjust');
|
adjustIndices(removedIndex, formClass);
|
||||||
adjustFermIndices(removedIndex);
|
}
|
||||||
|
|
||||||
|
// Remove a fermentable
|
||||||
|
function removeFerm() {
|
||||||
|
removeForm($(this), '.ferm-form', '#ferms');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove a hop
|
||||||
|
function removeHop() {
|
||||||
|
removeForm($(this), '.hop-form', '#hops');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add a fermentable
|
// Add a fermentable
|
||||||
|
|
@ -137,48 +216,69 @@ limitations under the License.
|
||||||
$('.rem-ferm').click(removeFerm);
|
$('.rem-ferm').click(removeFerm);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct all the indexes for the removed form
|
function addHop() {
|
||||||
function adjustFermIndices(removedIndex) {
|
var $hopsDiv = $('#hops');
|
||||||
var $forms = $('.ferm-form')
|
var hopsLength = $hopsDiv.data('length');
|
||||||
console.log($forms)
|
if (hopsLength == 20) {
|
||||||
$forms.each(function(i) {
|
window.alert("Can't have more than 20 hops.");
|
||||||
var $form = $(this);
|
return;
|
||||||
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;
|
|
||||||
}
|
|
||||||
console.log("I didn't quit");
|
|
||||||
|
|
||||||
// Change form index
|
var newHop = `<div class="border pl-2 pr-2 pt-1 pb-1 hop-form" data-index="${hopsLength}">` +
|
||||||
$form.data('index', newIndex);
|
// 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
|
$hopsDiv.append(newHop);
|
||||||
$form.find('input').each(function(j) {
|
$hopsDiv.data('length', hopsLength + 1);
|
||||||
var $item = $(this)
|
$('.rem-hop').unbind('click');
|
||||||
$item.attr('id', $item.attr('id').replace(index, newIndex));
|
$('.rem-hop').click(removeHop);
|
||||||
$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));
|
|
||||||
//});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$('#add-ferm').click(addFerm);
|
$('#add-ferm').click(addFerm);
|
||||||
$('.rem-ferm').click(removeFerm);
|
$('.rem-ferm').click(removeFerm);
|
||||||
|
$('#add-hop').click(addHop);
|
||||||
|
$('.rem-hop').click(removeHop);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue