More recently I have started to see some Project Management applications providing a Timer function/button on a Task.
The user can click to start the timer and it will record elapsed time and save to backend for that Task record.
The main reason I have never tried to add this functionality into my Project Management app that I am currently building is due to the fact, as soon as the user browses to another page in the app or web, there JavaScript Timer becomes useless!
One way I have seen some apps tackle this issue is by having every page in the app load using AJAX so that they can have a Timer Bar across the bottom of the screen which will remain there even as they navigate inside the PM app.
This seems like a pretty good method however in my situation I cannot do that. My Project Management app is a SugarCRM module so I cannot change how the main app flow works.
So my question is, what are some reliable ways to implement Task Timers in a PM app?
I would assume that it might would have to work together with PHP to somewhat stay in sync between the frontend JavaScript Timer and the backend.
For instance, say you have a Timer running on a Task for a few minutes and then you navigate away from the app. 1 hour later you load the PM app, it would be nice if the JavaScript timer would use the backend start timer time and calculate the elapsed time and then have the JavaScript timer simply start off from where it would have been if you had stayed in the App the whole past hour!
To clarify:
00:03:0001:03:00 and counting up from that value.Does this sound feasible even?
Yeah it's feasible, don't rely on the client. You need to save a start time to your db and have your client timer kick off at the same time. Just add a runtime check in your js to see what the start time was and do the math. That way it doesn't matter if someone refreshes the browser, loses network connection, or turns off their computer.
The client just does what the server tells is to do.
Brief Scenario
Step one: Client POST
Step two: Client Timer
On the click event start the timer locally in JS
Step three: Add runtime check
If the user refreshes their browser or performs any action that requires a page re-render you have couple options. 1. GET the start time from the server for existing timers and do the math in the client 2. GET the start point from an existing endpoint (Preferred) and just kick off the timer where the API said to
Bonus points: I definitely wouldn't use local storage for this, BUT you could use local storage as a backup.
Example: JS runs > no network detected > reference local storage
Annnnnnnd just in case here is some pseudo code because there are a lot of ways you could do this. Assuming that getActiveTimers performed a GET to an endpoint that returned JSON with all active timers and said start times and startTimer does the math in the client. As stated before you could have the calulations done server side so that client could just start and the provided time.
var init = function() {
getActiveTimers(function(rsp) {
if (rsp.timers) {
startTimer(rsp.timers.startTime);
}
});
$('.js-timer').on('click', function() {
// do time stuff
});
};
init();
The biggest takeaway here is yes, you can do this it is done ALL the time. I would also recommend looking into REST. Goodluck!