Skip to content

W
web-ui
Commit 623b5ef0 by rndeguzman
Options

bind return element function

parent e0d46aff
Showing with 245 additions and 263 deletions
WebGde/WebContent/WebGde-Widgets/BPO/getElement.js
import { ENCODING_PASS } from "../config.js";
import { createModal } from "../genericPopup/genericPopup.js";
import { getUrlGetReturnedElement, getUrlGetWaitingElement, getUrlGetWorkload, getUrlReturnElement } from "./bpoService.js";
import { urlGetIfExisting } from "./gfsService.js";
......@@ -41,6 +42,12 @@ export class BPO {
}
}
let hasElement = await this.getRandomWaitingElement();
return hasElement;
}
async getRandomWaitingElement(){
while (true) {
const element = await this.getWaitingElement();
......@@ -55,28 +62,25 @@ export class BPO {
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");
logoutKeycloak();
}
createModal(modalTest, "No Element Available");
/* sessionStorage.clear();
localStorage.clear();
logoutKeycloak();*/
break;
return false;
} else {
PROMPT.createInfoPrompt(`Error ${element.errorCode}: Fetching waiting element`);
function modalTest() {
logoutKeycloak();
alert("logged-out");
}
createModal(modalTest, 'Error'+element.errorCode+': Fetching waiting element.');
return false;
}
}
return false;
}
async getWorkload() {
......
WebGde/WebContent/WebGde-Widgets/BPO/rejectElement.js
import { REASON_LIST } from "../config";
async function rejectElement() {
let prompt = new Prompt();
let load = {
......@@ -61,31 +63,30 @@ async function rejectElement() {
}
//window for reason rejecting element
var rejectButton = document.getElementById("reject");
// 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();
};
// 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){
// window.addEventListener('keydown', function(e) {
// if (e.ctrlKey == true && e.keyCode == 69){
createRejectWindow();
rejectButton.disabled = true;
}
});
// createRejectWindow();
// rejectButton.disabled = true;
// }
// });
function createRejectWindow(){
export function createRejectWindow(){
let popUpDisplay = document.createElement("div");
popUpDisplay.classList.add("genericPopup")
......
WebGde/WebContent/WebGde-Widgets/BPO/returnElement.js
async function returnElementBPO(elementId) {
import { resetGDE } from "../../script.js";
import { createModal } from "../genericPopup/genericPopup.js";
import { BPO_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from "../globalVariable.js";
import { getUrlReturnElement } from "./bpoService.js";
export 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);
if(INDEXED_DB_STORAGE){
INDEXED_DB_STORAGE.clear();
}
if(IMAGE_VIEWER_OBJECT){
IMAGE_VIEWER_OBJECT.clearImageContainer();
}
});
[...document.getElementsByClassName("bar")].forEach(el => {
el.style.removeProperty('display');
});
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
// [...document.getElementsByClassName("bar")].forEach(el => {
// el.style.removeProperty('display');
// });
//document.getElementById("counter").innerHTML = "";
//clearTimeout(interval);
sessionStorage.removeItem("section");
sessionStorage.removeItem("doctype");
isCanvasNotCreated = true;
//isCanvasNotCreated = true;
localStorage.clear();
function successfulReturn() {
document.getElementById("backdropContainer").remove();
}
createModal(successfulReturn, "Element Returned");
if(await BPO_OBJECT.getRandomWaitingElement()){
resetGDE();
};
//localStorage.sfIndex = 1;
await loadWaitingElement();
init();
PROMPT.createInfoPrompt("Element Returned");
// await loadWaitingElement();
// init();
}else{
PROMPT.createInfoPrompt(`Error ${response.status}: Returning element`);
logoutKeycloak();
//PROMPT.createInfoPrompt(`Error ${response.status}: Returning element`);
function successfulReturn() {
logoutKeycloak();
}
createModal(successfulReturn, "Error ${response.status}: Returning element");
}
return response.status;
......@@ -67,11 +62,11 @@ async function returnElementLogout(elementId) {
return response.status;
}
var returnButton = document.getElementById('return');
// var returnButton = document.getElementById('return');
returnButton.addEventListener("click", function () {
createReturnWindow();
});
// returnButton.addEventListener("click", function () {
// createReturnWindow();
// });
......@@ -164,7 +159,7 @@ function returnSaveXML(){
return false;
}
function createReturnWindow() {
export function createReturnWindow() {
let overlay = document.createElement("div");
overlay.classList.add("genericPopup");
......
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightClass.js
......@@ -17,6 +17,20 @@ export class Highlight {
this.fetchHighLightSchema(schemaURL);
}
removeHighLight(){
let canvas = document.getElementById("highlightCanvas");
if(canvas){
canvas.remove();
}
}
resetHighLight(imgContainerID, imageID){
this.removeHighLight();
this.imgContainer = document.getElementById(imgContainerID);
this.imageID = imageID;
this.createHighlight();
}
//creates the canvas for highlight rectangles
createHighlight() {
this.highlightCanvas = document.createElement('canvas');
......
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js
......@@ -140,6 +140,10 @@ export class ImageViewer {
this.highlightObject = highlightObj;
}
clearImageContainer(){
document.getElementById("imageContainer").innerHTML = "";
}
......
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/pdfDocument.js
import { FOLDER_PATH } from "../../config.js";
export class PDFDocument {
pdfDoc = null;
pageNum = 1;
......@@ -28,7 +29,7 @@ export class PDFDocument {
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = './ImageViewerWidget/modules/imageViewer/assets/pdf.worker.js';
pdfjsLib.GlobalWorkerOptions.workerSrc = '.'+ FOLDER_PATH +'/assets/pdf.worker.js';
pdfCanvas.setAttribute("id", this.pdfContainerID);
/**
......
WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js
import { createRejectWindow } from '../BPO/rejectElement.js';
import { createReturnWindow, returnElementBPO } from '../BPO/returnElement.js';
import {pauseMetricCapture} from '../captureMetrics/captureMetrics.js';
import { ROOT_FOLDER } from '../config.js';
import { REASON_LIST, ROOT_FOLDER } from '../config.js';
export class DocumentControlWidget {
......@@ -115,23 +117,25 @@ export class DocumentControlWidget {
this.global.returnBtn.onclick = (e) => {
returnElementBPO(sessionStorage.getItem("element_id"));
var fileName = sessionStorage.getItem("file_Name");
if (fileName !== null && fileName !== undefined) {
document.getElementById("controlsContainer").outerHTML="";
} else {
document.getElementById("TiffViewer_ButtonContainer").outerHTML="";
}
// var fileName = sessionStorage.getItem("file_Name");
// if (fileName !== null && fileName !== undefined) {
// document.getElementById("controlsContainer").outerHTML="";
// } else {
// document.getElementById("TiffViewer_ButtonContainer").outerHTML="";
// }
//createReturnWindow();
}
this.global.returnBtn.onkeydown = (e) => {
if (e.altKey == true && e.keyCode == 85) {
returnElementBPO(sessionStorage.getItem("element_id"));
var fileName = sessionStorage.getItem("file_Name");
if (fileName !== null && fileName !== undefined) {
document.getElementById("controlsContainer").outerHTML="";
} else {
document.getElementById("TiffViewer_ButtonContainer").outerHTML="";
}
// var fileName = sessionStorage.getItem("file_Name");
// if (fileName !== null && fileName !== undefined) {
// document.getElementById("controlsContainer").outerHTML="";
// } else {
// document.getElementById("TiffViewer_ButtonContainer").outerHTML="";
// }
}
}
......@@ -335,132 +339,3 @@ export class DocumentControlWidget {
}
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
export function createModal(okButtonAction, popupTitleText) {
var okButton = document.createElement("button");
okButton.id = "okButton";
okButton.textContent = "OK";
okButton.style.width = "80px";
okButton.style.height = "30px";
okButton.style.marginRight = "10px";
var cancelButton = document.createElement("button");
cancelButton.id = "cancelButton";
cancelButton.textContent = "Cancel";
cancelButton.style.width = "80px";
cancelButton.style.height = "30px";
var backdropContainer = document.createElement("div");
var okButton = document.createElement("button");
okButton.id = "okButton";
okButton.textContent = "OK";
okButton.style.width = "80px";
okButton.style.height = "30px";
okButton.style.marginRight = "10px";
var cancelButton = document.createElement("button");
cancelButton.id = "cancelButton";
cancelButton.textContent = "Cancel";
cancelButton.style.width = "80px";
cancelButton.style.height = "30px";
var backdropContainer = document.getElementById("backdropContainer");
if (backdropContainer) {
backdropContainer.remove();
}
backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainer";
backdropContainer.style.backgroundColor = "#000000a1";
backdropContainer.style.display = "-webkit-inline-box";
......@@ -23,6 +27,8 @@ export function createModal(okButtonAction, popupTitleText) {
backdropContainer.style.zIndex = "50";
backdropContainer.style.backdropFilter = "blur(4px)";
var popupContainer = document.createElement("div");
popupContainer.id = "popupContainer";
popupContainer.style.display = "none";
......@@ -35,30 +41,31 @@ export function createModal(okButtonAction, popupTitleText) {
popupContainer.style.padding = "20px";
popupContainer.style.textAlign = "center";
popupContainer.style.zIndex = "999";
var popupContent = document.createElement("div");
popupContent.id = "popupContent";
var popupTitle = document.createElement("h2");
popupTitle.textContent = popupTitleText;
popupContent.appendChild(popupTitle);
popupContent.appendChild(okButton);
popupContent.appendChild(cancelButton);
popupContainer.appendChild(popupContent);
backdropContainer.appendChild(popupContainer);
document.body.appendChild(backdropContainer);
document.getElementById("popupContainer").style.display = "block";
document.getElementById("okButton").addEventListener("click", function() {
document.getElementById("backdropContainer").style.display = "none";
if (typeof okButtonAction === "function") {
okButtonAction();
}
});
document.getElementById("cancelButton").addEventListener("click", function() {
document.getElementById("backdropContainer").remove();
});
var popupContent = document.createElement("div");
popupContent.id = "popupContent";
var popupTitle = document.createElement("h2");
popupTitle.textContent = popupTitleText;
popupContent.appendChild(popupTitle);
popupContent.appendChild(okButton);
popupContent.appendChild(cancelButton);
popupContainer.appendChild(popupContent);
backdropContainer.appendChild(popupContainer);
document.body.appendChild(backdropContainer);
document.getElementById("popupContainer").style.display = "block";
document.getElementById("okButton").addEventListener("click", function () {
document.getElementById("backdropContainer").style.display = "none";
if (typeof okButtonAction === "function") {
okButtonAction();
}
});
document.getElementById("cancelButton").addEventListener("click", function () {
document.getElementById("backdropContainer").remove();
});
}
function handleOK() {
console.log("OK button pressed!");
console.log("OK button pressed!");
}
/*createModal(handleOK, "Hello World!!!");*/
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/globalVariable.js
export let HIGHLIGHT_OBJECT = null;
export let IMAGE_VIEWER_OBJECT = null;
export var INDEXED_DB_STORAGE = null;
export let INDEXED_DB_STORAGE = null;
export let BPO_OBJECT = null;
export let INDEXED_DB_NAME = "ImageDB";
export let INDEXED_DB_TBL_NAME = "images";
......@@ -16,4 +17,8 @@ export function setImageViewerObject(IVObject){
export function setHighlightObject(HObject){
HIGHLIGHT_OBJECT = HObject;
}
export function setBPOObject(BPO){
BPO_OBJECT = BPO;
}
\ No newline at end of file
WebGde/WebContent/script.js
......@@ -8,7 +8,7 @@ import { HIGH_LIGHT_SCHEMA } from "./WebGde-Widgets/config.js";
import { Highlight } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightClass.js";
import { BPO } from "./WebGde-Widgets/BPO/getElement.js";
import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/documentControlWidget.js";
import { INDEXED_DB_STORAGE , HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_NAME, INDEXED_DB_TBL_NAME, setIndexedDBStorage, setHighlightObject, setImageViewerObject } from "./WebGde-Widgets/globalVariable.js";
import { INDEXED_DB_STORAGE , HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_NAME, INDEXED_DB_TBL_NAME, setIndexedDBStorage, setHighlightObject, setImageViewerObject, setBPOObject, BPO_OBJECT } from "./WebGde-Widgets/globalVariable.js";
......@@ -20,8 +20,8 @@ document.addEventListener("DOMContentLoaded", async ()=>{
async function initializeWebGDE(){
sessionStorage.setItem("user_id", "worker1");
const BPOObject = new BPO();
let isElement = await BPOObject.getRandomElement();
setBPOObject(new BPO());
let isElement = await BPO_OBJECT.getRandomElement();
if (isElement){
setIndexedDBStorage(new IndexedDBStorage(INDEXED_DB_NAME, INDEXED_DB_TBL_NAME));
......@@ -48,7 +48,7 @@ async function initializeWebGDE(){
if(maxImagesToStore>1){
const url = urls[0];
let filename = url.split('/').pop();
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_1");
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
const nextUrl = urls[1];
......@@ -69,7 +69,11 @@ async function initializeWebGDE(){
let controls = new DocumentControlWidget();
document.getElementById("input-field-container").appendChild(controls.getWidget());
}else{
function exitTool() {
logoutKeycloak();
}
createModal(exitTool, "No Element Available");
}
}
......@@ -123,5 +127,42 @@ async function createImageViewer() {
await IMAGE_VIEWER_OBJECT.init();
};
export async function resetGDE(){
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
if(urls){
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);
}
if(maxImagesToStore>1){
const url = urls[0];
let filename = url.split('/').pop();
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
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);
HIGHLIGHT_OBJECT.resetHighLight("imageContainer", "currentImage");
}else if(maxImagesToStore === 1){
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.resetHighLight("imageContainer", "currentImage");
}
}else{
function modalTest() {
console.log("test success");
}
createModal(modalTest, "No Element Available");
}
}
WebGde/WebContent/style.css
......@@ -24,6 +24,15 @@ h3{
margin-bottom: 20px;
}
.web-gde-container{
width: 100%;
height: 90vh;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
/* #imageViewerContainer{
width: 70vh;
height: 80vh;
......@@ -216,3 +225,30 @@ textarea{
align-items: flex-start;
justify-content: flex-start;
}
.parent_Window {
box-shadow: var(- -ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31));
width: 238px;
height: fit-content;
margin: auto;
position: relative;
background: white;
padding: 17px;
border-radius: 1%;
max-height: 90%;
padding-right: 22px;
text-align: center;
}
.genericPopup {
background-color: #000000a1;
display: -webkit-inline-box;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 1;
backdrop-filter: blur(4px);
}
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