Add dynamic option for time/reps on create screen

2 files changed, 77 insertions, 47 deletions

diff --git a/app/static/js/create.js b/app/static/js/create.js
new file mode 100644
index 0000000..ade61da
--- /dev/null
+++ b/app/static/js/create.js
@@ -0,0 +1,52 @@
+var rowsDiv = document.getElementById("rows");
+var rowId = rowsDiv.children.length;
+
+
+function handleAdd() {
+    newRow = rowsDiv.children[0].cloneNode(true);
+
+    exerciseNameInput = newRow.children[0].children[0].children[0].children[0];
+    exerciseNameInput.value = '';
+    exerciseNameInput.name = 'exercises-' + rowId + '-name';
+
+    exerciseSetInput = newRow.children[0].children[1].children[0].children[0];
+    exerciseSetInput.value = '';
+    exerciseSetInput.name = 'exercises-' + rowId + '-sets';
+
+    exerciseUnitInput = newRow.children[0].children[2].children[1];
+    exerciseUnitInput.value = '';
+    exerciseUnitInput.placeholder = 'Reps';
+    exerciseUnitInput.name = 'exercises-' + rowId + '-units';
+
+    exerciseUnitInput.parentNode.children[0].children[0].children[0].addEventListener("input", handleChange);
+
+    rowId++;
+    rowsDiv.append(newRow);
+}
+
+function handleDel(elem) {
+    if (rowId > 1) {
+        elem.parentNode.parentNode.remove();
+        rowId--;
+    }
+}
+
+document.getElementById("add").onclick = handleAdd;
+
+function handleChange(elem) {
+    if (elem.target.value == 'time') {
+        elem.target.parentNode.parentNode.parentNode.children[1].placeholder = "Time";
+        elem.target.parentNode.parentNode.parentNode.children[1].selected = true;
+        elem.target.parentNode.parentNode.children[1].children[0].classList.remove('fa-calculator');
+        elem.target.parentNode.parentNode.children[1].children[0].classList.add('fa-clock-o');
+    } else if (elem.target.value == 'reps') {
+        elem.target.parentNode.parentNode.children[1].children[0].classList.add('fa-calculator');
+        elem.target.parentNode.parentNode.children[1].children[0].classList.remove('fa-clock-o');
+        elem.target.parentNode.parentNode.parentNode.children[1].selected = true;
+        elem.target.parentNode.parentNode.parentNode.children[1].placeholder = "Reps";
+    }
+}
+
+for (row of rowsDiv.children) {
+    row.children[0].children[2].children[0].children[0].children[0].addEventListener('input', handleChange);
+}
diff --git a/app/templates/workout/create.html b/app/templates/workout/create.html
index 7446ec6..d5178fc 100644
--- a/app/templates/workout/create.html
+++ b/app/templates/workout/create.html
@@ -4,8 +4,7 @@
 <div class="field is-horizontal">
 	<div class="field-body">
 		<div class="field">
-			<p class="control is-expanded has-icons-left">
-			<input class="input" name="name" type="text" placeholder="Workout Name", value="{{ form.name.data or "" }}">
+			<p class="control is-expanded has-icons-left"> <input class="input" name="name" type="text" placeholder="Workout Name", value="{{ form.name.data or "" }}">
 			<span class="icon is-small is-left">
 				<i class="fa fa-tag"></i>
 			</span>
@@ -13,9 +12,7 @@
 		</div>
 	</div>
 </div>
-<div id="rows" class="field">
-	{% for entry in form.exercises.entries %}
-		<div class="field is-horizontal">
+<div id="rows" class="field"> {% for entry in form.exercises.entries %} <div class="field is-horizontal">
 			<div class="field-body">
 				<div class="field">
 					<p class="control is-expanded has-icons-left">
@@ -24,28 +21,40 @@
 							<i class="fa fa-tag"></i>
 						</span>
 					</p>
-				</div>
-				<div class="field">
 					<p class="control is-expanded has-icons-left">
-					<input class="input" name='exercises-0-sets' type="number" placeholder="Sets" min="1" max="100" value="{{ entry.data['sets'] or "" }}">
+					<input class="input" name='exercises-0-reps' type="hidden" placeholder="Reps" min="1" max="100" value="{{ entry.data['reps'] or "" }}">
 						<span class="icon is-small is-left">
-							<i class="fa fa-calculator"></i>
+							<i class="fa"></i>
 						</span>
 					</p>
 				</div>
 				<div class="field">
 					<p class="control is-expanded has-icons-left">
-					<input class="input" name='exercises-0-reps' type="number" placeholder="Reps" min="1" max="100" value="{{ entry.data['reps'] or "" }}">
+					<input class="input" name='exercises-0-sets' type="number" placeholder="Sets" min="1" max="100" value="{{ entry.data['sets'] or "" }}">
 						<span class="icon is-small is-left">
 							<i class="fa fa-calculator"></i>
 						</span>
 					</p>
 				</div>
-				<p class="button is-danger" onclick="handleDel(this)">
-					<span class="icon is-small">
-						<i class="fa fa-minus"></i>
-					</span>
-				</p>
+				<div class="field has-addons">
+                    <div class="control has-icons-left">
+                        <div class="select">
+                            <select class="exercise-unit">
+                                <option value="reps">Reps</option>
+                                <option value="time">Time</option>
+                            </select>
+                        </div>
+                        <div class="icon is-small is-left">
+                            <i class="fa fa-calculator"></i>
+                        </div>
+                    </div>
+					<input class="input" name='exercises-0-units' type="number" placeholder="Reps" min="1" max="100" value="{{ entry.data['reps'] or "" }}">
+				</div>
+                <p class="button is-danger" onclick="handleDel(this)">
+                    <span class="icon is-small">
+                        <i class="fa fa-minus"></i>
+                    </span>
+                </p>
 			</div>
 		</div>
 	{% endfor %}
@@ -65,36 +74,5 @@
         <span>Create Workout</span>
     </button>
 </div>
-
-<script>
-	var rowId = {{ form.exercises.entries | length }};
-
-	function handleAdd() {
-		rowsDiv = document.getElementById("rows");
-		newRow = rowsDiv.children[0].cloneNode(true);
-
-		exerciseNameInput = newRow.children[0].children[0].children[0].children[0];
-		exerciseNameInput.value = '';
-		exerciseNameInput.name = 'exercises-' + rowId + '-name';
-
-		exerciseSetInput = newRow.children[0].children[1].children[0].children[0];
-		exerciseSetInput.value = '';
-		exerciseSetInput.name = 'exercises-' + rowId + '-sets';
-
-		exerciseRepInput = newRow.children[0].children[2].children[0].children[0];
-		exerciseRepInput.value = '';
-		exerciseRepInput.name = 'exercises-' + rowId + '-reps';
-
-		rowId++;
-		rowsDiv.append(newRow);
-	}
-
-	function handleDel(elem) {
-        if (elem.parentNode.parentNode.parentNode.children.length > 1) {
-            console.log(elem.parentNode.parentNode.parentNode);
-            elem.parentNode.parentNode.remove();
-        }
-	}
-	document.getElementById("add").onclick = handleAdd;
-</script>
+<script src="../../static/js/create.js"></script>
 {% endblock %}