From 0006f2d7aa534ebe11c8b7c32b9f0bded0085569 Mon Sep 17 00:00:00 2001
From: Yonathan Wagaye <yonathanwagaye@C2-LIB-M1-24.local>
Date: Mon, 4 Nov 2024 11:17:11 +0400
Subject: [PATCH] Added a timer on the plots page

---
 tabs/plots.R | 51 +++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/tabs/plots.R b/tabs/plots.R
index 0220ced..09e7c09 100644
--- a/tabs/plots.R
+++ b/tabs/plots.R
@@ -1,13 +1,52 @@
 library(plotly)
 
+timer_js <- "
+  let startTime = new Date().getTime();
+  function updateTimer() {
+    let now = new Date().getTime();
+    let elapsed = now - startTime;
+    let seconds = Math.floor((elapsed / 1000) % 60);
+    let minutes = Math.floor((elapsed / (1000 * 60)) % 60);
+    let hours = Math.floor((elapsed / (1000 * 60 * 60)) % 24);
+  
+    document.getElementById('timer').innerHTML = 
+        (hours < 10 ? '0' + hours : hours) + ':' + 
+        (minutes < 10 ? '0' + minutes : minutes) + ':' + 
+        (seconds < 10 ? '0' + seconds : seconds);
+  
+    // Check every second
+    setTimeout(updateTimer, 1000);
+  }
+  document.addEventListener('DOMContentLoaded', (event) => {
+      updateTimer();
+  });
+"
+
 plotsTab <- tabPanel(
   'Plots',
-  tags$head(tags$style(type="text/css",
-                       "body.disconnected {
-    background-color: inherit;
-    opacity: 1;
-  }"
-  )),
+  tags$head(
+    tags$style(type="text/css",  "
+      #timer { 
+        position: absolute; 
+        top: 10px; 
+        right: 10px; 
+        margin-right: 10px;
+        font-size: 16px; 
+        font-weight: bold;
+        color: #FFFFFF; 
+        background-color: rgba(0, 0, 0, 0.7);
+        padding: 5px;
+        border-radius: 5px;
+        z-index: 9999;
+      }
+      body.disconnected {
+        background-color: inherit;
+        opacity: 1;
+      }
+    "),
+    tags$script(HTML(timer_js))
+    ),
+  div(id = "timer", "00:00:00"),
  radioButtons(
     "fileType",
     "Select download file type:",