Save timer to local Storage

This commit is contained in:
Andrew Malsbury 2023-10-25 18:26:33 +00:00
parent 5faac97491
commit 6a0b291acd
1 changed files with 53 additions and 35 deletions

View File

@ -1,19 +1,50 @@
document.addEventListener("DOMContentLoaded", function() {
// Default values
var hours = 0;
var minutes = 0;
var seconds = 0;
var timerInterval = null; // variable to hold interval id
var isPaused = false; // variable to track if the timer is paused
var timerInterval = null;
var isPaused = false;
var ticketID = getCurrentTicketID();
// Load stored time if available
loadTimeFromStorage();
function getCurrentTicketID() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get('ticket_id');
}
function getLocalStorageKey() {
return 'time-' + ticketID;
}
function loadTimeFromStorage() {
var storedTime = localStorage.getItem(getLocalStorageKey());
if (storedTime) {
var parsed = JSON.parse(storedTime);
hours = parsed.hours || 0;
minutes = parsed.minutes || 0;
seconds = parsed.seconds || 0;
}
}
function storeTimeToStorage() {
var timeData = {
hours: hours,
minutes: minutes,
seconds: seconds
};
localStorage.setItem(getLocalStorageKey(), JSON.stringify(timeData));
}
function startTimer() {
if(timerInterval === null) {
if (timerInterval === null) {
timerInterval = setInterval(countTime, 1000);
}
}
// Counter
function countTime() {
++seconds;
if (seconds == 60) {
@ -25,24 +56,11 @@ document.addEventListener("DOMContentLoaded", function() {
hours++;
}
// Total time worked
var time_worked = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
document.getElementById("time_worked").value = time_worked;
storeTimeToStorage();
}
// Allows manually adjusting the timer
function setTime() {
var time_as_text = document.getElementById("time_worked").value;
const time_text_array = time_as_text.split(":");
hours = parseInt(time_text_array[0]);
minutes = parseInt(time_text_array[1]);
seconds = parseInt(time_text_array[2]);
if (!isPaused) {
startTimer(); // start the timer when time is manually adjusted
}
}
// This function "pads" out the values, adding zeros if they are required
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
@ -52,56 +70,56 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
// Function to pause the timer
function pauseTimer() {
if(timerInterval !== null) {
if (timerInterval !== null) {
clearInterval(timerInterval);
timerInterval = null;
}
}
// Function to toggle the timer
function toggleTimer() {
var button = document.getElementById("toggleTimer");
if(isPaused) {
// If timer is paused, then start the timer and change the button icon to pause
if (isPaused) {
startTimer();
button.innerHTML = '<i class="fas fa-pause"></i>';
isPaused = false;
} else {
// If timer is running, then pause the timer and change the button icon to play
pauseTimer();
button.innerHTML = '<i class="fas fa-play"></i>';
isPaused = true;
}
}
function setTime() {
var time_as_text = document.getElementById("time_worked").value;
const time_text_array = time_as_text.split(":");
hours = parseInt(time_text_array[0]);
minutes = parseInt(time_text_array[1]);
seconds = parseInt(time_text_array[2]);
if (!isPaused) {
startTimer();
}
}
function pauseForEdit() {
wasRunningBeforeEdit = !isPaused; // check if timer was running
var wasRunningBeforeEdit = !isPaused;
pauseTimer();
}
function restartAfterEdit() {
var wasRunningBeforeEdit = !isPaused;
if (wasRunningBeforeEdit) {
startTimer();
}
}
// Start timer when page is loaded
startTimer();
// Set setTime as the onchange event handler for the time input
// Event listeners
document.getElementById("time_worked").addEventListener('change', setTime);
// Toggle timer when button is clicked
document.getElementById("toggleTimer").addEventListener('click', toggleTimer);
// Function to pause the timer when the time input is clicked
document.getElementById("time_worked").addEventListener('focus', pauseForEdit);
// Function to restart the timer when the time input is clicked away from
document.getElementById("time_worked").addEventListener('blur', restartAfterEdit);
});
});