Added the Ability to Toggle the Ticket Timer Pause / Play

js/ticket_time_tracking.js

@@ -1,49 +1,87 @@
-// Ticket time tracking
+document.addEventListener("DOMContentLoaded", function() {
 
-// Default values
-var hours = 0;
-var minutes = 0;
-var seconds = 0;
-setInterval(countTime, 1000);
+    // 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
 
-// Counter
-function countTime()
-{
-    ++seconds;
-    if (seconds == 60) {
-        seconds = 0;
-        minutes++;
-    }
-    if (minutes == 60) {
-        minutes = 0;
-        hours++;
+    function startTimer() {
+        if(timerInterval === null) {
+            timerInterval = setInterval(countTime, 1000);
+        }
     }
 
-    // Total timeworked
-    var time_worked = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
-    document.getElementById("time_worked").value = time_worked;
-}
+    // Counter
+    function countTime() {
+        ++seconds;
+        if (seconds == 60) {
+            seconds = 0;
+            minutes++;
+        }
+        if (minutes == 60) {
+            minutes = 0;
+            hours++;
+        }
 
-// 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]);
-}
+        // Total time worked
+        var time_worked = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
+        document.getElementById("time_worked").value = time_worked;
+    }
 
-// This function "pads" out the values, adding zeros if they are required
-function pad(val)
-{
-    var valString = val + "";
-    if (valString.length < 2)
-    {
-        return "0" + valString;
+    // 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
+        }
     }
-    else
-    {
-        return valString;
+
+    // This function "pads" out the values, adding zeros if they are required
+    function pad(val) {
+        var valString = val + "";
+        if (valString.length < 2) {
+            return "0" + valString;
+        } else {
+            return valString;
+        }
     }
-}
+
+    // Function to pause the timer
+    function pauseTimer() {
+        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
+            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;
+        }
+    }
+
+    // Start timer when page is loaded
+    startTimer();
+
+    // Set setTime as the onchange event handler for the time input
+    document.getElementById("time_worked").addEventListener('change', setTime);
+
+    // Toggle timer when button is clicked
+    document.getElementById("toggleTimer").addEventListener('click', toggleTimer);
+});

ticket.php

@@ -310,6 +310,9 @@ if (isset($_GET['ticket_id'])) {
                                             <span class="input-group-text"><i class="fa fa-fw fa-clock"></i></span>
                                         </div>
                                         <input class="form-control timepicker" id="time_worked" name="time" type="text" value="00:00:00" onchange="setTime()"/>
+                                        <div class="input-group-append">
+                                            <button type="button" class="btn btn-dark" id="toggleTimer"><i class="fas fa-pause"></i></button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>