(I'm STUCK!) How to Create Different Instances of a Timer

(I'm STUCK!) How to Create Different Instances of a Timer

  

I'm creating a Table of Timers. It looks like these:

I'm able to create as I please. The problem is that I don't know how to create different instances of this Timer object (from EasytimerJS) because what's happening is that whenever I press the "Create Timer" BUTTON (Submit) , the currently running timers are reset to 00:00:00 and all of them have the same value - 00:00:00.

This is happening because I've set my JS to manipulate this line of code:

SyntaxEditor Code Snippet

        <div class='values'>00:00:00</div>

  timer.addEventListener('secondsUpdated', function (e) {

            $('#chronoExample .values ').html(timer.getTimeValues().toString());        });


so all of the JS files inside the table rows are operating on " class='values' " (hence it seems they all have one instance)

My Outsystems view:

where HTML is:

SyntaxEditor Code Snippet

  <div id=""chronoExample"">     
      <div>           
        <button class=""pauseButton btn btn-primary btn-sm projectAdd"" onclick=""return false;"" >Pause</button>

        <button class=""stopButton btn btn-danger btn-sm"" onclick=""return false;"">Stop</button>

        <button class=""resetButton btn btn-warning btn-sm"" onclick=""return false;"">Resume</button>     
    
      </div>
  </div>

where JS is:

SyntaxEditor Code Snippet

"
       var timer = new Timer();
       var btnId; 
        $('#chronoExample .pauseButton').click(function () {
            timer.pause();
        });

        $('#chronoExample .stopButton').click(function () {
            timer.stop();``
            timerStopped = document.getElementsByClassName(""values"")[0].innerText;
            OsNotifyWidget('"+FakeNotifyWidget.Id+"', timerStopped);
            console.log(timerStopped);
            btnId =  document.getElementById('"+stopBtn.Id+"').click();

        });
        $('#chronoExample .resetButton').click(function () {
            timer.reset();
        });

         $('#chronoExample .hiddenBtn').click(function () {
           console.log('hidden! clicked');
                
        });

        timer.addEventListener('secondsUpdated', function (e) {
            $(' .customClass"+TaskTable.List.CurrentRowNumber+" ').html(timer.getTimeValues().toString());
               
        });
        timer.addEventListener('started', function (e) {
            $(' .customClass"+TaskTable.List.CurrentRowNumber+" ').html(timer.getTimeValues().toString());
        });
        timer.addEventListener('reset', function (e) {
            $(' .customClass"+TaskTable.List.CurrentRowNumber+" ').html(timer.getTimeValues().toString());
        }); 


THE QUESTION:

How Can I implement in Outsystems so that each row in this table of timers have their own instances of timer. For example, when I pause timer in row 2, row 1 is still running, and so forth. Should I use WebBlocks or whatnot? I've been stuck since last week.

Hi Helios,

Webblocks will not help you in this because this is JS and everything will be on the page without any separation. what you need is to have 1 timer var for each instance of timer that you want. Look into this https://codingwithsara.com/the-multiple-stopwatches-on-one-page-in-javascript-for-beginners/ it will help you.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Helios,

Webblocks will not help you in this because this is JS and everything will be on the page without any separation. what you need is to have 1 timer var for each instance of timer that you want. Look into this https://codingwithsara.com/the-multiple-stopwatches-on-one-page-in-javascript-for-beginners/ it will help you.

Regards,

Marcelo

Thanks a lot. currently looking into this. Meanwhile, I've added my Outystems View and the necessary codes to shed more light on the issue. Thanks again, I'll keep you posted about this tutorial.


I think your problem is the identifier of the div element that holds the timer controls.


Where did you get the list of timers? If I were you I will set the id of the 

<div id=""chronoExample"">  


to Element.CurrentRowNumber so it will become like

{Element.CurrentRowNumber} _chronoExmaple so it will be unique.

After that, you need to create a javascript function that will initialize each timer instance.


something like in functional programming:

function initTimer(id){

       var timer = new Timer();
       var btnId; 
        $(id + ' .pauseButton').click(function () {
            timer.pause();
        });

        $(id + ' .stopButton').click(function () {
            timer.stop();``
            timerStopped = document.getElementsByClassName(""values"")[0].innerText;
            OsNotifyWidget('"+FakeNotifyWidget.Id+"', timerStopped);
            console.log(timerStopped);
            btnId =  document.getElementById('"+stopBtn.Id+"').click();

        });
        $(id + ' .resetButton').click(function () {
            timer.reset();
        });

         $(id + ' .hiddenBtn').click(function () {
           console.log('hidden! clicked');
                
        });

        timer.addEventListener('secondsUpdated', function (e) {
            $(' .customClass"+TaskTable.List.CurrentRowNumber+" ').html(timer.getTimeValues().toString());
               
        });
        timer.addEventListener('started', function (e) {
            $(' .customClass"+TaskTable.List.CurrentRowNumber+" ').html(timer.getTimeValues().toString());
        });
        timer.addEventListener('reset', function (e) {
            $(' .customClass"+TaskTable.List.CurrentRowNumber+" ').html(timer.getTimeValues().toString());
        }); 
}


You may want to put this in the Javascript parameter of the parent web block or in the expression of the parent web block of the timer partial web block you already have.


Then call this function after your timer HTML.

initTimer(Element.CurrentRowNumber + "_chronoExample");


I haven't tested this myself but this is the main idea.