From d00d21e2b69c381ad2cade183f0c299d788cb91b Mon Sep 17 00:00:00 2001 From: Jimmy Date: Tue, 8 Jul 2025 18:24:54 +1200 Subject: [PATCH] Split up main.js --- src/static/light-components.js | 90 +++++++++++++++++++++++++++++++ src/static/main.js | 97 +++++----------------------------- 2 files changed, 102 insertions(+), 85 deletions(-) create mode 100644 src/static/light-components.js diff --git a/src/static/light-components.js b/src/static/light-components.js new file mode 100644 index 0000000..14b5953 --- /dev/null +++ b/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."); + } +} diff --git a/src/static/main.js b/src/static/main.js index 73a5863..cdf56ce 100644 --- a/src/static/main.js +++ b/src/static/main.js @@ -1,5 +1,5 @@ -// Import the LightComponent from light-component.js -import { LightComponent } from "./light-component.js"; +// main.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 - const componentMap = new Map(); + // Create and configure light components + createLightComponents(appContainer, lightData); - // Function to create and configure a light component - function createLightComponent(data, key) { - 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}`); - }); - } - - // 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."); - } - } + // Initialize WebSocket connection + const websocket = getWebSocket(); + websocket.addEventListener("open", () => { + console.log("WebSocket connection established."); + }); + websocket.addEventListener("message", (event) => { + console.log("Message from server:", event.data); + }); } catch (error) { console.error("Error fetching light data:", error); }