The overall goal is to have a python program that upon receiving its first post request, it will render a html template that uses JavaScript to start a stopwatch. When the python program receives its second post request, I would like to be able to grab the values of the stopwatch at that current moment in time.
I was going to use the browsers local storage but quickly realized that would not be an option considering I will be deploying to heroku. My current implementation fails because each time I return the html template(or I send a new post request), the values get reset and the post request is never sent back to my python script(127.0.0.1:5000/test).
How can I start the stopwatch upon the first post request to my python script, and then grab those values without restarting it upon the second post request to my python script?
Python program - I am including very little of this file because I do not think it is necessary. Please let me know if I should include more.
@app.route('/test', methods=['POST'])
def dashboard():
return render_template('dashboard.html')
dashboard.html
<!DOCTYPE html>
<html>
<body>
<div id="stopwatch-container">
<div id="stopwatch">00:00:00</div>
</div>
<script>
var stopwatch = document.getElementById("stopwatch");
var startBtn = document.getElementById("start-btn");
var timeoutId = null;
var ms = 0;
var sec = 0;
var min = 0;
if(ms > 0){
postHook(sec);
} else {
start();
}
function postHook(sec){
object = {
stopwatchValues: sec
}
fetch("https://127.0.0.1:5000/test", { method: 'POST',body: JSON.stringify(object) })
}
/* function to start stopwatch */
function start(count) {
timeoutId = setTimeout(function() {
ms = parseInt(ms);
sec = parseInt(sec);
min = parseInt(min);
console.log(sec)
ms++;
if (ms == 100) {
sec = sec + 1;
ms = 0;
}
if (sec == 60) {
min = min + 1;
sec = 0;
}
if (ms < 10) {
ms = '0' + ms;
}
if (sec < 10) {
sec = '0' + sec;
}
if (min < 10) {
min = '0' + min;
}
if(count == null){
count = 69;
}
stopwatch.innerHTML = min + ':' + sec + ':' + ms + ' | ' + count;
// calling start() function recursivly to continue stopwatch
start();
}, 10); // setTimeout delay time 10 milliseconds
}
</script>
</body>
</html>
from How can I prevent my values from restarting when I receive a post request?
No comments:
Post a Comment