WG-486 implementation

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

@@ -235,6 +235,14 @@ label {
 	margin-left: 10px;
 }
 
+.titleContainer{
+	margin-left: 0px !important;
+}
+
+.title{
+	font-size: 20px !important;
+}
+
 .inputContainer {
 	display: inline-block;
 	width: 100%;

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

@@ -422,7 +422,7 @@ const inputDate = (key, validation, readOnly) => {
  * @returns
  *      created input field element 
  */
-const inputTime = (key, validation) => {
+const inputTime = (key, validation, readOnly) => {
 	try {
 		const {
 			mandatory,
@@ -435,6 +435,10 @@ const inputTime = (key, validation) => {
 		input.setAttribute('type', 'time')
 		input.addEventListener('focusout', handleInput)
 
+		if (readOnly) {
+            input.setAttribute('readonly', 'true');
+        }
+
 		mandatory ? input.setAttribute('required', 'true') : null
 
 		return input
@@ -1786,7 +1790,7 @@ const deconstruct = async (section, container, classAttribute) => {
 
 			const validation = getValidation(key, schema)
 
-			const { mandatory } = validation;
+			const { mandatory, collection } = validation;
 
 			
 			if (hidden) {
@@ -1807,7 +1811,7 @@ const deconstruct = async (section, container, classAttribute) => {
 				inputContainer.setAttribute('class', 'inputContainer ' + classAttribute)
 				hiddenField.appendChild(inputContainer)
 
-				switch (validation.collection) {
+				switch (collection) {
 					case "geotag":
 					case "altitude":
 					case "direction":
@@ -1842,6 +1846,12 @@ const deconstruct = async (section, container, classAttribute) => {
 			label.style.color = fieldLabel ? '#000000' : '#ff3333'
 			labelContainer.appendChild(label)
 
+			if (collection === 'title'){
+				labelContainer.classList.add('titleContainer');
+				label.classList.add('title');
+				continue;
+			}
+
 			const mandatoryMarker = document.createElement('text');
 			mandatoryMarker.classList.add('asterisk');
 			mandatoryMarker.textContent = "*";
@@ -1861,7 +1871,7 @@ const deconstruct = async (section, container, classAttribute) => {
 			newField.appendChild(inputContainer)
 
 			let input
-			switch (fieldLabel && validation && validation.collection) {
+			switch (fieldLabel && validation && collection) {
 				case 'textarea':
 				case 'alphanumeric':
 				case 'email':
@@ -1906,7 +1916,7 @@ const deconstruct = async (section, container, classAttribute) => {
 					input = inputRadiolist(key, validation, readOnly)
 					break
 				case 'timepicker':
-					input = inputTime(key, validation)
+					input = inputTime(key, validation, readOnly)
 					break
 				case 'daterange':
 					input = inputDateRange(key, validation)
@@ -1923,7 +1933,7 @@ const deconstruct = async (section, container, classAttribute) => {
 			input.classList.add(classAttribute)
 			inputContainer.appendChild(input)
 
-			if (hidden && ["geotag", "altitude", "direction"].includes(validation.collection)){
+			if (hidden && ["geotag", "altitude", "direction"].includes(collection)){
 				newField.style.display = 'none'; // Hide the input
 				newField.classList.add('hidden'); // Add 'hidden' class
 			}

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

 {
   "DEV-SCHEMA" : {
-    "wew" : {
+    "Section1" : {
+      "header_ng_ina_mo":{
+        "fieldLabel" : "Header ng Ina mo",
+        "validation" : {
+          "collection" : "title"
+        }
+      },
       "additional_findings_and_observation" : {
         "fieldLabel" : "Additional findings and observation",
         "aka" : "field2",