feature: video capture

WebGde/.classpath

@@ -24,11 +24,6 @@
 			<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 excluding="**" kind="src" output="target/classes" path="src/main/resources">
 		<attributes>
 			<attribute name="maven.pomderived" value="true"/>
@@ -42,5 +37,10 @@
 			<attribute name="optional" value="true"/>
 		</attributes>
 	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.payara.tools.lib.system">
+		<attributes>
+			<attribute name="owner.project.facets" value="jst.web"/>
+		</attributes>
+	</classpathentry>
 	<classpathentry kind="output" path="target/classes"/>
 </classpath>

WebGde/.settings/org.eclipse.ltk.core.refactoring.prefs

+eclipse.preferences.version=1
+org.eclipse.ltk.core.refactoring.enable.project.refactoring.history=false

WebGde/.settings/org.eclipse.wst.common.project.facet.core.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <faceted-project>
-  <runtime name="Payara"/>
+  <runtime name="Payara Server 5 (5.2022.5)"/>
   <fixed facet="jst.web"/>
   <fixed facet="java"/>
   <fixed facet="wst.jsdt.web"/>

WebGde/WebContent/WebGde-Widgets/BPO/rejectElement.js

 import { createLoadingScreen, resetGDE } from "../../script.js";
+import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js";
 import { validateInput } from "../DataInputWidget/validateInput.js";
 import { PROJECT_CODE } from "../Submit/config.js";
