Merge branch 'feature-WG-36' into 'development'

Web-GDE/config.js

@@ -24,3 +24,5 @@ const SCHEMA_FILE = "./src/sample_schema/10_field_schema.json"
 const INPUT_FILES = ["./input/Ong, Mae Janica - Application Form.TIFF","./input/Magalona, Rowell James - Application Form.TIFF","./input/Felizardo, Brylle Theodure - Application Form.TIFF","./input/Laxamana, Conrad John - Application Form.TIFF"]  // list of URLs
 
 const OUTPUT_FILES = "../../output/"
+
+const METRIC_FILES = "../../metrics/"

Web-GDE/index.html

@@ -4,6 +4,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- <link rel="stylesheet" type="text/css" href="gde.css"> -->
   <!-- CSS for the fields -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"
@@ -16,7 +19,7 @@
   <script src="./src/accessFile/accessFile.js"></script>
   <script src="./src/XMLWriter/Global.js" language="javascript"></script>
   <script src="./src/XMLWriter/XMLWriter.js" language="javascript"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js%22%3E"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
   <script src="./src/XMLWriter/XML_Saver.js" language="javascript"></script>
   <script src="./src/submit/submit.js" language="javascript"></script>
 </head>
@@ -46,6 +49,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 -->
@@ -62,7 +69,7 @@
 
 
       <div id="TiffViewerModal">
-
+        <div id="counter"></div>
         <!-- Modal content -->
         <div class="TiffModalContent">
           <div class="bar">
@@ -109,9 +116,17 @@
       noConfig.style.display = "block";
     }
   } else {
-    startMetricCapture();
+    let started_flag = false;
+    
     displayFields("fields");
     accessFile();
+
+    window.onkeydown = (key) => {
+      if(!started_flag) {
+        started_flag = true;
+        startMetricCapture();
+      }
+    }
   }
 </script>
 <script src="./src/endSession/endSession.js"></script>

Web-GDE/src/XMLWriter/XML_Saver.js

@@ -23,7 +23,7 @@ function WriteForm(e,metrics)
             XML.Close();
             var final_xml=XML.ToString().replace(/</g,"\n<").replace(/&lt;/g,"\<").replace(/&quot;/g,'"').replace(/&gt;/g,">").replace(/\n<\//g,"</").replace(/<\/xml>/g,"\n</xml>");
 
-            var myFile = new File([final_xml], File_Name + ".xml", {type: "text/plain;charset=utf-8"});
+            var myFile = new File([final_xml], "UserID" + "_" + File_Name + ".xml", {type: "text/plain;charset=utf-8"});
             // saveAs(myFile);
             let formData = new FormData();                
             formData.append("file", myFile);
@@ -31,10 +31,6 @@ function WriteForm(e,metrics)
                 method: "POST", 
                 body: formData
             }); 
-
-            
-   
-        
         }
         catch(Err)
         {

Web-GDE/src/accessFile/accessFile.js

@@ -203,7 +203,7 @@ function accessFile() {
                 function uploadFile(file) {
                     let formData = new FormData();           
                     formData.append("file", file);
-                    fetch('http://localhost:8000/src/accessFile/uploadimg.php',{
+                    fetch('http://localhost/web-ui/Web-GDE/src/accessFile/uploadimg.php',{
                       method: "POST", 
                       body: formData
                     });

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']
@@ -9,11 +11,14 @@ const ctrl_shift_shortcuts = ['v', 'h', 'V', 'H']
 const shortcut_triggers = ['Shift', 'Control']
 let shortcut_flag = false
 
+const csv_header = ['filename', 'speed', 'avg_speed'];
+
 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,9 +52,18 @@ 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();
+        }
     }
+
+    showMetricCapture();
 }
+    
 
 const stopMetricCapture = () => {
     const time_end = Date.now()
@@ -61,4 +75,67 @@ const stopMetricCapture = () => {
         time_spent,
         rate
     }
+}
+
+const showMetricCapture = () => {
+    const obj = document.getElementById("counter");
+    if(key_strokes != 0) {
+        let time_spent = ((Date.now() - time_start) / 1000) - time_pause_spent;
+        let rate = ((key_strokes/time_spent) * 3600).toFixed(0);
+        rate >= 8000 ? obj.className = "green" : obj.className = "red";
+        obj.innerHTML =  rate + " kph"; // immediately apply start value
+    }
+    setTimeout(showMetricCapture, 1000);    
+}
+
+const saveMetrics = (metrics) => {
+    try
+    {
+        let rows = new Array();
+        if (sessionStorage.getItem('csv') === null) {
+            rows.push(csv_header);
+            rows.push([escapeCSV(File_Path.replace(/^.*[\\\/]/, '')), metrics.rate, metrics.rate]);
+        } else {
+            rows = JSON.parse(sessionStorage.getItem('csv'));
+            let size = rows.length - 1;
+            let last = rows[size];
+            let avg = last[last.length - 1];
+
+            let newAvg = (avg + metrics.rate) / (size + 1);
+
+            rows.push([escapeCSV(File_Path.replace(/^.*[\\\/]/, '')), metrics.rate, newAvg]);
+        }
+
+        var myFile = new File(
+            [(rows.map(e => e.join(",")).join("\n"))], 
+            'UserID' + '_Metrics_' + (new Date()).toISOString().slice(0,10).replace(/-/g,"") + ".csv", 
+            {type: "text/plain;charset=utf-8"}
+        );
+        let formData = new FormData();                
+        formData.append("file", myFile);
+        formData.append("data", JSON.stringify({"metrics_dir": METRIC_FILES}));
+        fetch('./src/captureMetrics/saveMetrics.php', {
+            method: "POST", 
+            body: formData
+        }); 
+
+         sessionStorage.setItem('csv', JSON.stringify(rows));
+    } catch(Err){
+        alert("Error: " + Err.description);
+    }
+}  
+
+const escapeCSV = (filename) => {
+    return filename.includes(",") ? '"' + filename + '"' : filename;
+}
+
+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/src/captureMetrics/saveMetrics.php

+<?php
+$dir = json_decode($_POST['data'], true)['metrics_dir'];
+
+/* Get the name of the uploaded file */
+$filename = $_FILES['file']['name'];
+
+/* Choose where to save the uploaded file */
+$location = $dir.$filename;
+
+/* Save the uploaded file to the local filesystem */
+if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
+  echo 'Success'; 
+} else { 
+  echo 'Failure'; 
+}
+?>
\ No newline at end of file

Web-GDE/src/submit/submit.js

@@ -36,8 +36,9 @@ const submitForm = (e) => {
             return false
         } 
         else {
-            const metrics = stopMetricCapture()
-            WriteForm(e, metrics)
+            const metrics = stopMetricCapture();
+            WriteForm(e, metrics);
+            saveMetrics(metrics);
             return true
         }
     } catch(err) {

Web-GDE/style.css

@@ -112,6 +112,43 @@ main#viewer {
     align-items: center;
 }
 
+#counter {
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: bold;
+    font-size: 22px;
+    padding: 10px;
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    text-shadow:
+    -1px -1px 0 #000,
+     0   -1px 0 #000,
+     1px -1px 0 #000,
+     1px  0   0 #000,
+     1px  1px 0 #000,
+     0    1px 0 #000,
+    -1px  1px 0 #000,
+    -1px  0   0 #000;
+}
+
+.green{
+    color: green;
+}
+
+.red{
+    color: red;
+}
+
+#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 {