Hi,
I've Created one Custom Widget for employee Check-in/Check-out functionality. In that I've added Timer function with two buttons ( Check In / Check Out ). When Clicked on Check in Timer starts run and capture the start time and when clicked on Check out Timer stops running and capture the end time.
But Whenever I Reload the page then the Timer starts from zero ( 00: 00:00 ). How to overcome this? Here I add the scripts,
Client Script:
api.controller = function($scope, $rootScope) {
/* widget controller */
// Disable widget refresh
$rootScope.$on('sp.refresh', function(event, data) {
event.preventDefault();
});
// if( !(document.getElementById("checkOutButton")) || !(document.getElementById("checkInButton"))){
// document.getElementById('timer').preventDefault();
// }
var c = this;
var self = this; // Assign 'this' to 'self' variable
var startTime;
var timerInterval;
var progressBarWidth = 0;
function startTimer() {
var elapsedTime = 0;
timerInterval = setInterval(function() {
elapsedTime += 1000;
var formattedTime = formatTime(elapsedTime);
updateTimer(formattedTime);
updateProgressBar(elapsedTime);
if (progressBarWidth >= 100) {
stopTimer();
document.getElementById("progressBar").style.backgroundColor = "gray";
}
}, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
}
function formatTime(milliseconds) {
var totalSeconds = Math.floor(milliseconds / 1000);
var hours = Math.floor(totalSeconds / 3600);
var minutes = Math.floor((totalSeconds % 3600) / 60);
var seconds = totalSeconds % 60;
var formattedHours = hours.toString().padStart(2, "0");
var formattedMinutes = minutes.toString().padStart(2, "0");
var formattedSeconds = seconds.toString().padStart(2, "0");
return {
hours: formattedHours,
minutes: formattedMinutes,
seconds: formattedSeconds
};
}
function updateTimer(time) {
document.getElementById("hoursFront").textContent = time.hours;
document.getElementById("minutesFront").textContent = time.minutes;
document.getElementById("secondsFront").textContent = time.seconds;
}
function updateProgressBar(elapsedTime) {
progressBarWidth = (elapsedTime / (1 * 60 * 60 * 1000)) * 100;
document.getElementById("progressBar").style.width = progressBarWidth + "%";
}
document.getElementById("checkInButton").addEventListener("click", function() {
startTime = new Date();
startTimer();
document.getElementById("checkOutButton").style.display = "inline";
this.style.display = "none";
document.getElementById("progressBarWrapper").style.display = "block";
//document.getElementById("checkInOutTime").innerHTML = "Checked In: " + startTime.toLocaleString();
//alert(startTime.toLocaleString());
c.data.one = startTime.toLocaleString();
c.data.out ='';
c.server.update();
document.getElementById("checkInOutTime").style.display = "block";
// Add 'flipped' class to the timer boxes to trigger the flip animation
document.querySelectorAll(".timer-box").forEach(function(box) {
box.classList.add("flipped");
//document.getElementById('timer').preventDefault();
});
});
document.getElementById("checkOutButton").addEventListener("click", function() {
var endTime = new Date();
var duration = Math.round((endTime - startTime) / 1000); // Duration in seconds
stopTimer();
updateTimer(formatTime(0));
c.data.Total= document.getElementById("duration").innerHTML =
formatTime(duration * 1000).hours +
" hours, " +
formatTime(duration * 1000).minutes +
" minutes, " +
formatTime(duration * 1000).seconds +
" seconds";
document.getElementById("duration").style.display = "block";
document.getElementById("checkInButton").style.display = "inline";
this.style.display = "none";
document.getElementById("progressBarWrapper").style.display = "none";
// document.getElementById("checkInOutTime").innerHTML =
// "Checked In: " + startTime.toLocaleString() + "<br>Checked Out: " + endTime.toLocaleString();
c.data.one = startTime.toLocaleString();
c.data.out = endTime.toLocaleString();
c.server.update();
document.getElementById("checkInOutTime").style.display = "block";
// Remove 'flipped' class from the timer boxes to reset the flip animation
document.querySelectorAll(".timer-box").forEach(function(box) {
box.classList.remove("flipped");
});
});
};
Server Script:
(function ($sp) {
var us = gs.getUserID();
var checkin = input.one;
var checkout = input.out;
var s = input.Total;
//gs.addInfoMessage(s);
var gr = new GlideRecord('u_employee_day_register');
gr.addQuery('u_employee_name', us);
gr.addEncodedQuery('u_dateONToday@javascript:gs.beginningOfToday()@javascript:gs.endOfToday()');
gr.query();
if (!gr.next()) {
gr.initialize();
gr.u_employee_name = us;
gr.u_check_in = checkin;
gr.insert();
} else {
gr.u_check_in = checkin;
}
gr.u_check_out = checkout;
gr.u_total_duration = s;
gr.update();
})();
Check In:
Check Out:
