From 17d33d98e218a64e81480511336c1181b8d0e645 Mon Sep 17 00:00:00 2001 From: jimmy Date: Mon, 21 Apr 2025 21:50:27 +1200 Subject: [PATCH] Send to a single json endpoint --- src/static/main.js | 196 ++++++++++++++++++++++----------------------- 1 file changed, 96 insertions(+), 100 deletions(-) diff --git a/src/static/main.js b/src/static/main.js index 4cdcc55..7656323 100644 --- a/src/static/main.js +++ b/src/static/main.js @@ -4,144 +4,140 @@ let colorTimeout; let color2Timeout; async function post(path, data) { - console.log(`POST to ${path}`, data); - try { - const response = await fetch(path, { - method: "POST", - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(data) // Convert data to JSON string - }); - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - } catch (error) { - console.error('Error during POST request:', error); + console.log(`POST to ${path}`, data); + try { + const response = await fetch(path, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), // Convert data to JSON string + }); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); } + } catch (error) { + console.error("Error during POST request:", error); + } } async function get(path) { - try { - const response = await fetch(path); - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - return await response.json(); // Assuming you are expecting JSON response - } catch (error) { - console.error('Error during GET request:', error); + try { + const response = await fetch(path); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); } + return await response.json(); // Assuming you are expecting JSON response + } catch (error) { + console.error("Error during GET request:", error); + } } async function updateColor(event) { - event.preventDefault(); - clearTimeout(colorTimeout); - colorTimeout = setTimeout(async function() { - const color = document.getElementById('color').value; - await post("/color", { color }); // Send as JSON - }, 500); + event.preventDefault(); + clearTimeout(colorTimeout); + colorTimeout = setTimeout(async function () { + const color = document.getElementById("color").value; + await post("settings", { color1: color }); // Send as JSON + }, 500); } async function updateColor2(event) { - event.preventDefault(); - clearTimeout(color2Timeout); - color2Timeout = setTimeout(async function() { - const color = document.getElementById('color2').value; - await post("/color2", { color }); // Send as JSON - }, 500); + event.preventDefault(); + clearTimeout(color2Timeout); + color2Timeout = setTimeout(async function () { + const color = document.getElementById("color2").value; + await post("/settings", { color2: color }); // Send as JSON + }, 500); } async function updatePattern(pattern) { - event.preventDefault(); - await post("/pattern", { pattern }); // Send as JSON + await post("/settings", { pattern: pattern }); // Send as JSON } async function updateBrightness(event) { - event.preventDefault(); - clearTimeout(brightnessTimeout); - brightnessTimeout = setTimeout(async function() { - const brightness = document.getElementById('brightness').value; - await post('/brightness', { brightness }); // Send as JSON - }, 500); + event.preventDefault(); + clearTimeout(brightnessTimeout); + brightnessTimeout = setTimeout(async function () { + const brightness = document.getElementById("brightness").value; + await post("/settings", { brightness: brightness }); // Send as JSON + }, 500); } async function updateDelay(event) { - event.preventDefault(); - clearTimeout(delayTimeout); - delayTimeout = setTimeout(async function() { - const delay = document.getElementById('delay').value; - await post('/delay', { delay }); // Send as JSON - }, 500); + event.preventDefault(); + clearTimeout(delayTimeout); + delayTimeout = setTimeout(async function () { + const delay = document.getElementById("delay").value; + await post("/settings", { delay: delay }); // Send as JSON + }, 500); } async function updateNumLeds(event) { - event.preventDefault(); - const numLeds = document.getElementById('num_leds').value; - await post('/num_leds', { num_leds: numLeds }); // Send as JSON + event.preventDefault(); + const numLeds = document.getElementById("num_leds").value; + await post("/settings", { num_leds: parseInt(numLeds) }); // Send as JSON } -async function updateWifi(event) { - event.preventDefault(); - const ssid = document.getElementById('ssid').value; - const password = document.getElementById('password').value; - const ip = document.getElementById('ip').value; - const gateway = document.getElementById('gateway').value; - - const wifiSettings = { ssid, password, ip, gateway }; // Create JSON object - console.log(wifiSettings); - const response = await post('/wifi_settings', wifiSettings); // Send as JSON - if (response === 500) { - alert("Failed to connect to Wi-Fi"); - } +async function updateName(event) { + event.preventDefault(); + const name = document.getElementById("name").value; + await post("/settings", { name: name }); // Send as JSON } function createPatternButtons(patterns) { - const container = document.getElementById('pattern_buttons'); - container.innerHTML = ''; // Clear previous buttons + const container = document.getElementById("pattern_buttons"); + container.innerHTML = ""; // Clear previous buttons - patterns.forEach(pattern => { - const button = document.createElement('button'); - button.type = 'button'; // Use 'button' instead of 'submit' - button.textContent = pattern; - button.value = pattern; - button.addEventListener('click', async function(event) { - event.preventDefault(); - await updatePattern(pattern); - }); - container.appendChild(button); + patterns.forEach((pattern) => { + const button = document.createElement("button"); + button.type = "button"; // Use 'button' instead of 'submit' + button.textContent = pattern; + button.value = pattern; + button.addEventListener("click", async function (event) { + event.preventDefault(); + await updatePattern(pattern); }); + container.appendChild(button); + }); } -document.addEventListener('DOMContentLoaded', async function() { - document.getElementById('color').addEventListener('input', updateColor); - document.getElementById('color2').addEventListener('input', updateColor2); - document.getElementById('delay').addEventListener('input', updateDelay); - document.getElementById('brightness').addEventListener('input', updateBrightness); - document.getElementById('num_leds_form').addEventListener('submit', updateNumLeds); - document.getElementById('wifi_form').addEventListener('submit', updateWifi); - document.getElementById('delay').addEventListener('touchend', updateDelay); - document.getElementById('brightness').addEventListener('touchend', updateBrightness); +document.addEventListener("DOMContentLoaded", async function () { + document.getElementById("color").addEventListener("input", updateColor); + document.getElementById("color2").addEventListener("input", updateColor2); + document.getElementById("delay").addEventListener("input", updateDelay); + document + .getElementById("brightness") + .addEventListener("input", updateBrightness); + document + .getElementById("num_leds_form") + .addEventListener("submit", updateNumLeds); + document.getElementById("name_form").addEventListener("submit", updateName); + document.getElementById("delay").addEventListener("touchend", updateDelay); + document + .getElementById("brightness") + .addEventListener("touchend", updateBrightness); - document.querySelectorAll(".pattern_button").forEach(button => { - console.log(button.value); - button.addEventListener('click', async event => { - event.preventDefault(); - await updatePattern(button.value); - }); - }); + document.querySelectorAll(".pattern_button").forEach((button) => { + console.log(button.value); + button.addEventListener("click", async (event) => { + event.preventDefault(); + await updatePattern(button.value); + }); + }); }); // Function to toggle the display of the settings menu function selectSettings() { - const settingsMenu = document.getElementById('settings_menu'); - controls = document.getElementById('controls'); - settingsMenu.style.display = 'block'; - controls.style.display = 'none'; + const settingsMenu = document.getElementById("settings_menu"); + controls = document.getElementById("controls"); + settingsMenu.style.display = "block"; + controls.style.display = "none"; } function selectControls() { - const settingsMenu = document.getElementById('settings_menu'); - controls = document.getElementById('controls'); - settingsMenu.style.display = 'none'; - controls.style.display = 'block'; + const settingsMenu = document.getElementById("settings_menu"); + controls = document.getElementById("controls"); + settingsMenu.style.display = "none"; + controls.style.display = "block"; }