diff --git a/data/index.html b/data/index.html index 36043fa..bb008ba 100644 --- a/data/index.html +++ b/data/index.html @@ -5,12 +5,13 @@ Konfiguration - + +

Konfiguration

-
+
Verbindung @@ -80,6 +81,8 @@ type="checkbox" name="input-or-output-1" id="input-input-or-output-1" + data-value-not-checked="output" + data-value-checked="input" /> Input @@ -104,6 +107,8 @@ type="checkbox" name="input-or-output-2" id="input-input-or-output-2" + data-value-not-checked="output" + data-value-checked="input" /> Input diff --git a/data/submit.js b/data/submit.js new file mode 100644 index 0000000..6a24318 --- /dev/null +++ b/data/submit.js @@ -0,0 +1,55 @@ +const form = document.querySelector("form"); + +function parseValue(input) { + if (input.type === "checkbox") { + return input.checked + ? input.dataset.valueChecked + : input.dataset.valueNotChecked; + } + + if (input.value === "") { + return null; + } + + if (input.type === "number") { + const number = Number(input.value); + return isNaN(number) ? null : number; + } + + return input.value; +} + +form.addEventListener("submit", (event) => { + event.preventDefault(); + const inputFields = document.querySelectorAll( + "form :is(input, select, textarea):not(:disabled)" + ); + + const data = Array.from(inputFields).reduce((data, input) => { + data[input.name] = parseValue(input); + return data; + }, {}); + console.log(data); + + putData(data); +}); + +async function putData(data) { + try { + const res = await fetch("/config", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }); + if (!res.ok) { + throw new Error(`Response status: ${res.status}`); + } + + const json = await res.json(); + console.log(json); + } catch (error) { + console.error(error.message); + } +}