From 8a3bd49686e314918b29a83d7087109f6d495ccf Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sun, 3 Nov 2024 22:27:12 +0100 Subject: [PATCH] implemented reset of config --- data/index.html | 6 +++++- data/load-data.js | 2 +- data/reset.js | 21 +++++++++++++++++++++ data/style.css | 14 ++++++++++++-- src/main.cpp | 8 ++++++++ 5 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 data/reset.js diff --git a/data/index.html b/data/index.html index e48c765..3786e88 100644 --- a/data/index.html +++ b/data/index.html @@ -8,6 +8,7 @@ +
@@ -152,7 +153,10 @@ /> - +
+ + +
diff --git a/data/load-data.js b/data/load-data.js index be369aa..2c18434 100644 --- a/data/load-data.js +++ b/data/load-data.js @@ -18,7 +18,7 @@ async function loadData() { } } -function writeDataToInput(data) { +export function writeDataToInput(data) { console.log("write data", typeof data); for (const [key, value] of Object.entries(data)) { const element = document.querySelector(`[name=${key}]`); diff --git a/data/reset.js b/data/reset.js new file mode 100644 index 0000000..3f54679 --- /dev/null +++ b/data/reset.js @@ -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); + } +}); diff --git a/data/style.css b/data/style.css index b0676df..8d3dde2 100644 --- a/data/style.css +++ b/data/style.css @@ -1,6 +1,7 @@ :root { --color-primary: #087e8b; --color-on-primary: white; + --color-danger: #fa2b58; } body { @@ -59,14 +60,16 @@ select:focus { } button { - display: block; border: none; inset: none; border-radius: 8px; background-color: var(--color-primary); color: var(--color-on-primary); padding: 8px 16px; - margin: 0 auto; +} + +button[type="reset"] { + background-color: var(--color-danger); } :is(div:has(:is(input, select)), input, select, label) @@ -126,3 +129,10 @@ label.switch input:checked + .slider::before { left: 100%; translate: -100% -50%; } + +.buttons { + display: flex; + flex-direction: row; + justify-content: center; + gap: 8px; +} diff --git a/src/main.cpp b/src/main.cpp index 339c957..bef9004 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -84,6 +84,14 @@ void setup() server.on("/config", HTTP_GET, [](AsyncWebServerRequest *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) { if (request->url() == "/config" && request->method() == HTTP_PUT) {