diff options
| -rw-r--r-- | app/templates/workout/create.html | 72 |
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 %} |