-import { ENCODING_PASS, REASON_LIST, SCHEMA_FILE } from "../config.js";
+import { ENCODING_PASS, REASON_LIST } from "../config.js";
 import { createInfoModal, createModal } from "../genericPopup/genericPopup.js";
 import { BPO_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from "../globalVariable.js";
 import { getRejectElement } from "./bpoService.js";
@@ -331,20 +332,20 @@ function saveExceptionToXml(){
         "projCode": PROJECT_CODE,
         "userId": sessionStorage.getItem("user_id"),
         "elementId": elementId,
-        "schema": SCHEMA_FILE,
-        "totalRec":  urls.length,
+        "schema": SCHEMA_FILE_PATH,
+        "totalRec":"0",
         "maxRec": "1",
-        "totalKeystroke": 0,
+        "totalKeystroke": "",
         "procTime": "",
-        "procDuration": 0,
+        "procDuration": "",
         "eob": "",
         "exceptionRemark": selected,
-        "recordNo": "1",
+        "recordNo": "0",
         "totalSubRec": "1",
         "maxSubRec": "1",
-        "imageName": urls[parseInt(sessionStorage.getItem("display_counter"))],
+        "imageName": "",
         "subRecordNo": "1",
-        "eor": "",
+        "eor": "N",
         "fields": {},
         "outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB"),
         "doctype": doctype,

WebGde/WebContent/WebGde-Widgets/BPO/returnElement.js

 import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script.js";
+import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js";
 import { validateInput } from "../DataInputWidget/validateInput.js";
 import { PROJECT_CODE } from "../Submit/config.js";
 import { interval } from "../captureMetrics/captureMetrics.js";
-import { SCHEMA_FILE } from "../config.js";
 import { createInfoModal, createModal } from "../genericPopup/genericPopup.js";
 import { BPO_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from "../globalVariable.js";
 import { getUrlReturnElement } from "./bpoService.js";
@@ -59,21 +59,21 @@ function returnSaveXML(){
         "projCode": PROJECT_CODE,
         "userId": sessionStorage.getItem("user_id"),
         "elementId": elementId,
-        "schema": SCHEMA_FILE,
-        "totalRec": filePaths.length,
+        "schema": SCHEMA_FILE_PATH,
+        "totalRec":"0",
         "maxRec": "1",
-        "totalKeystroke": 0,
+        "totalKeystroke": "",
         "procTime": "",
-        "procDuration": 0,
+        "procDuration": "",
         "eob": "",
         "exceptionRemark": "",
-        "recordNo": parseInt(sessionStorage.getItem("display_counter")) + 1,
+        "recordNo": "0",
         "totalSubRec": "1",
         "maxSubRec": "1",
-        "imageName": filePaths[parseInt(sessionStorage.getItem("display_counter"))],
+        "imageName": "",
         "subRecordNo": "1",
-        "eor": "",
-        "fields": {},
+        "eor": "N",
+        "fields": fields,
         "outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB"),
         "doctype": doctype,
         "section": section

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

@@ -3,6 +3,10 @@ export function imageCapture(key) {
     window.ImageCaptureInterface.captureImage(key);
 }
 
+export function videoCapture(key){
+    window.VideoCaptureInterface.captureVideo(key);
+}
+
 export function selfieCapture(key) {
     // Call Android function via javaScript interface
     window.ImageCaptureInterface.captureSelfie(key);

WebGde/WebContent/WebGde-Widgets/DataInputWidget/VideoCapture/captureVideo.js

+export function processVideoCapture(key, videoFilename){
+    const form = document.getElementById('fields');
+	const thumb = document.getElementById(`${key}_thumbnail`);
+	const filename = document.getElementById(`${key}_fname`);
+	const x = document.getElementById(`${key}_x`);
+    // const filenameString = generateMediaFileName(sessionStorage.getItem('user_id'));
+	const filenameString = videoFilename;
+
+	// 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);
+
+	thumb.style.display = 'inline';
+	thumb.style.width = '100%';
+	thumb.style.height = '100%';
+
+	filename.textContent = filenameString;
+	filename.style.display = 'inline';
+
+	// Set the hidden inputs when a file is selected
+	hiddenFnameInput.value = filenameString;
+	hiddenFnameInput.display = '';
+	hiddenFileContentInput.value = thumb.src; // This will store the base64-encoded content of the file
+	hiddenFileContentInput.display = '';
+
+	document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
+	x.style.display = 'block';
+	x.style.position = 'absolute';
+    document.getElementById(`${key}_x`).addEventListener('click', () => {
+		thumb.style.display = 'none';
+		x.style.display = 'none';
+		filename.style.display = 'none';
+		document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
+
+		// Clear the hidden fields
+		hiddenFnameInput.display = 'none';
+		hiddenFnameInput.value = '';
+		hiddenFileContentInput.display = 'none';
+		hiddenFileContentInput.value = '';
+	});
+
+}
\ No newline at end of file

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

@@ -6,9 +6,10 @@ import { showError } from "./showError.js";
 import { submitForm } from "../Submit/submit.js";
 import { BPO_OBJECT } from "../globalVariable.js";
 import { fetchOptionsDB } from "./DBLookup/DBLookup.js";
-import { fingerprintCapture, getLocation, imageCapture } from "./AndroidInterface/androidInterface.js";
+import { fingerprintCapture, getLocation, imageCapture, videoCapture } from "./AndroidInterface/androidInterface.js";
 import { processCapture } from "./ImageCapture/captureImage.js";
 import { processFingerprint } from "./FingerprintCapture/captureFingerprint.js";
+import { processVideoCapture } from "./VideoCapture/captureVideo.js";
 
 let newOption;
 export let schema;
@@ -664,6 +665,204 @@ const inputImageCapture = (key, validation) => {
  * @returns
  *      created input field element 
  */
+const inputVideoCapture = (key, validation) => {
+	try {
+		const {
+			mandatory,
+			fieldLength
+		} = validation
+
+		const container = document.createElement('div');
+		const container2 = document.createElement('div');
+		container.appendChild(container2);
+		container2.classList.add('image-capture');
+
+		const input = document.createElement('input');
+		input.setAttribute('id', `${key}_attachedMedia`);
+		input.setAttribute('name', `${key}`);
+		input.setAttribute('type', 'file');
+		input.setAttribute('style', 'display: none');
+		input.setAttribute('accept', 'image/*, video/*'); // Accept both image and video files
+
+		const capturedImage = document.createElement('input');
+		capturedImage.setAttribute('id', `${key}_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) {
+
+				// 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);
+
+				const img = document.getElementById(`${key}_zz`);
+				const thumb = document.getElementById(`${key}_thumbnail`);
+				const x = document.getElementById(`${key}_x`);
+				if (file.type.startsWith('image/')) {
+					// If it's an image file, display it directly
+					const reader = new FileReader();
+					reader.onload = function (e) {
+						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(`${key}_buttonsContainer-video`).style.display = 'none';
+						x.style.display = 'block';
+						x.style.position = 'absolute';
+						document.getElementById(`${key}_x`).addEventListener('click', () => {
+							img.style.display = 'none';
+							img.src = '';
+							thumb.style.display = 'none';
+							x.style.display = 'none';
+							input.value = ''
+							filename.style.display = 'none';
+							document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
+
+							// Clear the hidden fields
+							container2.removeChild(hiddenFnameInput);
+							container2.removeChild(hiddenFileContentInput);
+						});
+					};
+					reader.readAsDataURL(file);
+				} else if (file.type.startsWith('video/')) {
+					const reader = new FileReader();
+					reader.readAsDataURL(file);
+					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(`${key}_zz`).style.display = 'none';
+						document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
+						x.style.display = 'block';
+						x.style.position = 'absolute';
+						document.getElementById(`${key}_x`).addEventListener('click', () => {
+							img.style.display = 'none';
+							img.src = '';
+							thumb.style.display = 'none';
+							x.style.display = 'none';
+
+							filename.style.display = 'none';
+							document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
+							input.value = ''
+
+							// Clear the hidden fields
+							container2.removeChild(hiddenFnameInput);
+							container2.removeChild(hiddenFileContentInput);
+						});
+					}
+				}
+				else {
+					console.log('Unsupported file type');
+				}
+			}
+		});
+
+
+		const x = document.createElement('span')
+		x.setAttribute('id',`${key}_x`)
+		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.addEventListener('click', () => {
+			document.getElementById(`${key}_attachedMedia`).click(); // Trigger click on hidden input
+		});
+		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', 'Capture Video');
+		input2.addEventListener('click', () => {
+			videoCapture(key);
+		});
+		window.processVideoCapture = processVideoCapture;
+
+		const img = document.createElement('img');
+		const thumbnail = document.createElement('video');
+		thumbnail.setAttribute('style', 'display: none');
+		thumbnail.setAttribute('id', `${key}_thumbnail`);
+
+		img.setAttribute('id', `${key}_zz`);
+		img.setAttribute('style', 'display: none');
+
+		const filename = document.createElement('span');
+		filename.setAttribute('id', `${key}_fname`);
+		filename.setAttribute('name', `${key}`);
+		filename.setAttribute('type', 'text');
+		filename.setAttribute('style', 'display: none; font-size: inherit;');
+
+		// Append all elements to the container
+		const container3 = document.createElement('div');
+		container2.appendChild(x);
+		container3.setAttribute('id', `${key}_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
+
+		return container
+	} catch (err) {
+		throw err
+	}
+}
+
+/**
+ * 
+ * @param {*} key
+ *      will serve as id of input field  
+ * @param {*} validation
+ *      validation of field from schema 
+ * @returns
+ *      created input field element 
+ */
 const inputFingerprintCapture = (key, validation) => {
 	try {
 		const {
@@ -1379,9 +1578,11 @@ const deconstruct = async (section, container, classAttribute) => {
 					input = await inputDbLookup(key, validation)
 					break
 				case 'image-capture':
-				case 'video-capture':
 					input = inputImageCapture(key, validation)
 					break
+				case 'video-capture':
+					input = inputVideoCapture(key, validation)
+					break
 				case 'fingerprint':
 					input = inputFingerprintCapture(key, validation)
 					break

WebGde/WebContent/WebGde-Widgets/Submit/XMLWriter/XML_Saver.js

@@ -158,17 +158,17 @@ async function createBPOXML(fields, metrics, doctype, section){
         "userId": sessionStorage.getItem("user_id"),
         "elementId": elementId,
         "schema": SCHEMA_FILE_PATH,
-        "totalRec":filePaths.length,
+        "totalRec":"0",
         "maxRec": "1",
         "totalKeystroke": metrics[0],
         "procTime": "",
         "procDuration": metrics[1],
         "eob": "",
         "exceptionRemark": "",
-        "recordNo": parseInt(sessionStorage.getItem("display_counter")) + 1,
+        "recordNo": "0",
         "totalSubRec": "1",
         "maxSubRec": "1",
-        "imageName": filePaths[parseInt(sessionStorage.getItem("display_counter"))],
+        "imageName": "",
         "subRecordNo": "1",
         "eor": "N",
         "fields": fields,

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

@@ -111,7 +111,11 @@ export const submitForm = async (e) => {
 					});
 					console.log(await getFile.text());
 					// await uploadTOGFS(await getFile.text(), sessionStorage.getItem("recentlySavedFileName"));
-			}else if(IS_RETRIEVE_FROM_BPO === "Y"){
+				} else {
+					createInfoModal(null, 'OK', 'Error while uploading');
+					return false
+				}
+			}else {
 				let response = await WriteForm(e, [], doctype, section);
 				await batchUpload(Form);
 				if (response !== false) {
@@ -128,12 +132,6 @@ export const submitForm = async (e) => {
 					});
 				}
 			}
-
-
-			}else{
-				createInfoModal(null, 'OK', 'Error while uploading');
-				return false
-			}
 			// saveForm(sessionStorage.getItem("display_counter"));
 		}
 		return true

WebGde/WebContent/WebGde-Widgets/config.js

@@ -10,9 +10,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://54.208.45.179:8080"
+export const  DOMAIN = "http://100.24.19.34:8080"
 export const  CONTEXTROOT = "gfs-explorer-ws"
-export const  GDE_URL = DOMAIN + "/MobileGde/svc/gfs-rest"
+export const  GDE_URL = DOMAIN + "/MobileGdeDev/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"
@@ -20,7 +20,7 @@ export const  IS_RETRIEVE_FROM_GFS = "N"
 export const  INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLock,Pause,PageUp,PageDown,Insert,Delete,Control"
 
 //BPO CONFIG
-export const  IS_RETRIEVE_FROM_BPO = "Y"
+export const  IS_RETRIEVE_FROM_BPO = "N"
 // export const  BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
 // export const  CURRENT_NODE = "Web GDE"
 export const  BPO_URL = DOMAIN + "/bpo/";

WebGde/WebContent/WebGde-Widgets/sample_schema/schema_sqa.json

@@ -13,7 +13,7 @@
         "fieldLabel" : "Patient Image",
         "aka" : "field1",
         "validation" : {
-          "collection" : "image-capture",
+          "collection" : "video-capture",
           "mandatory" : true
         }
       },

WebGde/WebContent/script.js

@@ -44,16 +44,17 @@ async function initializeWebGDE() {
 
 
 	// UNCOMMENTED BY ADAM 9/25/2023
+	sessionStorage.setItem("element_id","element1");
 
-	/*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();
 	removeLoadingScreen();
 
-	new ElementListWidget('Web_GDE_DEV', 'containerId');
+	// new ElementListWidget('Web_GDE_DEV', 'containerId');
 
 }
 
@@ -135,17 +136,12 @@ export function removeLoadingScreen() {
 
 }
 
-<<<<<<< WebGde/WebContent/script.js
 export async function resetGDE(){
     // TO-DO
 }
 
 function init(){
     console.log("Application Started");
-=======
-function init() {
-	console.log("Application Started");
->>>>>>> WebGde/WebContent/script.js
 }
 
 function testFunction() {