From 2b002e83c10bbe442bb540d9664896060ebd0dda Mon Sep 17 00:00:00 2001
From: Mike Shoup <mike@shoup.io>
Date: Sat, 22 Jun 2019 16:50:57 -0600
Subject: [PATCH] Split javascript from template

---
 src/humulus/recipes.py                    |   8 +-
 src/humulus/static/recipes.js             | 173 +++++++++++++++++++++
 src/humulus/templates/recipes/create.html | 177 +---------------------
 3 files changed, 179 insertions(+), 179 deletions(-)
 create mode 100644 src/humulus/static/recipes.js

diff --git a/src/humulus/recipes.py b/src/humulus/recipes.py
index dfb60a3..2ca92f1 100644
--- a/src/humulus/recipes.py
+++ b/src/humulus/recipes.py
@@ -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(
diff --git a/src/humulus/static/recipes.js b/src/humulus/static/recipes.js
new file mode 100644
index 0000000..300072a
--- /dev/null
+++ b/src/humulus/static/recipes.js
@@ -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);
+});
diff --git a/src/humulus/templates/recipes/create.html b/src/humulus/templates/recipes/create.html
index 6be0079..cb924da 100644
--- a/src/humulus/templates/recipes/create.html
+++ b/src/humulus/templates/recipes/create.html
@@ -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 %}