Update record.js for timer support, partially working

2 files changed, 172 insertions, 65 deletions

diff --git a/app/static/js/record.js b/app/static/js/record.js
index 8f898c8..bbd8c63 100644
--- a/app/static/js/record.js
+++ b/app/static/js/record.js
@@ -1,8 +1,15 @@
+timers = new Map([]);
+class Timer {
+	startedBefore;
+	buttonId;
+	timeLeft;
+	finish;
+}
+
 // Register 'Enter' listeners on all inputs
 allInputs = Array.from(document.getElementsByClassName('input'))
 	.filter(e => e.type == 'number');
 allInputs.forEach(e => e.addEventListener('keydown', handleEnterKey));
-
 // Register onsubmit handler for form
 document.getElementById("form").addEventListener('submit', (el) => {
 	Array.from(event.target.getElementsByTagName('input')).forEach(i => i.disabled = false);
@@ -33,35 +40,44 @@ function handleEnterKey(event) {
 }
 
 function setReset(row, index, values=true) {
-	let lbsInput = row.children[1].children[0];
-	let repsInput = row.children[2].children[0];
-	let doneButton = row.children[3].children[0];
+	if (row.dataset.isTimer) {
+		let timerButton = row.children[1].children[0].children[0];
+		timerButton.disabled = false;
+		timerButton.classList.remove('is-success');
+		timerButton.classList.remove('is-danger');
+		row.children[2].children[0].classList.remove('is-success');
+
+	} else if (row.dataset.isReps) {
+		let lbsInput = row.children[1].children[0];
+		let repsInput = row.children[2].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');
+
+		// update id/classes to new row index
+		current = lbsInput.id;
+		updated = current.substring(0, current.length - 5);
+		lbs = updated + index + '-lbs';
+		lbsInput.id = lbs;
+		lbsInput.name = lbs;
+		reps = updated + index + '-reps'
+		repsInput.id = reps;
+		repsInput.name = reps;
+
+		row.children[3].children[0].classList.remove('is-success');
+
+		if (values) {
+			lbsInput.value = '';
+			repsInput.value = '';
+		}
 
-	// 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');
-
-	// update id/classes to new row index
-	current = lbsInput.id;
-	updated = current.substring(0, current.length - 5);
-	lbs = updated + index + '-lbs';
-	lbsInput.id = lbs;
-	lbsInput.name = lbs;
-	reps = updated + index + '-reps'
-	repsInput.id = reps;
-	repsInput.name = reps;
-
-	doneButton.classList.remove('is-success');
-
-	if (values) {
-		lbsInput.value = '';
-		repsInput.value = '';
 	}
 }
 
@@ -75,22 +91,32 @@ function setSetid(row, id) {
 }
 
 function setCheck(row) {
-	// Disable input editing
-	row.children[1].firstChild.disabled = true;
-	row.children[2].firstChild.disabled = true;
+	if (row.dataset.isTimer) {
+		timerButton = row.children[1].children[0].children[0];
+		timerButton.disabled = true;
+		timerButton.classList.add('is-success');
+		if (timerButton.children[0].children[0].classList.contains('fa-pause')) {
+			timerButton.children[0].children[0].classList.remove('fa-pause');
+			timerButton.children[0].children[0].classList.add('fa-play');
+		}
+	} else {
+		// 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')
+		// Add is-success to inputs
+		row.children[1].firstChild.classList.add('is-success')
+		row.children[2].firstChild.classList.add('is-success')
+	}
 }
 
 // Called when the check at the end of a set line is clicked
 function onClickSetCheck(elem) {
+	row = elem.parentElement.parentElement;
 	if (elem.classList.contains('is-success')) {
-		setReset(elem.parentElement.parentElement, elem.parentElement.parentElement.parentElement.children.length - 1, false);
+		setReset(row, row.parentElement.children.length - 1, false);
 	} else {
 		elem.classList.add('is-success');
-
 		setCheck(elem.parentElement.parentElement);
 	}
 }
@@ -107,18 +133,93 @@ function onClickAddSet(elem) {
 	tableBody.appendChild(row)
 }
 
-function loadTimerTimes() {
+function getTimeRemaining(end) {
+	var t = Date.parse(end) - Date.parse(new Date());
+	var seconds = Math.floor((t/1000) % 60);
+	var minutes = Math.floor((t/1000/60) % 60);
+	return { 'total': t,
+		'minutes': minutes,
+		'seconds': seconds,
+	};
+}
 
+function runClock(timer) {
+	var timeInterval;
+	function updateClock() {
+		var t = getTimeRemaining(timer.finishDate);
+		timer_time = document.getElementById(timer.elem.parentElement.children[1].id);
+		timer_time.innerHTML = t.minutes.toString().padStart(2, "0") + ':' + t.seconds.toString().padStart(2, "0");
+		if (t.total <= 0 || timer.finished) {
+			clearInterval(timeInterval);
+			updateTimerButton(timer.elem);
+			onClickSetCheck(timer.elem.parentElement.parentElement.parentElement);
+			timer.finished = true;
+		}
+	}
+	if (!timer.startedBefore) {
+		// if its never been started before say it now has
+		timer.startedBefore = true;
+	}
+	// create a new timeInterval for this element
+	timeInterval = setInterval(updateClock, 100);
+	timer.intervalId = timeInterval;
+	// add a new map record
+	timers.set(timer.elem.id, timer);
 }
 
-function onClickPausePlayTimer(elem) {
+function updateTimerButton(elem) {
 	if (elem.children[0].children[0].classList.contains('fa-play')) {
-		paused = false;
 		elem.children[0].children[0].classList.remove('fa-play');
 		elem.children[0].children[0].classList.add('fa-pause');
 	} else {
-		paused = true;
 		elem.children[0].children[0].classList.add('fa-play');
 		elem.children[0].children[0].classList.remove('fa-pause');
 	}
 }
+
+function onClickPausePlayTimer(elem) {
+		// on press, if the button has not been pressed before
+		if (!elem.dataset.pressedBefore) {
+			// say it now has
+			elem.dataset.pressedBefore = true;
+			// create a new Timer object that represents the timer for this row
+			timer = new Timer();
+			timer.elem = elem;
+			timer.paused = true;
+			seconds = elem.parentElement.parentElement.parentElement.dataset.timerSeconds;
+			timer.finishDate = new Date(Date.parse(new Date()) + 1*seconds*1000);
+			console.log(timer.finishDate);
+		}
+		updateTimerButton(elem);
+		if (timer.paused) {
+			console.log('paused, starting...');
+			timer.paused = false;
+			// start/resume timer
+			resumeTimer(timer);
+		} else {
+			console.log('started, pausing...');
+			timer.paused = true;
+			// pause timer
+			pauseTimer(timer);
+	}
+}
+
+function resumeTimer(timer) {
+	var finish;
+	if (typeof timer.timeLeft !== 'undefined') {
+		// if we have set the time left before, then use that time
+		finish = new Date(Date.parse(new Date()) + timer.timeLeft);
+		timer.finishDate = finish;
+	} else {
+		// otherwise, this is first run, so use finishDate
+		finish = new Date(Date.parse(timer.finishDate));
+	}
+	runClock(timer, finish);
+}
+
+function pauseTimer(timer) {
+	intervalId = timers.get(timer.elem.id).intervalId;
+	clearInterval(intervalId);
+	timer.timeLeft = getTimeRemaining(timer.finishDate).total;
+	timers.delete(timer.elem.id);
+}
diff --git a/app/templates/workout/record.html b/app/templates/workout/record.html
index 9b10f2d..8c8eaf2 100644
--- a/app/templates/workout/record.html
+++ b/app/templates/workout/record.html
@@ -5,6 +5,7 @@
 {% block form %}
 <div>
 	{% for exercise in workout.exercises %}
+	{% set outer_loop = loop %}
 	{{ form.exercises.entries[loop.index0]['id'] }}
 	<h1 class="title is-4 has-text-black">{{ exercise.name }}</h1>
 	<div>
@@ -21,33 +22,38 @@
 			</thead>
 			<tbody>
 				{% for set in form.exercises.entries[loop.index0].sets.entries %}
-				<tr>
-					<th>{{ loop.index }}</th>
-					{% if exercise.type == 'time' %}
-					<td>
-						<div class="timer">
-							<a class="button" onClick="onClickPausePlayTimer(this)">
+				{% if exercise.type == 'time' %}
+				<tr data-is-timer=true data-timer-seconds={{ exercise.units}}>
+					{% else %}
+					<tr data-is-reps=true>
+						{% endif %}
+						<th>{{ loop.index }}</th>
+						{% if exercise.type == 'time' %}
+						<td>
+							<div class='timer-{{ outer_loop.index }}'style="display:flex;align-items:center;font-size:1em;">
+								<button type="button" onclick="onClickPausePlayTimer(this)" class="button">
+									<span class="icon is-small">
+										<i class="fa fa-play"></i>
+									</span>
+								</button>
+								<span style='padding-left: 15px;' id='timer-time'>
+									{{ exercise.units }} seconds
+								</span>
+							</div>
+						</td>
+						{% else %}
+						<td>{{ set['lbs'](class_='input') }}</td>
+						<td>{{ set['units'](class_='input') }}</td>
+						{% endif %}
+						<td>
+							<a class="button" onClick="onClickSetCheck(this)">
 								<span class="icon is-small">
-									<i class="fa fa-play"></i>
+									<i class="fa fa-check"></i>
 								</span>
 							</a>
-							<span class="{{ ['units'] }}">
-							</span>
-						</div>
-					</td>
-					{% else %}
-					<td>{{ set['lbs'](class_='input') }}</td>
-					<td>{{ set['units'](class_='input') }}</td>
-					{% endif %}
-					<td>
-						<a class="button" onClick="onClickSetCheck(this)">
-							<span class="icon is-small">
-								<i class="fa fa-check"></i>
-							</span>
-						</a>
-					</td>
-				</tr>
-				{% endfor %}
+						</td>
+					</tr>
+					{% endfor %}
 			</tbody>
 		</table>
 		<div class="buttons is-centered">