From 464be8d595e32a35abfc81eefbbd3431f1d3cb78 Mon Sep 17 00:00:00 2001
From: Mike Shoup <mike@shoup.io>
Date: Sat, 22 Jun 2019 16:39:13 -0600
Subject: [PATCH] Add hops UI

---
 src/humulus/templates/recipes/create.html | 190 +++++++++++++++++-----
 1 file changed, 145 insertions(+), 45 deletions(-)

diff --git a/src/humulus/templates/recipes/create.html b/src/humulus/templates/recipes/create.html
index 0f4c764..6be0079 100644
--- a/src/humulus/templates/recipes/create.html
+++ b/src/humulus/templates/recipes/create.html
@@ -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;
-      }
-      console.log("I didn't quit");
+  function addHop() {
+    var $hopsDiv = $('#hops');
+    var hopsLength = $hopsDiv.data('length');
+    if (hopsLength == 20) {
+      window.alert("Can't have more than 20 hops.");
+      return;
+    }
 
-      // 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 %}