mirror of
https://github.com/shouptech/humulus.git
synced 2026-02-03 14:49:42 +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()])
|
name = StringField('Name', validators=[DataRequired()])
|
||||||
type = SelectField('Type', validators=[DataRequired()],
|
type = SelectField('Type', validators=[DataRequired()],
|
||||||
choices=[(c, c) for c in ['Grain', 'LME', 'DME', 'Sugar',
|
choices=[(c, c) for c in ['Grain', 'LME', 'DME',
|
||||||
'Non-fermentable', 'Other']])
|
'Sugar', 'Non-fermentable',
|
||||||
|
'Other']])
|
||||||
amount = DecimalField('Amount (lb)', validators=[DataRequired()])
|
amount = DecimalField('Amount (lb)', validators=[DataRequired()])
|
||||||
ppg = DecimalField('PPG', validators=[DataRequired()])
|
ppg = DecimalField('PPG', validators=[DataRequired()])
|
||||||
color = DecimalField('Color (°L)', validators=[DataRequired()])
|
color = DecimalField('Color (°L)', validators=[DataRequired()])
|
||||||
|
|
@ -87,7 +88,8 @@ class HopForm(Form):
|
||||||
class RecipeForm(FlaskForm):
|
class RecipeForm(FlaskForm):
|
||||||
"""Form for recipes."""
|
"""Form for recipes."""
|
||||||
name = StringField('Name', validators=[DataRequired()])
|
name = StringField('Name', validators=[DataRequired()])
|
||||||
efficiency = DecimalField('Batch Efficiency (%)', validators=[DataRequired()])
|
efficiency = DecimalField('Batch Efficiency (%)',
|
||||||
|
validators=[DataRequired()])
|
||||||
volume = DecimalField('Batch Volume (gal)', validators=[DataRequired()])
|
volume = DecimalField('Batch Volume (gal)', validators=[DataRequired()])
|
||||||
notes = TextAreaField('Notes')
|
notes = TextAreaField('Notes')
|
||||||
fermentables = FieldList(
|
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 class="col"><button type="submit" class="btn btn-primary">Create Recipe</button></div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
<script src="{{ url_for('static', filename='recipes.js') }}"></script>
|
||||||
<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>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue