feedback changes latest

Web-GDE/disable.js

 
-    window.onclick = (event) => {
-        if (event.path[0].id == 'pause') {
-            disableForm();
-        }
-        if (event.path[0].id == 'continue') {
-            enableForm();
-        }      
-    }
 
-    function disableForm() {
+    const disableTiffButtons = () => {
         var element = document.getElementById("TiffViewer_ButtonContainer");
         element.style.visibility = 'hidden';
     }
 
-    function enableForm() {
+    const enableTiffButtons = () => {
         var element = document.getElementById("TiffViewer_ButtonContainer");
         element.style.visibility = 'visible';
-    }
-
+    }
\ No newline at end of file

Web-GDE/index.html

@@ -124,6 +124,7 @@
 
 
 <script src='dir.php'></script>
+<script src="./disable.js"></script>
 <script src="./src/captureMetrics/captureMetrics.js"></script>
 <!-- fetch the schema -->
 <script src="./src/fetchSchema/fetchSchema.js"></script>
@@ -149,7 +150,6 @@
 </script>
 <script src="./src/endSession/endSession.js"></script>
 <script src="./src/tiffViewer/tiffViewer.js"></script>
-<script src="./disable.js"></script>
-<!-- <script src="./src/highlight/highlight.js"></script> -->
+<script src="./src/highlight/highlight.js"></script>
 
 </html>
\ No newline at end of file

Web-GDE/metrics/demo_Metrics_20221007.csv

+record_no,filename,speed,eoe_timestamp,avg_speed
+1,0001SVI_0004.tif,11919.068056407114,10/7/2022 9:20:38 AM,11919.068056407114
\ No newline at end of file

Web-GDE/output/demo_0001SVI_0004.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/0001SVI_0004.tif</Image_Source_Path>
-<No_of_Keystrokes>15</No_of_Keystrokes>
-<Processing_Time_Seconds>9.888</Processing_Time_Seconds>
-<Payee>dwa</Payee>
-<Particulars>dwa</Particulars>
+<No_of_Keystrokes>27</No_of_Keystrokes>
+<Processing_Time_Seconds>8.155</Processing_Time_Seconds>
+<Payee>dawdaw</Payee>
+<Particulars>dwadwa</Particulars>
 <Account_No>dwa</Account_No>
-<Transaction_Date>2022-10-12</Transaction_Date>
\ No newline at end of file
+<Transaction_Date>2003-04-02</Transaction_Date>
\ No newline at end of file

Web-GDE/src/accessFile/accessFile.js

@@ -69,6 +69,10 @@ async function accessFile() {
                     const blob = await res.blob();
                     status('download completed');
 
+                    [...document.getElementsByClassName("bar")].forEach(el => {
+                        el.style.display = "none"; 
+                     });
+
                     const request = indexedDB.open("ImageDatabase", 1);
                     request.onsuccess = async function () {
                         // console.log("Database opened successfully " + val );
@@ -323,6 +327,10 @@ function refreshImage() {
                             db.close();
                             status('downloaded '+Math.trunc(size/1000)+" kb");
                             progress();
+                            
+                            [...document.getElementsByClassName("bar")].forEach(el => {
+                                el.style.display = "none"; 
+                            });
                         };
                     };
 }
@@ -332,16 +340,6 @@ function promptNoFilesLeft(){
     var viewer = document.getElementById('viewer');
     var promptMain = document.createElement('div');
     promptMain.setAttribute("id", "prompt");
-    promptMain.style.zIndex = 999;
-    promptMain.style.textAlign = 'center';
-    promptMain.style.margin = 0 + ' auto';
-    promptMain.style.position = 'absolute';
-    promptMain.style.top = '50%';
-    promptMain.style.left = '50%';
-    promptMain.style.transform = 'translate(-50%, -50%)';
-    promptMain.style.backgroundColor = 'white';
-    promptMain.style.padding = '10px';
-    promptMain.style.display = 'block';
 
     var message =  document.createElement('p');
     message.innerHTML = 'No images left to be fetched, Proceed to end session';

Web-GDE/src/captureMetrics/captureMetrics.js

@@ -66,6 +66,7 @@ const startMetricCapture = () => {
     window.onclick = (event) => {
         if (event.path[0].id == 'pause') {
             pauseMetricCapture();
+            disableTiffButtons();
         }
     }
 
@@ -207,6 +208,7 @@ function promptPaused() {
     okButton.onclick = function () {
         promptMain.style.display = 'none';
         unpauseMetricCapture();
+        enableTiffButtons();
     };
     promptMain.appendChild(message);
     promptMain.appendChild(okButton);

Web-GDE/src/getFields/getFields.js

@@ -76,6 +76,9 @@ const displayFields = async (parentID) => {
                 case 'datepicker':
                     input = inputDate(key, validation)
                     break
+                case 'textarea':
+                    input = inputTextArea(key, validation)
+                    break
                 default:
                     input = noValidation()
                     break
@@ -99,9 +102,9 @@ const displayFields = async (parentID) => {
             dropdowns.on('select2:close', handleDropdown)
         })
         // upon enbaling highligh.js moved to highlight.js file
-        $(document).ready(function () {
-            $('form:first *:input[type!=hidden]:first').focus(); // Run code
-        });
+        // $(document).ready(function () {
+        //     $('form:first *:input[type!=hidden]:first').focus(); // Run code
+        // });
 
     } catch(err) {
         console.log(err)
@@ -169,6 +172,53 @@ const inputString = (key, validation) => {
  * @returns
  *      created input field element 
  */
+ const inputTextArea = (key, validation) => {
+    try {
+        const { mandatory, fieldLength } = validation
+
+        const input = document.createElement('TEXTAREA')
+        input.setAttribute('id', `${key}`)
+        input.setAttribute('name', `${key}`)
+        input.setAttribute('type', 'text')
+        input.setAttribute('autocomplete', 'off')
+        input.addEventListener('focusout', handleInput)
+        input.setAttribute('cols', 30)
+        
+        if(fieldLength >= 31 && fieldLength <= 60){
+            input.setAttribute('rows', 2)
+        } 
+        else if(fieldLength >= 61 && fieldLength <= 90){
+            input.setAttribute('rows', 3)
+        }       
+        else if(fieldLength >= 91 && fieldLength <= 120){
+            input.setAttribute('rows', 4)
+        }
+        else{
+            input.setAttribute('rows', 5)
+        }
+
+        fieldLength ? input.setAttribute('maxLength', `${fieldLength}`) : null
+        mandatory ? input.setAttribute('required', 'true') : null
+
+        return input
+    } catch(err) {
+        throw err
+    }
+}
+
+
+
+
+
+/**
+ * 
+ * @param {*} key
+ *      will serve as id of input field  
+ * @param {*} validation
+ *      validation of field from schema 
+ * @returns
+ *      created input field element 
+ */
 const inputNumeric = (key, validation) => {
     try {
         const { mandatory, fieldLength } = validation

Web-GDE/src/highlight/highlight.js

@@ -206,6 +206,7 @@ function initHighlight() {
             $(document).ready(function () {
                 $('form:first *:input[type!=hidden]:first').focus(); // Run code
             });
+            
         });
 
         sizeObserver.observe(TIFFimg);

Web-GDE/src/sample_schema/Accounting Speed Test schema.json

@@ -19,7 +19,7 @@
 				"validation":
 				{
 					"fieldLength": 200,
-					"collection": "alphanumeric",
+					"collection": "textarea",
 					"mandatory": true
 				}
 			},

Web-GDE/src/submit/submit.js

@@ -53,6 +53,9 @@ const submitForm = (e) => {
                     el.children[3].removeChild(el.children[3].firstChild);
                 }
             });
+            [...document.getElementsByClassName("bar")].forEach(el => {
+                el.style.removeProperty('display');
+            });
             document.getElementById("counter").innerHTML = "";
             clearTimeout(interval);
             isCanvasNotCreated = true;

Web-GDE/src/tiffViewer/tiffViewer.js

@@ -616,6 +616,6 @@ function TIFFViewer(xhr, TiffViewerImageName) {
         div.scrollTop += 20;
       }
     });
-    // initHighlight();
+    initHighlight();
   }
 

