WG-30 - Added pause function for kph timer

Web-GDE/index.html

@@ -46,6 +46,10 @@
         </aside> -->
       <!-- Space for the fields -->
       <!-- <div class="sidebar" id="fields"> </div> -->
+      <div id='pauseBtn'>
+        <button id='pause'>Pause</button>
+      </div>
+     
       <form id='fields' style="display: flex; flex-direction:column;" onsubmit="return submitForm(event);"></form>
     </aside>
     <!-- Embed viewer -->

Web-GDE/src/captureMetrics/captureMetrics.js

 let key_strokes = 0
 let time_spent = 0
 let time_start = 0
+let time_pause = 0
+let time_pause_spent = 0
 
 const conflicts = ['F', 'f', 'alphabet', 'alphanumeric']
 const shift_shortcuts = ['+', '_', 'ArrowLeft', 'ArrowRight', 'f', 'F']
@@ -13,7 +15,8 @@ const startMetricCapture = () => {
     // reset key strokes
     key_strokes = 0
     time_start = Date.now()
-    
+    time_pause_spent = 0
+
     console.log(`Metric Capture Started
     Key strokes: ${key_strokes}
     Start of encoding time: ${time_start}
@@ -47,7 +50,13 @@ const startMetricCapture = () => {
 
         key_strokes++
 
-        console.log(`key: ${key.key}; key_strokes: ${key_strokes}; time_spent: ${(Date.now()-time_start)/1000}`) // for demonstration purposes
+        console.log(`key: ${key.key}; key_strokes: ${key_strokes}; time_spent: ${((Date.now()-time_start)/1000)-time_pause_spent}`) // for demonstration purposes
+    }
+    
+    window.onclick = (event) => {
+        if(event.path[0].id == 'pause') {
+            pauseMetricCapture();
+        }
     }
 }
 
@@ -61,4 +70,13 @@ const stopMetricCapture = () => {
         time_spent,
         rate
     }
+const pauseMetricCapture = () => {
+    time_pause = Date.now();
+    alert("PAUSED");
+    unpauseMetricCapture();
+}
+
+const unpauseMetricCapture = () => {
+    time_pause_spent += (Date.now() - time_pause) / 1000;
+    time_pause = 0;
 }
\ No newline at end of file

Web-GDE/style.css

@@ -112,6 +112,16 @@ main#viewer {
     align-items: center;
 }
 
+#pauseBtn {
+    background-color: peachpuff;
+}
+
+#pause {
+    width: calc(100% - 40px);
+    margin: 20px;
+    padding: 10px;
+}
+
 /* ADDED: added to adjust button container when window is resized */
 @media only screen and (max-width: 1150px) {
     #TiffViewer_ButtonContainer {