codejson-generator/index.html at af2019cd69531b4d08f646599b7356a11b08ba5e · DSACMS/codejson-generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
		<!-- <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://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://cdn.jsdelivr.net/npm/formiojs@4.21.6/dist/formio.full.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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> -->
		<!-- <script src="https://cdn.form.io/uswds/uswds.min.js" defer></script> -->
		<!-- <script src="https://cdn.form.io/formiojs/formio.form.min.js" defer></script> -->
		<!-- <script src="https://cdn.form.io/formiojs/formio.full.js" defer></script> -->
		<!-- <script src="https://cdn.form.io/js/formio.embed.js" defer></script> -->

		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.0/css/uswds.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.0/fonts/fonts.css">
		<link rel="stylesheet" href="https://unpkg.com/formiojs@4.21.6/dist/formio.full.min.css">
		<link rel="stylesheet" href="css/styles.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.0/js/uswds.min.js" defer></script>
		<script src="https://unpkg.com/formiojs@4.21.6/dist/formio.full.min.js"></script>

		<!-- Render the form -->
		<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);
							createCodeJson(submission.data);
						});
					});
				})
				.catch((error) => {
					console.error("Error creating components:", error);
				});
		</script>
	</head>
	<body>
		<div id="form-header"></div>
		<div id="formio"></div>
		<div id="output" class="margin-top-3">
			<label for="json-result">Your JSON Metadata </label>
        	<textarea class="form-control usa-textarea" rows="10" id="json-result" readonly></textarea>
			<button type="button" class="btn btn-outline usa-button" href="#" onclick="copyToClipboard(event)">Copy</button>
			<button type="button" class="btn btn-outline usa-button" href="#" onclick="downloadFile(event)">Download</button>
		</div>
	</body>
</html>