ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-07-05 21:58:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added script that formats and sends the input to the server

Browse source
This commit is contained in:
RaffaelW 2024-10-26 11:29:53 +02:00
parent 5d05d30c4d
commit 552cf376a0
2 changed files with 62 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
data/index.html
View file

@ -5,12 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Konfiguration</title> <title>Konfiguration</title>
<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="/style.css" />
<script src="/input-visibility.js" defer></script> <script type="module" src="/input-visibility.js" defer></script>
<script type="module" src="/submit.js" defer></script>
</head> </head>
<body> <body>
<h1>Konfiguration</h1> <h1>Konfiguration</h1>
<form action="" method="post"> <form>
<fieldset> <fieldset>
<legend>Verbindung</legend> <legend>Verbindung</legend>
@ -80,6 +81,8 @@
type="checkbox" type="checkbox"
name="input-or-output-1" name="input-or-output-1"
id="input-input-or-output-1" id="input-input-or-output-1"
data-value-not-checked="output"
data-value-checked="input"
/> />
<span class="slider"></span> <span class="slider"></span>
<span>Input</span> <span>Input</span>
@ -104,6 +107,8 @@
type="checkbox" type="checkbox"
name="input-or-output-2" name="input-or-output-2"
id="input-input-or-output-2" id="input-input-or-output-2"
data-value-not-checked="output"
data-value-checked="input"
/> />
<span class="slider"></span> <span class="slider"></span>
<span>Input</span> <span>Input</span>

55
data/submit.js Normal file
View file

@ -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);
}
}