Add javascript to add sets while recording workout

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>