mirror of
https://github.com/shouptech/humulus.git
synced 2026-02-03 13:49:41 +00:00
Split javascript from template
This commit is contained in:
parent
464be8d595
commit
2b002e83c1
3 changed files with 179 additions and 179 deletions
|
|
@ -35,8 +35,9 @@ class FermentableForm(Form):
|
|||
"""
|
||||
name = StringField('Name', validators=[DataRequired()])
|
||||
type = SelectField('Type', validators=[DataRequired()],
|
||||
choices=[(c, c) for c in ['Grain', 'LME', 'DME', 'Sugar',
|
||||
'Non-fermentable', 'Other']])
|
||||
choices=[(c, c) for c in ['Grain', 'LME', 'DME',
|
||||
'Sugar', 'Non-fermentable',
|
||||
'Other']])
|
||||
amount = DecimalField('Amount (lb)', validators=[DataRequired()])
|
||||
ppg = DecimalField('PPG', validators=[DataRequired()])
|
||||
color = DecimalField('Color (°L)', validators=[DataRequired()])
|
||||
|
|
@ -87,7 +88,8 @@ class HopForm(Form):
|
|||
class RecipeForm(FlaskForm):
|
||||
"""Form for recipes."""
|
||||
name = StringField('Name', validators=[DataRequired()])
|
||||
efficiency = DecimalField('Batch Efficiency (%)', validators=[DataRequired()])
|
||||
efficiency = DecimalField('Batch Efficiency (%)',
|
||||
validators=[DataRequired()])
|
||||
volume = DecimalField('Batch Volume (gal)', validators=[DataRequired()])
|
||||
notes = TextAreaField('Notes')
|
||||
fermentables = FieldList(
|
||||
|
|
|
|||
173
src/humulus/static/recipes.js
Normal file
173
src/humulus/static/recipes.js
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
// 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 = $(formsId);
|
||||
$fermsDiv.data('length', $fermsDiv.data('length') - 1);
|
||||
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
|
||||
function addFerm() {
|
||||
var $fermsDiv = $('#ferms');
|
||||
var fermsLength = $fermsDiv.data('length');
|
||||
if (fermsLength == 20) {
|
||||
window.alert("Can't have more than 20 fermentables.");
|
||||
return;
|
||||
}
|
||||
var newFerm = `<div class="border pl-2 pr-2 pt-1 pb-1 ferm-form" data-index="${fermsLength}">` +
|
||||
// Name field
|
||||
'<div class="row"><div class="col"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-name">Name</label>` +
|
||||
`<input class="form-control form-control-sm" id="fermentables-${fermsLength}-name"` +
|
||||
` name="fermentables-${fermsLength}-name" required type="text" value="">` +
|
||||
'</div></div></div>' + // End name field
|
||||
'<div class="row">' +
|
||||
// Type field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-type">Type</label>` +
|
||||
`<select class="form-control form-control-sm" id="fermentables-${fermsLength}-type"` +
|
||||
` name="fermentables-${fermsLength}-type" required>` +
|
||||
'<option value="Grain">Grain</option>' +
|
||||
'<option value="LME">LME</option>' +
|
||||
'<option value="DME">DME</option>' +
|
||||
'<option value="Sugar">Sugar</option>' +
|
||||
'<option value="Non-fermentable">Non-fermentable</option>' +
|
||||
'<option value="Other">Other</option></select>' +
|
||||
'</div></div>' + // End type field
|
||||
// Amount field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-amount">Amount (lb)</label>` +
|
||||
`<input class="form-control form-control-sm" id="fermentables-${fermsLength}-amount"` +
|
||||
` name="fermentables-${fermsLength}-amount" required type="text" value="">` +
|
||||
'</div></div>' + // End amount field
|
||||
// PPG field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-ppg">PPG</label>` +
|
||||
`<input class="form-control form-control-sm" id="fermentables-${fermsLength}-ppg"` +
|
||||
` name="fermentables-${fermsLength}-ppg" required type="text" value="">` +
|
||||
'</div></div>' + // End PPG field
|
||||
// Color field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-color">Color (°L)</label>` +
|
||||
`<input class="form-control form-control-sm" id="fermentables-${fermsLength}-color"` +
|
||||
` name="fermentables-${fermsLength}-color" required type="text" value="">` +
|
||||
'</div></div>' + // End PPG field
|
||||
'</div>' +
|
||||
// Remove button
|
||||
'<div class="row"><div class="col">' +
|
||||
'<button type="button" class="float-right btn btn-sm btn-outline-danger rem-ferm">' +
|
||||
'Remove fermentable</button>' +
|
||||
'</div></div>' + // End remove button
|
||||
'</div>';
|
||||
$fermsDiv.append(newFerm);
|
||||
$fermsDiv.data('length', fermsLength + 1);
|
||||
$('.rem-ferm').unbind('click');
|
||||
$('.rem-ferm').click(removeFerm);
|
||||
}
|
||||
|
||||
function addHop() {
|
||||
var $hopsDiv = $('#hops');
|
||||
var hopsLength = $hopsDiv.data('length');
|
||||
if (hopsLength == 20) {
|
||||
window.alert("Can't have more than 20 hops.");
|
||||
return;
|
||||
}
|
||||
|
||||
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>';
|
||||
|
||||
$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);
|
||||
});
|
||||
|
|
@ -105,180 +105,5 @@ limitations under the License.
|
|||
<div class="col"><button type="submit" class="btn btn-primary">Create Recipe</button></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// 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 = $(formsId);
|
||||
$fermsDiv.data('length', $fermsDiv.data('length') - 1);
|
||||
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
|
||||
function addFerm() {
|
||||
var $fermsDiv = $('#ferms');
|
||||
var fermsLength = $fermsDiv.data('length');
|
||||
if (fermsLength == 20) {
|
||||
window.alert("Can't have more than 20 fermentables.");
|
||||
return;
|
||||
}
|
||||
var newFerm = `<div class="border pl-2 pr-2 pt-1 pb-1 ferm-form" data-index="${fermsLength}">` +
|
||||
// Name field
|
||||
'<div class="row"><div class="col"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-name">Name</label>` +
|
||||
`<input class="form-control form-control-sm" id="fermentables-${fermsLength}-name"` +
|
||||
` name="fermentables-${fermsLength}-name" required type="text" value="">` +
|
||||
'</div></div></div>' + // End name field
|
||||
'<div class="row">' +
|
||||
// Type field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-type">Type</label>` +
|
||||
`<select class="form-control form-control-sm" id="fermentables-${fermsLength}-type"` +
|
||||
` name="fermentables-${fermsLength}-type" required>` +
|
||||
'<option value="Grain">Grain</option>' +
|
||||
'<option value="LME">LME</option>' +
|
||||
'<option value="DME">DME</option>' +
|
||||
'<option value="Sugar">Sugar</option>' +
|
||||
'<option value="Non-fermentable">Non-fermentable</option>' +
|
||||
'<option value="Other">Other</option></select>' +
|
||||
'</div></div>' + // End type field
|
||||
// Amount field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-amount">Amount (lb)</label>` +
|
||||
`<input class="form-control form-control-sm" id="fermentables-${fermsLength}-amount"` +
|
||||
` name="fermentables-${fermsLength}-amount" required type="text" value="">` +
|
||||
'</div></div>' + // End amount field
|
||||
// PPG field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-ppg">PPG</label>` +
|
||||
`<input class="form-control form-control-sm" id="fermentables-${fermsLength}-ppg"` +
|
||||
` name="fermentables-${fermsLength}-ppg" required type="text" value="">` +
|
||||
'</div></div>' + // End PPG field
|
||||
// Color field
|
||||
'<div class="col-sm"><div class="form-group">' +
|
||||
`<label for="fermentables-${fermsLength}-color">Color (°L)</label>` +
|
||||
`<input class="form-control form-control-sm" id="fermentables-${fermsLength}-color"` +
|
||||
` name="fermentables-${fermsLength}-color" required type="text" value="">` +
|
||||
'</div></div>' + // End PPG field
|
||||
'</div>' +
|
||||
// Remove button
|
||||
'<div class="row"><div class="col">' +
|
||||
'<button type="button" class="float-right btn btn-sm btn-outline-danger rem-ferm">' +
|
||||
'Remove fermentable</button>' +
|
||||
'</div></div>' + // End remove button
|
||||
'</div>';
|
||||
$fermsDiv.append(newFerm);
|
||||
$fermsDiv.data('length', fermsLength + 1);
|
||||
$('.rem-ferm').unbind('click');
|
||||
$('.rem-ferm').click(removeFerm);
|
||||
}
|
||||
|
||||
function addHop() {
|
||||
var $hopsDiv = $('#hops');
|
||||
var hopsLength = $hopsDiv.data('length');
|
||||
if (hopsLength == 20) {
|
||||
window.alert("Can't have more than 20 hops.");
|
||||
return;
|
||||
}
|
||||
|
||||
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>';
|
||||
|
||||
$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>
|
||||
<script src="{{ url_for('static', filename='recipes.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue