Skip to content

W
web-ui
Commit 90602860 by Jhunel Adam Calub
Options

add element viewer list commit

parent 82b76d42
Showing with 387 additions and 19 deletions
WebGde/.classpath
......@@ -6,9 +6,8 @@
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry exported="true" kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8">
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8">
<attributes>
<attribute name="module" value="true"/>
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
......@@ -18,16 +17,29 @@
<attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.payara.tools.lib.system">
<classpathentry kind="src" output="target/test-classes" path="src/test/java">
<attributes>
<attribute name="test" value="true"/>
<attribute name="optional" value="true"/>
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="fish.payara.eclipse.tools.server.lib.system">
<attributes>
<attribute name="owner.project.facets" value="jst.web"/>
</attributes>
</classpathentry>
<classpathentry kind="src" output="target/test-classes" path="src/test/java">
<classpathentry excluding="**" kind="src" output="target/classes" path="src/main/resources">
<attributes>
<attribute name="test" value="true"/>
<attribute name="maven.pomderived" value="true"/>
<attribute name="optional" value="true"/>
</attributes>
</classpathentry>
<classpathentry excluding="**" kind="src" output="target/test-classes" path="src/test/resources">
<attributes>
<attribute name="maven.pomderived" value="true"/>
<attribute name="test" value="true"/>
<attribute name="optional" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="output" path="target/classes"/>
......
WebGde/.settings/org.eclipse.wst.common.project.facet.core.xml
<?xml version="1.0" encoding="UTF-8"?>
<faceted-project>
<runtime name="Payara Server 5 (5.2022.5)"/>
<runtime name="Payara"/>
<fixed facet="jst.web"/>
<fixed facet="java"/>
<fixed facet="wst.jsdt.web"/>
......
WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css 0 → 100644
/* Reset and General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
html,
body {
min-height: 100vh;
height: 100%;
margin: 0;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow-y: hidden;
}
/* Main Container */
#containerId {
max-width: 900px;
margin: 2rem 1rem;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 2rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Element List Wrapper */
.element-list {
max-height: 70vh;
overflow-y: auto;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #e0e0e0;
}
/* Element Containers */
.element-container {
display: flex;
flex-direction: column;
background-color: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 1.5rem;
padding: 1rem;
transition: all 0.3s ease;
cursor: pointer;
}
.element-container:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.element-container.selected {
background-color: #d3e5ff;
border-color: #007bff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Element Item */
.element-item {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Element Details */
.extra-details {
margin-top: 1rem;
font-size: 0.9rem;
color: #7d7d7d;
}
/* Detail Item */
.detail-item {
margin-top: 0.5rem;
padding: 0.5rem 0;
border-top: 1px solid #e0e0e0;
font-size: 0.9rem;
color: #7d7d7d;
}
/* Buttons */
button {
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-size: 1rem;
color: #fff;
background-color: #007bff;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}
button:active {
transform: scale(0.95);
}
button.encode:hover,
button.encode:active {
background-color: #0056b3;
}
button.new {
background-color: #28a745;
}
button.new:hover,
button.new:active {
background-color: #218838;
}
.button-container {
margin-top: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
}
button.disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* Media Queries */
@media (max-width: 768px) {
#containerId {
padding: 1rem;
}
.element-container,
button {
padding: 1rem;
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js 0 → 100644
const API_ROOT = "http://18.233.158.67:8080/bpo/req";
export class ElementListWidget {
global = {
container: null,
newButton: null,
encodeButton: null,
selectedElement: null,
workers: []
};
constructor(nodeId, containerId) {
this.nodeId = nodeId;
this.global.container = document.getElementById(containerId);
if (!this.global.container) {
this.global.container = document.createElement('div');
this.global.container.id = containerId;
document.body.appendChild(this.global.container);
}
this.workerId = sessionStorage.getItem("user_id");
this.init(nodeId, this.workerId);
}
async init(nodeId, workerId) {
console.log(`Fetching workers for node ID: ${nodeId}`);
const workerResponse = await fetchWorkersForNode(nodeId);
console.log("Worker API Response:", workerResponse);
if (workerResponse.successful && Array.isArray(workerResponse.workers)) {
this.global.workers = workerResponse.workers;
} else {
console.error('Failed to fetch workers:', workerResponse);
return;
}
const selectedWorker = this.global.workers.find(worker => worker.workerId === workerId);
if (!selectedWorker) {
console.error(`Worker with ID ${workerId} not found.`);
return;
}
/* console.log(`Fetching elements for node ID: ${nodeId}`);*/
const elementResponse = await fetchElementsForNode(nodeId);
/* console.log("Elements API Response:", elementResponse);*/
if (elementResponse.successful && Array.isArray(elementResponse.elements)) {
this.elements = elementResponse.elements.filter(element =>
selectedWorker.queueIndex.includes(element.queueIndex)
);
} else {
this.elements = [];
console.error('Failed to fetch elements or received malformed data:', elementResponse);
}
this.render();
}
render() {
this.global.container.innerHTML = "";
// Helper function to deselect all elements and remove their extra details
const deselectAll = () => {
document.querySelectorAll(".element-container.selected").forEach(el => {
el.classList.remove("selected");
this.removeExtraDetails(el);
});
this.global.selectedElement = null;
this.global.encodeButton.disabled = true;
this.global.encodeButton.classList.add("disabled");
};
// Initialize the encode button as disabled
this.global.encodeButton = document.createElement("button");
this.global.encodeButton.textContent = "ENCODE";
this.global.encodeButton.disabled = true;
this.global.encodeButton.classList.add("disabled");
// Create an element list container for the elements
const elementList = document.createElement("div");
elementList.classList.add("element-list");
this.elements.forEach(element => {
const elementContainer = document.createElement("div");
elementContainer.classList.add("element-container");
const elementDiv = document.createElement("div");
elementDiv.classList.add("element-item");
const elementIdSpan = document.createElement("span");
elementIdSpan.textContent = element.elementId;
elementDiv.appendChild(elementIdSpan);
elementContainer.appendChild(elementDiv);
elementList.appendChild(elementContainer);
// Move the click event listener from the elementDiv to the elementContainer
elementContainer.addEventListener("click", () => {
if (elementContainer.classList.contains("selected")) {
deselectAll();
} else {
deselectAll();
elementContainer.classList.add("selected");
this.global.selectedElement = element;
this.showExtraDetails(element, elementContainer);
this.global.encodeButton.disabled = false;
this.global.encodeButton.classList.remove("disabled");
}
});
});
this.global.container.appendChild(elementList); // Add the wrapped elements to the main container
// Create a parent div for the buttons
const buttonContainer = document.createElement("div");
buttonContainer.classList.add("button-container");
this.global.encodeButton.addEventListener("click", () => {
if (this.global.encodeButton.disabled) {
return;
}
if (this.global.selectedElement) {
this.handleEncodeClick(this.global.selectedElement);
}
});
buttonContainer.appendChild(this.global.encodeButton);
const newButton = document.createElement("button");
newButton.textContent = "NEW";
newButton.addEventListener("click", () => this.handleNewClick());
buttonContainer.appendChild(newButton);
this.global.container.appendChild(buttonContainer);
this.global.newButton = newButton;
}
getContainer() {
return this.global.container;
}
getNewButton() {
return this.global.newButton;
}
getEncodeButton() {
return this.global.encodeButton;
}
showExtraDetails(element, elementContainer) {
// Remove existing extra details if any
this.removeExtraDetails(elementContainer);
// Check if there are any extra details
if (element.extraDetails && Object.keys(element.extraDetails).length > 0) {
Object.entries(element.extraDetails).forEach(([key, value]) => {
const detailDiv = document.createElement("div");
detailDiv.classList.add("detail-item");
const detailSpan = document.createElement("span");
detailSpan.textContent = `${key}: ${value}`;
detailDiv.appendChild(detailSpan);
elementContainer.appendChild(detailDiv);
});
}
}
removeExtraDetails(elementContainer) {
const detailsItems = elementContainer.querySelectorAll(".detail-item");
if (detailsItems.length > 0) {
detailsItems.forEach(detailItem => {
detailItem.remove();
});
}
}
}
async function fetchWorkersForNode(nodeId) {
const response = await fetch(`${API_ROOT}/nodes/${nodeId}/workers`);
return await response.json();
}
async function fetchElementsForNode(nodeId) {
const response = await fetch(`${API_ROOT}/nodes/${nodeId}/elements`);
return await response.json();
}
WebGde/WebContent/WebGde-Widgets/config.js
......@@ -10,7 +10,7 @@ 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://54.157.29.8:8080"
export const DOMAIN = "http://18.233.158.67:8080"
export const CONTEXTROOT = "gfs-explorer-ws"
export const GDE_URL = DOMAIN + "/MobileGde/svc/gfs-rest"
export const FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"
......
WebGde/WebContent/index.html
<!DOCTYPE html>
<html>
<head>
<title>Data Input Field</title>
<meta charset="UTF-8">
......@@ -7,12 +8,14 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
<link rel="stylesheet" href="./WebGde-Widgets/ElementListWidget/ElementListWidget.css">
<link id="loginStylesheet" rel="stylesheet" href="./WebGde-Widgets/LogInWidget/LoginStyle.css">
<script type="module" src="./script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"
type="text/javascript"></script>
<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>
......@@ -22,6 +25,8 @@
<script type="text/javascript" src="./keycloak-login.js"></script> -->
</head>
<body>
</body>
</html>
\ No newline at end of file
WebGde/WebContent/script.js
......@@ -3,6 +3,7 @@ import { fetchSchema } from "./WebGde-Widgets/DataInputWidget/fetchSchema.js";
import { schema } from "./WebGde-Widgets/DataInputWidget/generateFields.js";
import { LogInClass } from "./WebGde-Widgets/LogInWidget/LogInClass.js";
import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/documentControlWidget.js";
import { ElementListWidget } from "./WebGde-Widgets/ElementListWidget/ElementListWidget.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, setBPOObject, BPO_OBJECT, DISPLAY_FIELD_OBJECT, setDisplayFieldObject, activateGDE, setDocumentControlObject, DOCUMENT_CONTROL_OBJECT, IS_GDE_ACTIVATED } from "./WebGde-Widgets/globalVariable.js";
......@@ -11,12 +12,12 @@ document.addEventListener("DOMContentLoaded", function() {
LOG_IN_COMPONENT.establishEventListeners();
});
export async function startApplication(){
export async function startApplication() {
createLoadingScreen();
await initializeWebGDE();
}
async function initializeWebGDE(){
async function initializeWebGDE() {
// Create and append the new link elements for the first two stylesheets
// const styleSheet1 = document.createElement('link');
// styleSheet1.rel = 'stylesheet';
......@@ -37,15 +38,23 @@ async function initializeWebGDE(){
// }
// sessionStorage.setItem('user_id','worker1')
await createWebGdeInterface(null);
// await createWebGdeInterface(null);
// setDocumentControlObject(new DocumentControlWidget());
// document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
// UNCOMMENTED BY ADAM 9/25/2023
/*await createWebGdeInterface(null);*/
setDocumentControlObject(new DocumentControlWidget());
document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
/*document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());*/
var mainLogInScreenContainer = document.getElementById("logInMainContainer");
mainLogInScreenContainer.remove();
removeLoadingScreen();
new ElementListWidget('Web_GDE_DEV', 'containerId');
}
async function createWebGdeInterface(GDEContainer) {
......@@ -126,11 +135,11 @@ export function removeLoadingScreen() {
}
function init(){
function init() {
console.log("Application Started");
}
function testFunction(){
function testFunction() {
try {
let doctype;
let section;
......@@ -149,25 +158,25 @@ function testFunction(){
continue;
}
}
var Frm= document.getElementById("fields");
var Nodes=Frm.elements;
var Frm = document.getElementById("fields");
var Nodes = Frm.elements;
// const myArray = Object.values(metrics);
const lookup = schema[doctype][section]
if (true) {
let fields = {};
for (var i=0;i<Nodes.length;i++) {
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
if (Nodes[i].type === 'button' || Nodes[i].type === 'submit') continue; // Skip elements of type "button" and "submit"
fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value;
console.log(Nodes[i].id + ": "+Nodes[i].value);
console.log(Nodes[i].id + ": " + Nodes[i].value);
}
// await createOutputXml(fields, myArray, doctype, section);
}
}catch{
} catch {
console.log("error");
}
}
......
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