Update record workout page

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>