diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/routes/workout.py | 2 | ||||
| -rw-r--r-- | app/static/js/record.js | 64 | ||||
| -rw-r--r-- | app/templates/base/form.html | 2 | ||||
| -rw-r--r-- | app/templates/workout/record.html | 83 |
4 files changed, 89 insertions, 62 deletions
diff --git a/app/routes/workout.py b/app/routes/workout.py index db8ab48..8615156 100644 --- a/app/routes/workout.py +++ b/app/routes/workout.py @@ -69,7 +69,7 @@ def recordWorkout(): if not workout: return redirect(url_for('home')); - return render_template('workout/record.html', workout=workout) + return render_template('workout/record.html', workout=workout, form=None) @app.route("/workout/select", methods=['GET']) @login_required diff --git a/app/static/js/record.js b/app/static/js/record.js index 75aa148..aba6785 100644 --- a/app/static/js/record.js +++ b/app/static/js/record.js @@ -4,11 +4,44 @@ Array.from(document.getElementsByClassName('input')) .filter(e => e.type == 'number') .forEach(e => e.addEventListener('keyup', function(event) { if (event.key == 'Enter') { - console.log("ENTER"); + // TODO implement + console.log("ENTER") } })) -function checkSet(row) { +function setReset(row, values=true) { + let lbsInput = row.children[1].children[0]; + let repsInput = row.children[2].children[0]; + let doneButton = row.children[3].children[0]; + + // Enable inputs + lbsInput.disabled = false; + repsInput.disabled = false; + + // Remove classes + lbsInput.classList.remove('is-success'); + lbsInput.classList.remove('is-danger'); + repsInput.classList.remove('is-success'); + repsInput.classList.remove('is-danger'); + + doneButton.classList.remove('is-success'); + + if (values) { + lbsInput.value = ''; + repsInput.value = ''; + } +} + +function setSetid(row, id) { + let setNumber = row.children[0]; + let lbsInput = row.children[1].children[0]; + let repsInput = row.children[2].children[0]; + let doneButton = row.children[3].children[0]; + + setNumber.textContent = id + 1; +} + +function setCheck(row) { // Disable input editing row.children[1].firstChild.disabled = true; row.children[2].firstChild.disabled = true; @@ -18,25 +51,24 @@ function checkSet(row) { 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); + setReset(elem.parentElement.parentElement, false); } else { elem.classList.add('is-success'); - checkSet(elem.parentElement.parentElement); + setCheck(elem.parentElement.parentElement); } } + +function onClickAddSet(elem) { + // Create the new row + let tableBody = elem.parentElement.parentElement.children[1].children[1]; + let row = tableBody.children[0].cloneNode(true); + + // Add new row to table + setReset(row); + setSetid(row, tableBody.children.length) + tableBody.appendChild(row) +} diff --git a/app/templates/base/form.html b/app/templates/base/form.html index 72083ae..9f356e0 100644 --- a/app/templates/base/form.html +++ b/app/templates/base/form.html @@ -4,7 +4,7 @@ <div class="container"> <div class="columns is-centered"> <div class="column {{ column_classes }}"> - <h1 class="title is-2">{{ title }}</h1> + <h1 class="title is-2">{% block title %}{% endblock %}</h1> <!-- TODO: render errors --> {% with messages = get_flashed_messages(with_categories=true) %} diff --git a/app/templates/workout/record.html b/app/templates/workout/record.html index 3dfb2c8..94fe611 100644 --- a/app/templates/workout/record.html +++ b/app/templates/workout/record.html @@ -1,52 +1,47 @@ -{% extends 'base/layout.html' %} +{% extends 'base/form.html' %} -{% block content %} -<div class="container"> - <div class="columns is-centered"> - <div class="column"> - <h1 class="title is-2">Record {{ workout.name }}</h1> - <div class="box"> - {% for exercise in workout.exercises %} - <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"> +{% block title %}Record {{ workout.name }}{% endblock %} + +{% block form %} +{% for exercise in workout.exercises %} +<div> + <h1 id="{{ exercise.name }}" 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 + 1 }}</th> + <td><input class="input" type="number"></td> + <td><input class="input" type="number"></td> + <td> + <a class="button" onClick="onClickSetCheck(this)"> <span class="icon is-small"> - <i class="fa fa-plus"></i> + <i class="fa fa-check"></i> </span> - <span>Add Set</span> - </button> - <button class="button is-danger">Skip</button> - </div> - <hr> - {% endfor %} - </div> - </div> + </a> + </td> + </tr> + {% endfor %} + </tbody> + </table> + <div class="buttons is-centered"> + <a class="button is-primary" onClick="onClickAddSet(this)"> + <span class="icon is-small"> + <i class="fa fa-plus"></i> + </span> + <span>Add Set</span> + </a> + <a class="button is-danger">Skip</a> </div> + <hr> </div> +{% endfor %} <script async type="text/javascript" src="/static/js/record.js"></script> |