Skip to content

W
web-ui
Commit e4cb0763 by rndeguzman
Options

binding BPO functions

parent 49b4ac9d
Showing with 1131 additions and 110 deletions
WebGde/WebContent/WebGde-Widgets/BPO/bpoService.js 0 → 100644
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/gfsService.js 0 → 100644
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/returnElement.js 0 → 100644
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 0 → 100644
<?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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
<?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 0 → 100644
export const FOLDER_PATH = "/ImageViewerWidget/modules/imageViewer";
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightUtil.js 0 → 100644
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/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 0 → 100644
/**
* 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/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 0 → 100644
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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment