SA-4171

Summary

User has a requirement to use a timer on the screen which will be reset for every click on the screen. He used a section with JS functions to reset the timer and included it in a the section UserTopPanel. This is working as expected whenever the user clicks on top panel area. Now user is looking for GCS assistance on implementing the same for the whole page instead of top panel.

The application RAP has been given and the necessery screenshots have been provided.

Error Messages

None.

Steps to Reproduce

1. Load the attached Application

2. Log in:
- UserName: Hari.Seldon
- Password: rules

3. Open User Portal

4. Notice the counter on the top.

5. Click to the right of the counter, you will notice that the counter resets. Also note the message in the Console

6. Click anywhere in the white space, you will notice that the counter doesn’t reset. Note that the Console doesn’t capture any events.

Please see the attached files for more details and screen shots.

Root Cause

As the screen uses iFrames, the onClick functionality should be included on all the frames.

Resolution

Provided the following code to the user. Using this now he is able to achieve his requirement.

<script>
var hrs;
var mins;
var secs;
var foo;

function n(n){
    return n > 9 ? "" + n: "0" + n;
}

function countdown() {
       setTimeout('Decrement()',1000);
    }

function Decrement() {

       document.getElementById("timerBtn").innerHTML = "&nbsp;" + n(getminutes()) + ":" 
            + n(getseconds()) + "&nbsp;";

       secs--;
       if(secs < 0)
          secs = 0;
       setTimeout('Decrement()',1000);
}

function gethours() {
    hrs = Math.floor(mins/ 60);
    if(hrs < 0)
          hrs = 0;
    return hrs;
}

function getminutes() {
    mins = Math.floor(secs / 60);
    if(mins < 0)
          mins = 0;
    return mins;
}
                
function getseconds() {
    return secs-Math.round(mins *60);
}

function PingServer()
{
   var oSafeURL= new SafeURL("StreelU-.StubActivity");
   pega.util.Connect.asyncRequest('GET', oSafeURL.toURL(),'');
   foo = true;
}

function checkActivity(timeout, interval, elapsed) {
    if (foo) {
        elapsed = 0;
        min = (timeout-elapsed)/60000;
        secs = min * 60;
        foo = false;
    }

    if (elapsed < timeout) {
        elapsed += interval;
        setTimeout(function(){
           checkActivity(timeout, interval, elapsed);
        }, interval);
    } else {
        var oSafeURL = new SafeURL("StreelU-.StubActivity");
        window.location = oSafeURL.toURL();
    }    
}

function LoadURL(){
    foo = true;
    min = 60; 
    secs = min * 60;
    checkActivity(min * 60000, 3000, 0);
    countdown();
}

pega.util.Event.addListener(window, "load", LoadURL);

</script>

<style>
.btn {
      border-radius: 10px;
      padding-bottom: 2px;
}
.btn-info{
    display: inline-block;
    font-family: 'Arial', sans-serif;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #AA640F;
    margin-bottom:5px;
    width: auto;
    height: 20px;
    border-radius: 8px;    
}

.countdown {
     border: 2px solid;
     border-radius: 25px;
     display: inline-block;
}
</style>

<div id="countdown" class="timer" >
<button class='btn btn-info' title='Extend session time' id='timerBtn'>:</button></div>

<script>

$(document).ready(function(){

  $('#timerBtn').click(function(e) {
     console.log("ping server");
     PingServer();
  });

  $(document).click(function(e) {
     console.log("document clicked");
     initOnClick();  
     foo = true;
  });

  $(window).ajaxComplete(function() {
     console.log("ajax completed");
    foo = true;
  });

});

function initOnClick() {
    console.log(" ---in initOnclick method ");
    var elementIfr = document.getElementsByTagName("iframe");
    console.log(" --- iframeNu  init method "+elementIfr.length);
    setTimeout("init()", 5000); 
}


</script>


<script>

function iframeClic( ) {
   console.log(" --- In iframeClic  -- ");
   foo = true;
}

function init() {

    var element = document.getElementsByTagName("iframe");
    console.log(" --- iframe  init method "+element.length);
    for (var i=0; i<element.length; i++) {

        console.log(" --- iframe id  -- "+element[i].id);

        document.getElementById(element[i].id).contentWindow.document.body.onclick = 
        function() {
           iframeClic(); 
        }
    }
}

setTimeout("init()", 3000);


</script>