106 lines
3.6 KiB
JavaScript
106 lines
3.6 KiB
JavaScript
// Import the LightComponent from light-component.js
|
|
import { LightComponent } from "./light-component.js";
|
|
import { getWebSocket } from "./websocket.js";
|
|
|
|
// Wait for the DOM to be fully loaded
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
// Select the container where the light-components will be added
|
|
const appContainer = document.getElementById("app");
|
|
|
|
// Fetch the JSON data from the /light endpoint
|
|
try {
|
|
const response = await fetch("/light");
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
const lightData = await response.json();
|
|
|
|
// 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) {
|
|
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.");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching light data:", error);
|
|
}
|
|
});
|