Add javascript handling the 'Start a workout form' for incrementing rows

of exercises. Each input will have the name exercise-index and
rep-index. Cancel button redirects to user homepage.

1 files changed, 49 insertions, 23 deletions

diff --git a/app/templates/workout/create.html b/app/templates/workout/create.html
index 99f6f48..3adfd0f 100644
--- a/app/templates/workout/create.html
+++ b/app/templates/workout/create.html
@@ -15,37 +15,39 @@
         </div>
     </div>
 </div>
-<div class="field is-horizontal">
-    <div class="field-body">
-        <div class="field">
-            <p class="control is-expanded has-icons-left">
-            <input class="input" type="text" placeholder="Exercise Name">
-            <span class="icon is-small is-left">
-                <i class="fas fa-user"></i>
-            </span>
-            </p>
-        </div>
-        <div class="field">
-            <p class="control is-expanded has-icons-left has-icons-right">
-            <input class="input" type="number" placeholder="Reps" min="1" max="100">
-            <span class="icon is-small is-left">
-                <i class="fas fa-envelope"></i>
-            </span>
-            <span class="icon is-small is-right">
-                <i class="fas fa-check"></i>
-            </span>
-            </p>
+<div id="rows" class="field">
+    <div class="field is-horizontal">
+        <div class="field-body">
+            <div class="field">
+                <p class="control is-expanded has-icons-left">
+                <input class="input" name='exercise-0' type="text" placeholder="Exercise Name">
+                <span class="icon is-small is-left">
+                    <i class="fas fa-user"></i>
+                </span>
+                </p>
+            </div>
+            <div class="field">
+                <p class="control is-expanded has-icons-left has-icons-right">
+                <input class="input" name='reps-0' type="number" placeholder="Reps" min="1" max="100">
+                <span class="icon is-small is-left">
+                    <i class="fas fa-envelope"></i>
+                </span>
+                <span class="icon is-small is-right">
+                    <i class="fas fa-check"></i>
+                </span>
+                </p>
+            </div>
         </div>
     </div>
 </div>
 <div class="field is-grouped is-grouped-right">
     <p class="control">
-    <a class="button is-primary">
+    <a id="add" class="button is-primary">
         +
     </a>
     </p>
     <p class="control">
-    <a class="button is-danger">
+    <a id="del" class="button is-danger">
         ✖
     </a>
     </p>
@@ -57,9 +59,33 @@
     </a>
     </p>
     <p class="control">
-    <a class="button is-danger">
+    <a href="../home.html" class="button is-danger">
         Cancel
     </a>
     </p>
 </div>
+<script>
+    function handleAdd() {
+        rowsDiv = document.getElementById("rows");
+        defaultRow = rowsDiv.children[0];
+        newRow = defaultRow.cloneNode(true);
+        exerciseNameInput = newRow.children[0].children[0].children[0].children[0];
+        exerciseRepInput = newRow.children[0].children[1].children[0].children[0];
+        rowIndex = rowsDiv.childElementCount;
+        exerciseNameInput.value = '';
+        exerciseNameInput.name = 'exercise-' + rowIndex;
+        exerciseRepInput.value = '';
+        exerciseRepInput.name = 'reps-' + rowIndex;;
+        rowsDiv.append(newRow);
+    }
+    function handleDel() {
+       rowsDiv = document.getElementById("rows");
+       rowsCount = rowsDiv.children.length;
+       if (rowsCount > 1) {
+           rowsDiv.children[rowsCount-1].remove();
+       }
+    }
+    document.getElementById("add").onclick = handleAdd;
+    document.getElementById("del").onclick = handleDel;
+</script>
 {% endblock %}