How to add a timer to Eventum
I've been using Eventum for a while to keep track of bugs in a web application of mine. There was one feature missing that I really needed, and which made me switch to dotProject for a few months and that was a timer. When I'm working on a bug I wanted a way to be able to start and stop a timer to keep track of how much time I'm spending.
Yes, Eventum has the ability to track time, but you have to manually enter the number of minutes spent. dotProject has a button that lets you start and stop a timer and that's what I wanted in Eventum. So I added it.
There's only one file you'll need to edit. It's add_time_tracking.tpl.html in the /templates/ folder under your Eventum folder.
JavaScript
Starting around line 29 in that file is the opening to a set of JavaScript code. Add the following before the closing
-
/**
-
* Starts or stops the timer
-
*/
-
function doTimer()
-
{
-
if (document.getElementById('start_timer').innerHTML == 'Start Timer')
-
{
-
// Start the timer
-
document.getElementById('start_timer').innerHTML = 'Stop Timer';
-
-
if (isNaN(document.getElementById('time_spent').value) || document.getElementById('time_spent').value=='')
-
{
-
document.getElementById('time_spent').value = 0;
-
}
-
-
intervalRunning = setInterval('incrementTimer()', 6000);
-
-
}
-
else
-
{
-
// Stop the timer
-
document.getElementById('start_timer').innerHTML = 'Start Timer';
-
-
clearInterval(intervalRunning);
-
}
-
-
}
-
function incrementTimer()
-
{
-
tmpValue = document.getElementById('time_spent').value;
-
if (isNaN(tmpValue))
-
{
-
tmpValue = 0;
-
}
-
document.getElementById('time_spent').value = roundNumber((tmpValue * 1) + 0.1, 1);
-
//calcDateDiff(this.form, 0) ;
-
}
-
function roundNumber(num, dec)
-
{
-
return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
-
}
doTimer() turns on and off the timer when we click on the Start / Stop link we're going to create in the next step. It starts an interval timer that calls incrementTimer(). incrementTimer() runs every six seconds and adds 0.1 to the timer. If the timer isn't a number, mostly likely because it's blank, then the timer assumes it's 0. The roundNumber() function takes care of keeping the timer rounded to 1 decimal place. The roundNumber function came from the forums at DevArticles.com.
Changing the HTML
Look for the table cell that contains the input text field named time_spent. Replace the entire table cell with the following.
-
<td bgcolor="{$light_color}" width="100%">
-
<input class="default" type="text" size="5" name="time_spent" class="default" onChange="calcDateDiff(this.form, 0)" id="time_spent">
-
<span class="default">
-
({t}in minutes{/t})
-
</span>
-
{include file="error_icon.tpl.html" field="time_spent"}
-
<span style="padding-left:15px;">
-
<a href="" onclick="doTimer(); return false;" id="start_timer">Start Timer</a>
-
</td>
The most obvious change is the addition of a link with text Start Timer that starts the timer. When doTimer() runs it changes that link's caption to Stop Timer so you'll have a place to stop it as well. We also added 'id="time_spent"' to the input field so that we can reference it with document.getElementById().
That's It
And that should be it. Upload the file back to your server and give it a shot.
Question, Comments...
Do you have more questions. Please either leave a comment below or join us in our new forum.