Javascript for handling mash steps

src/humulus/static/recipes.js

@@ -90,6 +90,11 @@ function removeHop() {
   removeForm($(this), '.hop-form', '#hops');
 }
 
+// Remove a mash step
+function removeMashStep() {
+  removeForm($(this), '.mash-form', '#mash');
+}
+
 // Add a fermentable
 function addFerm() {
   var $fermsDiv = $('#ferms');
@@ -212,6 +217,58 @@ function addHop() {
   rebindChangeEvents();
 }
 
+// Add a new mash step
+function addMashStep() {
+  var $mashDiv = $('#mash');
+  var stepsLength = $mashDiv.data('length');
+  if (stepsLength == 20) {
+    window.alert("Can't have more than 20 mash steps.");
+    return;
+  }
+
+  var newStep = `<div class="border pl-2 pr-2 pt-1 pb-1 mash-form" data-index="${stepsLength}">` +
+                '<div class="row"><div class="col-sm-8"><div class="form-group">' +
+                // Step Name Field
+                `<label for="mash-steps-${stepsLength}-name">Step Name</label>` +
+                `<input class="form-control form-control-sm" id="mash-steps-${stepsLength}-name" ` +
+                `name="mash-steps-${stepsLength}-name" required type="text" value="">` +
+                '</div></div>' + // End Step Name field
+                // Type field
+                '<div class="col-sm-4"><div class="form-group">' +
+                `<label for="mash-steps-${stepsLength}-type">Type</label>` +
+                `<select class="custom-select custom-select-sm" id="mash-steps-${stepsLength}-type" ` +
+                `name="mash-steps-${stepsLength}-type">` +
+                '<option value="Infusion">Infusion</option>' +
+                '<option value="Temperature">Temperature</option>' +
+                '<option value="Decoction">Decoction</option></select>' +
+                '</div></div></div>' + // End Type field
+                // Temperature field
+                '<div class="row"><div class="col-sm"><div class="form-group">' +
+                `<label for="mash-steps-${stepsLength}-temp">Temperature (°F)</label>` +
+                `<input class="form-control form-control-sm" id="mash-steps-${stepsLength}-temp" ` +
+                `name="mash-steps-${stepsLength}-temp" required type="text" value="">` +
+                '</div></div>' + // End temperature field
+                //Time field
+                '<div class="col-sm"><div class="form-group">' +
+                `<label for="mash-steps-${stepsLength}-time">Time (min)</label>` +
+                `<input class="form-control form-control-sm" id="mash-steps-${stepsLength}-time" ` +
+                `name="mash-steps-${stepsLength}-time" required type="text" value="">` +
+                '</div></div>' + // End time field
+                // Amount field
+                '<div class="col-sm"><div class="form-group">' +
+                `<label for="mash-steps-${stepsLength}-amount">Water Amount (gal)</label>` +
+                `<input class="form-control form-control-sm" id="mash-steps-${stepsLength}-amount" ` +
+                `name="mash-steps-${stepsLength}-amount" type="text" value="">` +
+                '</div></div></div>' + // End amount field
+                '<div class="row"><div class="col">' +
+                '<button type="button" class="float-right btn btn-sm btn-outline-danger rem-step">Remove Step</button>' +
+                '</div></div></div>';
+
+  $mashDiv.append(newStep);
+  $('.rem-step').unbind('click');
+  $('.rem-step').click(removeMashStep);
+}
+
 // Calculate recipe's original gravity
 function calculateOG() {
   var fermsLength = $('#ferms').data('length');
@@ -414,6 +471,8 @@ $(document).ready(function() {
   $('.rem-ferm').click(removeFerm);
   $('#add-hop').click(addHop);
   $('.rem-hop').click(removeHop);
+  $('#add-step').click(addMashStep);
+  $('.rem-step').click(removeMashStep);
 
   // Register change events
   rebindChangeEvents();

src/humulus/templates/recipes/_macros.html

@@ -134,10 +134,10 @@ function getSpecsURL() {
     Mash & Steps
   -#}
   <div class="row"><div class="col"><h3>Mash</h3></div></div>
-  <div id="mash">
+  <div id="mash" data-length="{{ form.mash.form.steps|length }}">
     {{ render_field_with_errors(form.mash.form.name, 'form-control-sm') }}
     {% for step in form.mash.form.steps %}
-    <div class="border pl-2 pr-2 pt-1 pb-1 mash-form">
+    <div class="border pl-2 pr-2 pt-1 pb-1 mash-form" data-index="{{ loop.index0 }}"">
       <div class="row">
         <div class="col-sm-8">{{ render_field_with_errors(step.form.name, 'form-control-sm') }}</div>
         <div class="col-sm-4">{{ render_field_with_errors(step.form.type, 'custom-select-sm', base_class='custom-select') }}</div>