Update main.js

src/static/main.js

@@ -2,6 +2,8 @@ let delayTimeout;
 let brightnessTimeout;
 let colorTimeout;
 let color2Timeout;
+let ws; // Variable to hold the WebSocket connection
+let connectionStatusElement; // Variable to hold the connection status element
 
 // Function to update the connection status indicator
 function updateConnectionStatus(status) {
@@ -74,7 +76,7 @@ async function post(path, data) {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(data), // Convert data to JSON string
+      body: JSON.stringify(data),
     });
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
@@ -90,7 +92,7 @@ async function get(path) {
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
-    return await response.json(); // Assuming you are expecting JSON response
+    return await response.json();
   } catch (error) {
     console.error("Error during GET request:", error);
   }
@@ -99,53 +101,53 @@ async function get(path) {
 async function updateColor(event) {
   event.preventDefault();
   clearTimeout(colorTimeout);
-  colorTimeout = setTimeout(async function () {
+  colorTimeout = setTimeout(function () {
     const color = document.getElementById("color").value;
-    await post("settings", { color1: color }); // Send as JSON
+    sendWebSocketData({ color1: color });
   }, 500);
 }
 
 async function updateColor2(event) {
   event.preventDefault();
   clearTimeout(color2Timeout);
-  color2Timeout = setTimeout(async function () {
+  color2Timeout = setTimeout(function () {
     const color = document.getElementById("color2").value;
-    await post("/settings", { color2: color }); // Send as JSON
+    sendWebSocketData({ color2: color });
   }, 500);
 }
 
 async function updatePattern(pattern) {
-  await post("/settings", { pattern: pattern }); // Send as JSON
+  sendWebSocketData({ pattern: pattern });
 }
 
 async function updateBrightness(event) {
   event.preventDefault();
   clearTimeout(brightnessTimeout);
-  brightnessTimeout = setTimeout(async function () {
+  brightnessTimeout = setTimeout(function () {
     const brightness = document.getElementById("brightness").value;
-    await post("/settings", { brightness: brightness }); // Send as JSON
+    sendWebSocketData({ brightness: brightness });
   }, 500);
 }
 
 async function updateDelay(event) {
   event.preventDefault();
   clearTimeout(delayTimeout);
-  delayTimeout = setTimeout(async function () {
+  delayTimeout = setTimeout(function () {
     const delay = document.getElementById("delay").value;
-    await post("/settings", { delay: delay }); // Send as JSON
+    sendWebSocketData({ delay: delay });
   }, 500);
 }
 
 async function updateNumLeds(event) {
   event.preventDefault();
   const numLeds = document.getElementById("num_leds").value;
-  await post("/settings", { num_leds: parseInt(numLeds) }); // Send as JSON
+  sendWebSocketData({ num_leds: parseInt(numLeds) });
 }
 
 async function updateName(event) {
   event.preventDefault();
   const name = document.getElementById("name").value;
-  await post("/settings", { name: name }); // Send as JSON
+  sendWebSocketData({ name: name });
 }
 
 function createPatternButtons(patterns) {
@@ -154,7 +156,7 @@ function createPatternButtons(patterns) {
 
   patterns.forEach((pattern) => {
     const button = document.createElement("button");
-    button.type = "button"; // Use 'button' instead of 'submit'
+    button.type = "button";
     button.textContent = pattern;
     button.value = pattern;
     button.addEventListener("click", async function (event) {
@@ -166,6 +168,12 @@ function createPatternButtons(patterns) {
 }
 
 document.addEventListener("DOMContentLoaded", async function () {
+  // Get the connection status element once the DOM is ready
+  connectionStatusElement = document.getElementById("connection-status");
+
+  // Establish WebSocket connection on page load
+  connectWebSocket();
+
   document.getElementById("color").addEventListener("input", updateColor);
   document.getElementById("color2").addEventListener("input", updateColor2);
   document.getElementById("delay").addEventListener("input", updateDelay);