add functionality for encode button

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css

@@ -86,8 +86,8 @@ body {
 	color: #7d7d7d;
 }
 
-/* Buttons */
-button {
+/* Specific styles for the encode button */
+#encode-btn {
 	padding: 1rem 2rem;
 	border: none;
 	border-radius: 50px;
@@ -98,22 +98,48 @@ button {
 	transition: background-color 0.3s ease, transform 0.1s ease;
 }
 
-button:active {
+#encode-btn:active {
 	transform: scale(0.95);
 }
 
-button.encode:hover,
-button.encode:active {
+#encode-btn:hover {
 	background-color: #0056b3;
 }
 
-button.new {
-	background-color: #28a745;
+#encode-btn:active {
+	background-color: #0056b3;
+}
+
+/* Style for disabled encode button */
+#encode-btn.disabled {
+	background-color: #9fb3c8;
+	/* Grayed out color */
+	cursor: not-allowed;
+}
+
+/* Specific styles for the new button */
+#new-btn {
+	padding: 1rem 2rem;
+	border: none;
+	border-radius: 50px;
+	font-size: 1rem;
+	color: #fff;
+	background-color: #007bff;
+	/* Green color */
+	cursor: pointer;
+	transition: background-color 0.3s ease, transform 0.1s ease;
+}
+
+#new-btn:active {
+	transform: scale(0.95);
+}
+
+#new-btn:hover {
+	background-color: #0056b3;
 }
 
-button.new:hover,
-button.new:active {
-	background-color: #218838;
+#new-btn:active {
+	background-color: #0056b3;
 }
 
 .button-container {
@@ -124,10 +150,7 @@ button.new:active {
 	gap: 2rem;
 }
 
-button.disabled {
-	background-color: #ccc;
-	cursor: not-allowed;
-}
+
 
 /* Media Queries */
 @media (max-width: 768px) {

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js

-const API_ROOT = "http://18.233.158.67:8080/bpo/req";
+import { createWebGdeInterface } from '../../script.js';
+import { DocumentControlWidget } from "../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 "../globalVariable.js";
+
+
+const API_ROOT = "http://52.207.220.74:8080/bpo/req";
 
 export class ElementListWidget {
 	global = {
@@ -75,6 +80,7 @@ export class ElementListWidget {
 		// Initialize the encode button as disabled
 		this.global.encodeButton = document.createElement("button");
 		this.global.encodeButton.textContent = "ENCODE";
+		this.global.encodeButton.id = "encode-btn";
 		this.global.encodeButton.disabled = true;
 		this.global.encodeButton.classList.add("disabled");
 
@@ -122,13 +128,16 @@ export class ElementListWidget {
 				return;
 			}
 			if (this.global.selectedElement) {
-				this.handleEncodeClick(this.global.selectedElement);
+				this.handleEncodeLogic(); // Only invoke this method
 			}
 		});
 
+
+
 		buttonContainer.appendChild(this.global.encodeButton);
 
 		const newButton = document.createElement("button");
+		newButton.id = "new-btn";
 		newButton.textContent = "NEW";
 		newButton.addEventListener("click", () => this.handleNewClick());
 		buttonContainer.appendChild(newButton);
@@ -181,6 +190,50 @@ export class ElementListWidget {
 		}
 	}
 
+	async handleEncodeLogic() {
+		// Store the selected element's details in the session storage
+		if (this.global.selectedElement) {
+			sessionStorage.setItem('selectedElementId', this.global.selectedElement.elementId);
+			sessionStorage.setItem('selectedElementExtraDetails', JSON.stringify(this.global.selectedElement.extraDetails));
+		}
+
+		// Remove the current container from the DOM
+		this.global.container.remove();
+
+		// Continue with the original logic
+		await createWebGdeInterface(null);
+
+		// Create and style a new container for the selected element's details
+		const detailsContainer = document.createElement('div');
+		detailsContainer.classList.add('details-container');
+
+		// Retrieve and display the selected element's ID
+		const elementId = sessionStorage.getItem('selectedElementId');
+		const elementIdDiv = document.createElement('div');
+		elementIdDiv.textContent = `Element ID: ${elementId}`;
+		elementIdDiv.classList.add('element-id');
+		detailsContainer.appendChild(elementIdDiv);
+
+		// Retrieve and display the selected element's extra details
+		const extraDetails = JSON.parse(sessionStorage.getItem('selectedElementExtraDetails'));
+		for (const [key, value] of Object.entries(extraDetails)) {
+			const detailDiv = document.createElement('div');
+			detailDiv.textContent = `${key}: ${value}`;
+			detailDiv.classList.add('extra-detail');
+			detailsContainer.appendChild(detailDiv);
+		}
+
+		// Insert the details container above the input container in the DOM
+		const inputContainer = document.getElementById("input-field-container");
+		inputContainer.parentElement.insertBefore(detailsContainer, inputContainer);
+
+		// Append the DocumentControlWidget
+		setDocumentControlObject(new DocumentControlWidget());
+		inputContainer.appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
+	}
+
+
+
 }
 
 async function fetchWorkersForNode(nodeId) {
@@ -193,6 +246,10 @@ async function fetchElementsForNode(nodeId) {
 	return await response.json();
 }
 
+/*await createWebGdeInterface(null);
+setDocumentControlObject(new DocumentControlWidget());
+	document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());*/
+
 
 
 

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.208.45.179:8080"
+export const  DOMAIN = "http://52.207.220.74: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/script.js

@@ -45,9 +45,9 @@ async function initializeWebGDE() {
 
 	// UNCOMMENTED BY ADAM 9/25/2023
 
-	/*await createWebGdeInterface(null);*/
+/*	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();
@@ -57,7 +57,7 @@ async function initializeWebGDE() {
 
 }
 
-async function createWebGdeInterface(GDEContainer) {
+export async function createWebGdeInterface(GDEContainer) {
 	let gdeContainer = document.createElement("div");
 	gdeContainer.setAttribute("class", "container web-gde-container");
 
@@ -135,19 +135,15 @@ export function removeLoadingScreen() {
 
 }
 
-<<<<<<< WebGde/WebContent/script.js
-export async function resetGDE(){
-    // TO-DO
+export async function resetGDE() {
+	// TO-DO
 }
 
-function init(){
-    console.log("Application Started");
-=======
 function init() {
 	console.log("Application Started");
->>>>>>> WebGde/WebContent/script.js
 }
 
+
 function testFunction() {
 	try {
 		let doctype;