storing the current value of countdown timer in variable for using in the template toolkit file

Question

I have a count down timer in the Hours left field, to find the hours left. I also have a field to enter the total estimated time and upon enetering the value of total estimated time, the timer will start.

Now my requirement is when ever i changed the total estimated time, i want to get the value of timer, at that time to calculate the new value from where the timer starts again.

for eg : my first total estimated time = 3 and when the timer reaches 02:00:00, i changed the total estimated time to 5, so my timer will reset from 04:00:00 (logic : 5-3+2 = 4 or 5-(3-2) = 4)

so i want the current countdown timer value.HOw can i do this???

my Timer.js file :

var Timer;
var TotalSeconds;

function CreateTimer(TimerID, Time) {
Timer = document.getElementById(TimerID);
TotalSeconds = Time;

UpdateTimer()
window.setTimeout("Tick()", 1000);
}

function Tick() {
if (TotalSeconds <= 0) {
alert("Time's up!")
return;
}
TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
var Seconds = TotalSeconds;

var Days = Math.floor(Seconds / 86400);
Seconds -= Days * 86400;

var Hours = Math.floor(Seconds / 3600);
Seconds -= Hours * (3600);
var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" +    LeadingZero(Minutes) + ":" + LeadingZero(Seconds);
Timer.innerHTML = TimeStr;
}

function  LeadingZero(Time) {

return (Time < 10) ? "0" + Time : + Time;
}

this is where i am calling my timer.

<script type="text/javascript" src="./Timer.js"></script>
<div id='timer'></div>
[% IF bug.estimated_time >0 %]

<script type="text/javascript">
var time;
time = CreateTimer("timer",[% bug.estimated_time %]*3600);
window.onload = CreateTimer("timer",[% bug.estimated_time %]*3600);

</script>
[% END %]

here i want to call the function

 <tr>
    <td align="center">
      <input name="estimated_time" id="estimated_time"
             value="[% PROCESS formattimeunit
                               time_unit=bug.estimated_time %]"
             size="6" maxlength="6" onchange="updateRemainingTime();">
      <input type = "Hidden" name="estimate_time" id="estimate_time" value="[% bug.estimated_time %]" size="6" maxlength="6">

    </td

on calling updateRemainingTime(), i want to take the current value of timer and using that, i want to reset the counter using the above mentioned logic....

i didn't get you properly....i have the code of count down timer and also the template tool kit file having the code of the fields .Do you want to see the code?? i'am stuck at this point....any help is appreciable — Jenifer_justin, Jun 12 '13 at 03:28
You should provide a sample of the code you already have that demonstrates the problem, you are trying to solve. — mzedeler, Jun 12 '13 at 07:22
on calling the updateRemainingTime(), i want to get the current value of timer and do the logic — Jenifer_justin, Jun 12 '13 at 07:37
you should update your *question* above with the code and make it readable for others. — mzedeler, Jun 12 '13 at 09:31

RET · Answer 1 · 2013-06-14T03:20:32.810

Template Toolkit is largely irrelevant here - once the page is rendered, TT plays no further part.

Without the details of what's in Timer.js (there are dozens and dozens of Javascript timers out there), it's impossible to give you a pat answer. But presumably there is a method to obtain the current value of your timer, or interact with it to change it. And if there isn't, you need to create one.

I'm going to assume you're using this Timer, since its method names correspond with your code. If you aren't, hopefully this gets you on the way.

Basically, you need to modify one of the functions like this:

function UpdateTimer(adjustment) {
    if (typeOf adjustment != 'undefined') {
        // adjustment provided, change Timer value
        TotalSeconds += adjustment;
    } 
    Timer.innerHTML = TotalSeconds;
}

This variation allows you to optionally pass an adjustment (positive or negative) to alter the timer's value, Then you call it like this:

function updateRemainingTime() {
    var $origTime = $('#estimate_time');
    var newEstim = $('#estimated_time').val();
    UpdateTimer((newEstim - $origTime.val())*3600);
    $origTime.val(newEstim); // update hidden field to new value
}

You haven't mentioned if these values need to be stored in your database, but that's a whole different set of issues.

UPDATE

It looks like you're using a very close relation to the code I found, and what I'm suggesting you do still holds:

function UpdateTimer(adjustment) {
    var Seconds = TotalSeconds;
    if (typeOf adjustment != 'undefined') {
        // adjustment provided, change Timer value
        Seconds += adjustment;
    }
    /* rest of your UpdateTimer code remains unchanged */
}

My answer has been updated - your Timer.js is only trivially different to the one I was working from. — RET, Jun 14 '13 at 03:22
I have added the same code in my file, but on changing the value of estimated time, the timer is again starting with the new time. ie, i first added 3, then timer starts with 3 but when i add 5 after sometime, it is starting from 5 itself — Jenifer_justin, Jun 14 '13 at 04:12
It's not clear in your code what estimated_time and estimate_time contain - a count of hours? seconds? Is it a conversion problem? It's impossible to tell. Do some debugging! After the `Seconds += adjustment;` line, add `alert('TotalSeconds: ' + TotalSeconds + ', adjustment: ' + adjustment + ', Seconds: ' + Seconds)';` and see what that produces. — RET, Jun 14 '13 at 04:47
both estimated_time and estimate_time contains the estimated value in hours format. — Jenifer_justin, Jun 14 '13 at 06:57
Are the values of the variables in the debug output what you expect? Put another `alert()` line before the call to `UpdateTimer` in `updateRemainingTime` and see what values `newEstim` and `$origTime.val()` have. — RET, Jun 14 '13 at 07:08

storing the current value of countdown timer in variable for using in the template toolkit file

1 Answers1