Skip to content

W
web-ui
Commit e0d46aff by rndeguzman
Options

path adjustments

parent e4cb0763
Showing with 225 additions and 119 deletions
.vscode/settings.json 0 → 100644
{
"liveServer.settings.port": 5501
}
\ 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
export const FOLDER_PATH = "/WebGDE-Widgets/ImageViewerWidget/modules/imageViewer";
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/captureMetrics/captureMetrics.js
......@@ -193,7 +193,7 @@ const escapeCSV = (filename) => {
return filename.includes(",") ? '"' + filename + '"' : filename;
}
const pauseMetricCapture = () => {
export const pauseMetricCapture = () => {
time_pause = Date.now();
hideImage();
disableForm();
......
WebGde/WebContent/WebGde-Widgets/config.js
......@@ -34,12 +34,13 @@ export const OUTPUT_FILES = "../../output/"
export const METRIC_FILES = "../../metrics/"
export const HIGH_LIGHT_SCHEMA = "./sample_schema/dbSchema_anno.xlsx"
export const HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.xlsx"
export const ROOT_FOLDER = "/WebGde-Widgets";
//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 GFS_URL = "http://44.212.25.202: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"
......@@ -50,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://34.238.117.43:8080/bpo/"
export const BPO_URL = "http://44.212.25.202: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
import {pauseMetricCapture} from '../captureMetrics/captureMetrics.js';
import { ROOT_FOLDER } from '../config.js';
export class DocumentControlWidget {
......@@ -27,7 +28,7 @@ export class DocumentControlWidget {
const refreshIcon = document.createElement("img");
refreshIcon.classList.add("tiffViewerIcons");
refreshIcon.src = "./documentControlWidget/assets/refresh_icon.png";
refreshIcon.src = "."+ROOT_FOLDER+"/documentControlWidget/assets/refresh_icon.png";
refreshIcon.alt = "Refresh";
refreshIcon.height = "32";
refreshIcon.width = "32";
......@@ -38,7 +39,7 @@ export class DocumentControlWidget {
const pauseIcon = document.createElement("img");
pauseIcon.classList.add("tiffViewerIcons");
pauseIcon.src = "./documentControlWidget/assets/pause_icon.png";
pauseIcon.src = "."+ROOT_FOLDER+"/documentControlWidget/assets/pause_icon.png";
pauseIcon.alt = "Pause";
pauseIcon.height = "32";
pauseIcon.width = "32";
......@@ -49,7 +50,7 @@ export class DocumentControlWidget {
const returnIcon = document.createElement("img");
returnIcon.classList.add("tiffViewerIcons");
returnIcon.src = "./documentControlWidget/assets/return_icon.png";
returnIcon.src = "."+ROOT_FOLDER+"/documentControlWidget/assets/return_icon.png";
returnIcon.alt = "Return";
returnIcon.height = "32";
returnIcon.width = "32";
......@@ -60,7 +61,7 @@ export class DocumentControlWidget {
const rejectIcon = document.createElement("img");
rejectIcon.classList.add("tiffViewerIcons");
rejectIcon.src = "./documentControlWidget/assets/reject_icon.png";
rejectIcon.src = "."+ROOT_FOLDER+"/documentControlWidget/assets/reject_icon.png";
rejectIcon.alt = "Reject";
rejectIcon.height = "32";
rejectIcon.width = "32";
......@@ -281,54 +282,55 @@ export class DocumentControlWidget {
}
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");
}
}
// 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");
// }
// }
......
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
export let HIGHLIGHT_OBJECT = null;
export let IMAGE_VIEWER_OBJECT = null;
export var INDEXED_DB_STORAGE = null;
export let INDEXED_DB_NAME = "ImageDB";
export let INDEXED_DB_TBL_NAME = "images";
export function setIndexedDBStorage(DBOject){
INDEXED_DB_STORAGE = DBOject;
}
export function setImageViewerObject(IVObject){
IMAGE_VIEWER_OBJECT = IVObject;
}
export function setHighlightObject(HObject){
HIGHLIGHT_OBJECT = HObject;
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/script.js
import { fetchSchema } from "./DataInputWidget/fetchSchema.js";
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";
import { fetchSchema } from "./WebGde-Widgets/DataInputWidget/fetchSchema.js";
import { displayField } from "./WebGde-Widgets/DataInputWidget/displayFieldClass.js";
import { ImageViewer } from "./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js";
import { IndexedDBStorage } from "./WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js";
import { createModal } from "./WebGde-Widgets/genericPopup/genericPopup.js";
import { hightlightEventListeners } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightUtil.js";
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 } from "./WebGde-Widgets/globalVariable.js";
......
WebGde/WebContent/index.html
......@@ -14,9 +14,10 @@
<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
</head>
<body>
<div id="imageViewerContainer"></div>
<aside id="input-field-container" class="sidebar"></aside>
</body>
</html>
\ No newline at end of file
WebGde/WebContent/script.js
......@@ -3,64 +3,125 @@ import { displayField } from "./WebGde-Widgets/DataInputWidget/displayFieldClass
import { ImageViewer } from "./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js";
import { IndexedDBStorage } from "./WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js";
import { createModal } from "./WebGde-Widgets/genericPopup/genericPopup.js";
import { startMetricCapture, searchStringInArray, keyArray } from "./WebGde-Widgets/captureMetrics/captureMetrics.js";
import { hightlightEventListeners } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightUtil.js";
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";
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();
displayFieldClass.updateHeaderText(0, "asdf");
displayFieldClass.updateHeaderText(1, "asdf");
displayFieldClass.updateHeaderText(2, "asdf");
});
function modalTest(){
console.log("test success");
}
async function initializeWebGDE(){
sessionStorage.setItem("user_id", "worker1");
const BPOObject = new BPO();
let isElement = await BPOObject.getRandomElement();
if (isElement){
setIndexedDBStorage(new IndexedDBStorage(INDEXED_DB_NAME, INDEXED_DB_TBL_NAME));
createModal(modalTest, "test");
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
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"
// ];
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"
];
for (let index = 0; index < urls.length; index++) {
let maxImagesToStore =urls.length<=3 ? urls.length : 3;
for (let index = 0; index < maxImagesToStore; index++) {
const url = urls[index];
indexedDB.storeImageFile(url, 'imageNum'+index);
await INDEXED_DB_STORAGE.storeImageFile(url, 'imageNum_' + index);
}
await createWebGdeInterface(null);
let imageBlob = await indexedDB.getStoreFile("imageNum2");
let imageViewer = new ImageViewer("imageViewerContainer");
const image = await imageViewer.addImage("currentImage", "jpeg", "sampleIImage.jpeg", imageBlob);
};
createImageViewer();
const init = async () => {
let started_flag = false;
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);
window.onkeydown = (key) => {
if (!started_flag) {
if (searchStringInArray(`${key.key}`, keyArray) == true || key.ctrlKey && key.key) {
console.log('Invalid key cannot Start');
} else {
started_flag = true;
startMetricCapture();
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);
}
setHighlightObject(new Highlight("imageContainer", "currentImage", HIGH_LIGHT_SCHEMA));
HIGHLIGHT_OBJECT.createHighlight();
hightlightEventListeners();
let controls = new DocumentControlWidget();
document.getElementById("input-field-container").appendChild(controls.getWidget());
}
}
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");
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();
}
init();
\ No newline at end of file
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() {
setImageViewerObject(new ImageViewer("imageViewerContainer"));
await IMAGE_VIEWER_OBJECT.init();
};
WebGde/WebContent/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;
......@@ -193,3 +194,25 @@ textarea{
}
#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