PrimeFaces: dialog

Showing posts with label dialog. Show all posts

Showing posts with label dialog. Show all posts

Tuesday, March 20, 2012

session timeout countdown dialog with primefaces

<p:dialog header="Your session is about to expire!"
                    widgetVar="timeoutDialog" 
                    showEffect="fade" 
                    hideEffect="fade" 
                    modal="true"
                    width="400"
                    height="200"
                    closable="false"
                    draggable="false"
                    resizable="false"   
                    appendToBody="true"
                    >              
            <br/><br/>
            <p>
              <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>
              <div>You will be logged off in <span id="dialog-countdown" style="font-weight:bold"></span> seconds.</div>
            </p>
            <br/><br/><br/>
            <p>Do you want to continue your session?</p>            
            <p:commandButton  value="Yes, Keep working"  action="#{loginController.keepAlive}" oncomplete="resetPageTimer()" />
            <p:commandButton value="No, Log off" action="#{loginController.logoutUser}"  />
          </p:dialog>

<script type="text/javascript">
            var startFrom = 10;//#{session.session.maxInactiveInterval};  // Total session time out setting eg 10 sec, Real implementation assign values from session
            var loopTill = 6;//#{systemController.getSessionTimeoutAlertDuration()};  //Count down degins from 6 sec and starts after 4 sec ie 10-6
            var reduce = 1;
            var handleDialog = null;
            var redirectPage = "#{request.contextPath}/faces/login/login.xhtml";
            var countDownDiv = "dialog-countdown";
  
            function resetPageTimer()  {
              timeoutDialog.hide();
              startPageTimer(startFrom, loopTill);
              clearInterval(handleDialog);
            }

function startDialogTimer(wCounter, timeOutPage) {  
              var e = null;
              if(!e)
                e = document.getElementById(countDownDiv);
              e.innerHTML = wCounter;
              handleDialog = setInterval(function() {
                if(wCounter == 0) {
                  clearInterval(handleDialog);
                  window.location.href = timeOutPage;
                }
                else {
                  wCounter -= reduce;
                  e.innerHTML = wCounter;
                }
              }, reduce * 1000);
            }
            
            function startPageTimer(wFrom, wReach) {
              var handle = null;
              handle = setInterval(function() {
                if(wFrom == wReach) {
                  clearInterval(handle);
                  timeoutDialog.show();
                  startDialogTimer(loopTill, redirectPage);
                }
                else {
                  wFrom -= reduce;
                }
              }, reduce * 1000);
            }
            startPageTimer(startFrom, loopTill);
          </script>

prime faces session timeout countdown dialog jsf

<p:dialog header="Your session is about to expire!"
                    widgetVar="timeoutDialog" 
                    showEffect="fade" 
                    hideEffect="fade" 
                    modal="true"
                    width="400"
                    height="200"
                    closable="false"
                    draggable="false"
                    resizable="false"   
                    appendToBody="true"
                    >              
            <br/><br/>
            <p>
              <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>
              <div>You will be logged off in <span id="dialog-countdown" style="font-weight:bold"></span> seconds.</div>
            </p>
            <br/><br/><br/>
            <p>Do you want to continue your session?</p>            
            <p:commandButton  value="Yes, Keep working"  action="#{loginController.keepAlive}" oncomplete="resetPageTimer()" />
            <p:commandButton value="No, Log off" action="#{loginController.logoutUser}"  />
          </p:dialog>

<script type="text/javascript">
            var startFrom = 10;//#{session.maxInactiveInterval};  // Total session time out setting eg 10 sec, Real implementation assign from session
            var loopTill = 6;//#{systemController.getSessionTimeoutAlertDuration()};  //Count down degins from 6 sec and starts after 4 sec ie 10-6
            var reduce = 1;
            var handleDialog = null;
            var redirectPage = "#{request.contextPath}/faces/login/login.xhtml";
            var countDownDiv = "dialog-countdown";
  
            function resetPageTimer()  {
              timeoutDialog.hide();
              startPageTimer(startFrom, loopTill);
              clearInterval(handleDialog);
            }

function startDialogTimer(wCounter, timeOutPage) {  
              var e = null;
              if(!e)
                e = document.getElementById(countDownDiv);
              e.innerHTML = wCounter;
              handleDialog = setInterval(function() {
                if(wCounter == 0) {
                  clearInterval(handleDialog);
                  window.location.href = timeOutPage;
                }
                else {
                  wCounter -= reduce;
                  e.innerHTML = wCounter;
                }
              }, reduce * 1000);
            }
            
            function startPageTimer(wFrom, wReach) {
              var handle = null;
              handle = setInterval(function() {
                if(wFrom == wReach) {
                  clearInterval(handle);
                  timeoutDialog.show();
                  startDialogTimer(loopTill, redirectPage);
                }
                else {
                  wFrom -= reduce;
                }
              }, reduce * 1000);
            }
            startPageTimer(startFrom, loopTill);
          </script>

Subscribe to: Posts (Atom)