DSACMS · natalialuzuriaga · Dec 11, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
diff --git a/form.html b/form.html
@@ -0,0 +1,58 @@
+<html>
+	<head>
+		<!-- USWDS not working -->
+		<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
+		<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
+		<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css"> -->
+		<!-- <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css"> -->
+		<!-- <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css"> -->
+		<!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/formio.full.min.css"> -->
+		<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script> -->
+		<!-- <script src="https://cdn.form.io/formiojs/formio.form.min.js"></script> -->
+		<!-- <script src="https://cdn.form.io/uswds/uswds.min.js"></script> -->
+		<!-- <script src="https://cdn.form.io/formiojs/formio.full.js"></script> -->
+		<!-- <script src="https://cdn.form.io/js/formio.embed.js"></script> -->
+
+		<!-- Uses bootstrap for now -->
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
+		/>
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
+		/>
+
+		<!-- Working Form.io CDN -->
+		<script src="https://unpkg.com/[email protected]/dist/formio.full.min.js"></script>
+	</head>
+	<body>
+		<div id="formio"></div>
+		<script src="js/generateFormComponents.js"></script>
+		<script src="js/formDataToJson.js"></script>
+		<script type="text/javascript">
+			createFormComponents()
+				.then((components) => {
+					Formio.createForm(document.getElementById("formio"), {
+						display: "form",
+						theme: "primary",
+						settings: {
+							pdf: {
+								id: "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
+								src: "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
+							},
+						},
+						components: components,
+					}).then(function (form) {
+						form.on("submit", function (submission) {
+							console.log("form submission here:", submission);
+							downloadFile(submission.data);
+						});
+					});
+				})
+				.catch((error) => {
+					console.error("Error creating components:", error);
+				});
+		</script>
+	</body>
+</html>
diff --git a/js/formDataToJson.js b/js/formDataToJson.js
@@ -0,0 +1,68 @@
+// Retrieves file and returns as json object
+async function retrieveFile(filePath) {
+	try {
+		const response = await fetch(filePath);
+
+		if (!response.ok) {
+			throw new Error("Network response was not ok");
+		}
+		// Returns file contents in a json format
+		return await response.json();
+	} catch (error) {
+		console.error("There was a problem with the fetch operation:", error);
+		return null;
+	}
+}
+
+// Populates blank code.json object with values from form
+function populateObject(data, blankObject) {
+	for (let key in data) {
+		console.log("current key", key);
+		console.log("check if value exists", data.hasOwnProperty(key));
+		if (blankObject.hasOwnProperty(key)) {
+			if (typeof data[key] === "object" && data[key] !== null) {
+				// If object, recursively populate
+				// TODO: test out for permissions and description objects
+				populateObject(data[key], blankObject[key]);
+			} else {
+				// Add value
+				blankObject[key] = data[key];
+			}
+		}
+	}
+}
+
+async function populateCodeJson(data) {
+	// Path to the blank json file
+	const filePath = "schemas/template-code.json";
+
+	let codeJson = await retrieveFile(filePath);
+
+	if (codeJson) {
+		populateObject(data, codeJson);
+	} else {
+		console.error("Failed to retrieve JSON data.");
+	}
+
+	console.log("FINAL CODE JSON HERE", codeJson);
+	return codeJson;
+}
+
+// Creates code.json and triggers file download
+async function downloadFile(data) {
+	delete data.submit;
+	const codeJson = await populateCodeJson(data);
+
+	const jsonString = JSON.stringify(codeJson, null, 2);
+	const blob = new Blob([jsonString], { type: "application/json" });
+
+	// Create anchor element and create download link
+	const link = document.createElement("a");
+	link.href = URL.createObjectURL(blob);
+	link.download = "code.json";
+
+	// Trigger the download
+	link.click();
+}
+
+window.downloadFile = downloadFile;
diff --git a/js/generateFormComponents.js b/js/generateFormComponents.js
@@ -0,0 +1,70 @@
+// Retrieves file and returns as json object
+async function retrieveFile(filePath) {
+	try {
+		const response = await fetch(filePath);
+
+		// Check if the response is OK (status code 200)
+		if (!response.ok) {
+			throw new Error("Network response was not ok");
+		}
+		// Return the parsed JSON content
+		return await response.json();
+	} catch (error) {
+		console.error("There was a problem with the fetch operation:", error);
+		return null;
+	}
+}
+
+// Creates Form.io component based on json fields
+// Supports text field for now
+// TODO: Create components for number, select, and multi-select
+function createComponent(fieldName, fieldObject) {
+	switch (fieldObject["type"]) {
+		case "string":
+			return {
+				type: "textfield",
+				key: fieldName,
+				label: fieldName,
+				input: true,
+				tooltip: fieldObject["description"],
+				description: fieldObject["description"],
+			};
+		default:
+			break;
+	}
+}
+
+// Iterates through each json field and creates component array for Form.io
+async function createFormComponents() {
+	let components = [];
+	let formFields = {};
+
+	const filePath = "schemas/schema.json";
+	let jsonData = await retrieveFile(filePath);
+	console.log("JSON Data:", jsonData);
+
+	formFields = jsonData["properties"];
+	console.log("form Fields:", formFields);
+
+	for (const key in formFields) {
+		console.log(`${key}:`, formFields[key]);
+		var fieldComponent = createComponent(key, formFields[key]);
+		components.push(fieldComponent);
+	}
+
+	// Add submit button to form
+	components.push({
+		type: "button",
+		label: "Submit",
+		key: "submit",
+		disableOnInvalid: true,
+		input: true,
+		tableView: false,
+	});
+
+	console.log(components);
+
+	return components;
+}
+
+window.createFormComponents = createFormComponents;
diff --git a/schemas/schema.json b/schemas/schema.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "http://json-schema.org/draft-04/schema#",
+	"title": "CMS Code.json Metadata",
+	"description": "A metadata standard for software repositories of CMS",
+	"type": "object",
+	"properties": {
+		"name": {
+			"type": "string",
+			"description": "Name of the project or software"
+		},
+		"softwareDescription": {
+			"type": "string",
+			"description": "project description here"
+		}
+	}
+}
diff --git a/schemas/template-code.json b/schemas/template-code.json
@@ -0,0 +1,4 @@
+{
+	"name": "",
+	"softwareDescription": ""
+}