print function, evr_no and deviceid collection types.

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

@@ -280,11 +280,19 @@ input[type=checkbox], input[type=radio] {
 	padding: 3px;
 }
 
+.radio-like-checkbox input[type="radio"]{
+	min-width: 23px;
+}
+
 .checkbox {
 	display: flex;
 	padding: 3px;
 }
 
+.checkbox input[type="checkbox"] {
+    min-width: 23px;
+}
+
 input[type=file]::file-selector-button {
 	padding: 5px 10px 5px 10px;
 	border-radius: 2px;

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

@@ -292,6 +292,12 @@ const inputString = (key, validation, readOnly) => {
             input.setAttribute('readonly', 'true');
         }
 
+		if (collection === 'evr_no') {
+            const receiptNumber = generateReceiptNumber();
+            input.setAttribute('value', receiptNumber);
+            input.setAttribute('readonly', 'true');
+        }
+
 		if (fieldLength >= 31 && fieldLength <= 60) {
 			input = document.createElement('TEXTAREA')
 			input.setAttribute('rows', 2)
@@ -1918,6 +1924,11 @@ const deconstruct = async (section, container, classAttribute) => {
 						hiddenInputDeviceId.setAttribute('class', classAttribute);
 						inputContainer.appendChild(hiddenInputDeviceId);
 						break;
+					case "evr_no":
+						const hiddenInputEvrNo = await inputString(key, validation);
+						hiddenInputEvrNo.setAttribute('class', classAttribute);
+						inputContainer.appendChild(hiddenInputEvrNo);
+						break;
 					default:
 						const hiddenInputDefault = inputHidden(key, validation);
 						hiddenInputDefault.setAttribute('class', classAttribute);
@@ -1973,6 +1984,7 @@ const deconstruct = async (section, container, classAttribute) => {
 				case 'textarea':
 				case 'alphanumeric':
 				case 'email':
+				case 'evr_no':
 					input = inputString(key, validation, readOnly)
 					break
 				case 'alphabet':
@@ -2376,6 +2388,10 @@ export async function populateFields() {
 								continue;
 							}
 
+							if (schema[doctype][section][key].validation.collection === 'evr_no'){
+								continue;
+							}
+
 							if (schema[doctype][section][key].validation.collection === 'radiolist') {
 								//retrieve the radio button value from the XML
 								const radioButton = document.querySelector(`#dropdownContainer_${key} input[value="${v}"]`);
@@ -2550,6 +2566,37 @@ export async function populateFields() {
 	// displayFields("fields");
 }
 
+function generateReceiptNumber() {
+    // Function to generate random alphanumeric characters
+    function generateRandomChars(length) {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+        let result = '';
+        for (let i = 0; i < length; i++) {
+            result += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+        return result;
+    }
+
+    // Function to format date and time
+    function formatDateTime(date) {
+        return date.toISOString().slice(0, 10).replace(/-/g, '') + date.toTimeString().slice(0, 8).replace(/:/g, '');
+    }
+
+    // Get current date and time
+    const currentDate = new Date();
+
+    // Generate 5 random alphanumeric characters
+    const randomChars = generateRandomChars(5);
+
+    // Format date and time
+    const formattedDateTime = formatDateTime(currentDate);
+
+    // Combine parts to form the receipt number
+    const receiptNumber = randomChars + '-' + formattedDateTime;
+
+    return receiptNumber;
+}
+
 export function clearForm() {
 	// Check if the form element exists
 	const formElement = document.getElementById("fields");

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

@@ -30,6 +30,7 @@ export const validateInput = (fieldID, value) => {
 			case 'email':
 				return validateEmail(validation, value)
 			case 'alphanumeric':
+			case 'evr_no':
 				return validateAlphanumeric(validation, value)
 			case 'alphabet':
 				return validateAlphabet(validation, value)

WebGde/WebContent/WebGde-Widgets/PrintWidget/print.js

+import { schema } from "../DataInputWidget/generateFields.js";
+import { checkValidValues, validateInput, validateReturnInput } from "../DataInputWidget/validateInput.js";
+import { createLoadingModal, removeLoadingModal } from "../LoadingModal/LoadingModal.js";
+import { createConfirmationModal, createErrorModal } from "../genericPopup/genericPopup.js";
+import { printReceipt } from "./printAndroidInterface.js";
+
+let printButton;
+
+export function printInit() {
+	let buttonContainer = document.getElementById("DocumentcontrolButtonsContainer");
+
+	printButton = document.createElement("button");
+	printButton.id = "printButton";
+	printButton.title = "Print";
+	printButton.classList.add("document-control-button");
+	printButton.textContent = "Print";
+
+	buttonContainer.appendChild(printButton);
+
+	printButton.onclick = async (e) => {
+		createPrintWindow(e);
+	}
+}
+
+export async function createPrintWindow(e) {
+	async function okButtonFunction() {
+		createLoadingModal("Printing Receipt", "Please wait...", null, null, null);
+		let printStatus = await printForm(e);
+		if (printStatus) {
+			removeLoadingModal();
+		} else {
+			removeLoadingModal();
+		}
+	}
+	createConfirmationModal(okButtonFunction, "Print receipt?");
+}
+
+async function printForm(e) {
+	const Form = document.getElementById("fields");
+	const { elements } = Form;
+	let error = false;
+	let errorMsg = null;
+	let doctype;
+	let section;
+	let keys = [];
+
+	// Validate all elements again
+	for (let element of elements) {
+		if (element.style.display === 'none' || element.classList.contains('hidden')) {
+			continue;
+		}
+		const { id, value, type, name } = element
+		const errorContainer = document.getElementById(`${id}_error`);
+		// Skip submit, buttons, and files
+		if (element.classList.contains('radioOther') || element.classList.contains('checkboxOther')) continue;
+		if (element.classList.contains('geotag') || element.classList.contains('geotagstart') || element.classList.contains('altitude') || element.classList.contains('direction') || element.classList.contains('deviceid')) {
+			continue;
+		}
+		if (type === 'submit') continue
+		if (type === 'file') continue
+		if (type === 'hidden') continue
+		if (element.classList.contains('radioOption') && id.length === 0) continue
+		if (element.classList.contains('checkboxOption') && id.length === 0) continue
+		if (id === 'DocType') {
+			doctype = element.options[element.selectedIndex].text;
+			continue;
+		}
+		if (id === 'Section') {
+			section = element.options[element.selectedIndex].text;
+			continue;
+		}
+
+		const { valid, errors } = validateInput(id, value)
+
+		var { isValidValue, errMsg } = checkValidValues(id, value);
+		console.log(valid + " " + errors + " " + isValidValue + " " + errMsg)
+
+		if (typeof errMsg !== "undefined") {
+			errorMsg = errMsg;
+		}
+
+		// Update display of input field if input is not valid
+		if (!valid) {
+			console.log(element);
+			error = true
+			if (type === 'select-one') {
+				continue
+			}
+			if (type === 'button') {
+				errorContainer.innerHTML = errors;
+				continue
+			}
+			if (type === 'radio') {
+				errorContainer.innerHTML = errors;
+				continue
+			}
+			if (type === 'checkbox') {
+				errorContainer.innerHTML = errors;
+				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');
+			errorContainer.innerHTML = errors;
+			field.select();
+		}
+	}
+
+	// TO-DO Separate validation for attached media (Image, Video, File)
+	for (let key of keys) {
+		const inputElement = document.getElementById(`${key}_attachedMedia`);
+		if (inputElement.files.length === 0) {
+			console.log(key + " empty");
+			let emptyMedia = document.getElementsByClassName(key);
+			console.log(emptyMedia[0]);
+		}
+	}
+
+	// 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) {
+			createErrorModal(null, 'Return', errorMsg);
+		} else {
+			createErrorModal(null, 'Return', 'Invalid or Missing data on highlighted fields!');
+		}
+		return
+	} else {
+		let response = await submitForPrint(e, doctype, section);
+		return response;
+	}
+}
+
+export async function submitForPrint(e, doctype, section) {
+	var Frm = document.getElementById("fields");
+	var Nodes = Frm.elements;
+	const lookup = schema[doctype][section]
+	// localStorage.setItem("submit", "1");
+
+	let fields = {};
+	fields['worker_id'] = sessionStorage.getItem('user_id');
+	for (var i = 0; i < Nodes.length; i++) {
+		if (Nodes[i].style.display === 'none' && !Nodes[i].classList.contains('hidden')) continue
+		let fid = Nodes[i].id;
+		// Add doctype as field1
+		if (fid === 'DocType') {
+			fields['inspection_type'] = Nodes[i].value;
+			continue;
+		}
+		if (fid == 'Section' || fid == '' || fid == "submitButton") continue
+		// Skip the textbox in checklist and radiolist
+		if (Nodes[i].classList.contains('radioOther') || Nodes[i].classList.contains('checkboxOther')) continue;
+		// Skip elements of type "button", "submit", and files
+		if (Nodes[i].type === 'button' || Nodes[i].type === 'submit' || fid == '' || Nodes[i].name === 'hidden_file_content') continue;
+
+		// If the input element is the start date of date range element
+		if (Nodes[i].name == 'startDate') {
+			//Store its value and + the value of the next element
+			fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value + '*' + Nodes[i + 1].value;
+			i += 1; //increment +1 to skip the endDate
+			continue;
+		}
+		// If the first radio button was found
+		if (Nodes[i].classList.contains('radioFirst')) {
+			var key = fid;
+			const radioButtons = document.getElementsByName(`radioChoices_${key}`);
+			let selectedValue;
+			//check if the value is checked to find the selected value
+			radioButtons.forEach(radio => {
+				if (radio.checked && radio.value) {
+					selectedValue = radio.value;
+					console.log(selectedValue)
+				}
+			});
+
+			fields[fid] = selectedValue;
+			i += radioButtons.length - 1; //increment the number of radio buttons to skip the other radio button inputs.
+			continue;
+		}
+
+		// If the first checkbox was found
+		if (Nodes[i].classList.contains('checkboxFirst')) {
+			var key = fid;
+			const checkboxButtons = document.getElementsByName(`checkboxChoices_${key}`);
+			let selectedValue = '';
+			let isFirstChecked = true; // Variable to track the first checked checkbox
+			//check each checkbox if it is checked to find the values.
+			checkboxButtons.forEach(check => {
+				if (check.checked && check.value) {
+					if (!isFirstChecked) {
+						selectedValue += ",";
+					} else {
+						isFirstChecked = false;
+					}
+					selectedValue += check.value;
+				}
+			});
+
+			fields[fid] = selectedValue;
+			i += checkboxButtons.length - 1; //increment the number of checkboxes to skip the checkboxes input
+			continue;
+		}
+		fields[fid] = Nodes[i].value;
+	}
+
+    console.log(fields);
+	const fieldsJSON = JSON.stringify(fields);
+	return await printReceipt(fieldsJSON);
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/PrintWidget/printAndroidInterface.js

+export async function printReceipt(fields){
+    return await window.PrinterJavascriptInterface.printReceipt(fields);
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/config.js

@@ -34,6 +34,7 @@ export const SHOW_ELEMENT_LIST_VIEWER = "Y"
 export const ADD_NEW_OPTION = "N"
 export const DISPLAYED_DETAILS = "extra1|extra2|extra3" //pipe-delimited
 export const USERID_FIELD = "extra3"
+export const ENABLE_PRINT = "Y"
 
 export const PDF_EXTENSION = ".pdf"
 export const JPG_EXTENSION = ".jpg"

WebGde/WebContent/WebGde-Widgets/documentControlWidget/DocumentControl.css

@@ -4,6 +4,8 @@
     height: 70px;
     background-color: white;
     margin-top: auto;
+    padding-left: 15px;
+    padding-right: 15px;
 }
 
 .document-control-button {
@@ -21,12 +23,19 @@
     font-weight: bold;
     background-color: #096835;
     margin-left: 5px;
-    margin-right: 25px;
+    margin-right: 5px;
 }
 
 #rejectButton {
     font-weight: bold;
     background-color: #9B0404;
-    margin-left: 25px;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+#printButton {
+    font-weight: bold;
+    background-color: #e37200;
+    margin-left: 5px;
     margin-right: 5px;
 }
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js

 import { createRejectWindow } from '../BPO/rejectElement.js';
 import { createReturnWindow } from '../BPO/returnElement.js';
 import { goBackToElementListViewer } from '../ElementListWidget/ElementListWidget.js';
+import { createPrintWindow } from '../PrintWidget/print.js';
 import { completeToNextNode, createSubmitWindow, submitForm } from '../Submit/submit.js';
-import { IS_RETRIEVE_FROM_BPO, ROOT_FOLDER, SHOW_ELEMENT_LIST_VIEWER } from '../config.js';
+import { ENABLE_PRINT, IS_RETRIEVE_FROM_BPO, ROOT_FOLDER, SHOW_ELEMENT_LIST_VIEWER } from '../config.js';
 import { createInfoModal } from '../genericPopup/genericPopup.js';
 import { BPO_OBJECT, DISPLAY_FIELD_OBJECT, DOCUMENT_CONTROL_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from '../globalVariable.js';
 
@@ -12,7 +13,8 @@ export class DocumentControlWidget {
 		container: null,
 		submitBtn: null,
 		returnBtn: null,
-		rejectBtn: null
+		rejectBtn: null,
+		printBtn: null
 	}
 
 	constructor() {
@@ -41,14 +43,21 @@ export class DocumentControlWidget {
 		this.global.rejectBtn.title = "Reject";
 		this.global.rejectBtn.classList.add("document-control-button");
 		this.global.rejectBtn.textContent = "Reject";
+
+		this.global.printBtn = document.createElement("button");
+		this.global.printBtn.id = "printButton";
+		this.global.printBtn.title = "Print";
+		this.global.printBtn.classList.add("document-control-button");
+		this.global.printBtn.textContent = "Print";
 	
 		if (IS_RETRIEVE_FROM_BPO === "Y") {
-			this.global.container.appendChild(this.global.rejectBtn);
-			this.global.container.appendChild(this.global.submitBtn);
-		} else {
-			this.global.container.appendChild(this.global.rejectBtn);
-			this.global.container.appendChild(this.global.submitBtn);
+			this.global.container.appendChild(this.global.rejectBtn);	
+		} 
+		if (ENABLE_PRINT === "Y") {
+			this.global.container.appendChild(this.global.printBtn);
 		}
+
+		this.global.container.appendChild(this.global.submitBtn);
 	
 		this.addEvenListeners();
 	}
@@ -87,6 +96,10 @@ export class DocumentControlWidget {
 			createRejectWindow();
 		}
 
+		this.global.printBtn.onclick = (e) => {
+			createPrintWindow();
+		}
+
 	}
 
 	getWidget() {

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

-{
+{ 
+  "_attributes": {
+    "readOnly": true
+  },
   "DEV-SCHEMA" : {
     "Section1" : {
       "header_ng_ina_mo":{
@@ -46,7 +49,7 @@
           "items" : [ "Yes", "No", "Not Required/Not Applicable" ],
           "mandatory" : false
         },
-        "readOnly" : true
+        "readOnly" : false
       },
       "age" : {
         "fieldLabel" : "Age",
@@ -56,7 +59,7 @@
           "collection" : "numeric",
           "mandatory" : false
         },
-        "readOnly" : true
+        "readOnly" : false
       },
       "identification_card_presented" : {
         "fieldLabel" : "Identification Card Presented",
@@ -67,7 +70,7 @@
           "options" : [ "Airman License", "Company ID Card", "Driver's License", "Fishworker's License issued by BFAR", "GSIS Card", "Health or Medical Card", "OWWA E-Card", "Phil Health ID Card", "Philippine Postal ID", "PNP Firearm License Card", "Police Clearance", "PRC ID Card", "School ID Card", "Seafarer's Record Book (SRB)", "Senior Citizen ID", "SSS Card", "Student Permit issued by LTO", "TIN Card", "UMID Card", "Voter's ID" ],
           "mandatory" : false
         },
-        "readOnly" : true
+        "readOnly" : false
       },
       "nature_of_offense" : {
         "fieldLabel" : "Nature of Offense",
@@ -78,7 +81,7 @@
           "items" : [ "Urinating/Defecating/Indiscriminate Disposal", "Littering", "Dirty Frontage/Surroundings", "Improper Disposal", "Dumping of Grease/Fat/Lard and Oil Residue in Drainage/waterways", "Disposal of Untreated wasteways", "sludge", "chemicals in waterways", "No Trash can in Public Utility Jeep", "Illegal Spillage/Scattering", "Illegal Recycling/Sorting", "Burning of Waste", "No Canvass Cover", "Unsanitized Truck", "No Proper Cleaning/Clearing Materials" ],
           "mandatory" : false
         },
-        "readOnly" : true
+        "readOnly" : false
       },
       "place" : {
         "fieldLabel" : "Place",
@@ -88,7 +91,7 @@
           "collection" : "timepicker",
           "mandatory" : false
         },
-        "readOnly" : true
+        "readOnly" : false
       },
       "Image" : {
         "fieldLabel" : "Image",

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

+{
+    "DOCUMENT_TYPE":{
+        "_attributes": {
+            "readonly": false
+        },
+        "SECTION1": {
+            "field10": {
+                "fieldLabel" : "field10",
+                "aka" : "field10",
+                "validation" : {
+                  "fieldLength" : 40.0,
+                  "collection" : "alphanumeric",
+                  "mandatory" : true
+                }
+            }
+        }
+    },
+    "DOCUMENT_TYPE2":{
+        "_attributes": {
+            "readonly": true
+        },
+        "SECTION1": {
+            "field10": {
+                "fieldLabel" : "field10",
+                "aka" : "field10",
+                "validation" : {
+                  "fieldLength" : 40.0,
+                  "collection" : "alphanumeric",
+                  "mandatory" : true
+                }
+            }
+        }
+    }
+}

WebGde/WebContent/script.js

@@ -9,6 +9,7 @@ import { INDEXED_DB_STORAGE, HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_N
 import { SHOW_ELEMENT_LIST_VIEWER, CURRENT_NODE, IS_RETRIEVE_FROM_BPO } from "./WebGde-Widgets/config.js";
 import { fallbackLogin } from "./WebGde-Widgets/LogInWidget/LoginJavaInterface.js";
 import { BPO } from "./WebGde-Widgets/BPO/getElement.js";
+import { printInit } from "./WebGde-Widgets/PrintWidget/print.js";
 
 document.addEventListener("DOMContentLoaded", function() {
 	startApplication();