Commit e0d46aff by rndeguzman

path adjustments

parent e4cb0763
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
export const FOLDER_PATH = "/ImageViewerWidget/modules/imageViewer"; export const FOLDER_PATH = "/WebGDE-Widgets/ImageViewerWidget/modules/imageViewer";
\ No newline at end of file \ No newline at end of file
...@@ -193,7 +193,7 @@ const escapeCSV = (filename) => { ...@@ -193,7 +193,7 @@ const escapeCSV = (filename) => {
return filename.includes(",") ? '"' + filename + '"' : filename; return filename.includes(",") ? '"' + filename + '"' : filename;
} }
const pauseMetricCapture = () => { export const pauseMetricCapture = () => {
time_pause = Date.now(); time_pause = Date.now();
hideImage(); hideImage();
disableForm(); disableForm();
......
...@@ -34,12 +34,13 @@ export const OUTPUT_FILES = "../../output/" ...@@ -34,12 +34,13 @@ export const OUTPUT_FILES = "../../output/"
export const METRIC_FILES = "../../metrics/" 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 //this determines if the images will be retrieved from the gfs
export const DOMAIN = "http://35.169.23.0:8080" export const DOMAIN = "http://35.169.23.0:8080"
export const CONTEXTROOT = "gfs-explorer-ws" 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 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 DOWNLOAD_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-download-link"
export const IS_RETRIEVE_FROM_GFS = "N" 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 ...@@ -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 IS_RETRIEVE_FROM_BPO = "Y"
// export const BPO_URL = "http://35.171.20.94:8080/bpo-sqa/" // export const BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
// export const CURRENT_NODE = "Web GDE" // 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 CURRENT_NODE = "Web_GDE_DEV"
export const ENCODING_PASS = "PASS1" export const ENCODING_PASS = "PASS1"
export const NEXT_NODE = "Complete" export const NEXT_NODE = "Complete"
......
import {pauseMetricCapture} from '../captureMetrics/captureMetrics.js'; import {pauseMetricCapture} from '../captureMetrics/captureMetrics.js';
import { ROOT_FOLDER } from '../config.js';
export class DocumentControlWidget { export class DocumentControlWidget {
...@@ -27,7 +28,7 @@ export class DocumentControlWidget { ...@@ -27,7 +28,7 @@ export class DocumentControlWidget {
const refreshIcon = document.createElement("img"); const refreshIcon = document.createElement("img");
refreshIcon.classList.add("tiffViewerIcons"); refreshIcon.classList.add("tiffViewerIcons");
refreshIcon.src = "./documentControlWidget/assets/refresh_icon.png"; refreshIcon.src = "."+ROOT_FOLDER+"/documentControlWidget/assets/refresh_icon.png";
refreshIcon.alt = "Refresh"; refreshIcon.alt = "Refresh";
refreshIcon.height = "32"; refreshIcon.height = "32";
refreshIcon.width = "32"; refreshIcon.width = "32";
...@@ -38,7 +39,7 @@ export class DocumentControlWidget { ...@@ -38,7 +39,7 @@ export class DocumentControlWidget {
const pauseIcon = document.createElement("img"); const pauseIcon = document.createElement("img");
pauseIcon.classList.add("tiffViewerIcons"); pauseIcon.classList.add("tiffViewerIcons");
pauseIcon.src = "./documentControlWidget/assets/pause_icon.png"; pauseIcon.src = "."+ROOT_FOLDER+"/documentControlWidget/assets/pause_icon.png";
pauseIcon.alt = "Pause"; pauseIcon.alt = "Pause";
pauseIcon.height = "32"; pauseIcon.height = "32";
pauseIcon.width = "32"; pauseIcon.width = "32";
...@@ -49,7 +50,7 @@ export class DocumentControlWidget { ...@@ -49,7 +50,7 @@ export class DocumentControlWidget {
const returnIcon = document.createElement("img"); const returnIcon = document.createElement("img");
returnIcon.classList.add("tiffViewerIcons"); returnIcon.classList.add("tiffViewerIcons");
returnIcon.src = "./documentControlWidget/assets/return_icon.png"; returnIcon.src = "."+ROOT_FOLDER+"/documentControlWidget/assets/return_icon.png";
returnIcon.alt = "Return"; returnIcon.alt = "Return";
returnIcon.height = "32"; returnIcon.height = "32";
returnIcon.width = "32"; returnIcon.width = "32";
...@@ -60,7 +61,7 @@ export class DocumentControlWidget { ...@@ -60,7 +61,7 @@ export class DocumentControlWidget {
const rejectIcon = document.createElement("img"); const rejectIcon = document.createElement("img");
rejectIcon.classList.add("tiffViewerIcons"); rejectIcon.classList.add("tiffViewerIcons");
rejectIcon.src = "./documentControlWidget/assets/reject_icon.png"; rejectIcon.src = "."+ROOT_FOLDER+"/documentControlWidget/assets/reject_icon.png";
rejectIcon.alt = "Reject"; rejectIcon.alt = "Reject";
rejectIcon.height = "32"; rejectIcon.height = "32";
rejectIcon.width = "32"; rejectIcon.width = "32";
...@@ -281,54 +282,55 @@ export class DocumentControlWidget { ...@@ -281,54 +282,55 @@ export class DocumentControlWidget {
} }
checkSfIndex(first) {
if(first == true) { // checkSfIndex(first) {
localStorage.sfIndex = 1; // if(first == true) {
} // localStorage.sfIndex = 1;
let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length; // }
document.getElementById("totalPageValue").innerHTML = localStorage.sfIndex + ' of ' + ofTotal; // let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length;
// document.getElementById("totalPageValue").innerHTML = localStorage.sfIndex + ' of ' + ofTotal;
if(localStorage.sfIndex == 1) { // if(localStorage.sfIndex == 1) {
document.getElementById("prevDiv").style.visibility = "hidden"; // document.getElementById("prevDiv").style.visibility = "hidden";
document.removeEventListener("keydown", (e) => { // document.removeEventListener("keydown", (e) => {
if (e.ctrlKey && e.keyCode === 122) { // if (e.ctrlKey && e.keyCode === 122) {
localStorage.setItem("prev", "1"); // localStorage.setItem("prev", "1");
const fieldForm = document.getElementById("fields"); // const fieldForm = document.getElementById("fields");
fieldForm.querySelector('input[type="submit"]').click() // fieldForm.querySelector('input[type="submit"]').click()
} // }
}) // })
} else { // } else {
document.getElementById("prevDiv").style.visibility = "visible"; // document.getElementById("prevDiv").style.visibility = "visible";
document.addEventListener("keydown", (e) => { // document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.keyCode === 122) { // if (e.ctrlKey && e.keyCode === 122) {
localStorage.setItem("prev", "1"); // localStorage.setItem("prev", "1");
const fieldForm = document.getElementById("fields"); // const fieldForm = document.getElementById("fields");
fieldForm.querySelector('input[type="submit"]').click() // fieldForm.querySelector('input[type="submit"]').click()
} // }
}) // })
} // }
if(localStorage.sfIndex == JSON.parse(sessionStorage.dir_files).length) { // if(localStorage.sfIndex == JSON.parse(sessionStorage.dir_files).length) {
document.getElementById("nextDiv").style.visibility = "hidden"; // document.getElementById("nextDiv").style.visibility = "hidden";
document.removeEventListener("keydown", (e) => { // document.removeEventListener("keydown", (e) => {
if (e.ctrlKey && e.keyCode === 123) { // if (e.ctrlKey && e.keyCode === 123) {
const fieldForm = document.getElementById("fields"); // const fieldForm = document.getElementById("fields");
fieldForm.querySelector('input[type="submit"]').click(); // fieldForm.querySelector('input[type="submit"]').click();
} // }
}) // })
} else { // } else {
document.getElementById("nextDiv").style.visibility = "visible"; // document.getElementById("nextDiv").style.visibility = "visible";
document.addEventListener("keydown", (e) => { // document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.keyCode === 123) { // if (e.ctrlKey && e.keyCode === 123) {
const fieldForm = document.getElementById("fields"); // const fieldForm = document.getElementById("fields");
fieldForm.querySelector('input[type="submit"]').click(); // fieldForm.querySelector('input[type="submit"]').click();
} // }
}) // })
} // }
if(first == true) { // if(first == true) {
localStorage.removeItem("sfIndex"); // localStorage.removeItem("sfIndex");
} // }
} // }
......
export let HIGHLIGHT_OBJECT; export let HIGHLIGHT_OBJECT = null;
export let IMAGE_VIEWER_OBJECT; export let IMAGE_VIEWER_OBJECT = null;
export let INDEXED_DB_STORAGE; export var INDEXED_DB_STORAGE = null;
\ No newline at end of file
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
import { fetchSchema } from "./DataInputWidget/fetchSchema.js"; import { fetchSchema } from "./WebGde-Widgets/DataInputWidget/fetchSchema.js";
import { displayField } from "./DataInputWidget/displayFieldClass.js"; import { displayField } from "./WebGde-Widgets/DataInputWidget/displayFieldClass.js";
import { ImageViewer } from "./ImageViewerWidget/modules/imageViewer/imageViewer.js"; import { ImageViewer } from "./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js";
import { IndexedDBStorage } from "./ImageViewerWidget/modules/storage/indexedDBStorage.js"; import { IndexedDBStorage } from "./WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js";
import { createModal } from "./genericPopup/genericPopup.js"; import { createModal } from "./WebGde-Widgets/genericPopup/genericPopup.js";
import { hightlightEventListeners } from "./ImageViewerWidget/modules/highlight/highlightUtil.js"; import { hightlightEventListeners } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightUtil.js";
import { HIGH_LIGHT_SCHEMA } from "./config.js"; import { HIGH_LIGHT_SCHEMA } from "./WebGde-Widgets/config.js";
import { Highlight } from "./ImageViewerWidget/modules/highlight/highlightClass.js"; import { Highlight } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightClass.js";
import { BPO } from "./BPO/getElement.js"; import { BPO } from "./WebGde-Widgets/BPO/getElement.js";
import { DocumentControlWidget } from "./documentControlWidget/documentControlWidget.js"; import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/documentControlWidget.js";
import { INDEXED_DB_STORAGE , HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT } from "./globalVariable.js"; import { INDEXED_DB_STORAGE , HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT } from "./WebGde-Widgets/globalVariable.js";
......
...@@ -14,9 +14,10 @@ ...@@ -14,9 +14,10 @@
<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css"> <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://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://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> </head>
<body> <body>
<div id="imageViewerContainer"></div>
<aside id="input-field-container" class="sidebar"></aside>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -3,64 +3,125 @@ import { displayField } from "./WebGde-Widgets/DataInputWidget/displayFieldClass ...@@ -3,64 +3,125 @@ import { displayField } from "./WebGde-Widgets/DataInputWidget/displayFieldClass
import { ImageViewer } from "./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js"; import { ImageViewer } from "./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js";
import { IndexedDBStorage } from "./WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js"; import { IndexedDBStorage } from "./WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js";
import { createModal } from "./WebGde-Widgets/genericPopup/genericPopup.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 document.addEventListener("DOMContentLoaded", async ()=>{
displayFieldClass.generateFields(); await initializeWebGDE();
// displayFieldClass.editHeader(element-id);
});
displayFieldClass.updateHeaderText(0, "asdf"); async function initializeWebGDE(){
displayFieldClass.updateHeaderText(1, "asdf"); sessionStorage.setItem("user_id", "worker1");
displayFieldClass.updateHeaderText(2, "asdf"); const BPOObject = new BPO();
let isElement = await BPOObject.getRandomElement();
function modalTest(){ if (isElement){
console.log("test success"); setIndexedDBStorage(new IndexedDBStorage(INDEXED_DB_NAME, INDEXED_DB_TBL_NAME));
}
createModal(modalTest, "test"); 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"
// ];
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"
];
for (let index = 0; index < urls.length; index++) { let maxImagesToStore =urls.length<=3 ? urls.length : 3;
const url = urls[index]; for (let index = 0; index < maxImagesToStore; index++) {
indexedDB.storeImageFile(url, 'imageNum'+index); const url = urls[index];
} await INDEXED_DB_STORAGE.storeImageFile(url, 'imageNum_' + index);
}
await createWebGdeInterface(null);
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);
}
setHighlightObject(new Highlight("imageContainer", "currentImage", HIGH_LIGHT_SCHEMA));
HIGHLIGHT_OBJECT.createHighlight();
hightlightEventListeners();
let controls = new DocumentControlWidget();
document.getElementById("input-field-container").appendChild(controls.getWidget());
let imageBlob = await indexedDB.getStoreFile("imageNum2"); }
let imageViewer = new ImageViewer("imageViewerContainer"); }
const image = await imageViewer.addImage("currentImage", "jpeg", "sampleIImage.jpeg", imageBlob);
};
createImageViewer(); async function createWebGdeInterface(GDEContainer) {
let gdeContainer = document.createElement("div");
gdeContainer.setAttribute("class", "container web-gde-container");
const init = async () => { let imageViewerContainer = document.createElement("div");
let started_flag = false; imageViewerContainer.setAttribute("id", "imageViewerContainer");
let dataInputContainer = document.createElement("div");
dataInputContainer.setAttribute("id", "input-field-container");
// dataInputContainer.setAttribute("class", "sidebar");
window.onkeydown = (key) => {
if (!started_flag) { gdeContainer.appendChild(imageViewerContainer);
if (searchStringInArray(`${key.key}`, keyArray) == true || key.ctrlKey && key.key) {
console.log('Invalid key cannot Start');
} else { gdeContainer.appendChild(dataInputContainer);
started_flag = true;
startMetricCapture(); if (GDEContainer) {
} document.getElementById("GDEContainer").appendChild(gdeContainer);
} } else {
document.body.appendChild(gdeContainer);
} }
await createImageViewer();
await createInputForm();
}
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");
} }
init();
\ No newline at end of file
async function createImageViewer() {
setImageViewerObject(new ImageViewer("imageViewerContainer"));
await IMAGE_VIEWER_OBJECT.init();
};
...@@ -30,9 +30,8 @@ h3{ ...@@ -30,9 +30,8 @@ h3{
} */ } */
#imageViewerContainer{ #imageViewerContainer{
position: absolute;
width: 70%; width: 70%;
height: 100%; height: 99%;
} }
.sidebar { .sidebar {
...@@ -49,6 +48,8 @@ h3{ ...@@ -49,6 +48,8 @@ h3{
#input-field-container{ #input-field-container{
/* height : 600px; /* height : 600px;
width : 400px; */ width : 400px; */
height : 100%;
width : 30%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
...@@ -192,4 +193,26 @@ textarea{ ...@@ -192,4 +193,26 @@ textarea{
resize: none; resize: none;
} }
#text-area{width: 91%;font-size: 11px;padding: 9px 9px;margin-left: 15px;margin-top: 5px;margin-bottom: 5px;height: 103px;} #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
.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