Web-GDE/style.css

@@ -4,7 +4,7 @@ html {
 
 *{
     font-size: 13px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Helvetica, sans-serif;
 }
 
 #with-config {
@@ -28,7 +28,7 @@ html {
     display: flex;
     position: sticky;
     flex-direction: column;
-    background-color: peachpuff;
+    background-color: #FBF0D9;
     max-height: 100vh;
     right: 0;
 }
@@ -155,14 +155,19 @@ main#viewer {
     color: red;
 }
 
+textarea{
+    resize: none;
+}
+
 #pauseBtn {
-    background-color: peachpuff;
+    background-color: #FBF0D9;
+    text-align: center;
 }
 
 #pause {
-    width: calc(100% - 40px);
+    width: calc(38% - 40px);
     margin: 20px;
-    padding: 10px;
+    padding: 6px;
 }
 
 /* ADDED: added to adjust button container when window is resized */
@@ -378,7 +383,7 @@ body>div>button {
     border-width: thin;
     border-color: black;
 
-    padding: 5px;
+    padding: 0px;
 
 }
 
@@ -387,14 +392,14 @@ body>div>button {
     flex-direction: row;
     /* justify-content: flex-end; */
     width: 42%;
-    padding-right: 3px;
+    padding: 3px;
 }
 
 .inputContainer {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    width: 56%;
+    width: 100%;
     padding-left: 3px;
 }
 
@@ -413,9 +418,26 @@ body>div>button {
 }
 
 input[type=text] {
-    width: 90%;
+    width: 100%;
 }
 
 select {
     width: 90%;
+}
+
+#prompt{
+    backdrop-filter: blur(4px);
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    margin: 0px auto;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    border: 1px solid gray;
+    transform: translate(-50%, -50%);
+    background-color: #555555a1;
+    padding: 10px;
+    display: block;
 }
\ No newline at end of file