Split up main.js

src/static/light-components.js

@@ -0,0 +1,90 @@
+// light-components.js
+import { LightComponent } from "./light-component.js";
+import { getWebSocket } from "./websocket.js";
+
+// Map to store backend IDs and their corresponding components
+const componentMap = new Map();
+
+// Function to create and configure a light component
+function createLightComponent(data, key, appContainer) {
+  const lightComponent = document.createElement("light-component");
+  lightComponent.style.left = `${data.x}px`; // Set the x position
+  lightComponent.style.top = `${data.y}px`; // Set the y position
+  lightComponent.style.backgroundColor = data.settings?.color || "#4caf50"; // Set the background color
+  lightComponent.textContent = data.name || "Light Me Up!"; // Set the text content
+
+  // Set the lightId property
+  lightComponent.lightId = key; // Use the backend ID as the lightId
+
+  // Store the component in the map
+  componentMap.set(key, lightComponent);
+
+  // Append the light component to the container
+  appContainer.appendChild(lightComponent);
+
+  // Handle position change
+  lightComponent.addEventListener("position-change", (event) => {
+    const { lightId, x, y } = event.detail;
+    updatePositionOnServer(lightId, x, y);
+  });
+
+  // Handle color change
+  lightComponent.addEventListener("color-change", (event) => {
+    const { lightId, color } = event.detail;
+    sendColorToServer(lightId, color);
+  });
+
+  // Example: Add a click event listener to the light-component
+  lightComponent.addEventListener("click", () => {
+    console.log(`Light component clicked! ID: ${lightComponent.lightId}`);
+  });
+}
+
+// Function to create light components from the fetched data
+export function createLightComponents(appContainer, lightData) {
+  for (const key in lightData) {
+    if (lightData.hasOwnProperty(key)) {
+      const light = lightData[key];
+      createLightComponent(light, key, appContainer); // Pass the backend ID
+    }
+  }
+}
+
+// Function to send the updated position to the server via a PATCH request
+async function updatePositionOnServer(componentId, x, y) {
+  try {
+    const response = await fetch(`/light/${componentId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ x, y }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    console.log(
+      `Updated position for component ${componentId}: x=${x}, y=${y}`,
+    );
+  } catch (error) {
+    console.error("Error updating position on server:", error);
+  }
+}
+
+// Function to send the selected color to the server via WebSocket
+function sendColorToServer(componentId, color) {
+  const websocket = getWebSocket();
+  const message = JSON.stringify({
+    componentId,
+    color,
+  });
+
+  if (websocket.readyState === WebSocket.OPEN) {
+    websocket.send(message);
+    console.log("Sent color to server:", message);
+  } else {
+    console.warn("WebSocket is not open. Unable to send color.");
+  }
+}

src/static/main.js

@@ -1,5 +1,5 @@
-// Import the LightComponent from light-component.js
+// main.js
-import { LightComponent } from "./light-component.js";
+import { createLightComponents } from "./light-components.js";
 import { getWebSocket } from "./websocket.js";
 
 // Wait for the DOM to be fully loaded
@@ -15,90 +15,17 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
     const lightData = await response.json();
 
-    // Map to store backend IDs and their corresponding components
+    // Create and configure light components
-    const componentMap = new Map();
+    createLightComponents(appContainer, lightData);
 
-    // Function to create and configure a light component
+    // Initialize WebSocket connection
-    function createLightComponent(data, key) {
+    const websocket = getWebSocket();
-      const lightComponent = document.createElement("light-component");
+    websocket.addEventListener("open", () => {
-      lightComponent.style.left = `${data.x}px`; // Set the x position
+      console.log("WebSocket connection established.");
-      lightComponent.style.top = `${data.y}px`; // Set the y position
+    });
-      lightComponent.style.backgroundColor = data.settings?.color || "#4caf50"; // Set the background color
+    websocket.addEventListener("message", (event) => {
-      lightComponent.textContent = data.name || "Light Me Up!"; // Set the text content
+      console.log("Message from server:", event.data);
-
+    });
-      // Set the lightId property
-      lightComponent.lightId = key; // Use the backend ID as the lightId
-
-      // Store the component in the map
-      componentMap.set(key, lightComponent);
-
-      // Append the light component to the container
-      appContainer.appendChild(lightComponent);
-
-      // Handle position change
-      lightComponent.addEventListener("position-change", (event) => {
-        const { lightId, x, y } = event.detail;
-        updatePositionOnServer(lightId, x, y);
-      });
-
-      // Handle color change
-      lightComponent.addEventListener("color-change", (event) => {
-        const { lightId, color } = event.detail;
-        sendColorToServer(lightId, color);
-      });
-
-      // Example: Add a click event listener to the light-component
-      lightComponent.addEventListener("click", () => {
-        console.log(`Light component clicked! ID: ${lightComponent.lightId}`);
-      });
-    }
-
-    // Iterate over the JSON data and create light components
-    for (const key in lightData) {
-      if (lightData.hasOwnProperty(key)) {
-        const light = lightData[key];
-        createLightComponent(light, key); // Pass the backend ID
-      }
-    }
-
-    // Function to send the updated position to the server via a PATCH request
-    async function updatePositionOnServer(componentId, x, y) {
-      try {
-        const response = await fetch(`/light/${componentId}`, {
-          method: "PATCH",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ x, y }),
-        });
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-
-        console.log(
-          `Updated position for component ${componentId}: x=${x}, y=${y}`,
-        );
-      } catch (error) {
-        console.error("Error updating position on server:", error);
-      }
-    }
-
-    // Function to send the selected color to the server via WebSocket
-    function sendColorToServer(componentId, color) {
-      const websocket = getWebSocket();
-      const message = JSON.stringify({
-        componentId,
-        color: color,
-      });
-
-      if (websocket.readyState === WebSocket.OPEN) {
-        websocket.send(message);
-        console.log("Sent color to server:", message);
-      } else {
-        console.warn("WebSocket is not open. Unable to send color.");
-      }
-    }
   } catch (error) {
     console.error("Error fetching light data:", error);
   }