alphons / WebFormBuilder
Code Commits Branches Issues Collaborators Settings

working on examples

alphons <alphons@heijden.com> 29 Dec 2024, 16:09
fac580faccf40bc160e4513eee004974f7292151
17 files changed
  • WebFormBuilder/Controllers/FormConfigController.cs
  • WebFormBuilder/Examples/checkbox.json
  • WebFormBuilder/Examples/combobox.json
  • WebFormBuilder/Examples/email.json
  • WebFormBuilder/Examples/file.json
  • WebFormBuilder/Examples/formConfigData.json
  • WebFormBuilder/Examples/navigation.json
  • WebFormBuilder/Examples/number.json
  • WebFormBuilder/Examples/password.json
  • WebFormBuilder/Examples/radio.json
  • WebFormBuilder/Examples/select.json
  • WebFormBuilder/Examples/text.json
  • WebFormBuilder/Examples/textarea.json
  • WebFormBuilder/formConfigData.json
  • WebFormBuilder/wwwroot/Index.html
  • WebFormBuilder/wwwroot/script.js
  • WebFormBuilder/wwwroot/styles.css
diff --git a/WebFormBuilder/Controllers/FormConfigController.cs b/WebFormBuilder/Controllers/FormConfigController.cs
index 7452345..a469d25 100644
--- a/WebFormBuilder/Controllers/FormConfigController.cs
+++ b/WebFormBuilder/Controllers/FormConfigController.cs
@@ -9,11 +9,11 @@ namespace WebFormBuilder.Controllers;
public class FormConfigController : ControllerBase
{
[HttpGet]
- public async Task<IActionResult> GetFormConfig()
+ public IActionResult GetFormConfig([FromQuery] string name)
{
List<FormField>? list = [];
- var jsonFilePath = Path.Combine(AppContext.BaseDirectory, "formConfigData.json");
+ var jsonFilePath = Path.Combine(AppContext.BaseDirectory, "Examples", name + ".json");
if (!System.IO.File.Exists(jsonFilePath))
return NotFound();
@@ -21,15 +21,5 @@ public class FormConfigController : ControllerBase
var stream = new FileStream(jsonFilePath, FileMode.Open, FileAccess.Read, FileShare.Read, bufferSize: 4096, useAsync: true);
return File(stream, "application/json");
-
- //var jsonData = await System.IO.File.ReadAllTextAsync(jsonFilePath);
-
- //return Content(jsonData, "application/json");
-
- //list = JsonSerializer.Deserialize<List<FormField>>(jsonData);
-
- // list ??= FormConfigData.FormFields;
-
- //return Ok(list);
}
}
diff --git a/WebFormBuilder/Examples/checkbox.json b/WebFormBuilder/Examples/checkbox.json
new file mode 100644
index 0000000..82fa3cd
--- /dev/null
+++ b/WebFormBuilder/Examples/checkbox.json
@@ -0,0 +1,11 @@
+[
+ {
+ "Type": "Checkbox",
+ "Name": "hobbies",
+ "Label": "Hobbies",
+ "Tooltip": "Select hobbies.",
+ "Options": [ "Sports", "Music", "Reading" ],
+ "Value": "Music,Sports"
+ }
+]
+
diff --git a/WebFormBuilder/Examples/combobox.json b/WebFormBuilder/Examples/combobox.json
new file mode 100644
index 0000000..fd9618e
--- /dev/null
+++ b/WebFormBuilder/Examples/combobox.json
@@ -0,0 +1,10 @@
+[
+ {
+ "Type": "Combobox",
+ "Name": "Fruit",
+ "Label": "Fruit",
+ "Tooltip": "Select fruit or make new",
+ "Options": [ "Appletje", "Banana", "Cherry", "Date", "Fig", "Grape", "Honeydew" ]
+ }
+]
+
diff --git a/WebFormBuilder/Examples/email.json b/WebFormBuilder/Examples/email.json
new file mode 100644
index 0000000..563132f
--- /dev/null
+++ b/WebFormBuilder/Examples/email.json
@@ -0,0 +1,12 @@
+[
+ {
+ "Type": "Email",
+ "Name": "email",
+ "Label": "Email Address",
+ "Placeholder": "Enter your email address",
+ "Tooltip": "sending email.",
+ "Properties": [ "autocomplete=email" ],
+ "Value": "example@example.com"
+ }
+]
+
diff --git a/WebFormBuilder/Examples/file.json b/WebFormBuilder/Examples/file.json
new file mode 100644
index 0000000..eda4559
--- /dev/null
+++ b/WebFormBuilder/Examples/file.json
@@ -0,0 +1,10 @@
+[
+ {
+ "Type": "File",
+ "Name": "Files",
+ "Label": "Choose a file",
+ "Placeholder": "Select a file",
+ "Tooltip": "Select a file please."
+ }
+]
+
diff --git a/WebFormBuilder/formConfigData.json b/WebFormBuilder/Examples/formConfigData.json
similarity index 100%
rename from WebFormBuilder/formConfigData.json
rename to WebFormBuilder/Examples/formConfigData.json
diff --git a/WebFormBuilder/Examples/navigation.json b/WebFormBuilder/Examples/navigation.json
new file mode 100644
index 0000000..3fff356
--- /dev/null
+++ b/WebFormBuilder/Examples/navigation.json
@@ -0,0 +1,75 @@
+[
+ {
+ "Type": "Button",
+ "Name": "text",
+ "Label": "",
+ "Value": "Text"
+ },
+ {
+ "Type": "Button",
+ "Name": "password",
+ "Label": "",
+ "Value": "Password"
+ },
+ {
+ "Type": "Button",
+ "Name": "email",
+ "Label": "",
+ "Value": "Email"
+ },
+ {
+ "Type": "Button",
+ "Name": "combobox",
+ "Label": "",
+ "Value": "Combobox"
+ },
+ {
+ "Type": "Button",
+ "Name": "radio",
+ "Label": "",
+ "Value": "Radio"
+ },
+ {
+ "Type": "Button",
+ "Name": "checkbox",
+ "Label": "",
+ "Value": "Checkbox"
+ },
+ {
+ "Type": "Button",
+ "Name": "select",
+ "Label": "",
+ "Value": "Select"
+ },
+ {
+ "Type": "Button",
+ "Name": "file",
+ "Label": "",
+ "Value": "File"
+ },
+ {
+ "Type": "Button",
+ "Name": "textarea",
+ "Label": "",
+ "Value": "Textarea"
+ },
+ {
+ "Type": "Button",
+ "Name": "number",
+ "Label": "",
+ "Value": "Number Example"
+ },
+ {
+ "Type": "Button",
+ "Name": "formConfigData",
+ "Label": "",
+ "Value": "Complete form"
+ },
+ {
+ "Type": "Button",
+ "Name": "navigation",
+ "Label": "",
+ "Value": "This Navigation"
+ }
+]
+
diff --git a/WebFormBuilder/Examples/number.json b/WebFormBuilder/Examples/number.json
new file mode 100644
index 0000000..bc820a5
--- /dev/null
+++ b/WebFormBuilder/Examples/number.json
@@ -0,0 +1,12 @@
+[
+ {
+ "Type": "Number",
+ "Name": "age",
+ "Label": "Age",
+ "Placeholder": "Enter your age",
+ "Tooltip": "Age in years.",
+ "Properties": [ "min=18", "max=88", "step=1" ],
+ "Value": "30"
+ }
+]
+
diff --git a/WebFormBuilder/Examples/password.json b/WebFormBuilder/Examples/password.json
new file mode 100644
index 0000000..5a08d70
--- /dev/null
+++ b/WebFormBuilder/Examples/password.json
@@ -0,0 +1,19 @@
+[
+ {
+ "Type": "password",
+ "Name": "password1"
+ },
+ {
+ "Type": "password",
+ "Name": "password2",
+ "Label": "",
+ "Value": "secretpassword"
+ },
+ {
+ "Type": "password",
+ "Name": "password3",
+ "Label": "Some label",
+ "Placeholder": "Give password please"
+ }
+]
+
diff --git a/WebFormBuilder/Examples/radio.json b/WebFormBuilder/Examples/radio.json
new file mode 100644
index 0000000..5922db0
--- /dev/null
+++ b/WebFormBuilder/Examples/radio.json
@@ -0,0 +1,11 @@
+[
+ {
+ "Type": "Radio",
+ "Name": "gender",
+ "Label": null,
+ "Tooltip": "Select your gender.",
+ "Options": [ "Male", "Female", "Other" ],
+ "Value": "Male"
+ }
+]
+
diff --git a/WebFormBuilder/Examples/select.json b/WebFormBuilder/Examples/select.json
new file mode 100644
index 0000000..60cc5a0
--- /dev/null
+++ b/WebFormBuilder/Examples/select.json
@@ -0,0 +1,12 @@
+[
+ {
+ "Type": "Select",
+ "Name": "country",
+ "Label": "Country",
+ "Tooltip": "Choose a country.",
+ "Options": [ "Netherlands", "Belgium", "Germany" ],
+ "Properties": [ "autocomplete=off" ],
+ "Value": "Belgium"
+ }
+]
+
diff --git a/WebFormBuilder/Examples/text.json b/WebFormBuilder/Examples/text.json
new file mode 100644
index 0000000..6156dab
--- /dev/null
+++ b/WebFormBuilder/Examples/text.json
@@ -0,0 +1,24 @@
+[
+ {
+ "Type": "text",
+ "Name": "text1"
+ },
+ {
+ "Type": "text",
+ "Name": "text2",
+ "Label": "",
+ "Value": "some value"
+ },
+ {
+ "Type": "text",
+ "Name": "text3",
+ "Tooltip": "type some text"
+ },
+ {
+ "Type": "text",
+ "Name": "text4",
+ "Label": "Some label",
+ "Placeholder": "Placeholders are good"
+ }
+]
+
diff --git a/WebFormBuilder/Examples/textarea.json b/WebFormBuilder/Examples/textarea.json
new file mode 100644
index 0000000..e6560c6
--- /dev/null
+++ b/WebFormBuilder/Examples/textarea.json
@@ -0,0 +1,11 @@
+[
+ {
+ "Type": "Textarea",
+ "Name": "remark",
+ "Label": "Remark",
+ "Tooltip": "Any remarks...",
+ "Properties": [ "rows=4" ],
+ "Value": "1\n2\n"
+ }
+]
+
diff --git a/WebFormBuilder/wwwroot/Index.html b/WebFormBuilder/wwwroot/Index.html
index 7b1f96a..cc44b1e 100644
--- a/WebFormBuilder/wwwroot/Index.html
+++ b/WebFormBuilder/wwwroot/Index.html
@@ -10,6 +10,8 @@
<script src="script.js" defer></script>
</head>
<body>
+ <div id="navigation" class="form-container"></div>
<div id="form1" 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/script.js b/WebFormBuilder/wwwroot/script.js
index cf541b2..ddfd9e5 100644
--- a/WebFormBuilder/wwwroot/script.js
+++ b/WebFormBuilder/wwwroot/script.js
@@ -1,8 +1,8 @@
-async function fetchFormConfig()
+async function fetchFormConfig(name)
{
try
{
- const response = await fetch('/api/FormConfig');
+ const response = await fetch('/api/FormConfig?name=' + name);
if (!response.ok)
throw new Error(`HTTP error! Status: ${response.status}`);
@@ -67,15 +67,14 @@ function createTooltip(text)
function toPascalCase(str)
{
return str
- .replace(/(^\w|[\s-_]+\w)/g, match => match.replace(/[\s-_]/, '').toUpperCase());
+ .replace(/(^\w|[\s-_]+\w)/g, match => match.replace(/[\s-_]/, '')
+ .toUpperCase());
}
-async function generateForm(formContainer)
+async function generateForm(formContainer, name, formConfig)
{
- const formConfig = await fetchFormConfig();
-
const form = document.createElement("form");
- form.id = "dynamicForm";
+ form.id = name;
form.addEventListener("submit", submitFormData);
formConfig.forEach((field) =>
@@ -87,6 +86,7 @@ async function generateForm(formContainer)
form.appendChild(wrapper);
});
+ formContainer.replaceChildren();
formContainer.appendChild(form);
}
@@ -327,6 +327,8 @@ function createButtonOrHidden(field)
element.type = field.Type;
element.name = field.Name;
element.id = field.Name;
+ if (field.Value && field.Type === "hidden")
+ element.value = field.Value;
element.textContent = field.Label;
return element;
}
@@ -374,13 +376,37 @@ async function handleInputEvent(event)
}
}
-function initializeInputHandlers()
+
+async function handleNavigationEvent(event)
{
- const formContainer = document.getElementById('form1');
+ 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');
- formContainer.addEventListener('input', handleInputEvent);
+ form1.addEventListener('input', handleInputEvent);
- generateForm(formContainer);
+ generateForm(form1, "formDynamic", formConfig);
+
+ window.scrollTo({ top: 0, behavior: 'smooth' });
}
-document.addEventListener('DOMContentLoaded', initializeInputHandlers);
+
+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();
+});
diff --git a/WebFormBuilder/wwwroot/styles.css b/WebFormBuilder/wwwroot/styles.css
index 7b39777..e50ca55 100644
--- a/WebFormBuilder/wwwroot/styles.css
+++ b/WebFormBuilder/wwwroot/styles.css
@@ -16,10 +16,11 @@
body
{
display: flex;
- justify-content: center;
- align-items: center;
+ ajustify-content: center;
+ aalign-items: center;
min-height: 100vh;
background: #f4f4f9;
+ padding:20px;
}
.form-container