Initial commit

src/static/main.js

@@ -0,0 +1,147 @@
+let delayTimeout;
+let brightnessTimeout;
+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);
+    }
+}
+
+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);
+    }
+}
+
+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);
+}
+
+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);
+}
+
+async function updatePattern(pattern) {
+    event.preventDefault();
+    await post("/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);
+}
+
+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);
+}
+
+async function updateNumLeds(event) {
+    event.preventDefault();
+    const numLeds = document.getElementById('num_leds').value;
+    await post('/num_leds', { num_leds: 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");
+    }
+}
+
+function createPatternButtons(patterns) {
+    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);
+    });
+}
+
+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.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';
+}
+
+function selectControls() {
+    const settingsMenu = document.getElementById('settings_menu');
+    controls = document.getElementById('controls');
+    settingsMenu.style.display = 'none';
+    controls.style.display = 'block';
+}