Infinite countdown timer using app script

I would like to create a 20 seconds countdown timer in my html. I have a table that will automatically refresh every 20 seconds, now what I want is to be able to see when will it refresh again. Is there a way to do this? Also, it will be much awesome if the timer is like a progress bar or something.

<script>

document.addEventListener("DOMContentLoaded",function(){

  google.script.run.withSuccessHandler(generateTable).getOnline();
  google.script.run.withSuccessHandler(generateTable1).getStatus();
  
  setInterval(() => {
    document.getElementById("tablebody").innerHTML = "";
    document.getElementById("tablebody1").innerHTML = "";
    google.script.run.withSuccessHandler(generateTable).getOnline();
    google.script.run.withSuccessHandler(generateTable1).getStatus();
    google.script.run.withSuccessHandler(getOnline).generateTable();
    google.script.run.withSuccessHandler(getStatus).generateTable1();
  }, 20000);
  

});

function generateTable(dataArray){

  var tbody = document.getElementById("tablebody");
  var tbody1 = document.getElementById("tablebody").innerHTML;
  
  dataArray.forEach(function(r){
  var row = document.createElement("tr");
  var col1 = document.createElement("td");
  col1.textContent = r[0];
  var col2 = document.createElement("td");
  col2.textContent = r[1];
  var col3 = document.createElement("td");
  col3.textContent = r[2];
  var col4 = document.createElement("td");
  col4.textContent = r[3]; // modified code
  row.appendChild(col1);
  row.appendChild(col2);
  row.appendChild(col3);
  row.appendChild(col4);
  tbody.appendChild(row);
});
 
}

function generateTable1(dataArray){

  var tbody = document.getElementById("tablebody1");
  var tbody1 = document.getElementById("tablebody1").innerHTML;
  
  dataArray.forEach(function(r){
  var row = document.createElement("tr");
  var col1 = document.createElement("td");
  col1.textContent = r[0];
  var col2 = document.createElement("td");
  col2.textContent = r[1];
  var col3 = document.createElement("td");
  col3.textContent = r[2];
  var col4 = document.createElement("td");
  col4.textContent = r[3]; 
  var col5 = document.createElement("td");
  col5.textContent = r[4];
  var col6 = document.createElement("td");
  col6.textContent = r[5];
  var col7 = document.createElement("td");
  col7.textContent = r[6];  

  row.appendChild(col1);
  row.appendChild(col2);
  row.appendChild(col3);
  row.appendChild(col4);
  row.appendChild(col5);
  row.appendChild(col6);
  row.appendChild(col7);
  tbody.appendChild(row);
});
 
}

var timeleft = 10;
var downloadTimer = setInterval(function(){
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
  } else {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1;
}, 1000);
</script>

<h1>🟢 Current Users</h1>
  <p> The table will automatically refresh every 10 seconds to display new users </p>
  <div id="countdown"></div>
    <table>
      <tr>
        <th>Timestamp & Current TimeZone</th>        
        <th>Name</th>
        <th>Last Name</th>
        <th>EID</th>
      </tr>
     <tbody id="tablebody">
    </table>   
  <hr class="rounded">
<h1>Assigned Case | Agent Status and Information</h1>
  <p> The table will automatically refresh every 30 seconds to display new users </p>
    <table>
      <tr>
        <th>EID</th> 
        <th>Name</th>
        <th>Rest Day</th>
        <th>Shift</th>
        <th>ASSIGNED CASE</th>
        <th>TM STATUS</th>
        <th>WORK STATUS</th>        
      </tr>
     <tbody id="tablebody1">
    </table>

Answer

For a progress Bar with 20 second timer:

let time_left = 20;
var progress = document.getElementById("progress");
var timeleft = document.getElementById("timeleft");
setInterval(function() {
  time_left = (time_left - 1); 
  timeleft.innerText = parseInt(time_left / 1) + "s Left";
  progress.style.width = ((time_left / 20) * 100) + "%";
  if (time_left <= 0) {

    // Do what ever you want to do here!

    time_left = 20 * 1;
    progress.style.width = "100%";
    timeleft.innerText = "20s Left";
  }
}, 1000);

#progressbar {
  text-align: center;
  outline: none;
  border: 2px solid black;
  background-color: rgba(200, 200, 200, 0.5);
  width 200px;
  height: 30px;
}

#timeleft {
  z-index: 100;
  background-color: transparent;
  font-family: 'Consolas';
}

#progress {
  transition: 0.5s;
  transform: translateY(-19px);
  background-color: rgba(0, 200, 0, 0.7);
  height: 100%;
  width: 0%;
}

<div id="progressbar">
  <b id="timeleft">20s Left</b>
  <div id="progress">
  </div>
</div>

Advertisement

Answer