Pause metrics

WebGde/WebContent/WebGde-Widgets/captureMetrics/captureMetrics.js

@@ -8,6 +8,7 @@ export function setGlobalEndTime(time){
     global_end_time = time;
 }
 
+window.pauseFlag = false
 let key_strokes = 0
 let time_spent = 0
 let time_start = 0
@@ -202,6 +203,7 @@ const escapeCSV = (filename) => {
 }
 
 export const pauseMetricCapture = () => {
+    window.pauseFlag = true;
     time_pause = Date.now();
     hideImage();
     disableForm();
@@ -213,6 +215,7 @@ export const pauseMetricCapture = () => {
 }
 
 const unpauseMetricCapture = () => {
+    window.pauseFlag = false;
     time_pause_spent += (Date.now() - time_pause) / 1000;
     time_pause = 0;
     unhideImage();

WebGde/WebContent/script.js

@@ -9,7 +9,7 @@ import { Highlight } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/
 import { BPO } from "./WebGde-Widgets/BPO/getElement.js";
 import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/documentControlWidget.js";
 import { INDEXED_DB_STORAGE, HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_NAME, INDEXED_DB_TBL_NAME, setIndexedDBStorage, setHighlightObject, setImageViewerObject, setBPOObject, BPO_OBJECT, DISPLAY_FIELD_OBJECT, setDisplayFieldObject, activateGDE, setDocumentControlObject, DOCUMENT_CONTROL_OBJECT, IS_GDE_ACTIVATED } from "./WebGde-Widgets/globalVariable.js";
-import { searchStringInArray, startMetricCapture, keyArray, stopMetricCapture, saveMetrics, interval } from "./WebGde-Widgets/captureMetrics/captureMetrics.js";
+import { searchStringInArray, startMetricCapture, keyArray, stopMetricCapture, saveMetrics, interval, pauseMetricCapture } from "./WebGde-Widgets/captureMetrics/captureMetrics.js";
 import { submitForm } from "./WebGde-Widgets/Submit/submit.js";
 import { populateFields, populateForm } from "./WebGde-Widgets/DataInputWidget/generateFields.js";
 import { returnElementBPO } from "./WebGde-Widgets/BPO/returnElement.js";
@@ -226,6 +226,15 @@ function createMenuBar() {
     scIcon.innerHTML = 'ⓘ';
     shortcutDiv.appendChild(scIcon);
 
+    let pauseDiv = document.createElement("div");
+    pauseDiv.setAttribute('class', "row");
+    let pauseIcon = document.createElement("button");
+    pauseIcon.setAttribute("id", "pause");
+    pauseIcon.addEventListener("click", () =>{
+        pauseMetricCapture();
+    });
+    pauseDiv.appendChild(pauseIcon);
+
     let logOutDiv = document.createElement("div");
     logOutDiv.setAttribute('class', "row");
     let logOutIcon = document.createElement("button");
@@ -240,8 +249,9 @@ function createMenuBar() {
         createModal(successfulReturn, "Current element will be returned. Would you like to proceed?");
     });
     logOutDiv.appendChild(logOutIcon);
-
+   
     div.appendChild(shortcutDiv);
+    div.appendChild(pauseDiv);
     div.appendChild(logOutDiv);
 
     let dataInputContainer = document.getElementById('input-field-container');
@@ -667,6 +677,12 @@ function init() {
             } 
         }
 
+        if (!window.pauseFlag) {
+            if (e.key === 'Escape' || e.key === 'Esc') {
+                pauseMetricCapture();
+            }
+        }
+
         // if (e.ctrlKey == true && e.keyCode == 37) {
         //     let div = document.getElementById("imageContainer");
         //     if(div && div.style.visibility !== "hidden"){

WebGde/WebContent/style.css

@@ -62,6 +62,17 @@ h3{
     margin: 2vh;
 }
 
+#pause{
+    background: no-repeat center/75% url("./WebGde-Widgets/resources/pause_icon.png");
+    height: 3vh;
+    width: 3vh;
+    border: 0;
+}
+
+.pause-button {
+    margin-left: 1vh;
+}
+
 #info-icon{
     color: #fff;
     font-size: 3vh;