ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-19 10:32:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

implemented reset of config

Browse source
This commit is contained in:
RaffaelW 2024-11-03 22:27:12 +01:00
parent 2ee16f6452
commit 8a3bd49686
5 changed files with 47 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
data/index.html
View file

@ -8,6 +8,7 @@
<script type="module" src="/input-visibility.js" defer></script> <script type="module" src="/input-visibility.js" defer></script>
<script type="module" src="/load-data.js" defer></script> <script type="module" src="/load-data.js" defer></script>
<script type="module" src="/submit.js" defer></script> <script type="module" src="/submit.js" defer></script>
<script type="module" src="/reset.js" defer></script>
</head> </head>
<body> <body>
<main> <main>
@ -152,7 +153,10 @@
/> />
</label> </label>
</fieldset> </fieldset>
<button type="submit">Speichern</button> <div class="buttons">
<button type="reset">Zurücksetzen</button>
<button type="submit">Speichern</button>
</div>
</form> </form>
</main> </main>
</body> </body>

2
data/load-data.js
View file

@ -18,7 +18,7 @@ async function loadData() {
} }
} }
function writeDataToInput(data) { export function writeDataToInput(data) {
console.log("write data", typeof data); console.log("write data", typeof data);
for (const [key, value] of Object.entries(data)) { for (const [key, value] of Object.entries(data)) {
const element = document.querySelector(`[name=${key}]`); const element = document.querySelector(`[name=${key}]`);

21
data/reset.js Normal file
View file

@ -0,0 +1,21 @@
import { writeDataToInput } from "/load-data.js";
const form = document.querySelector("form");
form.addEventListener("reset", async (event) => {
event.preventDefault();
try {
const res = await fetch("/reset", {
method: "POST",
});
if (!res.ok) {
throw new Error(`Response status: ${res.status}`);
}
const json = await res.json();
writeDataToInput(json);
} catch (error) {
console.error(error.message);
}
});

14
data/style.css
View file

@ -1,6 +1,7 @@
:root { :root {
--color-primary: #087e8b; --color-primary: #087e8b;
--color-on-primary: white; --color-on-primary: white;
--color-danger: #fa2b58;
} }
body { body {
@ -59,14 +60,16 @@ select:focus {
} }
button { button {
display: block;
border: none; border: none;
inset: none; inset: none;
border-radius: 8px; border-radius: 8px;
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-on-primary); color: var(--color-on-primary);
padding: 8px 16px; padding: 8px 16px;
margin: 0 auto; }
button[type="reset"] {
background-color: var(--color-danger);
} }
:is(div:has(:is(input, select)), input, select, label) :is(div:has(:is(input, select)), input, select, label)
@ -126,3 +129,10 @@ label.switch input:checked + .slider::before {
left: 100%; left: 100%;
translate: -100% -50%; translate: -100% -50%;
} }
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
gap: 8px;
}

8
src/main.cpp
View file

@ -84,6 +84,14 @@ void setup()
server.on("/config", HTTP_GET, [](AsyncWebServerRequest *request) server.on("/config", HTTP_GET, [](AsyncWebServerRequest *request)
{ onGetConfig(config, request); }); { onGetConfig(config, request); });
server.on("/reset", HTTP_POST, [](AsyncWebServerRequest *request)
{
config.begin("dmx", false);
config.clear();
config.end();
// respond with default config
onGetConfig(config, request); });
server.onRequestBody([](AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total) server.onRequestBody([](AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total)
{ {
if (request->url() == "/config" && request->method() == HTTP_PUT) { if (request->url() == "/config" && request->method() == HTTP_PUT) {