Merge branch 'feature-WG-399' into 'development-mobile'

add functionality for encode button See merge request !69

Merge branch 'feature-WG-399' into 'development-mobile'
8cdc3cb5 · Owen Ryan Ang · 89892ed8 · 3f94e7dd · 8cdc3cb5 · 8cdc3cb5
Commit 8cdc3cb5 authored Oct 09, 2023 by Owen Ryan Ang
5 changed files
--- a/WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css
+++ b/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) {

--- a/WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js
+++ b/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());*/
+



--- a/WebGde/WebContent/WebGde-Widgets/config.js
+++ b/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://100.24.19.34:8080"
+export const  DOMAIN = "http://52.207.220.74:8080"
 export const  CONTEXTROOT = "gfs-explorer-ws"
 export const  GDE_URL = DOMAIN + "/MobileGdeDev/svc/gfs-rest"
 export const  FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"

--- a/WebGde/WebContent/script.js
+++ b/WebGde/WebContent/script.js
@@ -46,9 +46,15 @@ async function initializeWebGDE() {
 	// UNCOMMENTED BY ADAM 9/25/2023
 	sessionStorage.setItem("element_id","element1");

+<<<<<<< WebGde/WebContent/script.js
+/*	await createWebGdeInterface(null);*/
+	setDocumentControlObject(new DocumentControlWidget());
+/*	document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());*/
+=======
 	await createWebGdeInterface(null);
 	setDocumentControlObject(new DocumentControlWidget());
 	document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
+>>>>>>> WebGde/WebContent/script.js

 	var mainLogInScreenContainer = document.getElementById("logInMainContainer");
 	mainLogInScreenContainer.remove();
@@ -58,7 +64,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");

@@ -136,14 +142,24 @@ export function removeLoadingScreen() {

 }

+<<<<<<< WebGde/WebContent/script.js
+export async function resetGDE() {
+	// TO-DO
+}
+
+function init() {
+	console.log("Application Started");
+=======
 export async function resetGDE(){
    // TO-DO
 }

 function init(){
    console.log("Application Started");
+>>>>>>> WebGde/WebContent/script.js
 }

+
 function testFunction() {
 	try {
 		let doctype;

--- a/WebGde/WebContent/style.css
+++ b/WebGde/WebContent/style.css
@@ -40,7 +40,7 @@ h3 {
 	width: 100%;
 	height: 100vh;
 	display: flex;
-    flex-direction: row;
+	flex-direction: column;
 	align-items: flex-start;
 	justify-content: flex-start;
 }
@@ -289,7 +289,8 @@ input[type=radio] {
 	display: none;
 }

-.image-capture, .fingerprint-capture, .file-upload {
+.image-capture,
+.fingerprint-capture {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -489,8 +490,10 @@ span#filename {
 	display: inline-block;
 	flex: 1;
 	vertical-align: middle;
-    margin-right: 10px; /* Adjust the spacing between buttons as needed */
-    padding: 10px 20px; /* Adjust the padding as needed */
+	margin-right: 10px;
+	/* Adjust the spacing between buttons as needed */
+	padding: 10px 20px;
+	/* Adjust the padding as needed */
 	border: none;
 	cursor: pointer;
 	width: 40%;
@@ -506,8 +509,10 @@ span#filename {
 	display: inline-block;
 	flex: 1;
 	vertical-align: middle;
-    margin-right: 10px; /* Adjust the spacing between buttons as needed */
-    padding: 10px 20px; /* Adjust the padding as needed */
+	margin-right: 10px;
+	/* Adjust the spacing between buttons as needed */
+	padding: 10px 20px;
+	/* Adjust the padding as needed */
 	border: none;
 	cursor: pointer;
 	background-color: white;
@@ -526,6 +531,7 @@ span#filename {
 	padding: 4px 0px 5px 8px;
 	text-align: left;
 }
+
 /* LOader css */
 .modal-container {
 	display: block;
@@ -544,7 +550,25 @@ span#filename {
 	margin-top: 15%;
 }

+.details-container {
+	padding: 10px;
+	margin: 20px 17px 0px 17px;
+}
+
+.element-id {
+	font-weight: bold;
+	margin-bottom: 10px;
+	color: #FFFFFF;
+}
+
+.extra-detail {
+	padding: 5px 0;
+	color: #FFFFFF;
+}
+
+
 @keyframes mulShdSpin {
+
 	0%,
 	100% {
 		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);
@@ -689,7 +713,8 @@ span#filename {
 		background-color: yellow;
 	}

-    .image-capture, .fingerprint-capture, .file-upload {
+	.image-capture,
+	.fingerprint-capture {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
@@ -953,13 +978,13 @@ span#filename {
 	margin: 2px;
 }

-.reject-modal{
+.reject-modal {
 	overflow: auto;
 	background-color: #fff;
 	position: absolute;
 	padding: 15px;
-    top:15%;
-    left:10%;
+	top: 15%;
+	left: 10%;
 	right: 10%;
 	width: 80%;
 	height: fit-content;
@@ -969,9 +994,9 @@ span#filename {

 	animation-name: modalTransition;
 	animation-duration: .4s;
-    box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
-    -webkit-box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
-    -moz-box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
+	box-shadow: 13px 13px 21px 4px rgba(32, 29, 29, 0.63);
+	-webkit-box-shadow: 13px 13px 21px 4px rgba(32, 29, 29, 0.63);
+	-moz-box-shadow: 13px 13px 21px 4px rgba(32, 29, 29, 0.63);

 }

@@ -1000,28 +1025,36 @@ span#filename {
 }

 @keyframes mulShdSpin {
+
 	0%,
 	100% {
 		box-shadow: 0em -2.6em 0em 0em #FFFFFF, 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.5), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7);
 	}
+
 	12.5% {
 		box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.7), 1.8em -1.8em 0 0em #FFFFFF, 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5);
 	}
+
 	25% {
 		box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.5), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7), 2.5em 0em 0 0em #FFFFFF, 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
 	}
+
 	37.5% {
 		box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5), 2.5em 0em 0 0em rgba(20, 52, 164, 0.7), 1.75em 1.75em 0 0em #FFFFFF, 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
 	}
+
 	50% {
 		box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.5), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.7), 0em 2.5em 0 0em #FFFFFF, -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
 	}
+
 	62.5% {
 		box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.5), 0em 2.5em 0 0em rgba(20, 52, 164, 0.7), -1.8em 1.8em 0 0em #FFFFFF, -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
 	}
+
 	75% {
 		box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.5), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.7), -2.6em 0em 0 0em #FFFFFF, -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
 	}
+
 	87.5% {
 		box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.5), -2.6em 0em 0 0em rgba(20, 52, 164, 0.7), -1.8em -1.8em 0 0em #FFFFFF;
 	}