Skip to content

W
web-ui
Commit 80f09d24 by Lynette Lizardo
Options

ui adjustments

parent c50eb5ee
Showing with 86 additions and 253 deletions
WebGde/WebContent/WebGde-Widgets/BPO/returnElement.js
import { resetGDE } from "../../script.js";
import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script.js";
import { validateInput } from "../DataInputWidget/validateInput.js";
import { PROJECT_CODE } from "../Submit/config.js";
import { interval } from "../captureMetrics/captureMetrics.js";
import { SCHEMA_FILE } from "../config.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) {
createLoadingScreen();
let response = await fetch(getUrlReturnElement(elementId), {method: "POST"});
if (response.status == 200) {
......@@ -28,7 +32,7 @@ export async function returnElementBPO(elementId) {
function successfulReturn() {
logoutKeycloak();
}
removeLoadingScreen();
createModal(successfulReturn, "Error ${response.status}: Returning element");
}
......@@ -49,50 +53,7 @@ async function returnElementLogout(elementId) {
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");
......@@ -117,23 +78,25 @@ function returnSaveXML(){
continue;
}
}
let filePaths = JSON.parse(sessionStorage.getItem("dir_files"));
let xmlData = {
"projCode": PROJECT_CODE,
"userId": sessionStorage.getItem("user_id"),
"elementId": elementId,
"schema": SCHEMA_FILE,
"totalRec": Dirfiles.length,
"totalRec": filePaths.length,
"maxRec": "1",
"totalKeystroke": 0,
"procTime": "",
"procDuration": 0,
"eob": "",
"exceptionRemark": "",
"recordNo": "1",
"recordNo": parseInt(sessionStorage.getItem("display_counter")) + 1,
"totalSubRec": "1",
"maxSubRec": "1",
"imageName": File_Path,
"imageName": filePaths[parseInt(sessionStorage.getItem("display_counter"))],
"subRecordNo": "1",
"eor": "",
"fields": {},
......@@ -171,16 +134,6 @@ export function createReturnWindow() {
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();
}
......
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageDocument.js
......@@ -36,6 +36,14 @@ export class ImageDocument {
imageElement.src = this.imageFile;
imageContainer.appendChild(imageElement);
// let canvas = document.getElementById('canvas');
// let ctx = imageContainer.getContext('2d');
// imageContainer.width = imageElement.width;
// imageContainer.height = imageElement.height;
// ctx.drawImage(imageElement, 200, 200);
return imageContainer;
case 415: // unsupported file
return this.createUnsupportedFileDisplay(this.imageID, this.imageType);
......@@ -54,7 +62,7 @@ export class ImageDocument {
let imageElement = document.createElement("img");
imageElement.setAttribute("class", "image unsupported-file");
imageElement.src = "."+ FOLDER_PATH +"/resources/unsupported_file.png";
imageElement.src = "."+ FOLDER_PATH +"/resources/question_mark.png";
let p = document.createElement("p");
p.textContent = format.toUpperCase()+" file is not supported.";
......@@ -74,7 +82,7 @@ export class ImageDocument {
let imageElement = document.createElement("img");
imageElement.setAttribute("class", "image error-image");
imageElement.src = "."+ FOLDER_PATH + "/resources/error.png";
imageElement.src = "."+ FOLDER_PATH + "/resources/error_icon.png";
let p = document.createElement("p");
p.textContent = "Ooops! Sorry unable to display image."
......
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css
......@@ -53,7 +53,7 @@ body {
}
.unsupported-file p{
font-size: 16px;
font-size: 14px;
color: white;
margin: auto;
word-wrap: break-word;
......@@ -69,7 +69,7 @@ body {
}
.error-image p{
font-size: 16px;
font-size: 14px;
color: white;
margin: auto;
word-wrap: break-word;
......@@ -110,12 +110,19 @@ body {
border-radius: 5px;
}
.fit-content{
width: inherit;
height: auto;
div.fit-content{
width: auto;
height: inherit;
object-fit: cover;
margin: auto;
}
canvas.fit-content{
max-height: 100%;
max-width: 100%;
object-fit: cover;
margin: auto;
}
#fitContentBtn{
background: no-repeat center/90% url("./resources/fullscreen_icon.png");
......
WebGde/WebContent/WebGde-Widgets/Submit/XMLWriter/XML_Saver.js
......@@ -3,6 +3,7 @@ import { SCHEMA_FILE_PATH } from "../../DataInputWidget/config.js";
import { schema } from "../../DataInputWidget/generateFields.js";
import { IS_RETRIEVE_FROM_BPO } from "../../config.js";
import { PROJECT_CODE, ENCODING_PASS } from "../config.js";
import { completeToNextNode } from "../submit.js";
export async function WriteForm(e,metrics,doctype,section) {
try {
......@@ -69,17 +70,17 @@ async function createOutputXml(fields, metrics, doctype, section) {
body: JSON.stringify(xmlData)
});
// if (completenessCheck(await response.text())) {
// let response = await fetch(urlUpdateEob, {
// method: "POST",
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(xmlData)
// });
// await completeToNextNode(elementId);
// sessionStorage.setItem("isElementComplete", true);
// }
if (completenessCheck(await response.text())) {
let response = await fetch(urlUpdateEob, {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(xmlData)
});
await completeToNextNode(elementId);
sessionStorage.setItem("isElementComplete", true);
}
}
function completenessCheck(xml) {
......
WebGde/WebContent/WebGde-Widgets/config.js
......@@ -38,9 +38,9 @@ export const HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.
export const ROOT_FOLDER = "/WebGde-Widgets";
//this determines if the images will be retrieved from the gfs
export const DOMAIN = "http://44.211.171.103:8080"
export const DOMAIN = "http://34.205.19.111:8080"
export const CONTEXTROOT = "gfs-explorer-ws"
export const GFS_URL = "http://44.211.171.103:8080" + "/WebGde/svc/gfs-rest"
export const GFS_URL = "http://34.205.19.111: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"
......@@ -51,7 +51,7 @@ export const INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen
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://44.211.171.103:8080/bpo/"
export const BPO_URL = "http://34.205.19.111:8080/bpo/"
export const CURRENT_NODE = "Web_GDE_DEV"
export const ENCODING_PASS = "PASS1"
export const NEXT_NODE = "Complete"
......
WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js
......@@ -126,25 +126,25 @@ export class DocumentControlWidget {
let currentDisplay = parseInt(sessionStorage.getItem("display_counter"));
let totalRecord = JSON.parse(sessionStorage.getItem("dir_files")).length;
if (currentDisplay + 1 === totalRecord) {
//if(sessionStorage.getItem("isElementComplete")){
//if (currentDisplay + 1 === totalRecord) {
if(sessionStorage.getItem("isElementComplete")){
//move element then fetch new element
let response = await completeToNextNode(sessionStorage.getItem("element_id"));
//let response = await completeToNextNode(sessionStorage.getItem("element_id"));
createLoadingScreen();
const metrics = stopMetricCapture();
let eoe_ts = new Date().toLocaleString();
await saveMetrics(metrics, eoe_ts);
if (response.status == 200) {
// if (response.status == 200) {
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
} else {
removeLoadingScreen();
alert(`Error ${response.status}: Completing element to next node, Check if Complete Node Exist`);
}
// } else {
// removeLoadingScreen();
// alert(`Error ${response.status}: Completing element to next node, Check if Complete Node Exist`);
// }
} else {
// document.getElementById("nextRecordImage").click();
......
WebGde/WebContent/script.js
......@@ -104,8 +104,12 @@ async function checkBPODetails() {
}
removeLoadingScreen();
createModal(exitTool, "Please log-out and try again.");
sessionStorage.clear();
}
}else{
await BPO_OBJECT.returnElement(elementId);
window.location.reload();
}
......@@ -479,7 +483,7 @@ export function createLoadingScreen() {
}
let loader1 = document.createElement("div");
loader1.setAttribute("class", "loading");
loader1.setAttribute("class", "loader");
loader1.setAttribute("id", "loader");
loaderContainer.appendChild(loader1);
......
WebGde/WebContent/style.css
......@@ -314,184 +314,44 @@ textarea{
margin-top: 15%;
}
.loading {
position: fixed;
/* z-index: 999; */
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: 'LOADING...';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8)); */
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
.loader {
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 150ms infinite linear;
-moz-animation: spinner 150ms infinite linear;
-ms-animation: spinner 150ms infinite linear;
-o-animation: spinner 150ms infinite linear;
animation: spinner 150ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
@keyframes mulShdSpin {
0%,
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}
/* .loader{
border:3px solid #fff;
width:200px;
height:200px;
border-radius:50%;
border-left-color: transparent;
border-right-color: transparent;
animation:rotate 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
margin: 5px;
}
#loader2{
border:3px solid #000;
width:220px;
height:220px;
position:relative;
top:-216px;
border-left-color: transparent;
border-right-color: transparent;
animation:rotate2 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
#loader3{
border:3px solid #fff;
width:240px;
height:240px;
position:relative;
top:-452px;
border-left-color: transparent;
border-right-color: transparent;
animation:rotate 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
#loader4{
border:3px solid #000;
width:260px;
height:260px;
position:relative;
top:-708px;
border-left-color: transparent;
border-right-color: transparent;
animation:rotate2 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
@keyframes rotate{
0%{transform:rotateZ(-360deg)}
100%{transform:rotateZ(0deg)}
}
@keyframes rotate2{
0%{transform:rotateZ(360deg)}
100%{transform:rotateZ(0deg)}
} */
#loaderTxt{ color:#000000a1;
font-family:Arial;
font-size:20px;
position:relative;
top:-857px;
}
#counter {
height: 11px;
/* font-size: 22px;
......
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