binding BPO functions

WebGde/WebContent/WebGde-Widgets/BPO/bpoService.js

+import { BPO_URL, CURRENT_NODE , NEXT_NODE } from "../config.js";
+
+let urlReturnElement = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/{{ELEMENT_ID}}/return`;
+let urlGetWorkload= BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/workload?sort=priority`;
+let urlGetReturnedElement = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/returned-elements/{{ELEMENT_ID}}`;
+let urlGetWaitingElement = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/elements`;
+let urlCompleteToNextNode = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/{{ELEMENT_ID}}/?nextNodeId=${NEXT_NODE}`
+let urlGetWorkersCurrentNode = BPO_URL + `req/nodes/${CURRENT_NODE}/workers`
+let urlRejectElement = BPO_URL +  `req/nodes/${CURRENT_NODE}/elements/{{elementId}}?newNodeId={{newNodeId}}`;
+
+
+export function getUrlReturnElement(element_id) {
+    let url = urlReturnElement.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    url = url.replace("{{ELEMENT_ID}}", element_id);
+    return url;
+}
+
+export function getUrlGetWorkload() {
+    let url = urlGetWorkload.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    return url;
+}
+
+export function getUrlGetReturnedElement(element_id) {
+    let url = urlGetReturnedElement.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    url = url.replace("{{ELEMENT_ID}}", element_id);
+    return url;
+}
+
+export function getUrlGetWaitingElement() {
+    let url = urlGetWaitingElement.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    return url;
+}
+
+export function getUrlCompleteToNextNode(element_id) {
+    let url = urlCompleteToNextNode.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    url = url.replace("{{ELEMENT_ID}}", element_id);
+    return url;
+}
+
+export function getUrlGetWorkersCurrentNode() {
+    let url = urlGetWorkersCurrentNode.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    return url;
+}
+
+export function getRejectElement(){
+    let url = urlRejectElement.replace("{{elementId}}", sessionStorage.getItem("element_id"));
+    url = url.replace("{{newNodeId}}", EXCEPTION_NODE);
+    return url;
+}

WebGde/WebContent/WebGde-Widgets/BPO/getElement.js

+import { createModal } from "../genericPopup/genericPopup.js";
+import { getUrlGetReturnedElement, getUrlGetWaitingElement, getUrlGetWorkload, getUrlReturnElement } from "./bpoService.js";
+import { urlGetIfExisting } from "./gfsService.js";
+
+
+export class BPO {
+    async getRandomElement() {
+        const elements = [...(await this.getWorkload())].reverse();
+        for (const element of elements) {
+            const retElement = await this.getReturnedElement(element);
+
+            if (retElement.errorCode == 0) {
+                const lst = await this.isLSTExisting(retElement.element);
+
+                if (lst.isExisting) {
+                    const xml = await this.isXMLExisting(retElement.element);
+
+                    if (xml.isExisting) {
+                        const xmlString = await xml.data.join('').replace('\t', '');
+                        //const lastImage = getXmlLastImage(xmlString);
+
+                        /*sessionStorage.setItem('section', getXmlSection(xmlString));
+                        sessionStorage.setItem('doctype', getXmlDocType(xmlString));*/
+
+                        let dir = await lst.data;
+                        sessionStorage.setItem("dir_files", JSON.stringify(dir));
+
+                        sessionStorage.setItem("element_id", retElement.element.elementId);
+                        sessionStorage.setItem("element_file_loc", retElement.element.fileLocation);
+                        return true;
+                    } else {
+                        await this.returnElement(retElement.element);
+                    }
+                } else {
+                    await this.returnElement(retElement.element);
+                }
+            } else if (retElement.errorCode == 463) {
+                continue;
+            } else {
+                PROMPT.createInfoPrompt(`Error ${retElement.errorCode}: Fetching returned element`);
+            }
+        }
+
+        while (true) {
+            const element = await this.getWaitingElement();
+
+            if (element.errorCode == 0) {
+                const lst = await this.isLSTExisting(element.element);
+
+                if (lst.isExisting) {
+                    let dir = await lst.data;
+                    //Dirfiles = [...dir];
+                    sessionStorage.setItem("dir_files", JSON.stringify(dir));
+
+                    sessionStorage.setItem("element_id", element.element.elementId);
+                    sessionStorage.setItem("element_file_loc", element.element.fileLocation);
+                    return true;
+                    break;
+                } else {
+                    await this.returnElement(element.element);
+                }
+            } else if (element.errorCode == 463) {
+                /*alert("No more available element");*/
+                //promptNoFilesLeft();
+
+                function modalTest() {
+                    console.log("test success");
+                }
+
+                createModal(modalTest, "No Element Available");
+                /*            sessionStorage.clear();
+                            localStorage.clear();
+                            logoutKeycloak();*/
+                break;
+            } else {
+                PROMPT.createInfoPrompt(`Error ${element.errorCode}: Fetching waiting element`);
+            }
+        }
+        return false;
+    }
+
+    async getWorkload() {
+        let response = await fetch(getUrlGetWorkload());
+
+        if (response.status == 200) {
+            let json = await response.json();
+            return json.elements;
+        } else {
+            PROMPT.createInfoPrompt(`Error ${response.status}: Fetching workload`);
+        }
+    }
+
+    async getReturnedElement(element) {
+        let response = await fetch(getUrlGetReturnedElement(element.elementId));
+        let json = await response.json();
+        return json;
+    }
+
+    async isLSTExisting(element) {
+        const response = await fetch(urlGetIfExisting, {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                "filePath": `${element.fileLocation}/${element.elementId}.lst`
+            })
+        });
+        return await response.json();
+    }
+
+    async isXMLExisting(element) {
+        const response = await fetch(urlGetIfExisting, {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                "filePath": `${element.fileLocation}/${element.elementId}.${ENCODING_PASS == "PASS1" ? "DTA" : "DTB"}`
+            })
+        });
+        return await response.json();
+    }
+
+    async getWaitingElement() {
+        let response = await fetch(getUrlGetWaitingElement());
+        let json = await response.json();
+        return json;
+    }
+
+    async returnElement(element) {
+        let response = await fetch(getUrlReturnElement(element.elementId), {
+            method: "POST"
+        });
+
+        if (response.status != 200) {
+            PROMPT.createInfoPrompt(`Error ${response.status}: Returning element`)
+        }
+    }
+
+}
+
+// async function initGetElement() {
+// }
+
+
+
+//var folderLoc = `${element.fileLocation}` + "worker1" + "/" + "element1";
+//getFolderLst(folderLoc);
+// const response = await fetch()
+
+
+
+async function getFieldXml(element) {
+    const response = await fetch(urlGetXml, {
+        method: "POST",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            "filePath": `${element.fileLocation}/${element.elementId}.${ENCODING_PASS == "PASS1" ? "DTA" : "DTB"}`
+        })
+    });
+    return await response.json();
+}
+
+function formatDirectory(dir) {
+    return "." + dir.substr(dir.lastIndexOf("\\", dir.lastIndexOf('\\') - 1));
+}
+
+
+
+// async function 
+
+
+
+function getXmlLastImage(xmlString) {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xmlString, "text/xml");
+    let lastRecordIndex = xmlDoc.getElementsByTagName("record").length - 1;
+    let lastRecord = xmlDoc.getElementsByTagName("record")[lastRecordIndex];
+
+    return lastRecord.getElementsByTagName("imagename")[0].childNodes[0].nodeValue;
+}
+
+function getXmlSection(xmlString) {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xmlString, "text/xml");
+    let lastRecordIndex = xmlDoc.getElementsByTagName("record").length - 1;
+    let lastRecord = xmlDoc.getElementsByTagName("record")[lastRecordIndex];
+
+    return lastRecord.getElementsByTagName("section")[0].childNodes[0].nodeValue;
+}
+
+function getXmlDocType(xmlString) {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xmlString, "text/xml");
+    let lastRecordIndex = xmlDoc.getElementsByTagName("record").length - 1;
+    let lastRecord = xmlDoc.getElementsByTagName("record")[lastRecordIndex];
+    // let subRecord = lastRecord.getElementsByTagName("sub-record")[0].children;
+    // let doctype;
+
+    // for(let field of subRecord) {
+    //     if(field.getAttribute("no") == 1) {
+    //         doctype = field.childNodes[1].childNodes[0].nodeValue;
+    //     }
+    // }
+
+    return lastRecord.getElementsByTagName("doctype")[0].childNodes[0].nodeValue;
+    // return doctype;
+}
+
+
+
+async function getFieldData() {
+    let elementId = sessionStorage.getItem("element_id");
+    let xmlData = {
+        "imageName": File_Path,
+        "outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB")
+    }
+
+    let response = await fetch(urlGetFields, {
+        method: "POST",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(xmlData)
+    });
+
+    if (response.status == 200) {
+        let json = await response.json();
+        return json;
+    } else {
+        return null;
+    }
+
+
+}
+
+async function createOutputXml(fields, metrics, doctype, section) {
+    let elementId = sessionStorage.getItem("element_id");
+
+    let xmlData = {
+        "projCode": PROJECT_CODE,
+        "userId": sessionStorage.getItem("user_id"),
+        "elementId": elementId,
+        "schema": SCHEMA_FILE,
+        "totalRec": Dirfiles.length,
+        "maxRec": "1",
+        "totalKeystroke": metrics[0],
+        "procTime": "",
+        "procDuration": metrics[1],
+        "eob": "",
+        "exceptionRemark": "",
+        "recordNo": "1",
+        "totalSubRec": "1",
+        "maxSubRec": "1",
+        "imageName": File_Path,
+        "subRecordNo": "1",
+        "eor": "Y",
+        "fields": fields,
+        "outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB"),
+        "doctype": doctype,
+        "section": section
+    }
+
+    let response = await fetch(urlWriteXml, {
+        method: "POST",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(xmlData)
+    });
+
+    if (localStorage.getItem("complete") == 1) {
+        if (completenessCheck(await response.text())) {
+            let response = await fetch(urlUpdateEob, {
+                method: "POST",
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(xmlData)
+            });
+            await completeToNextNode(elementId);
+        }
+    }
+
+}
+
+function completenessCheck(xml) {
+    let lst = JSON.parse(sessionStorage.getItem("dir_files"));
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xml, "text/xml");
+    let files = [...xmlDoc.getElementsByTagName("imagename")].map((name) => name.childNodes[0].nodeValue)
+
+    return lst.every(file => files.includes(file));
+}
+
+async function completeToNextNode(elementId) {
+    let requestJSON = {
+        "productionOutputUnits": {
+            "keystroke": {
+                "outputCount": 0,
+                "errorCount": 0
+            }
+        }
+    };
+
+    let response = await fetch(getUrlCompleteToNextNode(elementId), {
+        method: "POST",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(requestJSON)
+    });
+    if (response.status == 200) {
+        // let json = await response.json(); 
+        // return json.elements;
+        localStorage.clear();
+        //localStorage.sfIndex = 1;
+        await initGetElement();
+        init();
+    } else {
+        PROMPT.createInfoPrompt(`Error ${response.status}: Completing element to next node, Check if Complete Node Exist`);
+    }
+}
+
+
+function getFolderLst(url) {
+    const promise = fetch(url, {
+        method: 'GET',
+        headers: {
+            'Authorization': sessionStorage.getItem('token')
+            //   'Content-Type': 'application/x-www-form-urlencoded',
+        }
+    })
+        .then(function (response) {
+            if (response.status === 200) {
+                response.json().then(function (data) {
+                    let temp = data.folderContent;
+                    // temp.forEach(function(obj){
+                    //     //getFiles(DOWNLOAD_URL,obj.fileId);
+                    //     getFiles(DOWNLOAD_URL,obj.fileId);
+                    // })
+                    var container = document.getElementById("viewer");
+                    var overlay;
+                    var contain = ".lst";
+                    for (let i = 0; i < temp.length; i++) {
+                        overlay = document.createElement('div');
+                        overlay.id = "containerModal" + i;
+                        overlay.style.display = 'none';
+                        container.append(overlay);
+                        if (temp[i].name.includes(contain)) { //contains
+                            console.log(temp[i].name);
+                        }
+                        // getFiles(DOWNLOAD_URL,temp[i].fileId,overlay,temp[i].name);                                   
+                    }
+                    let counter = 0;
+                    sessionStorage.setItem("gfsCounter", counter);
+                    var currDislplay = document.getElementById("containerModal" + sessionStorage.getItem('gfsCounter'));
+                    currDislplay.style.display = 'block';
+                });
+            } else {
+                console.log("Error");
+            }
+        })
+        .catch(function (error) {
+            console.log('Request failed', error);
+        });
+
+    return promise;
+}
+
+async function getFileLst(url, id, overlay, filename) {
+    console.log(url);
+    var myObject = {
+        fileId: id
+    };
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Authorization': sessionStorage.getItem('token'),
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(myObject)
+    })
+        .then(async function (response) {
+            await response.text().then(async function (imgData) {
+                getBlobService(imgData, function (data) {
+                    var fileReader = new FileReader();
+                    fileReader.onload = function () {
+                        console.log(this.result);
+                        var fileReader = new FileReader();
+                        fileReader.onload = function () {
+                            // File_Name = filename;
+                            console.log(filename);
+                            // tiffViewerTest(this.result, overlay, filename);                                       
+                        };
+                        fileReader.readAsArrayBuffer(data);
+                    };
+                    fileReader.readAsArrayBuffer(data);
+                });
+
+            });
+        })
+        .catch(function (error) {
+            console.log('Request failed', error);
+        });
+}
+
+function getBlobService(url, func) {
+    const promise = fetch(url, {
+        method: 'get',
+        headers: {
+            'Authorization': sessionStorage.getItem('token')
+        }
+    })
+        .then(function (response) {
+            switch (response.status) {
+                case 200:
+                    response.blob().then(function (data) {
+                        func(data);
+                    });
+                    break;
+                case 460:
+                    createInfoPopup("Error 460", "User does not exist.");
+                    break;
+                case 403:
+                    removeOverlay();
+                    createInfoPopup("We are so sorry...", "Permission Denied: You don't have access here.");
+                    break;
+                case 464:
+                    createInfoPopup("Error 464", "No folder was retrieved.");
+                    break;
+                case 463:
+                    createInfoPopup("Error 463", "The folder name you entered already exists.");
+                    break;
+                case 462:
+                    createInfoPopup("Error 462", "No file was retrieved.");
+                    break;
+                case 461:
+                    createInfoPopup("Error 461", "File already exists.");
+                    break;
+                case 465:
+                    createInfoPopup("Error 465", "Source not found");
+                    break;
+                case 500:
+                    removeOverlay();
+                    createInfoPopup("It's not you. It's us... So sorry.", "Error 500: Please contact the support team so we can fix this immediately.");
+                    break;
+                default:
+                    break;
+            }
+        })
+        .catch(function (error) {
+            removeOverlay();
+            createInfoPopup("Whoops!", "We encountered some problems with your request. Rest assured we're working on this and it'll be okay soon.");
+        });
+
+    return promise;
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/BPO/gfsService.js

+import { GFS_URL } from "../config.js";
+
+export let urlGetIfExisting = GFS_URL + "/" + "get-if-existing";
+export let urlGetXml = GFS_URL + "/" + "get-xml";
+export let urlWriteXml = GFS_URL + "/" + "write-xml";
+export let urlUpdateEob = GFS_URL + "/" + "update-eob";
+export let urlUpdateException = GFS_URL + "/" + "update-exception";
+export let urlWriteMetrics = GFS_URL + "/" + "write-metrics";
+export let urlGetFields = GFS_URL + "/" + "get-fields";
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/BPO/rejectElement.js

+async function rejectElement() {
+    let prompt = new Prompt();
+    let load = {
+        "queueIndex": 0,
+        "priority": 9
+      }     
+    let response = await fetch(getRejectElement(), {
+        method: "POST",
+        headers: {
+            'Content-Type': 'application/json'  
+        },
+        body: JSON.stringify(load)
+    });
+    if (response.status == 200) {  
+		const indexedDB =
+        window.indexedDB ||
+        window.mozIndexedDB ||
+        window.webkitIndexedDB ||
+        window.msIndexedDB ||
+        window.shimIndexedDB;
+
+	    const request = indexedDB.open("ImageDatabase", 1);
+	
+	    request.onsuccess = function () {
+			const db = request.result;
+			const delRequest = db.transaction("image", 'readwrite')
+		                      .objectStore("image")
+		                      .clear();
+		};
+		[...document.getElementsByClassName("TiffModalContent")].forEach(el => {
+	        while (el.children[1].hasChildNodes()) {
+	            el.children[1].removeChild(el.children[1].firstChild);
+	        }
+	
+	        while (el.children[2].hasChildNodes()) {
+	            el.children[2].removeChild(el.children[2].firstChild);
+	        }
+	
+	        while (el.children[3].hasChildNodes()) {
+	            el.children[3].removeChild(el.children[3].firstChild);
+        }
+    	});
+	    [...document.getElementsByClassName("bar")].forEach(el => {
+	        el.style.removeProperty('display');
+	    });
+		document.getElementById("counter").innerHTML = "";
+        clearTimeout(interval);
+        sessionStorage.removeItem("section");
+        sessionStorage.removeItem("doctype");
+        isCanvasNotCreated = true;   
+		localStorage.clear(); 
+		//localStorage.sfIndex = 1;  
+        await initGetElement();        
+        init(); 
+        
+        PROMPT.createInfoPrompt("Element Rejected");
+    }
+    else{      
+        PROMPT.createInfoPrompt(`Error ${response.status}: Rejecting element`);
+    }
+}
+ //window for reason rejecting element
+
+var rejectButton = document.getElementById("reject");
+
+	rejectButton.onclick = function () {     
+	createRejectWindow();  
+    /*let screenMain = document.getElementById("reject_window");
+  /*  screenMain.style.display = 'block';*/
+    rejectButton.disabled = true;   
+    //rejectElement();
+    //const fieldForm = document.getElementById("fields");
+    //fieldForm.querySelector('input[type="submit"]').click();     
+};
+
+
+
+window.addEventListener('keydown', function(e) {
+    if (e.ctrlKey == true && e.keyCode == 69){
+      
+    	createRejectWindow(); 
+    	rejectButton.disabled = true;
+    }
+});
+
+
+function createRejectWindow(){
+	
+	let popUpDisplay = document.createElement("div");
+	popUpDisplay.classList.add("genericPopup")
+	
+    let screenMain = document.createElement('div');
+    screenMain.id = 'parent_Window';
+    screenMain.classList.add('parent_Window');
+    document.body.appendChild(screenMain);
+    var resList = REASON_LIST.split(",");
+    
+    
+    let rejectLabel = document.createElement("div");
+	rejectLabel.textContent = "Reject";
+	rejectLabel.classList.add("headerLabel");
+	screenMain.appendChild(rejectLabel);
+	
+	
+	for(let i = 0; i < resList.length; i++){
+		screenMain.appendChild(checkLabelComponent(resList[i],resList[i],"check" + (i + 1)));
+	}	
+
+	
+	let buttonPanel = document.createElement("div");
+	buttonPanel.classList.add("floatingButtonPanel");
+	
+	let cancelButton = createButtonElem("normalButton", "Cancel");
+	let okButton = createButtonElem("emphasizeButton", "Ok");
+	
+	buttonPanel.append(cancelButton);
+	buttonPanel.append(okButton);
+	
+	 
+    screenMain.appendChild(checkLabelComponent('Others','','check5'));
+    screenMain.appendChild(createMessageBox('MssgBox'));
+    screenMain.appendChild(buttonPanel); 
+                
+    setRadioHandler('MssgBox');
+    
+    okButton.onclick = function () {
+        if (document.querySelector('input[name="rejectRadio"]:checked').value != null) {
+            if (document.querySelector('input[name="rejectRadio"]:checked').value.trim().length != 0) {
+                saveExceptionToXml();//save xml
+                rejectElement();//reject on bpo
+                screenMain.style.display = 'none';
+                rejectButton.disabled = false;
+                popUpDisplay.remove();
+                var fileName = sessionStorage.getItem("file_Name");
+                if(fileName !== null && fileName !== undefined){
+                    document.getElementById("controlsContainer").outerHTML="";	
+                }else{
+                    document.getElementById("TiffViewer_ButtonContainer").outerHTML="";	
+                }
+                return;
+            }
+        }
+        
+        document.getElementById('MssgBox').value = "";
+    	document.getElementById('rejectSubmit').click();
+   	}
+   	    
+    cancelButton.onclick = function () {         
+        popUpDisplay.remove();
+        rejectButton.disabled = false;     
+    }          
+    popUpDisplay.append(screenMain);
+    document.body.append(popUpDisplay);
+      
+}	
+     	 	
+
+
+function setRadioHandler(id){
+
+	var addressOther = document.querySelectorAll('input[name="rejectRadio"]');
+    var addressField = document.getElementById(id);
+    var tempAddress = "";
+
+    for (var i = 0; i < addressOther.length; i++) {
+    	addressOther[i].addEventListener("change", addressHandler);
+    }
+
+    function addressHandler() {
+    	if (this.id == "check5") {
+    		addressField.disabled = false;
+    		addressField.value = tempAddress;
+    	} else {
+    		tempAddress = addressField.value;
+    		addressField.value = "";
+    		addressField.disabled = true;
+    	}
+    }
+    
+        //set radio button text area value
+    let radioMessage = document.getElementById('check5');
+    let text = document.getElementById('MssgBox');
+    radioMessage.value = text.value;
+
+
+}
+
+function checkLabelComponent(textLabel,inputval,checkboxId){
+    let checkBoxCont = document.createElement('div');
+    checkBoxCont.id = 'checkBoxCont';
+
+    let inp = document.createElement("input");
+    inp.id = checkboxId;
+    inp.setAttribute('type', 'radio');
+    inp.name = "rejectRadio";
+    inp.value = inputval;
+    inp.style.order = 1;
+    inp.style.marginTop = 0;
+    
+    if(checkboxId == 'check1'){
+    	inp.checked = true;
+    
+    }
+
+    var newlabel = document.createElement("Label");
+    newlabel.setAttribute("for", checkboxId);
+    newlabel.innerHTML = textLabel;
+    newlabel.style.order = 2;
+
+    checkBoxCont.appendChild(newlabel);
+    checkBoxCont.appendChild(inp);
+
+    return checkBoxCont;
+}
+
+
+
+/*function okCancelButton(){
+	let genericPopup = document.getElementsByClassName("genericPopup")
+	.getElementById("genericPopup");
+    let buttonCont = document.createElement('div');
+    buttonCont.id = 'okCancelCont';
+
+    let okButton = document.createElement('button');
+    //okButton.setAttribute('type', 'submit');
+    okButton.id = 'reject_ok';
+    okButton.innerHTML = 'ok';
+    okButton.onclick = function () {     	   	
+    	saveExceptionToXml();//save xml
+        rejectElement();//reject on bpo
+    	screenMain.style.display = 'none';
+    	rejectButton.disabled = false;
+    	return false;   	 	
+    }
+    
+
+    let cancelButton = document.createElement('button');
+    cancelButton.id = 'reject_Cancel';
+    cancelButton.innerHTML = 'cancel';
+    cancelButton.onclick = function () { 
+        
+        screenMain.style.display = 'none';
+        rejectButton.disabled = false;
+        return false;
+    }
+
+    buttonCont.appendChild(okButton);
+    buttonCont.appendChild(cancelButton);
+
+    return buttonCont;
+
+}*/
+
+function createButtonElem(className, buttonName, icon) {
+	/* let buttonElem = document.createElement("button"); */
+	let buttonElem;
+	buttonElem = document.createElement("button");
+	buttonElem.classList.add(className);
+	buttonElem.textContent = buttonName;
+	return buttonElem;
+}
+
+function saveExceptionToXml(){
+       var selected = document.querySelector('input[name="rejectRadio"]:checked').value;
+       var elementId = sessionStorage.getItem("element_id");
+       
+        let doctype;
+        let section;
+
+        // Validate all elements again
+        for(let element of document.getElementById("fields").elements) {
+            if (element.style.display === 'none') continue
+            const { id, value,type  } = element
+            const { valid } = validateInput(id, value)
+
+            // Skip submit button
+            if(type==='submit') continue
+            if(id==='DocType') {
+                doctype = element.options[element.selectedIndex].text;
+                continue;
+            }
+            if(id==='Section') {
+                section = element.options[element.selectedIndex].text;
+                continue;
+            }
+       }
+              
+       let xmlData = {
+        "projCode": PROJECT_CODE,
+        "userId": sessionStorage.getItem("user_id"),
+        "elementId": elementId,
+        "schema": SCHEMA_FILE,
+        "totalRec": Dirfiles.length,
+        "maxRec": "1",
+        "totalKeystroke": 0,
+        "procTime": "",
+        "procDuration": 0,
+        "eob": "",
+        "exceptionRemark": selected,
+        "recordNo": "1",
+        "totalSubRec": "1",
+        "maxSubRec": "1",
+        "imageName": File_Path,
+        "subRecordNo": "1",
+        "eor": "",
+        "fields": {},
+        "outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB"),
+        "doctype": doctype,
+        "section": section
+    	}
+
+       updateXMLException(xmlData);
+	   return false;	
+}
+
+function createMessageBox(id){
+    let form = document.createElement('form');
+    var mssgBox =  document.createElement('textarea');
+    mssgBox.id = id;
+    mssgBox.name = "rejectRadio";
+    mssgBox.maxLength = "1000";
+    mssgBox.cols = "20";
+    mssgBox.rows = "5";
+    mssgBox.required = true; 
+    mssgBox.disabled = true;
+    mssgBox.onkeyup = function () {
+    	let radioFive = document.getElementById('check5');
+    	radioFive.value = mssgBox.value;
+    }
+
+    let submit = document.createElement('input');
+    submit.id = 'rejectSubmit';
+    submit.type = 'submit';
+    submit.style.visibility = 'hidden';
+
+    form.appendChild(mssgBox);
+    form.appendChild(submit);
+    return form;
+}
+	
+		
+	
+async function updateXMLException(xmlData){
+    
+    let response = await fetch(urlUpdateException, {
+            method: "POST",
+            headers: {
+                'Content-Type':'application/json'
+            },
+            body: JSON.stringify(xmlData)
+    });
+    if (response.status == 200) {      
+        console.log("Exception Updated");
+    }
+    else{      
+        PROMPT.createInfoPrompt(`Error ${response.status}: Xml Update`);
+    }
+    return false;
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/BPO/returnElement.js

+async function returnElementBPO(elementId) {
+    let response = await fetch(getUrlReturnElement(elementId), {method: "POST"});
+
+    if (response.status == 200) {
+    	/*returnSaveXML();*/ 
+    	const indexedDB =
+        window.indexedDB ||
+        window.mozIndexedDB ||
+        window.webkitIndexedDB ||
+        window.msIndexedDB ||
+        window.shimIndexedDB;
+
+	    const request = indexedDB.open("ImageDatabase", 1);
+	
+	    request.onsuccess = function () {
+			const db = request.result;
+			const delRequest = db.transaction("image", 'readwrite')
+		                      .objectStore("image")
+		                      .clear();
+		};
+		[...document.getElementsByClassName("TiffModalContent")].forEach(el => {
+	        while (el.children[1].hasChildNodes()) {
+	            el.children[1].removeChild(el.children[1].firstChild);
+	        }
+	
+	        while (el.children[2].hasChildNodes()) {
+	            el.children[2].removeChild(el.children[2].firstChild);
+	        }
+	
+	        while (el.children[3].hasChildNodes()) {
+	            el.children[3].removeChild(el.children[3].firstChild);
+        }
+    	});
+	    [...document.getElementsByClassName("bar")].forEach(el => {
+	        el.style.removeProperty('display');
+	    });
+		document.getElementById("counter").innerHTML = "";
+        clearTimeout(interval);
+        sessionStorage.removeItem("section");
+        sessionStorage.removeItem("doctype");
+        isCanvasNotCreated = true;   
+		localStorage.clear(); 
+		//localStorage.sfIndex = 1;    
+        await loadWaitingElement();
+        init();
+        
+        PROMPT.createInfoPrompt("Element Returned");     
+    }else{
+        PROMPT.createInfoPrompt(`Error ${response.status}: Returning element`);
+        logoutKeycloak();
+    }
+    
+    return response.status;
+}
+
+
+async function returnElementLogout(elementId) {
+    let response = await fetch(getUrlReturnElement(elementId), {method: "POST"});
+
+    if (response.status == 200) {                         
+    	console.log('Element Returned');
+    }else{
+        PROMPT.createInfoPrompt(`Error ${response.status}: Returning element`);
+        logoutKeycloak();
+    }
+    
+    return response.status;
+}
+
+var returnButton = document.getElementById('return');
+
+returnButton.addEventListener("click", function () {
+	createReturnWindow();
+});
+
+
+
+window.addEventListener('keydown', function(e) {
+    if (e.altKey == true && e.keyCode == 85){
+       createReturnWindow();
+    }
+});
+
+async function loadWaitingElement(){
+    while (true) {
+        const element = await getWaitingElement();
+
+        if (element.errorCode == 0) {
+            const lst = await isLSTExisting(element.element);
+
+            if (lst.isExisting) {
+                let  dir = await lst.data;
+                Dirfiles =  [...dir];
+                sessionStorage.setItem("dir_files", JSON.stringify(Dirfiles));
+
+                sessionStorage.setItem("element_id", element.element.elementId);
+                sessionStorage.setItem("element_file_loc", element.element.fileLocation);
+                break;
+            } else {
+                await returnElement(element.element);
+            }
+        } else if (element.errorCode == 463) {
+            /*alert("No more available element");*/
+            promptNoFilesLeft();
+/*            sessionStorage.clear();
+            localStorage.clear();
+            logoutKeycloak();*/
+            break;
+        } else {
+            PROMPT.createInfoPrompt(`Error ${element.errorCode}: Fetching waiting element`);
+        }
+    }
+}
+
+function returnSaveXML(){
+       var elementId = sessionStorage.getItem("element_id");
+       
+        let doctype;
+        let section;
+
+        // Validate all elements again
+        for(let element of document.getElementById("fields").elements) {
+            if (element.style.display === 'none') continue
+            const { id, value,type  } = element
+            const { valid } = validateInput(id, value)
+
+            // Skip submit button
+            if(type==='submit') continue
+            if(id==='DocType') {
+                doctype = element.options[element.selectedIndex].text;
+                continue;
+            }
+            if(id==='Section') {
+                section = element.options[element.selectedIndex].text;
+                continue;
+            }
+       }
+              
+       let xmlData = {
+        "projCode": PROJECT_CODE,
+        "userId": sessionStorage.getItem("user_id"),
+        "elementId": elementId,
+        "schema": SCHEMA_FILE,
+        "totalRec": Dirfiles.length,
+        "maxRec": "1",
+        "totalKeystroke": 0,
+        "procTime": "",
+        "procDuration": 0,
+        "eob": "",
+        "exceptionRemark": "",
+        "recordNo": "1",
+        "totalSubRec": "1",
+        "maxSubRec": "1",
+        "imageName": File_Path,
+        "subRecordNo": "1",
+        "eor": "",
+        "fields": {},
+        "outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB"),
+        "doctype": doctype,
+        "section": section
+    	}
+
+       updateXMLException(xmlData);
+	   return false;	
+}
+
+function createReturnWindow() {
+    let overlay = document.createElement("div");
+    overlay.classList.add("genericPopup");
+
+
+    let endWindow = document.createElement('div');
+    endWindow.id = 'end_window';
+    endWindow.classList.add("parent_Window")
+
+    let endBodyDiv = document.createElement('div');
+    endBodyDiv.id = 'endBodyDiv';
+    let endLabel = document.createElement('p');
+    endLabel.innerText = "Current Element will be Returned.";
+    let endContinue = document.createElement('p');
+    endContinue.innerText = "Continue Y/N?";
+
+    let endOkCnclDiv = document.createElement('div');
+    endOkCnclDiv.id = 'endOkCnclCont';
+
+    let okEnd = document.createElement('button');
+    okEnd.classList.add("emphasizeButton");
+    okEnd.innerHTML = 'ok';
+    okEnd.id = 'okEndButtn';
+    okEnd.onclick = function() {
+    	returnElementBPO(sessionStorage.getItem("element_id"));
+		var fileName = sessionStorage.getItem("file_Name");
+		if(fileName !== null && fileName !== undefined){
+			if(document.getElementById("controlsContainer") !== null) {
+				document.getElementById("controlsContainer").outerHTML="";
+			}
+		}else{
+			if(document.getElementById("TiffViewer_ButtonContainer") !== null) {
+				document.getElementById("TiffViewer_ButtonContainer").outerHTML="";
+			}
+		}
+		overlay.remove();
+    }
+
+    let cancelEnd = document.createElement('button');
+    cancelEnd.classList.add("normalButton");
+    cancelEnd.innerHTML = 'cancel';
+    cancelEnd.id = 'cnclEndButton';
+
+
+    endOkCnclDiv.appendChild(okEnd);
+    endOkCnclDiv.appendChild(cancelEnd);
+
+
+    endBodyDiv.appendChild(endLabel);
+    endBodyDiv.appendChild(endContinue);
+    endBodyDiv.appendChild(endOkCnclDiv);
+    endWindow.appendChild(endBodyDiv);
+
+
+
+    cancelEnd.addEventListener("click", function() {
+        overlay.remove();
+    });
+
+
+
+    overlay.append(endWindow);
+    document.body.append(overlay);
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/BPO/updateEOB.php

+<?php
+$projCode = json_decode($_POST['data'], true)["projCode"];
+$userId = json_decode($_POST['data'], true)["userId"];
+$elementId = json_decode($_POST['data'], true)["elementId"];
+$schema = json_decode($_POST['data'], true)["schema"];
+$totalRec = json_decode($_POST['data'], true)["totalRec"];
+$maxRec = json_decode($_POST['data'], true)["maxRec"];
+$totalKeystroke = json_decode($_POST['data'], true)["totalKeystroke"];
+$procTime = json_decode($_POST['data'], true)["procTime"];
+$procDuration = json_decode($_POST['data'], true)["procDuration"];
+$eob = json_decode($_POST['data'], true)["eob"];
+$exceptionRemark = json_decode($_POST['data'], true)["exceptionRemark"];
+$recordNo = json_decode($_POST['data'], true)["recordNo"];
+$totalSubRec = json_decode($_POST['data'], true)["totalSubRec"];
+$maxSubRec = json_decode($_POST['data'], true)["maxSubRec"];
+$imageName = json_decode($_POST['data'], true)["imageName"];
+$subRecordNo = json_decode($_POST['data'], true)["subRecordNo"];
+$eor = json_decode($_POST['data'], true)["eor"];
+$fields = json_decode($_POST['data'], true)["fields"];
+$outputDir = json_decode($_POST['data'], true)["outputDir"];
+$doctype = json_decode($_POST['data'], true)["doctype"];
+$section = json_decode($_POST['data'], true)["section"];
+
+$dom = new DOMDocument('1.0', 'ISO-8859-1');
+
+$dom->preserveWhiteSpace = false;
+$dom->load($outputDir);
+
+$root = $dom->getElementsByTagName($projCode)->item(0);
+$dom->getElementsByTagName('eob')->item(0)->nodeValue = "Y";
+$dom->formatOutput = true;
+
+file_put_contents($outputDir, preg_replace_callback('/^( +)</m', 
+    function($a) { 
+        return str_repeat(' ',intval(strlen($a[1]) / 2) * 4).'<';
+    }, $dom->saveXML()));
+
+echo $dom->saveXML();
+?>

WebGde/WebContent/WebGde-Widgets/DataInputWidget/XMLWriter/Global.js

+function JSettings()
+{
+	this.IE=document.all?true:false;
+	this.MouseX=_JSettings_MouseX;
+	this.MouseY=_JSettings_MouseY;
+	this.SrcElement=_JSettings_SrcElement;
+	this.Parent=_JSettings_Parent;
+	this.RunOnLoad=_JSettings_RunOnLoad;
+	this.FindParent=_JSettings_FindParent;
+	this.FindChild=_JSettings_FindChild;
+	this.FindSibling=_JSettings_FindSibling;
+	this.FindParentTag=_JSettings_FindParentTag;
+}
+function _JSettings_MouseX(e)
+{return this.IE?event.clientX:e.clientX;}
+function _JSettings_MouseY(e)
+{return this.IE?event.clientY:e.clientY;}
+function _JSettings_SrcElement(e)
+{return this.IE?event.srcElement:e.target;}
+function _JSettings_Parent(Node)
+{return this.IE?Node.parentNode:Node.parentElement;}
+function _JSettings_RunOnLoad(Meth){var Prev=(window.onload)?window.onload:function(){};window.onload=function(){Prev();Meth();};}
+function _JSettings_FindParent(Node, Attrib, Value)
+{var Root = document.getElementsByTagName("BODY")[0];
+Node = Node.parentNode;	while (Node != Root && Node.getAttribute(Attrib) != Value){Node=Node.parentNode;}
+if (Node.getAttribute(Attrib) == Value)	{return Node;} else	{return null;}}
+function _JSettings_FindParentTag(Node, TagName)
+{var Root = document.getElementsByTagName("BODY")[0];
+TagName=TagName.toLowerCase();
+Node = Node.parentNode;	while (Node != Root && Node.tagName.toLowerCase() != TagName){Node=Node.parentNode;}
+if (Node.tagName.toLowerCase() == TagName) {return Node;} else {return null;}}
+function _JSettings_FindChild(Node, Attrib, Value)
+{
+	if (Node.getAttribute)
+		if (Node.getAttribute(Attrib) == Value) return Node;
+
+	var I=0;
+	var Ret = null;
+	for (I=0;I<Node.childNodes.length;I++)
+	{
+		Ret = FindChildByAttrib(Node.childNodes[I]);
+		if (Ret) return Ret;
+	}
+	return null;
+}
+function _JSettings_FindSibling(Node, Attrib, Value)
+{
+	var Nodes=Node.parentNode.childNodes;
+	var I=0;
+	for (I=0;I<Nodes.length;I++)
+	{
+		if (Nodes[I].getAttribute)
+		{
+			if (Nodes[I].getAttribute(Attrib) == Value)
+			{return Nodes[I];}
+		}
+	}
+	return null;
+}
+
+var Settings = new JSettings();
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/DataInputWidget/XMLWriter/XMLWriter.js

+function XMLWriter()
+{
+    this.XML=[];
+    this.Nodes=[];
+    this.State="";
+    this.FormatXML = function(Str)
+    {
+        if (Str)
+            return Str.replace(/&/g, "&amp;").replace(/\"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        return ""
+    }
+    this.BeginNode = function(Name)
+    {
+        if (!Name) return;
+        if (this.State=="beg") this.XML.push(">");
+        this.State="beg";
+        this.Nodes.push(Name);
+        this.XML.push("<"+Name);
+    }
+    this.EndNode = function()
+    {
+        if (this.State=="beg")
+        {
+            this.XML.push("/>");
+            this.Nodes.pop();
+        }
+        else if (this.Nodes.length>0)
+            this.XML.push("</"+this.Nodes.pop()+">");
+        this.State="";
+    }
+    this.Attrib = function(Name, Value)
+    {
+        if (this.State!="beg" || !Name) return;
+        this.XML.push(" "+Name+"=\""+this.FormatXML(Value)+"\"");
+    }
+    this.WriteString = function(Value)
+    {
+        if (this.State=="beg") this.XML.push(">");
+        this.XML.push(this.FormatXML(Value));
+        this.State="";
+    }
+    this.Node = function(Name, Value)
+    {
+        if (!Name) return;
+        if (this.State=="beg") this.XML.push(">");
+        this.XML.push((Value=="" || !Value)?"<"+Name+"/>":"<"+Name+">"+this.FormatXML(Value)+"</"+Name+">");
+        this.State="";
+    }
+    this.Close = function()
+    {
+        while (this.Nodes.length>0)
+            this.EndNode();
+        this.State="closed";
+    }
+    this.ToString = function(){return this.XML.join("");}
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/DataInputWidget/XMLWriter/XML_Saver.js

+async function WriteForm(e,metrics,doctype,section) {
+    try {
+        var Frm=Settings.SrcElement(e);
+        var Nodes=Frm.elements;
+        const myArray = Object.values(metrics);
+        const lookup = schema[doctype][section]
+        localStorage.setItem("submit", "1");
+
+        if (IS_RETRIEVE_FROM_BPO == "Y") {
+            let fields = {};
+            for (var i=0;i<Nodes.length;i++) {     
+                if (Nodes[i].style.display === 'none') continue 
+                let fid = Nodes[i].id;
+                if (fid == 'DocType' || fid == 'Section' || fid == '' || fid == "submitButton") continue
+                fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value;
+            }
+
+            createOutputXml(fields, myArray, doctype, section);
+        } else {
+            const lookup = schema[doctype][section]
+            const myArray = Object.values(metrics);
+            localStorage.setItem("submit", "1");
+            var Frm=Settings.SrcElement(e);
+            var XML=new XMLWriter();
+
+            XML.WriteString('<?xml version="1.0" encoding="UTF-8" standalone="no"?>');
+            XML.BeginNode(Frm.name);
+            var Nodes=Frm.elements;
+            XML.Node("Image_Source_Path",File_Path);
+            XML.Node("No_of_Keystrokes",JSON.stringify(myArray[0]));
+            XML.Node("Processing_Time_Seconds",JSON.stringify(myArray[1]));
+            XML.Node("DocType", doctype);
+            XML.Node("Section", section);
+            
+            for (var i=0;i<Nodes.length;i++){     
+                if (Nodes[i].style.display === 'none') continue 
+                let fid = Nodes[i].id;
+                if (fid == 'DocType' || fid == 'Section' || fid == '') continue
+                XML.Node(Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka : fid, 
+                    Nodes[i].value);
+                // console.log(Nodes[i]);
+            }
+
+            XML.EndNode();
+            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], sessionStorage.getItem('user_id') + "_" + File_Name + ".xml", {type: "text/plain;charset=utf-8"});
+            // saveAs(myFile);
+            let formData = new FormData(); 
+            formData.append("file", myFile);  
+            
+            let data = {};
+            sessionStorage.getItem('outputXmlDir') == null ? data.outputDir = null : data.outputDir = sessionStorage.getItem('outputXmlDir'); 
+
+            formData.append("data", JSON.stringify(data));
+            const outputXmlDir = await fetch('./src/XMLWriter/upload.php', {
+                method: "POST", 
+                body: formData
+            }); 
+            sessionStorage.setItem('outputXmlDir', await outputXmlDir.text());
+        }
+    }
+    catch(Err) {
+        alert("Error: " + Err.description);
+    }
+    return false;
+}

WebGde/WebContent/WebGde-Widgets/DataInputWidget/XMLWriter/upload.php

+<?php
+date_default_timezone_set('Asia/Manila');
+$t = time();
+
+$outputDir = json_decode($_POST['data'], true)["outputDir"];
+
+/* Get the name of the uploaded file */
+$filename = $_FILES['file']['name'];
+
+/* Choose where to save the uploaded file */
+if ($outputDir == null) {
+  $outputDir = "../../output/".substr($filename, 0, strpos($filename, "_"))."_".date("m-d-Y_H.i.s",$t);
+  mkdir($outputDir);
+}
+
+$location = $outputDir."/".$filename;
+
+/* Save the uploaded file to the local filesystem */
+if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
+  echo $outputDir; 
+} else { 
+  // echo 'Failure'; 
+}
+
+?>
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/config.js

+export const FOLDER_PATH = "/ImageViewerWidget/modules/imageViewer";
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightClass.js

+export class Highlight {
+    coordinatesData;
+    highlightCanvas;
+    ctx;
+    isCanvasNotCreated = true;
+    isInitialPositioning = true;
+    resizeWidthVal;
+    resizeHeightVal;
+    currIdVal;
+    rect;
+    imgContainer;
+    imageID;
+
+    constructor(imgContainerID, imageID, schemaURL) {
+        this.imgContainer = document.getElementById(imgContainerID);
+        this.imageID = imageID;
+        this.fetchHighLightSchema(schemaURL);
+    }
+
+    //creates the canvas for highlight rectangles
+    createHighlight() {
+        this.highlightCanvas = document.createElement('canvas');
+        this.highlightCanvas.id = "highlightCanvas";
+        this.ctx = this.highlightCanvas.getContext("2d");
+        this.highlightCanvas.classList.add("highlight-canvas");
+
+        this.imgContainer.insertBefore(this.highlightCanvas, this.imgContainer.firstChild);
+
+        //inserts canvas before the TIFF image to fix its position at the top/first page
+        // if (sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)) {
+        //     imgContainer = document.getElementById('TiffModalBody');
+        //     imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
+        // }
+        // else if (sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION)) {
+        //     imgContainer = document.getElementById('TiffModalBody');
+        //     imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
+        // }
+        // else {
+        //     imgContainer = document.getElementById('TiffViewer_ImageContainer');
+        //     imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
+        // }
+
+        //set style for highlight canvas
+        //z-index is increased to put it above the TIFF image
+        this.highlightCanvas.style.position = "absolute";
+        // highlightCanvas.style.width = width;
+        // highlightCanvas.style.height = height;
+
+        var imageToBeHighlighted = document.getElementById(this.imageID),
+        styles = getComputedStyle(imageToBeHighlighted),
+        w = parseInt(styles.getPropertyValue("width")),
+        h = parseInt(styles.getPropertyValue("height"));
+
+        this.highlightCanvas.setAttribute("width", w);
+        this.highlightCanvas.setAttribute("height", h);
+        this.highlightCanvas.style.zIndex = "20";
+
+    }
+
+    fetchHighLightSchema(schemaURL) {
+        fetch(schemaURL)
+            .then(res => {
+                return res.arrayBuffer();
+            }).then(res => {
+                var workbook = XLSX.read(new Uint8Array(res), {
+                    type: "array"
+                });
+                var data = workbook.Sheets["Sheet5"]
+
+                const importRange = "B3:C109";
+                const headers = ["FieldName", "Default_Annotation"];
+                this.coordinatesData = XLSX.utils.sheet_to_json(data, { range: importRange, header: headers });
+            });
+    }
+
+    highlight(nameVal) {
+        for (var i = 0; i < this.coordinatesData.length; i++) {
+            if (nameVal.toUpperCase().localeCompare(this.coordinatesData[i].FieldName.toUpperCase()) == 0) {
+                //clears the canvas
+                this.ctx.clearRect(0, 0, this.highlightCanvas.width, this.highlightCanvas.height);
+    
+                //resize factor for image
+                this.resizeWidthVal = this.highlightCanvas.width / 2550;
+                this.resizeHeightVal = this.highlightCanvas.height / 4200;
+    
+                //split by '~', and create an array of the splitted chars
+                //format: rotation~zoom~scrollx~scrolly~left~top~width~height~pageno~imagename~annotationtype~highlightcolor
+                const fieldHighlightData = this.coordinatesData[i].Default_Annotation.split(/~+/);
+    
+                //indicates color and opacity of shape
+                //fieldHighlightData[10] is the string already in RGB format (e.g. 255,255,0)
+    
+                //uses coordinates given in coordinates text file
+                this.ctx.beginPath();
+                this.ctx.lineWidth = 2;
+                this.ctx.strokeStyle = `rgba(${fieldHighlightData[10]})`;
+                this.ctx.rect(Math.round(fieldHighlightData[4] * this.resizeWidthVal), Math.round(fieldHighlightData[5] * this.resizeHeightVal), Math.round(fieldHighlightData[6] * this.resizeWidthVal), Math.round(fieldHighlightData[7] *this. resizeHeightVal));
+                this.ctx.stroke();
+                break;
+            }
+        }
+    }
+
+    resizeHighlightCanvas(width, height, left) {
+        this.resizeWidthVal = this.highlightCanvas.width * (width / this.highlightCanvas.width);
+        this.resizeHeightVal = this.highlightCanvas.height * (height / this.highlightCanvas.height);
+        this.highlightCanvas.style.width = this.resizeWidthVal;
+        this.highlightCanvas.style.height = this.resizeHeightVal;
+        // highlightCanvas.style.left = `${left}px`;
+    }
+
+    flipXHighlightCanvas(idVal) {
+        this.ctx.translate(this.highlightCanvas.width, 0);
+        this.ctx.scale(-1, 1);
+        this.highlight(idVal);
+    }
+    //flips the canvas vertically by scaling it (ctx.scale) to its reverse y position
+    flipYHighlightCanvas(idVal) {
+        this.ctx.translate(0, this.highlightCanvas.height);
+        this.ctx.scale(1, -1);
+        this.highlight(idVal);
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function initHighlight() {
+
+
+
+
+    //waits for fields to be created before adding event listeners
+    const fieldObserver = new MutationObserver(function (mutations, mutationInstance) {
+        //find input elements inside div element with id='fields'
+        const fields = document.getElementById('fields').querySelectorAll('input, textarea');
+        if (fields.length > 0) {
+            fields.forEach((field) => {
+                //event listener when a field is focused
+                field.addEventListener('focus', (e) => {
+                    // flippedH = false;
+                    highlight(e.target.id);
+                    currIdVal = e.target.id;
+                })
+                field.addEventListener('mouseover', (e) => {
+                    // flippedH = false;
+                    highlight(e.target.id);
+                    currIdVal = e.target.id;
+                })
+            });
+
+
+
+            //open dropdown list event listener
+            //find select elements in div with id='fields'
+            $('#fields').find('select').each(function () {
+                $(this).on('select2:open', function (e) {
+                    highlight($(this)[0].id);
+                    currIdVal = $(this)[0].id;
+                });
+            });
+
+            mutationInstance.disconnect();
+
+        }
+    });
+
+    fieldObserver.observe(document, {
+        childList: true,
+        subtree: true
+    });
+
+
+
+    //waits until image is loaded, since its size is based on the displayed image
+    const observer = new MutationObserver(function (mutations, mutationInstance) {
+        var TIFFimg = document.getElementById(sessionStorage.getItem("TiffViewer_current"));
+        var parentDivPDF;
+        var canvasPDF;
+        if (sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)) {
+            parentDivPDF = document.getElementById("pdf-container");
+            canvasPDF = parentDivPDF.getElementsByTagName('canvas')[0];
+            TIFFimg = canvasPDF;
+        }
+        var parentDivIMG;
+        var canvasIMG;
+        if (sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION)) {
+            var parentDivIMG = document.getElementById("img-container");
+            var canvasIMG = parentDivIMG.getElementsByTagName('canvas')[0];
+            TIFFimg = canvasIMG;
+        }
+
+        if (TIFFimg != null) {
+            //waits until width and height has been assigned
+            var sizeObserver = new window.ResizeObserver(entries => {
+                if (sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)) {
+                    if (isCanvasNotCreated) {
+                        rect = canvasPDF.getBoundingClientRect();
+                        createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+                        isCanvasNotCreated = false;
+                        ctx.clearRect(0, 0, canvasPDF.width, canvasPDF.height);
+                    }
+                    else {
+                        rect = canvasPDF.getBoundingClientRect();
+                        if (isInitialPositioning) {
+                            resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left - 263));
+                        }
+                        else {
+                            resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
+                            isInitialPositioning = true;
+                        }
+                    }
+
+                }
+                else if (sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION)) {
+                    if (isCanvasNotCreated) {
+                        rect = canvasIMG.getBoundingClientRect();
+                        createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+                        isCanvasNotCreated = false;
+                        ctx.clearRect(0, 0, canvasIMG.width, canvasIMG.height);
+                    }
+                    else {
+                        rect = canvasIMG.getBoundingClientRect();
+                        if (isInitialPositioning) {
+                            resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left - 263));
+                        }
+                        else {
+                            resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
+                            isInitialPositioning = true;
+                        }
+                    }
+
+                }
+                else {
+                    if (isCanvasNotCreated) {
+                        rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
+                        // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+                        createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+                        isCanvasNotCreated = false;
+                        ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
+                    }
+                    else {
+                        rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
+                        if (isInitialPositioning) {
+                            resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left - 263));
+                        }
+                        else {
+                            resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
+                            isInitialPositioning = true;
+                        }
+                    }
+                }
+
+                $(document).ready(function () {
+                    $('form:first *:input[type!=hidden]:first').focus(); // Run code
+                });
+
+            });
+
+            sizeObserver.observe(TIFFimg);
+
+            mutationInstance.disconnect();
+
+        }
+    });
+
+    observer.observe(document, {
+        childList: true,
+        subtree: true
+    });
+
+
+};
+
+

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightUtil.js

+import { HIGHLIGHT_OBJECT } from "../../../globalVariable.js";
+
+
+export function hightlightEventListeners(){
+    $(document).on('keyup', '.select2.select2-container', function (e) {
+        if (e.which == 9) {
+            //gets the id of the focused select element by using Tab key
+            const idArr = e.target.childNodes[0].id.split(/-container|select2-/);
+            //array created ALWAYS has empty characters on its first and last chars ["", "Civil Status", ""], 
+            //so index 1 is used to get select element ID
+            HIGHLIGHT_OBJECT.highlight(idArr[1]);
+
+            HIGHLIGHT_OBJECT.currIdVal = idArr[1];
+        }
+    });
+
+    window.addEventListener("keydown", (e) => {
+        if (e.ctrlKey && e.shiftKey && e.key === "H") {
+            HIGHLIGHT_OBJECT.flipXHighlightCanvas(HIGHLIGHT_OBJECT.currIdVal);
+            HIGHLIGHT_OBJECT.isInitialPositioning = false;
+        }
+    })
+
+    window.addEventListener("keydown", (e) => {
+        if (e.ctrlKey && e.shiftKey && e.key === "V") {
+            HIGHLIGHT_OBJECT.flipYHighlightCanvas(HIGHLIGHT_OBJECT.currIdVal);
+        }
+    })
+
+    //waits for flip buttons to be created before adding event listeners for adjusting highlights
+    const flipBtnObserver = new MutationObserver(function (mutations, mutationInstance){
+        const flipBtnX = document.getElementById("TiffViewer_FlipX");
+        const flipBtnY = document.getElementById("TiffViewer_FlipY");
+        
+        if(flipBtnX){            
+            flipBtnX.addEventListener("click", function(){
+                HIGHLIGHT_OBJECT.flipXHighlightCanvas(HIGHLIGHT_OBJECT.currIdVal);
+            });
+            flipBtnY.addEventListener("click", function(){
+                HIGHLIGHT_OBJECT.flipYHighlightCanvas(HIGHLIGHT_OBJECT.currIdVal);
+            });
+
+
+            mutationInstance.disconnect();
+        }
+    });
+
+    flipBtnObserver.observe(document, {
+        childList: true,
+        subtree:   true
+    });
+
+    //waits for fields to be created before adding event listeners
+    const fieldObserver = new MutationObserver(function (mutations, mutationInstance) {
+        //find input elements inside div element with id='fields'
+        const fields = document.getElementById('fields').querySelectorAll('input, textarea');
+        if (fields.length>0) {
+            fields.forEach((field) => {
+            //event listener when a field is focused
+            field.addEventListener('focus', (e) =>{
+                // flippedH = false;
+                HIGHLIGHT_OBJECT.highlight(e.target.id);
+                HIGHLIGHT_OBJECT.currIdVal = e.target.id;
+            })
+            field.addEventListener('mouseover', (e) =>{
+                // flippedH = false;
+                HIGHLIGHT_OBJECT.highlight(e.target.id);
+                HIGHLIGHT_OBJECT.currIdVal = e.target.id;
+            })
+        });
+
+
+
+        //open dropdown list event listener
+          //find select elements in div with id='fields'
+          $('#fields').find('select').each(function() {
+            $(this).on('select2:open', function (e) {
+                HIGHLIGHT_OBJECT.highlight($(this)[0].id);
+                HIGHLIGHT_OBJECT.currIdVal = $(this)[0].id;
+            });
+          });
+        
+        mutationInstance.disconnect();
+
+        }
+    });
+
+    fieldObserver.observe(document, {
+        childList: true,
+        subtree:   true
+    });
+
+
+
+//     //waits until image is loaded, since its size is based on the displayed image
+//     const observer = new MutationObserver(function (mutations, mutationInstance) {
+//         var TIFFimg = document.getElementById(sessionStorage.getItem("TiffViewer_current"));
+//         var parentDivPDF;
+//         var canvasPDF;
+//         if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){  
+//             parentDivPDF = document.getElementById("pdf-container"); 
+//             canvasPDF = parentDivPDF.getElementsByTagName('canvas')[0];		
+//             TIFFimg = canvasPDF;
+//         }
+//         var parentDivIMG;
+//         var canvasIMG;
+//         if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION) ){   		
+//             var parentDivIMG = document.getElementById("img-container");
+//             var canvasIMG = parentDivIMG.getElementsByTagName('canvas')[0]; 		
+//             TIFFimg = canvasIMG;
+//         }
+            
+//         if (TIFFimg != null) {
+//         //waits until width and height has been assigned
+//         var sizeObserver = new window.ResizeObserver(entries => {
+//             if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
+//                 if(isCanvasNotCreated){
+//                 HIGHLIGHT_OBJECT.rect = canvasPDF.getBoundingClientRect();
+//                 HIGHLIGHT_OBJECT.createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+//                 HIGHLIGHT_OBJECT.isCanvasNotCreated = false;
+//                 HIGHLIGHT_OBJECT.ctx.clearRect(0, 0, canvasPDF.width, canvasPDF.height);
+//                 }
+//                 else{               
+//                     HIGHLIGHT_OBJECT.rect = canvasPDF.getBoundingClientRect();
+//                     if(HIGHLIGHT_OBJECT.isInitialPositioning){
+//                         HIGHLIGHT_OBJECT.resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
+//                     }
+//                     else{
+//                         HIGHLIGHT_OBJECT.resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
+//                         HIGHLIGHT_OBJECT.isInitialPositioning = true;
+//                     }
+//                 } 
+                    
+//             }
+//             else if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION)){
+//                 if(isCanvasNotCreated){
+//                 rect = canvasIMG.getBoundingClientRect(); 
+//                 createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+//                 isCanvasNotCreated = false;
+//                 ctx.clearRect(0, 0, canvasIMG.width, canvasIMG.height);
+//                 }
+//                 else{               
+//                     rect = canvasIMG.getBoundingClientRect();
+//                     if(isInitialPositioning){
+//                         resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
+//                     }
+//                     else{
+//                         resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
+//                         isInitialPositioning = true;
+//                     }
+//                 } 
+                    
+//             }
+//             else{
+//                 if(isCanvasNotCreated){
+//                 rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
+//                // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+//                 createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+//                 isCanvasNotCreated = false;
+//                 ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
+//                 }
+//                 else{               
+//                     rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
+//                     if(isInitialPositioning){
+//                         resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
+//                     }
+//                     else{
+//                         resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
+//                         isInitialPositioning = true;
+//                     }
+//                 }           
+//             }
+            
+//             $(document).ready(function () {
+//                 $('form:first *:input[type!=hidden]:first').focus(); // Run code
+//             });
+            
+//         });
+
+//         sizeObserver.observe(TIFFimg);
+        
+//         mutationInstance.disconnect();
+
+//         }
+//     });
+
+//     observer.observe(document, {
+//         childList: true,
+//         subtree:   true
+//     });
+// }
+}
+
+
+
+
+

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageDocument.js

-export class ImageDocument{
-    imageFile=null;
-    imageID=null;
-    imageType=null;
+import { FOLDER_PATH } from "../../config.js";
 
-    constructor(imageFile, id, fileFormat){
+export class ImageDocument {
+    imageFile = null;
+    imageID = null;
+    imageType = null;
+    imageStatus = null;
+
+    /*@param
+    imageFile --- image Blob
+    id --- element id
+    fileFormat --- attribute for the element
+    imageStatus --- 200 to display image, 415 for unsupported file , 500 for unable to display image
+     */
+    constructor(imageFile, id, fileFormat, imageStatus) {
         this.imageFile = imageFile;
         this.imageID = id;
         this.imageType = fileFormat;
+        this.imageStatus = imageStatus;
+    }
+
+    async init() {
+        switch (this.imageStatus){
+            case 200:
+                let imageContainer = document.createElement("div");
+                imageContainer.setAttribute("class", "row");
+                imageContainer.setAttribute("id", this.imageID);
+                imageContainer.setAttribute("num-of-pages", "1");
+                imageContainer.setAttribute("file-type", this.imageType);
+    
+                let imageElement = document.createElement("img");
+                imageElement.setAttribute("class", "image");
+                imageElement.src = this.imageFile;
+    
+                imageContainer.appendChild(imageElement);
+                return imageContainer;
+            case 415: // unsupported file
+                return this.createUnsupportedFileDisplay(this.imageID, this.imageType);
+            case 500: // unable to display image
+                return this.createErrorImageDisplay(this.imageID);
+        }
+    }
+
+    createUnsupportedFileDisplay(id, format) {
+        let container = document.createElement("div");
+        container.setAttribute("class", "row unsupported-file");
+        container.setAttribute("id", id);
+        container.setAttribute("num-of-pages", "1");
+        container.setAttribute("file-type", format);
+
+        let imageElement = document.createElement("img");
+        imageElement.setAttribute("class", "image unsupported-file");
+        imageElement.src = "."+ FOLDER_PATH +"/resources/unsupported_file.png";
+
+        let p = document.createElement("p");
+        p.textContent = format.toUpperCase()+" file is not supported.";
+
+        container.appendChild(imageElement);
+        container.appendChild(p);
+        return container;
     }
 
-    init(){
-        let imageContainer = document.createElement("div");
-        imageContainer.setAttribute("class", "row");
-        imageContainer.setAttribute("id", this.imageID);
-        imageContainer.setAttribute("num-of-pages", "1");
-        imageContainer.setAttribute("file-type", this.imageType);
+    createErrorImageDisplay(id) {
+        let container = document.createElement("div");
+        container.setAttribute("class", "row error-image");
+        container.setAttribute("id", id);
+        container.setAttribute("num-of-pages", "1");
+        container.setAttribute("file-type", "");
 
         let imageElement = document.createElement("img");
-        imageElement.setAttribute("class", "image");
-        imageElement.src = this.imageFile;
+        imageElement.setAttribute("class", "image error-image");
+        imageElement.src = "."+ FOLDER_PATH + "/resources/error.png";
+
+        let p = document.createElement("p");
+        p.textContent = "Ooops! Sorry unable to display image."
 
-        imageContainer.appendChild(imageElement);
-        return imageContainer;
+        container.appendChild(imageElement);
+        //container.appendChild(h3);
+        container.appendChild(p);
+        return container;
     }
 }
 
-    
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css

@@ -9,8 +9,16 @@ body {
     margin: 0;
 }
 
+.image-viewer-container{
+    background-color: #BFBFBF;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+
 .image-container{
-    height: 100%;
+    height: 90%;
     width: 100%;
     overflow: auto;
     margin: auto;
@@ -27,10 +35,50 @@ body {
     border: 1px solid #000;
 }
 
+.unsupported-file, .error-image{
+    height: 50%;
+    width: 50%;
+    margin: auto;
+    border: 0px !important;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.image.unsupported-file{
+    height: 60% !important;
+    width: 50% !important;
+    border: 0px !important;
+    margin: auto;
+}
+
+.unsupported-file p{
+    font-size: 16px;
+    color: white;
+    margin: auto;
+    word-wrap: break-word;
+    width: 100%;
+}
+
+.image.error-image{
+    height: 70% !important;
+    width: 70% !important;
+    border: 0px !important;
+    margin: auto;
+}
+
+.error-image p{
+    font-size: 16px;
+    color: white;
+    margin: auto;
+    word-wrap: break-word;
+    width: 100%;
+}
+
 .image-controls{
-    position: sticky;
+    /* position: sticky;
     bottom:1vh;
-    left: 0%;
+    left: 0%; */
     width: 100%;
     height: fit-content;
     padding: 2px;
@@ -114,7 +162,7 @@ body {
 
 #imageViewerHeader{
     width: 100%;
-    height: 5vh;
+    height: fit-content;
     display: flex;
     background-color: #000000a1;
     padding: 5px;

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js

@@ -6,6 +6,7 @@ export class ImageViewer {
     imageContainerID;
     imageViewerElement;
     imageMainContainerElement;
+    
     currentImageID = "currentImage";
     nextImageID = "nextImage";
     previousImageID = "previousImage";
@@ -16,15 +17,12 @@ export class ImageViewer {
     currentImageObject;
     previousImageObject;
     nextImageObject;
-    // imageType;
-    // imageURL;
-    // //imageKey; //this key is used to fetch  in indexedDB
-    // imageID;
-    // imageBlob;
+
+    highLightCanvasID;
+    highlightObject;
 
     constructor(imageContainerID) {
         this.imageContainerID = imageContainerID;
-        this.init();
     }
 
     async init() {
@@ -41,8 +39,6 @@ export class ImageViewer {
         this.imageViewerElement.appendChild(this.createHeader());
         this.imageViewerElement.appendChild(this.imageMainContainerElement);
         this.imageViewerElement.appendChild(this.createImageControlButtons());
-
-       
     }
 
     async addImage(imageID, imageType, imageName, imageBlob){
@@ -54,18 +50,20 @@ export class ImageViewer {
         if (imageBlob) {
             const objectURL = URL.createObjectURL(imageBlob);
             if (imageType.includes("jpeg") || imageType.includes("jpg") || imageType.includes("png")) {
-                imageToDisplay = new ImageDocument(objectURL, imageID, imageType);
+                imageToDisplay = new ImageDocument(objectURL, imageID, imageType, 200);
             } else if (imageType.includes("pdf")) {
-                imageToDisplay = await new PDFDocument(objectURL, imageID);
+                imageToDisplay = new PDFDocument(objectURL, imageID);
             } else if (imageType.includes("tiff") || imageType.includes("tif")) {
-                imageToDisplay = await new TiffDocument(imageBlob, objectURL, imageName, imageID);
+                imageToDisplay = new TiffDocument(imageBlob, objectURL, imageName, imageID);
             } else {
-                imageToDisplay = this.createUnsupportedFileDisplay(imageID, fileFormat);
+                imageToDisplay = new ImageDocument(objectURL, imageID, imageType, 415);
             }
         } else {
-            imageToDisplay = this.createErrorImageDisplay(imageID);
+            imageToDisplay = new ImageDocument(null, imageID, null, 500);
         }
-        this.imageMainContainerElement.appendChild(await imageToDisplay.init());
+
+        const img = await imageToDisplay.init();
+        this.imageMainContainerElement.appendChild(img);
         let filename = document.getElementById("imageFileName");
         filename.textContent = imageName;
 
@@ -90,11 +88,13 @@ export class ImageViewer {
     }
 
     async createPreviousImage(imageType, imageName, imageBlob){
-        await this.addImage(this.previousImageID, imageType, imageName, imageBlob)
+        await this.addImage(this.previousImageID, imageType, imageName, imageBlob);
+        document.getElementById(this.previousImageID).style.display = "none";
     }
 
     async createNextImage(imageType, imageName, imageBlob){
-        await this.addImage(this.nextImageID, imageType, imageName, imageBlob)
+        await this.addImage(this.nextImageID, imageType, imageName, imageBlob);
+        document.getElementById(this.nextImageID).style.display = "none";
     }
 
     setCurrentImage(object){
@@ -135,43 +135,14 @@ export class ImageViewer {
         return imageBlob.type === "application/octet-stream" ? imageName.split('.').pop() : imageBlob.type;
     }
 
-    createUnsupportedFileDisplay(id, format) {
-        let container = document.createElement("div");
-        container.setAttribute("class", "row unsupported-image pdf-canvas");
-        container.setAttribute("id", id);
-        container.setAttribute("num-of-pages", "1");
-        container.setAttribute("file-type", format);
-
-        let imageElement = document.createElement("img");
-        imageElement.setAttribute("class", "image");
-        imageElement.src = "./WebFC-UI/resources/unsupported_file.png";
-
-        container.appendChild(imageElement);
-        return container;
+    setHighLightcanvas(id, highlightObj){
+        this.highLightCanvasID = id;
+        this.highlightObject = highlightObj;
     }
 
-    createErrorImageDisplay(id) {
-        let container = document.createElement("div");
-        container.setAttribute("class", "row error-image pdf-canvas");
-        container.setAttribute("id", id);
-        container.setAttribute("num-of-pages", "1");
-        container.setAttribute("file-type", "");
-
-        let imageElement = document.createElement("img");
-        imageElement.setAttribute("class", "image error-image");
-        imageElement.src = "./WebFC-UI/resources/error.png";
-
-        let h3 = document.createElement("h3");
-        h3.textContent = "Something went wrong..."
-
-        let p = document.createElement("p");
-        p.textContent = "Unable to display image."
+    
 
-        container.appendChild(imageElement);
-        container.appendChild(h3);
-        container.appendChild(p);
-        return container;
-    }
+    
 
     createImageControlButtons() {
         const _this = this;
@@ -226,6 +197,16 @@ export class ImageViewer {
                 fitContentClasslist.remove("fit-content");
                 _this.imageMainContainerElement.classList.remove("center-object");
             }
+
+            let highlight = document.getElementById(_this.highLightCanvasID);
+            if(highlight){
+                if (!highlight.classList.contains("fit-content")) {
+                    highlight.classList.add("fit-content");
+                } else {
+                    highlight.classList.remove("fit-content");
+                }
+            }
+            
         });
 
 
@@ -240,6 +221,12 @@ export class ImageViewer {
         flipVerticalButton.addEventListener('click', function () {
             scaleY = scaleY === -1 ? 1 : -1;
             document.getElementById(_this.currentImageID).style.float = "left";
+            
+            let highlight = document.getElementById(_this.highLightCanvasID);
+            if(highlight){
+                highlight.style.float = "left";
+            }
+            
             manipulateImage();
         });
 
@@ -251,6 +238,11 @@ export class ImageViewer {
         flipHorizontalButton.addEventListener('click', function () {
             scaleX = scaleX === -1 ? 1 : -1;
             document.getElementById(_this.currentImageID).style.float = "left";
+            
+            let highlight = document.getElementById(_this.highLightCanvasID);
+            if(highlight){
+                highlight.style.float = "left";
+            }
             manipulateImage();
         });
 
@@ -284,6 +276,10 @@ export class ImageViewer {
                 currentRotation = 0;
             }
             document.getElementById(_this.currentImageID).style.transform = `scale(${scaleX}, ${scaleY}) rotate(${currentRotation}deg)`;
+            let highlight = document.getElementById(_this.highLightCanvasID);
+            if(highlight){
+                highlight.style.transform = `scale(${scaleX}, ${scaleY}) rotate(${currentRotation}deg)`;
+            }
         }
 
         let scale = 1.0;
@@ -298,6 +294,12 @@ export class ImageViewer {
                 console.log(scale);
             }
             document.getElementById(_this.currentImageID).style.zoom = scale;
+
+            let highlight = document.getElementById(_this.highLightCanvasID);
+            if(highlight){
+                highlight.style.zoom = scale;
+            }
+            
         });
 
         let zoomOutBtn =  document.createElement("button");
@@ -310,6 +312,10 @@ export class ImageViewer {
                 console.log(scale);
             }
             document.getElementById(_this.currentImageID).style.zoom = scale;
+            let highlight = document.getElementById(_this.highLightCanvasID);
+            if(highlight){
+                highlight.style.zoom = scale;
+            }
         });
 
         controlsDiv.appendChild(fitContentBtn);

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/pdfDocument.js

@@ -28,7 +28,7 @@ export class PDFDocument {
         var pdfjsLib = window['pdfjs-dist/build/pdf'];
 
         // The workerSrc property shall be specified.
-        pdfjsLib.GlobalWorkerOptions.workerSrc = './modules/imageViewer/assets/pdf.worker.js';
+        pdfjsLib.GlobalWorkerOptions.workerSrc = './ImageViewerWidget/modules/imageViewer/assets/pdf.worker.js';
 
         pdfCanvas.setAttribute("id", this.pdfContainerID);
         /**

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/tiffDocument.js

 export class TiffDocument{
     filenameWithoutExt;
+    blob;
+    tiffImageName;
+    tiffID;
+
     constructor(blob, url, filename, id){
+        this.tiffImageName = filename;
+        this.tiffID = id;
+        this.blob = blob;
+        //this.init(blob.arrayBuffer(), filename, id);
+    }
+
+    async init() {
         Tiff.initialize({
             TOTAL_MEMORY: 16777216 * 10
         });
-        var startIndex = (url.indexOf('\\') >= 0 ? url.lastIndexOf('\\') : url.lastIndexOf('/'));
-        var TiffViewerImageName = url.substring(startIndex);
-        if (TiffViewerImageName.indexOf('\\') === 0 || TiffViewerImageName.indexOf('/') === 0) {
-            if (TiffViewerImageName.length > 40) {
-                TiffViewerImageName = decodeURI(TiffViewerImageName); /* ADDED: replaces the %20 that replaces the spaces when file name is displayed */
-                TiffViewerImageName = TiffViewerImageName.substring(1, 40);
-                TiffViewerImageName = TiffViewerImageName.concat("...");
-            } else {
-                TiffViewerImageName = TiffViewerImageName.substring(1);
-            }
-    
-        }
+
         var arraybuffer;
         var fileReader = new FileReader();
         fileReader.onload = function (event) {
             arraybuffer = event.target.result;
         };
-        fileReader.readAsArrayBuffer(blob);
-        this.init(blob.arrayBuffer(), filename, id);
-    }
+        fileReader.readAsArrayBuffer(this.blob);
 
-    async init(xhr, TiffViewerImageName, id) {
-        var buffer = xhr;
-        var TiffViewerImageName = TiffViewerImageName;
+        var buffer = await this.blob.arrayBuffer();
+        var TiffViewerImageName = this.tiffImageName;
     
         const parts = TiffViewerImageName.split(".");
         parts.pop();
@@ -35,16 +32,7 @@ export class TiffDocument{
     
         let TiffViewer_pages = 0; //page count
         let TiffViewer_current = 1; // TiffViewer_current page number
-        //sessionStorage.setItem("TiffViewer_current", filenameWithoutExt + TiffViewer_current);
-        if (localStorage.getItem("prev") == 1) {
-            Current_page = Current_page - 1;
-        } else {
-            if (localStorage.getItem("submit") == 1 || Current_page == 0) {
-                Current_page = Current_page + 1;
-            }
-        }
-    
-    
+      
         var tiff = new Tiff({
             buffer: buffer
         }); //get TIFF data via buffer
@@ -52,7 +40,7 @@ export class TiffDocument{
     
         let tiffContainer = document.createElement("div");
         tiffContainer.setAttribute("class", "tiff-container");
-        tiffContainer.setAttribute("id", id);
+        tiffContainer.setAttribute("id", this.tiffID);
         tiffContainer.setAttribute("num-of-pages", TiffViewer_pages);
         tiffContainer.setAttribute("file-type", "tiff");
     
@@ -80,41 +68,155 @@ export class TiffDocument{
 
 }
 
-export function onPrevPage() {
-    let TiffViewer_current = parseInt(sessionStorage.getItem("current_page"));
-    if (TiffViewer_current != 1) {
-        document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "none";
-        TiffViewer_current--;
-        document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "block";
-        sessionStorage.setItem("current_page", TiffViewer_current);
-        //CURRENT_PAGE_ELEMENT.textContent = TiffViewer_current;
-        document.getElementById("nextPageBtn").style.visibility = "visible";
-        //document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
-    }
+// export function onPrevPage() {
+//     let TiffViewer_current = parseInt(sessionStorage.getItem("current_page"));
+//     if (TiffViewer_current != 1) {
+//         document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "none";
+//         TiffViewer_current--;
+//         document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "block";
+//         sessionStorage.setItem("current_page", TiffViewer_current);
+//         //CURRENT_PAGE_ELEMENT.textContent = TiffViewer_current;
+//         document.getElementById("nextPageBtn").style.visibility = "visible";
+//         //document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
+//     }
+
+//     if (TiffViewer_current === 1) {
+//         document.getElementById("previousPageBtn").style.visibility = "hidden";
+//     }
+
+
+// }
+
+// export function nextPage() {
+//     let TiffViewer_current = parseInt(sessionStorage.getItem("current_page"));
+//     let TiffViewer_pages = parseInt(sessionStorage.getItem("total_pages"));
+//     if (TiffViewer_current != TiffViewer_pages) {
+//         document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style = "display: none";
+//         TiffViewer_current++;
+//         sessionStorage.setItem("current_page", TiffViewer_current);
+//         //CURRENT_PAGE_ELEMENT.textContent = TiffViewer_current;
+//         document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "block";
+//         document.getElementById("previousPageBtn").style.visibility = "visible";
+//         // document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
+//     }
+
+//     if (TiffViewer_current === TiffViewer_pages) {
+//         document.getElementById("nextPageBtn").style.visibility = "hidden";
+//     }
+// }
+
+   
+
+
+export const displayTiff = async (blob, url, filename, id) => {
+    Tiff.initialize({
+        TOTAL_MEMORY: 16777216 * 10
+    });
+    var startIndex = (url.indexOf('\\') >= 0 ? url.lastIndexOf('\\') : url.lastIndexOf('/'));
+    var TiffViewerImageName = url.substring(startIndex);
+    if (TiffViewerImageName.indexOf('\\') === 0 || TiffViewerImageName.indexOf('/') === 0) {
+        if (TiffViewerImageName.length > 40) {
+            TiffViewerImageName = decodeURI(TiffViewerImageName); /* ADDED: replaces the %20 that replaces the spaces when file name is displayed */
+            TiffViewerImageName = TiffViewerImageName.substring(1, 40);
+            TiffViewerImageName = TiffViewerImageName.concat("...");
+        } else {
+            TiffViewerImageName = TiffViewerImageName.substring(1);
+        }
 
-    if (TiffViewer_current === 1) {
-        document.getElementById("previousPageBtn").style.visibility = "hidden";
     }
+    var arraybuffer;
+    var fileReader = new FileReader();
+    fileReader.onload = function (event) {
+        arraybuffer = event.target.result;
+    };
+    fileReader.readAsArrayBuffer(blob);
+    TIFFViewer(await blob.arrayBuffer(), filename, id);
+    // await makeRequest(url, filename, id);
+}
+
+let Current_page = 0;
+let filenameWithoutExt;
+async function makeRequest(url, filename, id) {
+    return new Promise(function (resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.responseType = 'arraybuffer';
+        xhr.open('get', url, true);
+        xhr.onreadystatechange = function () {
+            if (this.readyState == 4 && this.status == 200) {
+                var startIndex = (xhr.responseURL.indexOf('\\') >= 0 ? xhr.responseURL.lastIndexOf('\\') : xhr.responseURL.lastIndexOf('/'));
+                var TiffViewerImageName = xhr.responseURL.substring(startIndex);
+                if (TiffViewerImageName.indexOf('\\') === 0 || TiffViewerImageName.indexOf('/') === 0) {
+                    if (TiffViewerImageName.length > 40) {
+                        TiffViewerImageName = decodeURI(TiffViewerImageName); /* ADDED: replaces the %20 that replaces the spaces when file name is displayed */
+                        TiffViewerImageName = TiffViewerImageName.substring(1, 40);
+                        TiffViewerImageName = TiffViewerImageName.concat("...");
+                    } else {
+                        TiffViewerImageName = TiffViewerImageName.substring(1);
+                    }
 
+                }
 
+                TIFFViewer(xhr.response, filename, id);
+            }
+        };
+        xhr.send();
+    });
 }
+//Main Widget
+function TIFFViewer(xhr, TiffViewerImageName, id) {
+    var buffer = xhr;
+    var TiffViewerImageName = TiffViewerImageName;
+
+    const parts = TiffViewerImageName.split(".");
+    parts.pop();
+    filenameWithoutExt = parts.join(".");
 
-export function nextPage() {
-    let TiffViewer_current = parseInt(sessionStorage.getItem("current_page"));
-    let TiffViewer_pages = parseInt(sessionStorage.getItem("total_pages"));
-    if (TiffViewer_current != TiffViewer_pages) {
-        document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style = "display: none";
-        TiffViewer_current++;
-        sessionStorage.setItem("current_page", TiffViewer_current);
-        //CURRENT_PAGE_ELEMENT.textContent = TiffViewer_current;
-        document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "block";
-        document.getElementById("previousPageBtn").style.visibility = "visible";
-        // document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
+    let TiffViewer_pages = 0; //page count
+    let TiffViewer_current = 1; // TiffViewer_current page number
+    //sessionStorage.setItem("TiffViewer_current", filenameWithoutExt + TiffViewer_current);
+    if (localStorage.getItem("prev") == 1) {
+        Current_page = Current_page - 1;
+    } else {
+        if (localStorage.getItem("submit") == 1 || Current_page == 0) {
+            Current_page = Current_page + 1;
+        }
     }
 
-    if (TiffViewer_current === TiffViewer_pages) {
-        document.getElementById("nextPageBtn").style.visibility = "hidden";
+    var tiff = new Tiff({
+        buffer: buffer
+    }); //get TIFF data via buffer
+    TiffViewer_pages = tiff.countDirectory(); //count TIFF image TiffViewer_pages
+
+    let tiffContainer = document.createElement("div");
+    tiffContainer.setAttribute("class", "tiff-container");
+    tiffContainer.setAttribute("id", id);
+    tiffContainer.setAttribute("num-of-pages", TiffViewer_pages);
+    tiffContainer.setAttribute("file-type", "tiff");
+
+    //creating blank image containers for each page and setting TIFF data as image source
+    for (var i = 1; i <= TiffViewer_pages; i++) {
+        var img = document.createElement('img');
+        img.id = filenameWithoutExt + i;
+        if (i != 1) {
+            img.setAttribute("class", "image tiff-images");
+            tiff.setDirectory(i - 1);
+            img.src = tiff.toCanvas().toDataURL();
+            img.style.display = "none";
+            tiffContainer.append(img);
+        } else {
+            let firstImage = document.createElement("img");
+            firstImage.src = tiff.toCanvas().toDataURL();
+            firstImage.setAttribute("class", "image");
+            firstImage.id = filenameWithoutExt + i;
+            tiffContainer.prepend(firstImage);
+        }
+
     }
-}
+
+    DISPLAY_CONTAINER.appendChild(tiffContainer);
+    DISPLAY_CONTAINER.classList.add("pdf-canvas");
+
+
 
    
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js

+import { GFS_URL } from "../../../config.js";
+
 export class IndexedDBStorage{
     defaultGetStoreFunc;
     dbName;
@@ -71,12 +73,12 @@ export class IndexedDBStorage{
         try {
             let data = {"dir": url};
             if(url.startsWith("file")){
-                let response = await fetch(GET_LOCAL_IMAGE,{
-                    mode: 'no-cors',
-                    method: "GET",
+                let response = await fetch(GFS_URL +"/fetch-local",{
+                   // mode: 'no-cors',
+                    method: "POST",
                     headers: {
                         'Content-Type': 'application/json',
-                        'Access-Control-Allow-Origin':'*'
+                        //'Access-Control-Allow-Origin':'*'
                     },
                     body: JSON.stringify(data),
                 }

WebGde/WebContent/WebGde-Widgets/config.js

+/**
+ * for testing purposes, below are different files to be used showing
+ * some possible configurations of the file
+ */
+
+
+// schema with no "SECTION" key
+// const SCHEMA_FILE = "./src/sample_schema/no_section.json"
+
+// schema with missing fields (fieldLabel, validation)
+// const SCHEMA_FILE = "./src/sample_schema/missing_fields.json"
+
+// schema with 20 fields
+// const SCHEMA_FILE = "./src/sample_schema/20_field_schema.json"
+
+// schema with 15 fields
+// const SCHEMA_FILE = "./src/sample_schema/15_field_schema.json"
+
+// schema with 10 fields
+// const SCHEMA_FILE = "./src/sample_schema/10_field_schema.json"
+
+// schema with 5 fields and all possible collections
+//const SCHEMA_FILE = "./src/sample_schema/5_field_schema.json"
+
+/*export const  SCHEMA_FILE = "./src/sample_schema/SC Schema.json"*/
+
+export const SCHEMA_FILE = "./src/sample_schema/HR Speed Test 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
+
+export const INPUT_FOLDER = "./input/"
+
+export const OUTPUT_FILES = "../../output/"
+
+export const  METRIC_FILES = "../../metrics/"
+
+export const  HIGH_LIGHT_SCHEMA = "./sample_schema/dbSchema_anno.xlsx"
+
+//this determines if the images will be retrieved from the gfs
+export const  DOMAIN = "http://35.169.23.0:8080"
+export const  CONTEXTROOT = "gfs-explorer-ws"
+export const  GFS_URL = "http://34.238.117.43:8080" + "/WebGde/svc/gfs-rest"
+export const  FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"
+export const  DOWNLOAD_URL = DOMAIN + "/" + CONTEXTROOT +  "/svc/gfs-rest/get-download-link"
+export const  IS_RETRIEVE_FROM_GFS = "N"
+
+export const  INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLock,Pause,PageUp,PageDown,Insert,Delete,Control"
+
+//BPO CONFIG
+export const  IS_RETRIEVE_FROM_BPO = "Y"
+// export const  BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
+// export const  CURRENT_NODE = "Web GDE"
+export const  BPO_URL = "http://34.238.117.43:8080/bpo/"
+export const  CURRENT_NODE = "Web_GDE_DEV"
+export const  ENCODING_PASS = "PASS1"
+export const  NEXT_NODE = "Complete"
+export const  EXCEPTION_NODE = "Exception"
+
+export const  PDF_EXTENSION = ".pdf"
+export const  JPG_EXTENSION = ".jpg"
+export const  PNG_EXTENSION = ".png"
+
+export const  REASON_LIST = "Reason1,Reason2,Reason3,Reason4"
+
+//KEYCLOAK CONFIG
+export const REDIRECT_URL = 'http://auth-server/auth/realms/GFS/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri';

WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js

-class DocumentControlWidget {
+import {pauseMetricCapture} from '../captureMetrics/captureMetrics.js';
+
+export class DocumentControlWidget {
 
     global = {
         container: null,
@@ -15,17 +17,20 @@ class DocumentControlWidget {
     init() {
         this.global.container = document.createElement("div");
         this.global.container.id = "TiffButtonRight";
+        this.global.container.classList.add("ctrl-buttons")
         //temporary
-        this.global.container.style.backgroundColor = "grey";
 
         this.global.refreshBtn = document.createElement("div");
         this.global.refreshBtn.title = "Refresh";
         this.global.refreshBtn.classList.add("buttonRightClass");
+        this.global.refreshBtn.classList.add("buttonRightClass");
 
         const refreshIcon = document.createElement("img");
         refreshIcon.classList.add("tiffViewerIcons");
-        refreshIcon.src = "./assets/refresh_icon.png";
+        refreshIcon.src = "./documentControlWidget/assets/refresh_icon.png";
         refreshIcon.alt = "Refresh";
+        refreshIcon.height = "32";
+        refreshIcon.width = "32";
 
         this.global.pauseBtn = document.createElement("div");
         this.global.pauseBtn.title = "Pause";
@@ -33,8 +38,10 @@ class DocumentControlWidget {
 
         const pauseIcon = document.createElement("img");
         pauseIcon.classList.add("tiffViewerIcons");
-        pauseIcon.src = "./assets/pause_icon.png";
+        pauseIcon.src = "./documentControlWidget/assets/pause_icon.png";
         pauseIcon.alt = "Pause";
+        pauseIcon.height = "32";
+        pauseIcon.width = "32";
 
         this.global.returnBtn = document.createElement("div");
         this.global.returnBtn.title = "Return";
@@ -42,8 +49,10 @@ class DocumentControlWidget {
 
         const returnIcon = document.createElement("img");
         returnIcon.classList.add("tiffViewerIcons");
-        returnIcon.src = "./assets/return_icon.png";
+        returnIcon.src = "./documentControlWidget/assets/return_icon.png";
         returnIcon.alt = "Return";
+        returnIcon.height = "32";
+        returnIcon.width = "32";
 
         this.global.rejectBtn = document.createElement("div");
         this.global.rejectBtn.title = "Reject";
@@ -51,9 +60,11 @@ class DocumentControlWidget {
 
         const rejectIcon = document.createElement("img");
         rejectIcon.classList.add("tiffViewerIcons");
-        rejectIcon.src = "./assets/reject_icon.png";
+        rejectIcon.src = "./documentControlWidget/assets/reject_icon.png";
         rejectIcon.alt = "Reject";
-
+        rejectIcon.height = "32";
+        rejectIcon.width = "32";
+        
         this.global.refreshBtn.append(refreshIcon);
         this.global.pauseBtn.append(pauseIcon);
         this.global.returnBtn.append(returnIcon);
@@ -155,4 +166,299 @@ class DocumentControlWidget {
     getRejectBtn() {
         return this.global.rejectBtn;
     }
+
+ refreshImage() {
+        checkSfIndex();
+        var size = 0;
+    
+        const elStatus = document.getElementById('status');
+    
+        function status(text) {
+            elStatus.innerHTML = text;
+        }
+    
+        //const progressBar = document.getElementById('progressBar');
+        const elProgress = document.getElementById('progress');
+    
+        function progress() {
+            /* elProgress.innerHTML = Math.round(loaded * .000001) + " mb of " + Math.round(total * .000001);*/
+            //progressBar.value = Math.round(100 / 100 * 100);
+        }
+    
+    
+        var request = indexedDB.open("ImageDatabase", 1);
+        request.onsuccess = async function() {
+            // console.log("Database opened successfully " + val );
+    
+            const db = request.result;
+            var transaction;
+            var store;
+            if (db.objectStoreNames.contains('image')) {
+                transaction = db.transaction("image", "readwrite");
+                store = transaction.objectStore("image");
+            }else{
+                noElementLogout();        	
+            }
+            var count =  store.count();
+            count.onsuccess = function() {
+    
+                if (count.result == 0 && IS_RETRIEVE_FROM_GFS != 'Y') {
+                    disableForm();
+                    promptNoFilesLeft();
+                } else {
+                    const idQuery = localStorage.getItem("display_counter") == 1 ? store.get(1): store.get(parseInt(localStorage.getItem("display_counter")) - 1);
+    
+                    idQuery.onsuccess = function() {
+                        url = URL.createObjectURL(idQuery.result.address);
+                        if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
+                            sessionStorage.setItem("file_Name", idQuery.result.name);
+                            const TiffViewer_Header = document.getElementById("TiffModalHeader");
+                            const TiffViewer_filedetail = document.createElement("div");
+                            TiffViewer_filedetail.id = "TiffViewerImageName";
+                            TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
+                            TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
+                            TiffViewer_Header.append(TiffViewer_filedetail);
+                            //remove IMG and Tiff buttons
+                            var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
+                            var ctrlImg = document.getElementById("controlsContainerImg");                           	
+                            if (ctrlTiff || ctrlImg) {
+                              ctrlTiff.outerHTML="";
+                              ctrlImg.outerHTML="";	
+                            }
+                            displayPdf(url);
+                        } 
+                        else if(idQuery.result.name.endsWith(JPG_EXTENSION) || idQuery.result.name.endsWith(PNG_EXTENSION)){
+                            sessionStorage.setItem("file_Name", idQuery.result.name);
+                            const TiffViewer_Header = document.getElementById("TiffModalHeader");
+                            const TiffViewer_filedetail = document.createElement("div");
+                            TiffViewer_filedetail.id = "TiffViewerImageName";
+                            TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
+                            TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
+                            TiffViewer_Header.append(TiffViewer_filedetail);
+                            //Remove tiff and pdf
+                            var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
+                            var ctrlPdf = document.getElementById("controlsContainer");                                
+                            if (ctrlTiff || ctrlPdf) {
+                              ctrlTiff.outerHTML="";
+                              ctrlPdf.outerHTML="";	
+                            }
+                            displayImg(idQuery.result.path);
+                        }
+                        
+                        else {
+                            //remove pdf and img
+                            var ctrlPdf = document.getElementById("controlsContainer");
+                            var ctrlImg = document.getElementById("controlsContainerImg");                  	
+                            if (ctrlPdf || ctrlImg) {
+                              ctrlPdf.outerHTML="";	
+                              ctrlImg.outerHTML="";	
+                            }
+                            console.log("This is not a pdf file");
+                            window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
+                        }
+                        File_Name = idQuery.result.name;
+                        File_Path = idQuery.result.path;
+                    };
+    
+                }
+            }
+    
+            transaction.oncomplete = function() {
+                db.close();
+                status('downloaded ' + Math.trunc(size / 1000) + " kb");
+                progress();
+    
+                [...document.getElementsByClassName("bar")].forEach(el => {
+                    el.style.display = "none";
+                });
+            };
+        };
+        
+        // Handle errors
+        request.onerror = function(event) {
+          console.error('Error opening database:', event.target.error);
+        };
+        
+        
+    }
+ checkSfIndex(first) {
+        if(first == true) {
+            localStorage.sfIndex = 1;
+        }
+        let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length;
+        document.getElementById("totalPageValue").innerHTML = localStorage.sfIndex + ' of ' + ofTotal;
+        
+        if(localStorage.sfIndex == 1) {
+            document.getElementById("prevDiv").style.visibility = "hidden";
+            document.removeEventListener("keydown", (e) => {
+                if (e.ctrlKey && e.keyCode === 122) {
+                    localStorage.setItem("prev", "1");
+                    const fieldForm = document.getElementById("fields");
+                    fieldForm.querySelector('input[type="submit"]').click()
+                }
+            })
+        } else {
+            document.getElementById("prevDiv").style.visibility = "visible";
+            document.addEventListener("keydown", (e) => {
+                if (e.ctrlKey && e.keyCode === 122) {
+                    localStorage.setItem("prev", "1");
+                    const fieldForm = document.getElementById("fields");
+                    fieldForm.querySelector('input[type="submit"]').click()
+                }
+            })
+        }
+        
+        if(localStorage.sfIndex == JSON.parse(sessionStorage.dir_files).length) {
+            document.getElementById("nextDiv").style.visibility = "hidden";
+            document.removeEventListener("keydown", (e) => {
+                if (e.ctrlKey && e.keyCode === 123) {
+                    const fieldForm = document.getElementById("fields");
+                    fieldForm.querySelector('input[type="submit"]').click();
+                }
+            })
+        } else {
+            document.getElementById("nextDiv").style.visibility = "visible";
+            document.addEventListener("keydown", (e) => {
+                if (e.ctrlKey && e.keyCode === 123) {
+                    const fieldForm = document.getElementById("fields");
+                    fieldForm.querySelector('input[type="submit"]').click();
+                }
+            })
+        }
+        if(first == true) {
+            localStorage.removeItem("sfIndex");
+        }
+    }
+
+    
+    
+}
+
+function createRejectWindow(){
+	
+    let popUpDisplay = document.createElement("div");
+    popUpDisplay.classList.add("genericPopup")
+    
+    let screenMain = document.createElement('div');
+    screenMain.id = 'parent_Window';
+    screenMain.classList.add('parent_Window');
+    document.body.appendChild(screenMain);
+    var resList = REASON_LIST.split(",");
+    
+    let rejectLabel = document.createElement("div");
+    rejectLabel.textContent = "Reject";
+    rejectLabel.classList.add("headerLabel");
+    screenMain.appendChild(rejectLabel);
+    
+    
+    for(let i = 0; i < resList.length; i++){
+        screenMain.appendChild(checkLabelComponent(resList[i],resList[i],"check" + (i + 1)));
+    }	
+
+    
+    let buttonPanel = document.createElement("div");
+    buttonPanel.classList.add("floatingButtonPanel");
+    
+    let cancelButton = createButtonElem("normalButton", "Cancel");
+    let okButton = createButtonElem("emphasizeButton", "Ok");
+    
+    buttonPanel.append(cancelButton);
+    buttonPanel.append(okButton);
+    
+     
+    screenMain.appendChild(checkLabelComponent('Others','','check5'));
+    screenMain.appendChild(createMessageBox('MssgBox'));
+    screenMain.appendChild(buttonPanel); 
+                
+    setRadioHandler('MssgBox');
+    
+    okButton.onclick = function () {
+        if (document.querySelector('input[name="rejectRadio"]:checked').value != null) {
+            if (document.querySelector('input[name="rejectRadio"]:checked').value.trim().length != 0) {
+                saveExceptionToXml();//save xml
+                rejectElement();//reject on bpo
+                screenMain.style.display = 'none';
+                rejectButton.disabled = false;
+                if(currentWindow){currentWindow.close();}
+                popUpDisplay.remove();
+                var fileName = sessionStorage.getItem("file_Name");
+                if(fileName !== null && fileName !== undefined){
+                    document.getElementById("controlsContainer").outerHTML="";	
+                }else{
+                    document.getElementById("TiffViewer_ButtonContainer").outerHTML="";	
+                }
+                return;
+            }
+        }
+        
+        document.getElementById('MssgBox').value = "";
+        document.getElementById('rejectSubmit').click();
+       }
+           
+    cancelButton.onclick = function () {         
+        popUpDisplay.remove();
+        rejectButton.disabled = false;     
+    }          
+    popUpDisplay.append(screenMain);
+    document.body.append(popUpDisplay);
+      
+}	
+              
+
+
+function setRadioHandler(id){
+
+    var addressOther = document.querySelectorAll('input[name="rejectRadio"]');
+    var addressField = document.getElementById(id);
+    var tempAddress = "";
+
+    for (var i = 0; i < addressOther.length; i++) {
+        addressOther[i].addEventListener("change", addressHandler);
+    }
+
+    function addressHandler() {
+        if (this.id == "check5") {
+            addressField.disabled = false;
+            addressField.value = tempAddress;
+        } else {
+            tempAddress = addressField.value;
+            addressField.value = "";
+            addressField.disabled = true;
+        }
+    }
+    
+        //set radio button text area value
+    let radioMessage = document.getElementById('check5');
+    let text = document.getElementById('MssgBox');
+    radioMessage.value = text.value;
+
+
+}
+
+function checkLabelComponent(textLabel,inputval,checkboxId){
+    let checkBoxCont = document.createElement('div');
+    checkBoxCont.id = 'checkBoxCont';
+
+    let inp = document.createElement("input");
+    inp.id = checkboxId;
+    inp.setAttribute('type', 'radio');
+    inp.name = "rejectRadio";
+    inp.value = inputval;
+    inp.style.order = 1;
+    inp.style.marginTop = 0;
+    
+    if(checkboxId == 'check1'){
+        inp.checked = true;
+    
+    }
+
+    var newlabel = document.createElement("Label");
+    newlabel.setAttribute("for", checkboxId);
+    newlabel.innerHTML = textLabel;
+    newlabel.style.order = 2;
+
+    checkBoxCont.appendChild(newlabel);
+    checkBoxCont.appendChild(inp);
+
+    return checkBoxCont;
 }
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/genericPopup/genericPopup.js

@@ -20,7 +20,7 @@ export function createModal(okButtonAction, popupTitleText) {
     backdropContainer.style.height = "100%";
     backdropContainer.style.position = "absolute";
     backdropContainer.style.top = "0";
-    backdropContainer.style.zIndex = "1";
+    backdropContainer.style.zIndex = "50";
     backdropContainer.style.backdropFilter = "blur(4px)";
   
     var popupContainer = document.createElement("div");

WebGde/WebContent/WebGde-Widgets/globalVariable.js

+export let HIGHLIGHT_OBJECT;
+export let IMAGE_VIEWER_OBJECT;
+export let INDEXED_DB_STORAGE;
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/script.js

@@ -3,46 +3,125 @@ import { displayField } from "./DataInputWidget/displayFieldClass.js";
 import { ImageViewer } from "./ImageViewerWidget/modules/imageViewer/imageViewer.js";
 import { IndexedDBStorage } from "./ImageViewerWidget/modules/storage/indexedDBStorage.js";
 import { createModal } from "./genericPopup/genericPopup.js";
+import { hightlightEventListeners } from "./ImageViewerWidget/modules/highlight/highlightUtil.js";
+import { HIGH_LIGHT_SCHEMA } from "./config.js";
+import { Highlight } from "./ImageViewerWidget/modules/highlight/highlightClass.js";
+import { BPO } from "./BPO/getElement.js";
+import { DocumentControlWidget } from "./documentControlWidget/documentControlWidget.js";
+import { INDEXED_DB_STORAGE , HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT } from "./globalVariable.js";
 
 
-const schema = await fetchSchema();
-const containerId = 'input-field-container';
 
-// Instantiate widget and assign it to a container
-const displayFieldClass = new displayField(schema, containerId);
 
-// Call Function to generate fields with given schema to provided container
-displayFieldClass.generateFields();
-// displayFieldClass.editHeader(element-id);
+document.addEventListener("DOMContentLoaded", async ()=>{
+    await initializeWebGDE();
+    
+ });
+
+async function initializeWebGDE(){
+    sessionStorage.setItem("user_id", "worker1");
+    const BPOObject = new BPO();
+    let isElement = await BPOObject.getRandomElement();
+
+    if (isElement){
+        INDEXED_DB_STORAGE = new IndexedDBStorage("ImageDB", "images");
+
+        let urls = JSON.parse(sessionStorage.getItem("dir_files"));
+        
+    //     let urls = ["https://svicomph-my.sharepoint.com/:i:/g/personal/llizardo_svi_com_ph/EXfLFZAjzPdJvAfoRTgPKa0BuGSNkTGAtgQ22GCuaNPwag?e=raEKQM",
+    //     "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK",
+    //     "https://images.unsplash.com/photo-1631193079266-4af74b218c86?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4NjY2MjUwNA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
+    //     "https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200",
+    //     "https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200"
+    // ];
+
+
+
+        let maxImagesToStore =urls.length<=3 ? urls.length : 3;
+        for (let index = 0; index < maxImagesToStore; index++) {
+            const url = urls[index];
+            await INDEXED_DB_STORAGE.storeImageFile(url, 'imageNum_' + index);
+        }
+        await createWebGdeInterface(null);
 
-displayFieldClass.updateHeaderText(0, "asdf");
-displayFieldClass.updateHeaderText(1, "asdf");
-displayFieldClass.updateHeaderText(2, "asdf");
 
-function modalTest(){
-    console.log("test success");
+        if(maxImagesToStore>1){
+            const url = urls[0];
+            let filename = url.split('/').pop(); 
+            let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_1");
+            await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
+            
+            const nextUrl = urls[1];
+            let nextFilename = nextUrl.split('/').pop(); 
+            let nextImageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_1");
+            await IMAGE_VIEWER_OBJECT.createNextImage(nextFilename.split(".").pop(), nextFilename, nextImageBlob);
+        }else{
+            const url = urls[0];
+            let filename = url.split('/').pop(); 
+            let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
+            await IMAGE_VIEWER_OBJECT.addImage("currentImage", filename.split(".").pop(), filename, imageBlob);
+        }
+
+        HIGHLIGHT_OBJECT =  new Highlight("imageContainer", "currentImage", HIGH_LIGHT_SCHEMA)
+        HIGHLIGHT_OBJECT.createHighlight();
+        hightlightEventListeners();
+
+        let controls = new DocumentControlWidget();
+        document.getElementById("input-field-container").appendChild(controls.getWidget());
+
+    
+    }
 }
 
-createModal(modalTest, "test");
 
-async function createImageViewer(){
-    let indexedDB = new IndexedDBStorage("ImageDB", "images");
 
-    let urls = ["https://svicomph-my.sharepoint.com/:i:/g/personal/llizardo_svi_com_ph/EXfLFZAjzPdJvAfoRTgPKa0BuGSNkTGAtgQ22GCuaNPwag?e=raEKQM",
-                "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK", 
-                "https://images.unsplash.com/photo-1631193079266-4af74b218c86?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4NjY2MjUwNA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080", 
-                "https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200",
-                "https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200"
-            ];
+async function createWebGdeInterface(GDEContainer) {
+    let gdeContainer = document.createElement("div");
+    gdeContainer.setAttribute("class", "container web-gde-container");
+
+    let imageViewerContainer = document.createElement("div");
+    imageViewerContainer.setAttribute("id", "imageViewerContainer");
 
-    for (let index = 0; index < urls.length; index++) {
-        const url = urls[index];
-        indexedDB.storeImageFile(url, 'imageNum'+index);
+    let dataInputContainer = document.createElement("div");
+    dataInputContainer.setAttribute("id", "input-field-container");
+   // dataInputContainer.setAttribute("class", "sidebar");
+    
+   
+    gdeContainer.appendChild(imageViewerContainer);
+   
+
+    gdeContainer.appendChild(dataInputContainer);
+
+    if (GDEContainer) {
+        document.getElementById("GDEContainer").appendChild(gdeContainer);
+    } else {
+        document.body.appendChild(gdeContainer);
     }
+    await createImageViewer();
+    await createInputForm();
+
     
-    let imageBlob = await indexedDB.getStoreFile("imageNum2");
-    let imageViewer = new ImageViewer("imageViewerContainer");
-    const image = await imageViewer.addImage("currentImage", "jpeg", "sampleIImage.jpeg", imageBlob);
+}
+
+async function createInputForm(){
+    const schema = await fetchSchema();
+    const containerId = 'input-field-container';
+    // Instantiate widget and assign it to a container
+    const displayFieldClass = new displayField(schema, containerId);
+    // Call Function to generate fields with given schema to provided container
+    displayFieldClass.generateFields();
+    // displayFieldClass.editHeader(element-id)
+    displayFieldClass.updateHeaderText(0, "asdf");
+    displayFieldClass.updateHeaderText(1, "asdf");
+    displayFieldClass.updateHeaderText(2, "asdf");
+}
+
+
+
+async function createImageViewer() {
+    IMAGE_VIEWER_OBJECT = new ImageViewer("imageViewerContainer");
+    await IMAGE_VIEWER_OBJECT.init();
 };
 
-createImageViewer();
\ No newline at end of file
+
+

WebGde/WebContent/WebGde-Widgets/style.css

@@ -30,9 +30,8 @@ h3{
 } */
 
 #imageViewerContainer{
-    position: absolute;
     width: 70%;
-    height: 100%;
+    height: 99%;
 }
 
 .sidebar {
@@ -49,6 +48,8 @@ h3{
 #input-field-container{
     /* height : 600px;
     width : 400px; */
+    height : 100%;
+    width : 30%;
     display: flex;
     flex-direction: column;
     overflow: auto;
@@ -192,4 +193,26 @@ textarea{
     resize: none;
 }
 
-#text-area{width: 91%;font-size: 11px;padding: 9px 9px;margin-left: 15px;margin-top: 5px;margin-bottom: 5px;height: 103px;}
\ No newline at end of file
+#text-area{width: 91%;font-size: 11px;padding: 9px 9px;margin-left: 15px;margin-top: 5px;margin-bottom: 5px;height: 103px;}
+
+
+.ctrl-buttons {
+    background-color: transparent !important;
+    display: flex  !important;
+    justify-content: space-evenly !important;
+}
+
+
+.ctrl-buttons .buttonRightClass {
+    margin: 1vh;
+    padding: 1vh;
+}
+
+.web-gde-container{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+}