alphons / WebFormBuilder
Code Commits Branches Issues Collaborators Settings

ok

alphons <alphons@heijden.com> 1 Jan 2025, 14:52
cf9b17f4f4d96b0f11799ff89301ed20f9686ffe
6 files changed
  • WebFormBuilder/wwwroot/Default.js
  • WebFormBuilder/wwwroot/Index.html
  • WebFormBuilder/wwwroot/WebForm.css
  • WebFormBuilder/wwwroot/WebForm.js
  • WebFormBuilder/wwwroot/script.js
  • WebFormBuilder/wwwroot/styles.css
diff --git a/WebFormBuilder/wwwroot/Default.js b/WebFormBuilder/wwwroot/Default.js
new file mode 100644
index 0000000..0ef2d31
--- /dev/null
+++ b/WebFormBuilder/wwwroot/Default.js
@@ -0,0 +1,125 @@
+
+import generateForm from './WebForm.js';
+
+async function fetchFormConfig(name)
+{
+ try
+ {
+ const response = await fetch('/api/FormConfig?name=' + name);
+
+ if (!response.ok)
+ throw new Error(`HTTP error! Status: ${response.status}`);
+
+ const data = await response.json();
+ return data;
+ }
+ catch (error)
+ {
+ console.error("Error fetching form configuration:", error);
+ return [];
+ }
+}
+
+async function submitFormData(event)
+{
+ event.preventDefault();
+
+ try
+ {
+ const response = await fetch('/api/SubmitData',
+ {
+ method: 'POST',
+ body: new FormData(event.target)
+ });
+
+ if (response.ok)
+ {
+ const result = await response.json();
+ console.log('Success:', result);
+ } else
+ {
+ console.error('Error:', response.statusText);
+ }
+
+ }
+ catch (error)
+ {
+ console.error("Error submitting form data:", error);
+ }
+}
+
+async function handleInputEvent(event)
+{
+ const inputElement = event.target;
+ const type = inputElement.type;
+ const name = inputElement.name;
+ const val = inputElement.value;
+ var state = "";
+ if (type === "checkbox")
+ state = inputElement.checked ? 'checked' : 'unchecked';
+
+ try
+ {
+ const response = await fetch('/api/SubmitValue',
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(
+ {
+ type: type,
+ name: name,
+ val: val,
+ state: state
+ })
+ });
+
+ if (response.ok)
+ {
+ const result = await response.json();
+ console.log('Success:', result);
+ }
+ else
+ {
+ console.error('Error:', response.statusText);
+ }
+ }
+ catch (error)
+ {
+ console.error("Error submitting form data:", error);
+ }
+}
+
+
+async function handleNavigationEvent(event)
+{
+ event.preventDefault();
+
+ if (!event.target.name)
+ return;
+
+ const formConfig = await fetchFormConfig(event.target.name);
+
+ document.getElementById("output").innerHTML = JSON.stringify(formConfig, null, 2);
+
+ const form = generateForm("formcontainer", "formDynamic", formConfig);
+
+ form.addEventListener('input', handleInputEvent);
+
+ form.addEventListener("submit", submitFormData);
+
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+
+document.addEventListener('DOMContentLoaded', async () =>
+{
+ const formConfig = await fetchFormConfig('navigation');
+
+ const form = generateForm("navcontainer", "formNavigation", formConfig);
+
+ form.addEventListener('click', handleNavigationEvent);
+
+ form.querySelector('input').click();
+});
diff --git a/WebFormBuilder/wwwroot/Index.html b/WebFormBuilder/wwwroot/Index.html
index cc44b1e..3307ea5 100644
--- a/WebFormBuilder/wwwroot/Index.html
+++ b/WebFormBuilder/wwwroot/Index.html
@@ -5,13 +5,13 @@
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABJUlEQVR42mL8//8/AymAiSTiDZDAhFysP/g5BljGbMRCEU3/zsBmAUkCEqIMFSRzkRYA3f2ZAXzgFZ/g8ARX5zc+PP7BqZDQA/2FgA2JMI6AyLOEEx5hAFRBHwjCg9CQF0lgA1hwRgC9LB/ALMZKqIJewg6qP7GgADgrgGpqZkRYYgIxAWFgdAgyZmHInhG6Ym1BBMA4L40FpkYViLojBE6mEoCTGCIqwMsCwL90mC8TEPMFIQKTHgDkvQoW8oImAQQUXvAEIaYgQAykmGsBMJEE6AATj7z+PE5AxMLFSYgGAJZIoZYQyJR2AwBp+LkImCUEAAgwFpkUEjGI2AAkAh1eJK3oWqgAAAABJRU5ErkJggg==" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Radio and Checkbox Styling</title>
- <link rel="stylesheet" href="styles.css">
- <script src="script.js" defer></script>
+ <title>WebFormBuilder</title>
+ <link rel="stylesheet" href="WebForm.css">
+ <script type="module" src="Default.js" defer></script>
</head>
<body>
- <div id="navigation" class="form-container"></div>
- <div id="form1" class="form-container"></div>
+ <div id="navcontainer" class="form-container"></div>
+ <div id="formcontainer" class="form-container"></div>
<pre id="output" class="form-container" style="white-space: pre-wrap; overflow: hidden"></pre>
</body>
</html>
diff --git a/WebFormBuilder/wwwroot/styles.css b/WebFormBuilder/wwwroot/WebForm.css
similarity index 100%
rename from WebFormBuilder/wwwroot/styles.css
rename to WebFormBuilder/wwwroot/WebForm.css
diff --git a/WebFormBuilder/wwwroot/script.js b/WebFormBuilder/wwwroot/WebForm.js
similarity index 74%
rename from WebFormBuilder/wwwroot/script.js
rename to WebFormBuilder/wwwroot/WebForm.js
index fdfafd9..422e077 100644
--- a/WebFormBuilder/wwwroot/script.js
+++ b/WebFormBuilder/wwwroot/WebForm.js
@@ -1,50 +1,25 @@
-async function fetchFormConfig(name)
+
+export default function generateForm(formContainerId, name, formConfig)
{
- try
- {
- const response = await fetch('/api/FormConfig?name=' + name);
-
- if (!response.ok)
- throw new Error(`HTTP error! Status: ${response.status}`);
-
- const data = await response.json();
- return data;
- }
- catch (error)
- {
- console.error("Error fetching form configuration:", error);
- return [];
- }
-}
+ const formContainer = document.getElementById(formContainerId)
-async function submitFormData(event)
-{
- event.preventDefault();
+ const form = document.createElement("form");
+ form.id = name;
- try
+ formConfig.forEach((field) =>
{
- const response = await fetch('/api/SubmitData',
- {
- method: 'POST',
- body: new FormData(event.target)
- });
+ field.Type = (field.Type ?? "text").toLowerCase();
+ field.Label ??= toPascalCase(field.Name);
+ const wrapper = document.createElement("div");
+ generateField(field, wrapper);
+ form.appendChild(wrapper);
+ });
- if (response.ok)
- {
- const result = await response.json();
- console.log('Success:', result);
- } else
- {
- console.error('Error:', response.statusText);
- }
+ formContainer.replaceChildren();
+ formContainer.appendChild(form);
- }
- catch (error)
- {
- console.error("Error submitting form data:", error);
- }
+ return form;
}
-
function createTooltip(text)
{
const tooltipWrapper = document.createElement("span");
@@ -71,25 +46,6 @@ function toPascalCase(str)
.toUpperCase());
}
-async function generateForm(formContainer, name, formConfig)
-{
- const form = document.createElement("form");
- form.id = name;
- form.addEventListener("submit", submitFormData);
-
- formConfig.forEach((field) =>
- {
- field.Type = (field.Type ?? "text").toLowerCase();
- field.Label ??= toPascalCase(field.Name);
- const wrapper = document.createElement("div");
- generateField(field, wrapper);
- form.appendChild(wrapper);
- });
-
- formContainer.replaceChildren();
- formContainer.appendChild(form);
-}
-
function generateField(field, wrapper)
{
if (field.Type === "hidden")
@@ -375,80 +331,3 @@ function createButtonOrHidden(field)
return element;
}
-async function handleInputEvent(event)
-{
- const inputElement = event.target;
- const type = inputElement.type;
- const name = inputElement.name;
- const val = inputElement.value;
- var state = "";
- if (type === "checkbox")
- state = inputElement.checked ? 'checked' : 'unchecked';
-
- try
- {
- const response = await fetch('/api/SubmitValue',
- {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(
- {
- type: type,
- name: name,
- val: val,
- state: state
- })
- });
-
- if (response.ok)
- {
- const result = await response.json();
- console.log('Success:', result);
- }
- else
- {
- console.error('Error:', response.statusText);
- }
- }
- catch (error)
- {
- console.error("Error submitting form data:", error);
- }
-}
-
-
-async function handleNavigationEvent(event)
-{
- event.preventDefault();
-
- if (!event.target.name)
- return;
-
- const formConfig = await fetchFormConfig(event.target.name);
-
- document.getElementById("output").innerHTML = JSON.stringify(formConfig, null, 2);
-
- const form1 = document.getElementById('form1');
-
- form1.addEventListener('input', handleInputEvent);
-
- generateForm(form1, "formDynamic", formConfig);
-
- window.scrollTo({ top: 0, behavior: 'smooth' });
-}
-
-
-document.addEventListener('DOMContentLoaded', async () =>
-{
- const formConfig = await fetchFormConfig('navigation');
-
- const navigation = document.getElementById('navigation');
-
- navigation.addEventListener('click', handleNavigationEvent);
-
- generateForm(navigation, "formNavigation", formConfig);
-
- navigation.querySelector('input').click();
-});