Camera Capture

WebGde/.classpath

@@ -6,8 +6,9 @@
 			<attribute name="maven.pomderived" value="true"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8">
+	<classpathentry exported="true" 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>

WebGde/WebContent/WebGde-Widgets/DataInputWidget/AndroidInterface/androidInterface.js

+export function imageCapture(key) {
+    // Call Android function via javaScript interface
+    window.ImageCaptureInterface.captureImage(key);
+}
+  
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/DataInputWidget/ImageCapture/captureImage.js

+export function processCapture(key) {
+	const form = document.getElementById('fields');
+	const img = document.getElementById('zz');
+	const thumb = document.getElementById('thumbnail');
+	const filename = document.getElementById('fname');
+	const x = document.getElementsByClassName('x')[0];
+    const filenameString = generateMediaFileName(sessionStorage.getItem('user_id'));;
+
+	// Create hidden inputs for fname and file content
+	const hiddenFnameInput = document.createElement('input');
+	hiddenFnameInput.setAttribute('id', `${key}`);
+	hiddenFnameInput.setAttribute('type', 'hidden');
+	hiddenFnameInput.setAttribute('name', 'hidden_fname');
+	form.appendChild(hiddenFnameInput);
+
+	const hiddenFileContentInput = document.createElement('input');
+	hiddenFileContentInput.setAttribute('id', `${key}`);
+	hiddenFileContentInput.setAttribute('type', 'hidden');
+	hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
+	form.appendChild(hiddenFileContentInput);
+
+	img.style.display = 'inline';
+	thumb.style.display = 'none';
+
+	filename.textContent = filenameString;
+	filename.style.display = 'inline';
+
+	// Set the hidden inputs when a file is selected
+	hiddenFnameInput.value = filenameString;
+	hiddenFnameInput.display = '';
+	hiddenFileContentInput.value = img.value; // This will store the base64-encoded content of the file
+	hiddenFileContentInput.display = '';
+
+	document.getElementById('buttonsContainer-video').style.display = 'none';
+	x.style.display = 'block';
+	x.style.position = 'absolute';
+	document.getElementsByClassName('x')[0].addEventListener('click', () => {
+		img.style.display = 'none';
+		thumb.style.display = 'none';
+		x.style.display = 'none';
+		filename.style.display = 'none';
+		document.getElementById('buttonsContainer-video').style.display = 'flex';
+
+		// Clear the hidden fields
+		hiddenFnameInput.display = 'none';
+		hiddenFnameInput.value = '';
+		hiddenFileContentInput.display = 'none';
+		hiddenFileContentInput.value = '';
+	});
+}
+
+function generateMediaFileName(userId) {
+	// Get the current timestamp
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = String(now.getMonth() + 1).padStart(2, '0');
+	const day = String(now.getDate()).padStart(2, '0');
+	const hours = String(now.getHours()).padStart(2, '0');
+	const minutes = String(now.getMinutes()).padStart(2, '0');
+	const seconds = String(now.getSeconds()).padStart(2, '0');
+
+	// Combine the parts to create the filename
+	const timestamp = `${year}${month}${day}${hours}${minutes}${seconds}`;
+	const fileName = `${userId}_${timestamp}.jpeg`;
+
+	return fileName;
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js

@@ -6,6 +6,8 @@ import { showError } from "./showError.js";
 import { submitForm } from "../Submit/submit.js";
 import { BPO_OBJECT } from "../globalVariable.js";
 import { fetchOptionsDB } from "./DBLookup/DBLookup.js";
+import { imageCapture } from "./AndroidInterface/androidInterface.js";
+import { processCapture } from "./ImageCapture/captureImage.js";
 
 let newOption;
 export let schema;
@@ -410,7 +412,6 @@ const inputDateRange = (key, validation) => {
 		input.setAttribute('type', 'date')
 		input.addEventListener('focusout', handleInput)
 
-
 		const startDate = document.createElement('div')
 		startDate.setAttribute('class', 'dateContainer')
 		startDate.appendChild(input);
@@ -424,7 +425,6 @@ const inputDateRange = (key, validation) => {
 
 		dateRange.appendChild(dash)
 
-
 		const input2 = document.createElement('input')
 		input2.setAttribute('id', `${key}`)
 		input2.setAttribute('name', `${key}`)
@@ -465,16 +465,25 @@ const inputVideoUpload = (key, validation) => {
 		container2.classList.add('image-capture');
 
 		const input = document.createElement('input');
-		input.setAttribute('id', `${key}`);
+		input.setAttribute('id', `attachedMedia`);
 		input.setAttribute('name', `${key}`);
 		input.setAttribute('type', 'file');
-
+		input.setAttribute('style', 'display: none');
+		// input.setAttribute('accept', 'all/*');
+
+		const capturedImage = document.createElement('input');
+		capturedImage.setAttribute('id', 'capturedImageData');
+		capturedImage.setAttribute('name', `${key}`);
+		capturedImage.setAttribute('type', 'hidden');
+		capturedImage.setAttribute('style', 'display: none');
+		
 		// Add an event listener to handle when a file is selected
 		input.addEventListener('change', (event) => {
 			const file = event.target.files[0];
 			if (file) {
 				const img = document.getElementById('zz');
 				const thumb = document.getElementById('thumbnail');
+				const x = document.getElementsByClassName('x')[0];
 				if (file.type.startsWith('image/')) {
 					// If it's an image file, display it directly
 					const reader = new FileReader();
@@ -482,6 +491,32 @@ const inputVideoUpload = (key, validation) => {
 						img.src = e.target.result;
 						img.style.display = 'inline';
 						thumb.style.display = 'none';
+						filename.textContent = file.name;
+						filename.style.display = 'inline';
+
+						// Set the hidden inputs when a file is selected
+						hiddenFnameInput.value = file.name;
+						hiddenFnameInput.display = '';
+						hiddenFileContentInput.value = e.target.result; // This will store the base64-encoded content of the file
+						hiddenFileContentInput.display = '';
+
+						document.getElementById('buttonsContainer-video').style.display = 'none';
+						x.style.display = 'block';
+						x.style.position = 'absolute';
+						document.getElementsByClassName('x')[0].addEventListener('click', () => {
+							img.style.display = 'none';
+							thumb.style.display = 'none';
+							x.style.display = 'none';
+							input.value = ''
+							filename.style.display = 'none';
+							document.getElementById('buttonsContainer-video').style.display = 'flex';
+
+							// Clear the hidden fields
+							hiddenFnameInput.display = 'none';
+							hiddenFnameInput.value = '';
+							hiddenFileContentInput.display = 'none';
+							hiddenFileContentInput.value = '';
+						});
 					};
 					reader.readAsDataURL(file);
 				} else if (file.type.startsWith('video/')) {
@@ -490,8 +525,35 @@ const inputVideoUpload = (key, validation) => {
 					reader.onload = (e) => {
 						thumbnail.src = e.target.result;
 						thumbnail.style.display = 'inline';
+						filename.textContent = file.name;
+						filename.style.display = 'inline';
+
+						// Set the hidden inputs when a file is selected
+						hiddenFnameInput.value = file.name;
+						hiddenFnameInput.display = '';
+						hiddenFileContentInput.value = e.target.result; // This will store the base64-encoded content of the file
+						hiddenFileContentInput.display = '';
+
 						// Hide the img tag since we're showing the video thumbnail
 						document.getElementById('zz').style.display = 'none';
+						document.getElementById('buttonsContainer-video').style.display = 'none';
+						x.style.display = 'block';
+						x.style.position = 'absolute';
+						document.getElementsByClassName('x')[0].addEventListener('click', () => {
+							img.style.display = 'none';
+							thumb.style.display = 'none';
+							x.style.display = 'none';
+
+							filename.style.display = 'none';
+							document.getElementById('buttonsContainer-video').style.display = 'flex';
+							input.value = ''
+
+							// Clear the hidden fields
+							hiddenFnameInput.display = 'none';
+							hiddenFnameInput.value = '';
+							hiddenFileContentInput.display = 'none';
+							hiddenFileContentInput.value = '';
+						});
 					}
 				}
 				else {
@@ -500,15 +562,33 @@ const inputVideoUpload = (key, validation) => {
 			}
 		});
 
+
+		const x = document.createElement('span')
+		x.setAttribute('class', 'x');
+		x.setAttribute('style', 'display: none')
+		x.textContent = 'x';
+
 		const dash = document.createElement('label');
+
 		dash.setAttribute('class', 'dash');
 		dash.innerHTML = ' or ';
+		const input1 = document.createElement('input');
+		input1.setAttribute('id', `${key}`);
+		input1.setAttribute('name', `${key}`);
+		input1.setAttribute('type', 'button');
+		input1.setAttribute('onclick', "document.getElementById('attachedMedia').click();")
+		input1.setAttribute('value', 'Upload File');
+
 
 		const input2 = document.createElement('input');
 		input2.setAttribute('id', `${key}`);
 		input2.setAttribute('name', `${key}`);
 		input2.setAttribute('type', 'button');
 		input2.setAttribute('value', 'Record Video');
+		input2.addEventListener('click', () => {
+			imageCapture(key);
+		});
+		window.processCapture = processCapture
 
 		const img = document.createElement('img');
 		const thumbnail = document.createElement('video');
@@ -518,15 +598,38 @@ const inputVideoUpload = (key, validation) => {
 		img.setAttribute('id', 'zz');
 		img.setAttribute('style', 'display: none');
 
+		const filename = document.createElement('span');
+		filename.setAttribute('id', 'fname');
+		filename.setAttribute('name', `${key}`);
+		filename.setAttribute('type','text');
+		filename.setAttribute('style', 'display: none; font-size: inherit;');
+
+		// Create hidden inputs for fname and file content
+		const hiddenFnameInput = document.createElement('input');
+		hiddenFnameInput.setAttribute('id', `${key}`);
+		hiddenFnameInput.setAttribute('type', 'hidden');
+		hiddenFnameInput.setAttribute('name', 'hidden_fname');
+		container2.appendChild(hiddenFnameInput);
+	
+		const hiddenFileContentInput = document.createElement('input');
+		hiddenFileContentInput.setAttribute('id', `${key}`);
+		hiddenFileContentInput.setAttribute('type', 'hidden');
+		hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
+		container2.appendChild(hiddenFileContentInput);
 
 		// Append all elements to the container
-		container2.appendChild(input);
-		container2.appendChild(dash);
-		container2.appendChild(input2);
+		const container3 = document.createElement('div');
+		container2.appendChild(x);
+		container3.setAttribute('id', 'buttonsContainer-video')
+		container3.setAttribute('class', 'buttonsContainer');
+		container3.appendChild(input);
+		container3.appendChild(input1);
+		container3.appendChild(dash);
+		container3.appendChild(input2);
+		container2.appendChild(container3)
 		container2.appendChild(img);
 		container2.appendChild(thumbnail);
-
-
+		container2.appendChild(filename);
 
 		mandatory ? input.setAttribute('required', 'true') : null
 
@@ -553,38 +656,76 @@ const inputAudioUpload = (key, validation) => {
 			fieldLength
 		} = validation
 
-		const container = document.createElement('div')
-		const container2 = document.createElement('div')
+		const container = document.createElement('div');
+		const container2 = document.createElement('div');
 		container2.classList.add('image-capture');
-		const input = document.createElement('input')
-		input.setAttribute('id', `${key}`)
-		input.setAttribute('name', `${key}`)
-		input.setAttribute('type', 'file')
-		input.setAttribute('accept', 'audio/*')
+		const input = document.createElement('input');
+		input.setAttribute('id', `attachedAudio`);
+		input.setAttribute('name', `${key}`);
+		input.setAttribute('type', 'file');
+		input.setAttribute('style', 'display: none');
+		input.setAttribute('accept', 'audio/*');
 
-		const dash = document.createElement('label')
-		dash.setAttribute('class', 'dash')
-		dash.innerHTML = ' or '
+		// Add an event listener to handle when a file is selected
+		input.addEventListener('change', (event) => {
+			const file = event.target.files[0];
+			if (file) {
+				const filenameContainer = document.createElement('div');
+				const filename = document.createElement('span');
+				filename.setAttribute('id', 'filename');
+				filename.textContent = file.name;
+				filenameContainer.appendChild(filename);
+
+				const removeButton = document.createElement('span');
+				removeButton.setAttribute('class', 'remove-button');
+				removeButton.textContent = 'x';
+				removeButton.addEventListener('click', () => {
+					filenameContainer.remove();
+					document.getElementById('buttonsContainer-audio').style.display = 'flex';
+					document.getElementById('attachedAudio').value = '';
+				});
+				filenameContainer.appendChild(removeButton);
+
+				filenameContainer.setAttribute('style', 'display: flex');
+				filenameContainer.setAttribute('class', 'filename-container');
+				container2.insertBefore(filenameContainer, container2.childNodes[0]);
+				document.getElementById('buttonsContainer-audio').style.display = 'none';
+			}
+		});
 
-		const input2 = document.createElement('input')
-		input2.setAttribute('id', `${key}`)
-		input2.setAttribute('name', `${key}`)
-		input2.setAttribute('type', 'button')
-		input2.setAttribute('value', 'Record Audio')
+		const dash = document.createElement('label');
+		dash.setAttribute('class', 'dash');
+		dash.innerHTML = ' or ';
+		const input1 = document.createElement('input');
+		input1.setAttribute('id', `${key}`);
+		input1.setAttribute('name', `${key}`);
+		input1.setAttribute('type', 'button');
+		input1.setAttribute('onclick', "document.getElementById('attachedAudio').click();");
+		input1.setAttribute('value', 'Upload File');
 
-		input.addEventListener('change', handleInput)
-		
-		container.appendChild(container2);
-		container2.appendChild(input);//file input
-		container2.appendChild(dash);//or label
-		container2.appendChild(input2);//record button
+		const input2 = document.createElement('input');
+		input2.setAttribute('id', `${key}`);
+		input2.setAttribute('name', `${key}`);
+		input2.setAttribute('type', 'button');
+		input2.setAttribute('value', 'Record Audio');
 
-		mandatory ? input.setAttribute('required', 'true') : null
+		const container3 = document.createElement('div');
+		container3.setAttribute('id', 'buttonsContainer-audio');
+		container3.setAttribute('class', 'buttonsContainer');
+		container3.appendChild(input);
+		container3.appendChild(input1);
+		container3.appendChild(dash);
+		container3.appendChild(input2);
+		container2.appendChild(container3);
 
-		return container
+		mandatory ? input.setAttribute('required', 'true') : null;
+
+		container.appendChild(container2);
+		return container;
 	} catch (err) {
-		throw err
+		throw err;
 	}
+
 }
 
 
@@ -649,6 +790,7 @@ const inputRadiolist = (key, validation) => {
 		dropdown1.classList.add('dropdown');
 		var dropdownContent = document.createElement('div');
 		dropdownContent.classList.add('dropdown-content');
+		dropdownContent.setAttribute('id', `${key}`);
 		dropdown1.appendChild(dropdownContent);
 
 		//create a radio button for each item
@@ -658,11 +800,12 @@ const inputRadiolist = (key, validation) => {
 
 			var radio = document.createElement('input');
 			radio.type = 'radio';
-			radio.name = 'radioGroup';
+			radio.name = 'radioChoices';
+			radio.value = 'radioChoices';
 
 			var label = document.createTextNode(item);
-			radio.appendChild(label);
 
+			radio.appendChild(label);
 			radioDiv.appendChild(radio);
 			radioDiv.appendChild(label);
 			dropdownContent.appendChild(radioDiv);
@@ -701,6 +844,7 @@ const inputDropdown = (key, validation) => {
 				var elem = document.getElementsByClassName('select2-search__field');
 				elem.focus();
 			}
+
 		});
 
 		if (options && options.length > 0) {
@@ -853,8 +997,17 @@ const deconstruct = async (section, container, classAttribute) => {
 				fieldLabel, hidden
 			} = section[key]
 
-			// Skip hidden fields
+			// Create hidden input for fields with hidden="y"
 			if (hidden && hidden.toLowerCase() === "y") {
+				const hiddenInput = document.createElement('input');
+				hiddenInput.setAttribute('type', 'hidden');
+				hiddenInput.setAttribute('name', key);
+				hiddenInput.setAttribute('value', ''); // Set the value as needed
+		
+				// Append the hidden input to the container
+				container.appendChild(hiddenInput);
+		
+				// Skip creating other visible input elements for hidden fields
 				continue;
 			}
 
@@ -900,6 +1053,7 @@ const deconstruct = async (section, container, classAttribute) => {
 				case 'dblookup':
 					input = await inputDbLookup(key, validation)
 					break
+				case 'image-upload':
 				case 'video-upload':
 					input = inputVideoUpload(key, validation)
 					break

WebGde/WebContent/WebGde-Widgets/DataInputWidget/style.css

@@ -9,6 +9,7 @@
     box-sizing: border-box;
 }
 
+
 .text-style {
     color: white;
     text-align: center;

WebGde/WebContent/WebGde-Widgets/FileUpload/config.js

+import { GFS_URL } from "../config.js";
+
+export const urlFileUpload = GFS_URL + "/upload-file";
+export const uploadDirectory = "C:\\Users\\oang\\Desktop\\Mobile GDE\\test for upload"

WebGde/WebContent/WebGde-Widgets/FileUpload/fileUpload.js

+import { uploadDirectory, urlFileUpload } from "./config.js";
+
+export const uploadFile = async (file, projectCode) => {
+	const fileNameInput = generateFormattedString(projectCode);
+	const directoryInput = uploadDirectory;
+
+	const fileName = fileNameInput.trim();
+	const directory = directoryInput.trim();
+
+	if (fileName === '' || directory === '') {
+		console.log("Please enter a valid file name and directory.");
+		return;
+	}
+
+	const formData = new FormData();
+	formData.append('file', file);
+	formData.append('fileName', fileName);
+	formData.append('directory', directory);
+
+	fetch(urlFileUpload, {
+		method: 'POST',
+		body: formData
+	})
+		.then(response => response.json())
+		.then(data => {
+			console.log('File uploaded successfully:', data);
+		})
+		.catch(error => {
+			console.error('Error uploading file:', error);
+		});
+}
+
+function generateFormattedString(projectCode) {
+	// Get the current date and time
+	const currentDate = new Date();
+
+	// Format the date and time components
+	const year = currentDate.getFullYear();
+	const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Month is zero-based, so add 1 and pad with '0' if needed
+	const date = String(currentDate.getDate()).padStart(2, '0'); // Pad with '0' if needed
+	const hours = String(currentDate.getHours()).padStart(2, '0');
+	const minutes = String(currentDate.getMinutes()).padStart(2, '0');
+	const seconds = String(currentDate.getSeconds()).padStart(2, '0');
+	const milliseconds = String(currentDate.getMilliseconds()).padStart(3, '0'); // Milliseconds are padded with '0' up to 3 digits
+
+	// Combine the formatted components into the final string
+	const formattedString = `${projectCode}_${year}${month}${date}_${hours}${minutes}${seconds}${milliseconds}`;
+
+	return formattedString;
+}

WebGde/WebContent/WebGde-Widgets/Submit/submit.js

 import { getUrlCompleteToNextNode } from "../BPO/bpoService.js";
 import { saveForm } from "../DataInputWidget/generateFields.js";
 import { checkValidValues, validateInput } from "../DataInputWidget/validateInput.js";
+import { uploadFile } from "../FileUpload/fileUpload.js";
 import { global_end_time, saveMetrics, stopMetricCapture, setGlobalEndTime, interval } from "../captureMetrics/captureMetrics.js";
 import { createInfoModal } from "../genericPopup/genericPopup.js";
 import { Settings } from "./XMLWriter/Global.js";
 import { WriteForm } from "./XMLWriter/XML_Saver.js";
+import { PROJECT_CODE } from "./config.js";
 
 export const submitForm = async (e) => {
-    try {
-        setGlobalEndTime(new Date().toLocaleString());
-        const Form = document.getElementById("fields");
-        const { elements } = Form
-        let error = false;
-        let errorMsg = null;
-        let doctype;
-        let section;
+	try {
+		setGlobalEndTime(new Date().toLocaleString());
+		const Form = document.getElementById("fields");
+		const { elements } = Form
+		let error = false;
+		let errorMsg = null;
+		let doctype;
+		let section;
 
-        // Validate all elements again
-        for (let element of elements) {
-            if (element.style.display === 'none') continue
-            const { id, value, type } = element
-            const { valid } = validateInput(id, value)
+		// Validate all elements again
+		for (let element of elements) {
+			if (element.style.display === 'none') continue
+			const { id, value, type } = element
+			const { valid } = validateInput(id, value)
 
-            // Skip submit button
-            if (type === 'submit') continue
-            if (id === 'DocType') {
-                doctype = element.options[element.selectedIndex].text;
-                continue;
-            }
-            if (id === 'Section') {
-                section = element.options[element.selectedIndex].text;
-                continue;
-            }
+			// Skip submit button
+			if (type === 'button') continue
+			if (type === 'submit') continue
+			// Handle file uploads
+			if (type === 'file') {
+				const fileInput = element;
+				const files = fileInput.files;
+				if (files.length > 0) {
+					const file = files[0];
+					uploadFile(file, PROJECT_CODE);
+				}
+			}
+			if (id === 'DocType') {
+				doctype = element.options[element.selectedIndex].text;
+				continue;
+			}
+			if (id === 'Section') {
+				section = element.options[element.selectedIndex].text;
+				continue;
+			}
 
-            var { isValidValue, errMsg } = checkValidValues(id, value);
+			var { isValidValue, errMsg } = checkValidValues(id, value);
 
-            if (typeof errMsg !== "undefined") {
-                errorMsg = errMsg;
-            }
+			if (typeof errMsg !== "undefined") {
+				errorMsg = errMsg;
+			}
 
-            // Update display of input field if input is not valid
-            if (!valid) {
-                error = true
-                if (type === 'select-one') {
-                    continue
-                }
-                const field = document.getElementById(id)
-                const newEvent = new Event('focusout')
-                field.dispatchEvent(newEvent)
-            }
+			// Update display of input field if input is not valid
+			if (!valid) {
+				error = true
+				if (type === 'select-one') {
+					continue
+				}
+				const field = document.getElementById(id)
+				const newEvent = new Event('focusout')
+				field.dispatchEvent(newEvent)
+			}
 
 
-            if (!isValidValue) {
-                error = true
-                const field = document.getElementById(id);
-                field.classList.remove('input-valid');
-                field.classList.add('input-invalid');
-                field.select();
-            }
-        }
+			if (!isValidValue) {
+				error = true
+				const field = document.getElementById(id);
+				field.classList.remove('input-valid');
+				field.classList.add('input-invalid');
+				field.select();
+			}
+		}
 
-        // Update display of dropdown field if input is not valid
-        const dropdowns = $('.dropdown-input').select2();
-        for (let dropdown of dropdowns) {
-            const newEvent = new Event('select2:close')
-            dropdown.dispatchEvent(newEvent)
-        }
+		// Update display of dropdown field if input is not valid
+		const dropdowns = $('.dropdown-input').select2();
+		for (let dropdown of dropdowns) {
+			const newEvent = new Event('select2:close')
+			dropdown.dispatchEvent(newEvent)
+		}
 
-        if (error) {
-            if (errorMsg !== null) {
-                createInfoModal(null, 'OK',errorMsg);
-            } else {
-                createInfoModal(null, 'OK', 'Invalid or Missing data on highlighted fields!');
-            }
-            return false
-        }
-        else {
-            const metrics = stopMetricCapture();
-            await WriteForm(e, metrics, doctype, section);
-            saveForm(sessionStorage.getItem("display_counter"));
-        }
-        return true
-    } catch (err) {
-        console.log(err)
-        return false
-    }
+		if (error) {
+			if (errorMsg !== null) {
+				createInfoModal(null, 'OK', errorMsg);
+			} else {
+				createInfoModal(null, 'OK', 'Invalid or Missing data on highlighted fields!');
+			}
+			return false
+		}
+		else {
+			const metrics = stopMetricCapture();
+			await WriteForm(e, metrics, doctype, section);
+			saveForm(sessionStorage.getItem("display_counter"));
+		}
+		return true
+	} catch (err) {
+		console.log(err)
+		return false
+	}
 }
 
 export async function completeToNextNode(elementId) {
-    let requestJSON = {
-        "productionOutputUnits": {
-            "keystroke": {
-                "outputCount": 0,
-                "errorCount": 0
-            }
-        }
-    };
+	let requestJSON = {
+		"productionOutputUnits": {
+			"keystroke": {
+				"outputCount": 0,
+				"errorCount": 0
+			}
+		}
+	};
 
-    let response = await fetch(getUrlCompleteToNextNode(elementId), {
-        method: "POST",
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(requestJSON)
-    });
-    return response;
+	let response = await fetch(getUrlCompleteToNextNode(elementId), {
+		method: "POST",
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify(requestJSON)
+	});
+	return response;
 }
 

WebGde/WebContent/WebGde-Widgets/config.js

@@ -38,9 +38,9 @@ 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://3.86.35.226:8080"
+export const  DOMAIN = "http://3.84.219.51:8080"
 export const  CONTEXTROOT = "gfs-explorer-ws"
-export const  GFS_URL = "http://3.86.35.226:8080" + "/MobileGde/svc/gfs-rest"
+export const  GFS_URL = "http://3.84.219.51:8080" + "/MobileGde/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"
@@ -51,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://3.86.35.226:8080/bpo/"
+export const  BPO_URL = "http://3.84.219.51:8080/bpo/"
 export const  CURRENT_NODE = "Mobile_GDE_DEV"
 export const  ENCODING_PASS = "PASS1"
 export const  NEXT_NODE = "Complete"

WebGde/WebContent/script.js

 import { displayField } from "./WebGde-Widgets/DataInputWidget/displayFieldClass.js";
 import { fetchSchema } from "./WebGde-Widgets/DataInputWidget/fetchSchema.js";
+import { schema } from "./WebGde-Widgets/DataInputWidget/generateFields.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";
 
@@ -13,7 +14,7 @@ export async function startApplication(){
 }
 
 async function initializeWebGDE(){
-    
+    sessionStorage.setItem('user_id','worker1')
     await createWebGdeInterface(null);
     // setDocumentControlObject(new DocumentControlWidget());
     // document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
@@ -101,4 +102,49 @@ export function removeLoadingScreen() {
 
 function init(){
     console.log("Application Started");
-}
+}
\ No newline at end of file
+
+function testFunction(){
+    try {
+        let doctype;
+        let section;
+        const Form = document.getElementById("fields");
+		const { elements } = Form
+        for (let element of elements) {
+			if (element.style.display === 'none') continue
+			const { id, value, type } = element
+
+			if (id === 'DocType') {
+				doctype = element.options[element.selectedIndex].text;
+				continue;
+			}
+			if (id === 'Section') {
+				section = element.options[element.selectedIndex].text;
+				continue;
+			}
+        }
+        var Frm= document.getElementById("fields");
+        var Nodes=Frm.elements;
+        // const myArray = Object.values(metrics);
+        const lookup = schema[doctype][section]
+        localStorage.setItem("submit", "1");
+
+        if (true) {
+            let fields = {};
+            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);
+            }
+
+            // await createOutputXml(fields, myArray, doctype, section);
+        } 
+    }catch{
+        console.log("error");
+    }
+}
+
+window.testFunction = testFunction;
\ No newline at end of file

WebGde/WebContent/style.css

@@ -8,24 +8,32 @@
     font-style: normal;
 }
 
+.remove-button {
+    display: inline-block;
+    padding: 2px 6px;
+    background-color: red;
+    color: white;
+    font-size: 12px;
+    cursor: pointer;
+    border-radius: 50%;
+    margin-left: 5px;
+}
+
 .field-header {
     color: white;
     text-align: center;
 }
 
 h1 {
-    margin: 10px;
+    display: none;
 }
 
 h2 {
-    margin-top: 10px;
-    margin-bottom: 10px;
+    display: none;
 }
 
 h3 {
-    margin-bottom: 10px;
-    color: white;
-    text-align: center;
+    display: none;
 }
 
 .web-gde-container {
@@ -64,9 +72,11 @@ h3 {
     margin: 2vh;
 }
 
-#zz, #thumbnail {
+#zz,
+#thumbnail {
     margin-top: 5px;
 }
+
 #pause {
     background: no-repeat center/75% url("./WebGde-Widgets/resources/pause_icon.png");
     height: 3vh;
@@ -254,7 +264,6 @@ input[type=text] {
 input[type=checkbox],
 input[type=radio] {
     margin-right: 8px;
-
 }
 
 .dropdown-content {
@@ -266,12 +275,12 @@ input[type=radio] {
 
 .radio-like-checkbox {
     display: flex;
-    padding: 5px;
+    padding: 3px;
 }
 
 .checkbox {
     display: flex;
-    padding: 5px;
+    padding: 3px;
 }
 
 .dash {
@@ -285,10 +294,40 @@ input[type=radio] {
     flex-direction: column;
     width: 100%;
     padding: 4px;
-    /* padding-bottom: 10px;
-    padding-top: 20px; */
     border: thin solid #555;
+    position: relative;
+    height: 100%;
+    align-items: center;
+}
+
+.x {
+    display: none;
+    position: absolute;
+    top: 15px;
+    left: 7px;
+    padding: 2px 6px;
+    background-color: red;
+    color: white;
+    font-size: inherit;
+    cursor: pointer;
+    border-radius: 50%;
+    margin-left: 5px;
+}
+
+/* Style for the video element (thumbnail) */
+video#thumbnail {
+    display: none;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
 
+/* Style for the image element (thumbnail) */
+img#zz {
+    display: none;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 input[type=file]::file-selector-button {
@@ -310,8 +349,9 @@ input[type=file] {
 }
 
 input[type=button] {
-    width: 100%;
+
     padding: 5px 10px 5px 10px;
+    margin: 4px;
     border: none;
     outline: none;
     border-radius: 2px;
@@ -381,6 +421,11 @@ textarea {
     height: 103px;
 }
 
+.buttonsContainer {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
 
 .ctrl-buttons {
     background-color: transparent !important;
@@ -388,6 +433,18 @@ textarea {
     justify-content: space-evenly !important;
 }
 
+span#filename {
+    text-overflow: ellipsis;
+    width: 90%;
+    overflow: hidden;
+    align-self: center;
+}
+
+.filename-container {
+    overflow: hidden;
+    justify-content: space-between;
+    width: 100%;
+}
 
 .ctrl-buttons .buttonRightClass {
     margin: 1vh;
@@ -408,9 +465,7 @@ textarea {
     text-align: center;
 }
 
-
-
-.genericPopup {
+#butt .genericPopup {
     background-color: #000000a1;
     display: -webkit-inline-box;
     width: 100%;
@@ -466,9 +521,6 @@ textarea {
     padding: 4px 0px 5px 8px;
     text-align: left;
 }
-
-
-
 /* LOader css */
 .modal-container {
     display: block;
@@ -499,7 +551,6 @@ textarea {
 }
 
 @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);
@@ -561,14 +612,10 @@ textarea {
     color: red;
 }
 
-
-
-
-
 @media only screen and (orientation: portrait) {
     * {
         -webkit-font-smoothing: auto;
-        font-size: 16px;
+        font-size: 17px;
         letter-spacing: 0.1em;
         text-rendering: optimizeLegibility;
         font-weight: normal;
@@ -577,18 +624,15 @@ textarea {
     }
 
     h1 {
-        margin: 0px;
+        display: none;
     }
 
     h2 {
-        margin-top: 10px;
-        margin-bottom: 10px;
+        display: none;
     }
 
     h3 {
-        /* margin-bottom: 20px; */
-        color: white;
-        text-align: center;
+        display: none;
     }
 
     .web-gde-container {
@@ -610,15 +654,25 @@ textarea {
         background-image: linear-gradient(to bottom, #23569f, #00a8c0);
     }
 
+    .remove-button {
+        display: inline-block;
+        padding: 2px 6px;
+        background-color: red;
+        color: white;
+        font-size: 16px;
+        cursor: pointer;
+        border-radius: 50%;
+        margin-left: 5px;
+    }
+
     #input-field-container {
-        /* height : 600px;
-        width : 400px; */
         height: 100%;
         width: 100%;
         display: flex;
         flex-direction: column;
         overflow: auto;
         background-image: linear-gradient(to bottom, #23569f, #00a8c0);
+        justify-content: space-between;
     }
 
     .dash {
@@ -633,7 +687,7 @@ textarea {
         flex-direction: column;
         border: none;
         outline: none;
-        padding: 0px 5px 10px 4px;
+        padding: 0px 4px 20px 4px;
         flex-wrap: nowrap;
     }
 
@@ -646,33 +700,28 @@ textarea {
         flex-direction: column;
         width: 100%;
         padding: 20px;
-        /* padding-bottom: 10px;
-    padding-top: 20px; */
         border-radius: 2px;
-        border: 2px dashed #555;
-        color: #444;
+        border: solid;
+        border-width: thin;
+        border-color: gray;
         cursor: pointer;
+        align-items: center;
     }
 
     #fields {
-        /* margin: 17px; */
         margin-left: 17px;
         margin-right: 17px;
         padding: 18px;
-        border-radius: 25px;
-        width: auto;
-        height: auto;
+        border-radius: 15px;
         background-color: white;
-
         overflow-y: auto;
         display: flex;
         flex-direction: column;
+        flex: unset;
+        max-height: 100vh;
         border-style: solid;
         border-width: thin;
         border-color: #446397;
-        /* box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset;
-    -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset;
-    -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset; */
     }
 
     #fields>div {
@@ -702,8 +751,7 @@ textarea {
     }
 
 
-    @media only screen and (max-width: 430px) {
-
+    @media only screen and (max-width: 530px) {
         .date-range {
             display: flex;
             flex-direction: column;
@@ -717,22 +765,15 @@ textarea {
         }
     }
 
-
     .dash {
         display: unset;
         align-self: center;
         padding: 6px;
     }
 
-
     .date-range {
         display: flex;
         justify-content: space-between;
-        /* padding: 20px 0px 20px 0px; */
-        /* border-style: solid;
-    border-width: thin;
-    border-color: gray;
-    background-color: #e7e7e7; */
     }
 
     .dateContainer {
@@ -740,7 +781,7 @@ textarea {
     }
 
     label {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 700;
     }
 
@@ -769,7 +810,8 @@ textarea {
         overflow-x: clip;
         flex-wrap: nowrap;
         flex-grow: 1;
-        border-radius: 2px
+        border-radius: 2px;
+        padding: 1px;
     }
 
     .input-invalid {
@@ -801,20 +843,20 @@ textarea {
 
     input[type=checkbox],
     input[type=radio] {
-        width: 16px;
-        height: 19px;
+        width: 20px;
+        height: 20px;
         margin-right: 15px;
-
+        margin-top: 1px;
     }
 
     .radio-like-checkbox {
         display: flex;
-        padding: 5px;
+        padding: 3px;
     }
 
     .checkbox {
         display: flex;
-        padding: 5px;
+        padding: 3px;
     }
 
     input[type=file]::file-selector-button {
@@ -822,9 +864,6 @@ textarea {
         border-radius: 2px;
         border: none;
         outline: none;
-        /* border-style: solid;
-    border-width: thin;
-    border-color: gray; */
         background-color: #00a8c0;
         color: white;
     }
@@ -842,6 +881,7 @@ textarea {
     input[type=button] {
         width: 100%;
         padding: 5px;
+        margin: unset;
         border: none;
         outline: none;
         border-radius: 2px;
@@ -870,7 +910,6 @@ textarea {
         padding: 20px;
     }
 
-
     #text-area {
         width: 91%;
         font-size: 11px;
@@ -883,3 +922,10 @@ textarea {
 
 }
 
+@media only screen and (max-width: 1100px) {
+    .date-range {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+}
\ No newline at end of file

WebGde/src/main/java/com/svi/webgde/restservice/services/GDEWebServices.java

@@ -8,6 +8,7 @@ import java.io.IOException;
 import java.io.InputStream;
 import java.math.BigDecimal;
 import java.nio.file.Files;
+import java.nio.file.Paths;
 import java.text.SimpleDateFormat;
 import java.util.Date;
 import java.util.TimeZone;
@@ -298,16 +299,39 @@ public class GDEWebServices {
 	public Response uploadFile(@FormDataParam("file") InputStream fileInputStream,
 	                           @FormDataParam("fileName") String fileName,
 	                           @FormDataParam("directory") String directory) {
-		String filePath = directory + File.separator + fileName;
-		try {
-			Files.copy(fileInputStream, new File(filePath).toPath());
-			JSONObject responseJson = new JSONObject();
-			responseJson.put("status", 200);
-	        return Response.ok(responseJson.toString()).build();
-		} catch (IOException e) {
-			// TODO Auto-generated catch block
-			e.printStackTrace();
-			return Response.status(Response.Status.INTERNAL_SERVER_ERROR).build();
-		}
+		// Sanitize the file name and directory path
+        String sanitizedFileName = sanitizeFileName(fileName);
+        String sanitizedDirectory = sanitizeDirectory(directory);
+
+        // Create the final directory path
+        String finalDirectory = sanitizedDirectory;
+
+        try {
+            // Create the directory if it doesn't exist
+            File directoryFile = new File(finalDirectory);
+            if (!directoryFile.exists()) {
+                directoryFile.mkdirs();
+            }
+
+            // Save the file in the specified directory
+            Files.copy(fileInputStream, Paths.get(finalDirectory, sanitizedFileName));
+
+            JSONObject responseJson = new JSONObject();
+            responseJson.put("status", 200);
+            return Response.ok(responseJson.toString()).build();
+        } catch (IOException e) {
+            e.printStackTrace();
+            return Response.status(Response.Status.INTERNAL_SERVER_ERROR).build();
+        }
+	}
+
+	private String sanitizeDirectory(String directory) {
+		// Remove directory traversal sequences
+		return directory.replaceAll("\\.\\.", "");
+	}
+
+	private String sanitizeFileName(String fileName) {
+		// Remove special characters, spaces, and directory separators
+        return fileName.replaceAll("[^a-zA-Z0-9.-]", "_");
 	}
 }