diff options
| -rw-r--r-- | app/static/js/record.js | 33 | ||||
| -rw-r--r-- | app/templates/base/layout.html | 2 | ||||
| -rw-r--r-- | app/templates/workout/record.html | 64 |
3 files changed, 67 insertions, 32 deletions
diff --git a/app/static/js/record.js b/app/static/js/record.js index fedbdd7..75aa148 100644 --- a/app/static/js/record.js +++ b/app/static/js/record.js @@ -1,9 +1,42 @@ +// Register 'Enter' listeners on all inputs +Array.from(document.getElementsByClassName('input')) + .filter(e => e.type == 'number') + .forEach(e => e.addEventListener('keyup', function(event) { + if (event.key == 'Enter') { + console.log("ENTER"); + } + })) + +function checkSet(row) { + // Disable input editing + row.children[1].firstChild.disabled = true; + row.children[2].firstChild.disabled = true; + + // Add is-success to inputs + row.children[1].firstChild.classList.add('is-success') + row.children[2].firstChild.classList.add('is-success') +} + +function uncheckSet(row) { + // Re-enable input editing + row.children[1].firstChild.disabled = false; + row.children[2].firstChild.disabled = false; + + // Remove is-success from inputs + row.children[1].firstChild.classList.remove('is-success') + row.children[2].firstChild.classList.remove('is-success') +} + // Called when the check at the end of a set line is clicked function onClickSetCheck(elem) { if (elem.classList.contains('is-success')) { elem.classList.remove('is-success'); + + uncheckSet(elem.parentElement.parentElement); } else { elem.classList.add('is-success'); + + checkSet(elem.parentElement.parentElement); } } diff --git a/app/templates/base/layout.html b/app/templates/base/layout.html index 89ad385..fe83440 100644 --- a/app/templates/base/layout.html +++ b/app/templates/base/layout.html @@ -47,7 +47,7 @@ </span> <span class="navbar-item"> - <a class="button is-white is-outlined" href="/workout/record"> + <a class="button is-white is-outlined" href="/workout/select"> <span class="icon"> <i class="fa fa-pencil"></i> </span> diff --git a/app/templates/workout/record.html b/app/templates/workout/record.html index 0908ef8..3dfb2c8 100644 --- a/app/templates/workout/record.html +++ b/app/templates/workout/record.html @@ -7,39 +7,41 @@ <h1 class="title is-2">Record {{ workout.name }}</h1> <div class="box"> {% for exercise in workout.exercises %} - <h1 class="subtitle has-text-black">{{ exercise.name }}</h1> - <div class="field is-horizontal"> - <div class="field-body"> - <div class="field"> - <label class="label">lbs</label> - <div class="control"> - <input class="input" type="number" min="0"> - </div> - </div> - <div class="field"> - <label class="label">Reps</label> - <div class="control"> - <input class="input" type="number" min="0"> - </div> - </div> - <!-- TODO: fix align --> - <button class="button" onClick="onClickSetCheck(this)"> - <span class="icon is-small"> - <i class="fa fa-check"></i> - </span> - </button> - </div> - </div> - + <h1 class="title is-4 has-text-black">{{ exercise.name }}</h1> + <table class="table is-fullwidth is-hoverable"> + <thead> + <th>Set</th> + <th>lbs</th> + <th>Reps</th> + <th>Done</th> + </thead> + <tbody> + {% for i in range(exercise.sets) %} + <tr> + <th>{{ i }}</th> + <td><input class="input" type="number"></td> + <td><input class="input" type="number"></td> + <td> + <button class="button" onClick="onClickSetCheck(this)"> + <span class="icon is-small"> + <i class="fa fa-check"></i> + </span> + </button> + </td> + </tr> + {% endfor %} + </tbody> + </table> <div class="buttons is-centered"> - <button class="button is-primary"> - <span class="icon is-small"> - <i class="fa fa-plus"></i> - </span> - <span>Add Set</span> - </button> - <button class="button is-danger">Skip</button> + <button class="button is-primary"> + <span class="icon is-small"> + <i class="fa fa-plus"></i> + </span> + <span>Add Set</span> + </button> + <button class="button is-danger">Skip</button> </div> + <hr> {% endfor %} </div> </div> |