doet het al een beetje
c20d43355b53b7483f805bdc342a187861d81918
6 files changed
WebFormBuilder/Controllers/FormConfigController.csWebFormBuilder/Examples/formConfigData.jsonWebFormBuilder/Examples/password.jsonWebFormBuilder/Examples/text.jsonWebFormBuilder/Program.csWebFormBuilder/wwwroot/WebForm.js
diff --git a/WebFormBuilder/Controllers/FormConfigController.cs b/WebFormBuilder/Controllers/FormConfigController.cs
index 5d5af5a..65f4f77 100644
--- a/WebFormBuilder/Controllers/FormConfigController.cs
+++ b/WebFormBuilder/Controllers/FormConfigController.cs
@@ -11,36 +11,24 @@ public class FormConfigController : ControllerBase
[HttpGet]
public async Task<IActionResult> GetFormConfig([FromQuery] string name)
{
- string jsonFilePath;
-
- FileStream stream;
-
if (name == "navigation")
{
- List<FormField> listNav = [];
-
- listNav.Add(new FormField
- {
- Type = HtmlInputType.Form,
- Name = "formNavigation",
- Properties = ["action=/api/SubmitData", "method=post", "change=/api/SubmitValue"]
- });
-
+ List<FormField> formFields = [];
foreach (HtmlInputType type in Enum.GetValues(typeof(HtmlInputType)))
{
if (type == HtmlInputType.Unknown || type == HtmlInputType.Form)
continue;
- listNav.Add(new FormField
+ formFields.Add(new FormField
{
Type = HtmlInputType.Button,
- Name= type.ToString().ToLower(),
+ Name = type.ToString().ToLower(),
Label = string.Empty,
Value = $"Example {type}"
});
}
- listNav.Add(new FormField
+ formFields.Add(new FormField
{
Type = HtmlInputType.Button,
Name = "formConfigData",
@@ -48,7 +36,7 @@ public class FormConfigController : ControllerBase
Value = "All of the above"
});
- listNav.Add(new FormField
+ formFields.Add(new FormField
{
Type = HtmlInputType.Button,
Name = "navigation",
@@ -56,11 +44,26 @@ public class FormConfigController : ControllerBase
Value = "This Navigation"
});
- return Ok(listNav);
+ var form1 = new Form()
+ {
+ HtmlHeader = "<h3>Example</h3>",
+ Action = "/api/SubmitData",
+ Change = "/api/SubmitValue",
+ FieldSets = [new FieldSet()
+ {
+ Id = 0,
+ Legend = "Of the fall",
+ FormFields = formFields
+ }]
+ };
+
+ return Ok(form1);
}
- jsonFilePath = Path.Combine(AppContext.BaseDirectory, "Examples", name + ".json");
+ var jsonFilePath = Path.Combine(AppContext.BaseDirectory, "Examples", name + ".json");
+
+ FileStream stream;
if (System.IO.File.Exists(jsonFilePath))
{
@@ -80,13 +83,26 @@ public class FormConfigController : ControllerBase
var list = await JsonSerializer.DeserializeAsync<List<FormField>>(stream) ?? [];
stream.Dispose();
-
- if(!Enum.TryParse(name, ignoreCase: true, out HtmlInputType typeEnum))
+
+ if (!Enum.TryParse(name, ignoreCase: true, out HtmlInputType typeEnum))
return NotFound();
list.RemoveAll(x => x.Type != typeEnum);
- return Ok(list);
+ var form2 = new Form()
+ {
+ HtmlHeader = "<h3>Example</h3>",
+ Action = "/api/SubmitData",
+ Change = "/api/SubmitValue",
+ FieldSets = [new FieldSet()
+ {
+ Id = 0,
+ Legend = "Of the fall",
+ FormFields = list
+ }]
+ };
+
+ return Ok(form2);
}
}
diff --git a/WebFormBuilder/Examples/formConfigData.json b/WebFormBuilder/Examples/formConfigData.json
index 6345173..58e25c1 100644
--- a/WebFormBuilder/Examples/formConfigData.json
+++ b/WebFormBuilder/Examples/formConfigData.json
@@ -1,205 +1,216 @@
-[
- {
- "Type": "Form",
- "Name": "FormName1",
- "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
- },
- {
- "Type": "Text",
- "Name": "username",
- "Label": "UserName",
- "Placeholder": "Enter your username",
- "Tooltip": "This will be your unique identifier.",
- "Properties": ["autocomplete=username", "required=yes" ],
- "Value": "JohnDoe"
- },
- {
- "Type": "Email",
- "Name": "email",
- "Label": "Email Address",
- "Placeholder": "Enter your email address",
- "Tooltip": "We will send important updates to this email.",
- "Properties": [ "autocomplete=email" , "hidden=hidden" ],
- "Value": "example@example.com"
- },
- {
- "Type": "Password",
- "Name": "password",
- "Label": "Password",
- "Placeholder": "Enter a secure password",
- "Tooltip": "Use a strong password with at least 8 characters.",
- "Value": "0ldP@ssW0rd!"
- },
- {
- "Type": "Combobox",
- "Name": "Fruit",
- "Label": "Fruit",
- "Tooltip": "Select your fruit or make new one.",
- "Options": [ "Appletje", "Banana", "Cherry", "Date", "Fig", "Grape", "Honeydew" ]
- },
- {
- "Type": "Radio",
- "Name": "gender",
- "Label": null,
- "Tooltip": "Select your gender.",
- "Options": [ "Male", "Female", "Other" ],
- "Value": "Male"
- },
- {
- "Type": "Checkbox",
- "Name": "hobbies",
- "Label": "Hobbies",
- "Tooltip": "Select all hobbies that apply to you.",
- "Options": [ "Sports", "Music", "Reading" ],
- "Value": "Music,Sports"
- },
- {
- "Type": "Select",
- "Name": "country",
- "Label": "Country",
- "Tooltip": "Choose the country you currently reside in.",
- "Options": [ "Netherlands", "Belgium", "Germany" ],
- "Properties": [ "autocomplete=off" ],
- "Value": "Belgium"
- },
- {
- "Type": "File",
- "Name": "Files",
- "Label": "Choose a file",
- "Placeholder": "Select a file",
- "Tooltip": "Select a file please."
- },
- {
- "Type": "Textarea",
- "Name": "remark",
- "Label": "Remark",
- "Tooltip": "Any remarks to be made, do it here.",
- "Properties": [ "rows=4" ],
- "Value": "1\n2\n"
- },
- {
- "Type": "Number",
- "Name": "age",
- "Label": "Age",
- "Placeholder": "Enter your age",
- "Tooltip": "Provide your age in years.",
- "Properties": [ "min=18", "max=120", "step=1" ],
- "Value": "30"
- },
- {
- "Type": "Euro",
- "Name": "price",
- "Label": "Price",
- "Placeholder": "0,00",
- "Tooltip": "Provide a price in euros.",
- "Properties": [ "step=0.01" ]
- },
- {
- "Type": "Date",
- "Name": "dob",
- "Label": "Date of Birth",
- "Placeholder": "Select your date of birth",
- "Tooltip": "Pick your birthdate from the calendar.",
- "Properties": [ "min=1900-01-01", "max=2024-12-31" ],
- "Value": "1990-01-01"
- },
- {
- "Type": "Tel",
- "Name": "phone",
- "Label": "Phone Number",
- "Placeholder": "Enter your phone number",
- "Tooltip": "Provide your contact number.",
- "Properties": [ "autocomplete=phone" ],
- "Value": "123-456-7890"
- },
- {
- "Type": "Url",
- "Name": "website",
- "Label": "Website",
- "Placeholder": "Enter your website",
- "Tooltip": "Provide the URL of your website.",
- "Value": "https://example.com"
- },
- {
- "Type": "Range",
- "Name": "satisfaction",
- "Label": "Satisfaction Level",
- "Tooltip": "Rate your satisfaction from 0 to 9.",
- "Properties": [ "min=0", "max=9", "step=1" ],
- "Value": "5"
- },
- {
- "Type": "Time",
- "Name": "meeting_time",
- "Label": "Meeting Time",
- "Placeholder": "Select a time",
- "Tooltip": "Choose your preferred meeting time.",
- "Value": "14:00"
- },
- {
- "Type": "DateTimeLocal",
- "Name": "appointment",
- "Label": "Appointment Date & Time",
- "Tooltip": "Select the date and time for your appointment.",
- "Value": "2024-11-30T10:00"
- },
- {
- "Type": "Month",
- "Name": "birth_month",
- "Label": "Birth Month",
- "Tooltip": "Select your birth month.",
- "Value": "1990-01"
- },
- {
- "Type": "Week",
- "Name": "work_week",
- "Label": "Work Week",
- "Tooltip": "Select your preferred work week.",
- "Value": "2024-W01"
- },
- {
- "Type": "Color",
- "Name": "fav_color",
- "Label": "Favorite Color",
- "Tooltip": "Pick your favorite color.",
- "Value": "#ff0000"
- },
- {
- "Type": "Link",
- "Label": "",
- "Properties": [ "href=https://www.dse.nl/" ],
- "Value": "www.dse.nl"
- },
- {
- "Type": "Image",
- "Name": "submit_image",
- "Label": "Submit Image",
- "Tooltip": "Click to submit via image button.",
- "Value": "/cat.gif"
- },
- {
- "Type": "Reset",
- "Name": "reset",
- "Label": "Reset Form",
- "Value": "Reset this Form"
- },
- {
- "Type": "Button",
- "Name": "custom_button",
- "Label": "Custom Button",
- "Value": "Do not press me",
- "Tooltip": "Click this button for custom action."
- },
- {
- "Type": "Hidden",
- "Name": "hidden_field",
- "Value": "bfbed3d6-ac9d-4451-bb0f-025d043974d6"
- },
- {
- "Type": "Submit",
- "Name": "submit",
- "Label": "Register",
- "Value": "Submit Form"
- }
-]
+{
+ "HtmlHeader": "<h1>Dit is een goede header</h1>",
+ "Action": "/api/SubmitForm",
+ "Change": "/api/SubmitValue",
+ "FieldSets": [
+ {
+ "Id": 1,
+ "Legend": "Examples",
+ "FormFields": [
+ {
+ "Type": "Form",
+ "Name": "FormName1",
+ "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
+ },
+ {
+ "Type": "Text",
+ "Name": "username",
+ "Label": "UserName",
+ "Placeholder": "Enter your username",
+ "Tooltip": "This will be your unique identifier.",
+ "Properties": [ "autocomplete=username", "required=yes" ],
+ "Value": "JohnDoe"
+ },
+ {
+ "Type": "Email",
+ "Name": "email",
+ "Label": "Email Address",
+ "Placeholder": "Enter your email address",
+ "Tooltip": "We will send important updates to this email.",
+ "Properties": [ "autocomplete=email", "hidden=hidden" ],
+ "Value": "example@example.com"
+ },
+ {
+ "Type": "Password",
+ "Name": "password",
+ "Label": "Password",
+ "Placeholder": "Enter a secure password",
+ "Tooltip": "Use a strong password with at least 8 characters.",
+ "Value": "0ldP@ssW0rd!"
+ },
+ {
+ "Type": "Combobox",
+ "Name": "Fruit",
+ "Label": "Fruit",
+ "Tooltip": "Select your fruit or make new one.",
+ "Options": [ "Appletje", "Banana", "Cherry", "Date", "Fig", "Grape", "Honeydew" ]
+ },
+ {
+ "Type": "Radio",
+ "Name": "gender",
+ "Label": null,
+ "Tooltip": "Select your gender.",
+ "Options": [ "Male", "Female", "Other" ],
+ "Value": "Male"
+ },
+ {
+ "Type": "Checkbox",
+ "Name": "hobbies",
+ "Label": "Hobbies",
+ "Tooltip": "Select all hobbies that apply to you.",
+ "Options": [ "Sports", "Music", "Reading" ],
+ "Value": "Music,Sports"
+ },
+ {
+ "Type": "Select",
+ "Name": "country",
+ "Label": "Country",
+ "Tooltip": "Choose the country you currently reside in.",
+ "Options": [ "Netherlands", "Belgium", "Germany" ],
+ "Properties": [ "autocomplete=off" ],
+ "Value": "Belgium"
+ },
+ {
+ "Type": "File",
+ "Name": "Files",
+ "Label": "Choose a file",
+ "Placeholder": "Select a file",
+ "Tooltip": "Select a file please."
+ },
+ {
+ "Type": "Textarea",
+ "Name": "remark",
+ "Label": "Remark",
+ "Tooltip": "Any remarks to be made, do it here.",
+ "Properties": [ "rows=4" ],
+ "Value": "1\n2\n"
+ },
+ {
+ "Type": "Number",
+ "Name": "age",
+ "Label": "Age",
+ "Placeholder": "Enter your age",
+ "Tooltip": "Provide your age in years.",
+ "Properties": [ "min=18", "max=120", "step=1" ],
+ "Value": "30"
+ },
+ {
+ "Type": "Euro",
+ "Name": "price",
+ "Label": "Price",
+ "Placeholder": "0,00",
+ "Tooltip": "Provide a price in euros.",
+ "Properties": [ "step=0.01" ]
+ },
+ {
+ "Type": "Date",
+ "Name": "dob",
+ "Label": "Date of Birth",
+ "Placeholder": "Select your date of birth",
+ "Tooltip": "Pick your birthdate from the calendar.",
+ "Properties": [ "min=1900-01-01", "max=2024-12-31" ],
+ "Value": "1990-01-01"
+ },
+ {
+ "Type": "Tel",
+ "Name": "phone",
+ "Label": "Phone Number",
+ "Placeholder": "Enter your phone number",
+ "Tooltip": "Provide your contact number.",
+ "Properties": [ "autocomplete=phone" ],
+ "Value": "123-456-7890"
+ },
+ {
+ "Type": "Url",
+ "Name": "website",
+ "Label": "Website",
+ "Placeholder": "Enter your website",
+ "Tooltip": "Provide the URL of your website.",
+ "Value": "https://example.com"
+ },
+ {
+ "Type": "Range",
+ "Name": "satisfaction",
+ "Label": "Satisfaction Level",
+ "Tooltip": "Rate your satisfaction from 0 to 9.",
+ "Properties": [ "min=0", "max=9", "step=1" ],
+ "Value": "5"
+ },
+ {
+ "Type": "Time",
+ "Name": "meeting_time",
+ "Label": "Meeting Time",
+ "Placeholder": "Select a time",
+ "Tooltip": "Choose your preferred meeting time.",
+ "Value": "14:00"
+ },
+ {
+ "Type": "DateTimeLocal",
+ "Name": "appointment",
+ "Label": "Appointment Date & Time",
+ "Tooltip": "Select the date and time for your appointment.",
+ "Value": "2024-11-30T10:00"
+ },
+ {
+ "Type": "Month",
+ "Name": "birth_month",
+ "Label": "Birth Month",
+ "Tooltip": "Select your birth month.",
+ "Value": "1990-01"
+ },
+ {
+ "Type": "Week",
+ "Name": "work_week",
+ "Label": "Work Week",
+ "Tooltip": "Select your preferred work week.",
+ "Value": "2024-W01"
+ },
+ {
+ "Type": "Color",
+ "Name": "fav_color",
+ "Label": "Favorite Color",
+ "Tooltip": "Pick your favorite color.",
+ "Value": "#ff0000"
+ },
+ {
+ "Type": "Link",
+ "Label": "",
+ "Properties": [ "href=https://www.dse.nl/" ],
+ "Value": "www.dse.nl"
+ },
+ {
+ "Type": "Image",
+ "Name": "submit_image",
+ "Label": "Submit Image",
+ "Tooltip": "Click to submit via image button.",
+ "Value": "/cat.gif"
+ },
+ {
+ "Type": "Reset",
+ "Name": "reset",
+ "Label": "Reset Form",
+ "Value": "Reset this Form"
+ },
+ {
+ "Type": "Button",
+ "Name": "custom_button",
+ "Label": "Custom Button",
+ "Value": "Do not press me",
+ "Tooltip": "Click this button for custom action."
+ },
+ {
+ "Type": "Hidden",
+ "Name": "hidden_field",
+ "Value": "bfbed3d6-ac9d-4451-bb0f-025d043974d6"
+ },
+ {
+ "Type": "Submit",
+ "Name": "submit",
+ "Label": "Register",
+ "Value": "Submit Form"
+ }
+ ]
+ }
+ ]
+}
diff --git a/WebFormBuilder/Examples/password.json b/WebFormBuilder/Examples/password.json
index 99f00b2..057c56b 100644
--- a/WebFormBuilder/Examples/password.json
+++ b/WebFormBuilder/Examples/password.json
@@ -1,24 +1,35 @@
-[
- {
- "Type": "Form",
- "Name": "FormName2",
- "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
- },
- {
- "Type": "password",
- "Name": "password1"
- },
- {
- "Type": "password",
- "Name": "password2",
- "Label": "",
- "Value": "secretpassword"
- },
- {
- "Type": "password",
- "Name": "password3",
- "Label": "Some label",
- "Placeholder": "Give password please"
- }
-]
+{
+ "HtmlHeader": "<h1>Dit is een goede header</h1>",
+ "Action": "/api/SubmitForm",
+ "Change": "/api/SubmitValue",
+ "FieldSets": [
+ {
+ "Id": 1,
+ "Legend": "Examples",
+ "FormFields": [
+ {
+ "Type": "Form",
+ "Name": "FormName2",
+ "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
+ },
+ {
+ "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/text.json b/WebFormBuilder/Examples/text.json
index 033bf52..ca7192f 100644
--- a/WebFormBuilder/Examples/text.json
+++ b/WebFormBuilder/Examples/text.json
@@ -1,33 +1,43 @@
-[
- {
- "Type": "Form",
- "Name": "FormName3",
- "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
- },
- {
- "Type": "text",
- "Name": "text1"
- },
- {
- "Type": "text",
- "Name": "text2"
- },
- {
- "Type": "text",
- "Name": "text3",
- "Label": "",
- "Value": "some value"
- },
- {
- "Type": "text",
- "Name": "text4",
- "Tooltip": "type some text"
- },
- {
- "Type": "text",
- "Name": "text5",
- "Label": "Some label",
- "Placeholder": "Placeholders are good"
- }
-]
-
+{
+ "HtmlHeader": "<h1>Dit is een goede header</h1>",
+ "Action": "/api/SubmitForm",
+ "Change": "/api/SubmitValue",
+ "FieldSets": [
+ {
+ "Id": 1,
+ "Legend": "Naw gegevens",
+ "FormFields": [
+ {
+ "Type": "Form",
+ "Name": "FormName3",
+ "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
+ },
+ {
+ "Type": "text",
+ "Name": "text1"
+ },
+ {
+ "Type": "text",
+ "Name": "text2"
+ },
+ {
+ "Type": "text",
+ "Name": "text3",
+ "Label": "",
+ "Value": "some value"
+ },
+ {
+ "Type": "text",
+ "Name": "text4",
+ "Tooltip": "type some text"
+ },
+ {
+ "Type": "text",
+ "Name": "text5",
+ "Label": "Some label",
+ "Placeholder": "Placeholders are good"
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
diff --git a/WebFormBuilder/Program.cs b/WebFormBuilder/Program.cs
index 1425ac6..9b734ac 100644
--- a/WebFormBuilder/Program.cs
+++ b/WebFormBuilder/Program.cs
@@ -1,63 +1,4 @@
-using System.Text.Json;
using System.Text.Json.Serialization;
-using WebFormBuilder.Models;
-
-
-var fs1 = new FieldSet()
-{
- Legend = "Of the fall",
- FormFields = [ new ()
- {
- Name = "Naam"
- },
- new ()
- {
- Name = "Adres"
- }, new ()
- {
- Name = "Woonplaats"
- }]
-};
-var fs2 = new FieldSet()
-{
- Legend = "Of the fall",
- FormFields = [new ()
- {
- Type = HtmlInputType.Radio,
- Name = "Partner"
- }]
-};
-var fs3 = new FieldSet()
-{
- Legend = "Of the fall",
- FormFields = [new ()
- {
- Name = "PartnerNaam"
- }]
-};
-
-var form = new Form()
-{
- HtmlHeader = "<h1>Dit is een goede header</h1>",
-
- Action = "/api/SubmitForm",
-
- Change = "/api/SubmitValue",
-
- FieldSets = [ fs1, fs2, fs3]
-};
-
-
-var json = JsonSerializer.Serialize(form, new JsonSerializerOptions
-{
- WriteIndented = true,
- DictionaryKeyPolicy = null,
- PropertyNameCaseInsensitive = true,
- DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingDefault
-});
-
-File.WriteAllText(@"c:\temp\form.json", json);
-
var builder = WebApplication.CreateBuilder(args);
diff --git a/WebFormBuilder/wwwroot/WebForm.js b/WebFormBuilder/wwwroot/WebForm.js
index d2b631c..85d7688 100644
--- a/WebFormBuilder/wwwroot/WebForm.js
+++ b/WebFormBuilder/wwwroot/WebForm.js
@@ -52,31 +52,14 @@
{
const formContainer = document.getElementById(formContainerId)
- const formElement = formConfig.find(element => element.Type === 'Form');
-
const form = document.createElement("form");
- if (formElement)
- {
- formElement.Properties.forEach(element =>
- {
- const [key, value] = element.split("=");
- if (key && value)
- form[key] = value;
- });
- form.id = formElement.Name;
- FormUrl = form.action;
- ValueUrl = form.change;
- }
- else
- {
- form.id = "dynamicForm";
- FormUrl = submitFormUrl;
- ValueUrl = submitValueUrl;
- }
+ form.id = "formDynamic"; // TODO
+ FormUrl = formConfig.Action;
+ ValueUrl = formConfig.Change;
var index = 0;
- formConfig.forEach((field) =>
+ formConfig.FieldSets[0].FormFields.forEach((field) =>
{
field.Name ??= `text${index}`, index++;
field.Type = (field.Type ?? "text").toLowerCase();