I did it 😊

web/main.js

@@ -10,35 +10,11 @@ let valueArray = [1, 2, 3, 4, 5];
 let newValueArray = [4, 5, 6];
 let myValue = 1;
 let intervalDelay = 50;
-const sendorDataNode1 = [];
+const sensorData = {};
-const sendorDataNode2 = [];
-
-// const socket = new WebSocket("ws://127.0.0.1:8001");  
 
 // Create WebSocket connection.
 const socket = new WebSocket("ws://145.92.8.114/ws");
 
-/*
-function openConnection() {
-// Connection opened
-socket.addEventListener("open", (event) => {
-  console.log("Connected to the WebSocket server");
-  socket.send("Hello Server!");
-});}
-
-// Error handling
-socket.addEventListener('error', (event) => {
-  console.error('WebSocket error:', event);
-});
-
-// Message handling
-socket.addEventListener("message", (event) => {
-  console.log('Message from server:', event.data);
-});
-
-openConnection();
-*//////////////////////
-
 function openConnection() {
   // Open connection
   socket.addEventListener("open", (event) => {
@@ -85,52 +61,39 @@ function handleIncomingData(data) {
   humidity = data.Humi;
   CO2 = data.eCO2;
   TVOC = data.TVOC;
-  
-  // console.log("Temperature: ", temperature);
-  // console.log("Humidity: ", humidity);
-  // console.log("CO2: ", CO2);
-  // console.log("TVOC: ", TVOC);
 
-  if (nodeNumber == 1) {
+  processNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
-    sendorDataNode1.push({
+}
-      'node': nodeNumber,
+
-      'temp': temperature,
+function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) {
-      'humi': humidity,
+  // Initialize the array for this node if it doesn't exist yet
-      'CO2': CO2,
+  if (!sensorData[nodeNumber]) {
-      'TVOC': TVOC,
+    sensorData[nodeNumber] = [];
-    });
-  } else if (nodeNumber == 2) {
-    sendorDataNode2.push({
-      'node': nodeNumber,
-      'temp': temperature,
-      'humi': humidity,
-      'CO2': CO2,
-      'TVOC': TVOC,
-    });
   }
 
-  // sendorData.push({
+  // Push the new data onto the array for this node
-  //   'node': nodeNumber,
+  sensorData[nodeNumber].push({
-  //   'temp': temperature,
+    'node': nodeNumber,
-  //   'humi': humidity,
+    'temp': temperature,
-  //   'CO2': CO2,
+    'humi': humidity,
-  //   'TVOC': TVOC,
+    'CO2': CO2,
-  // });
+    'TVOC': TVOC,
+  });
 
-  if (nodeNumber == 1) {
+  // updateNodeData(node, temperature, humidity, lightIntensity)
-  console.log(sendorDataNode1);
+  updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
-  } else if (nodeNumber == 2) {
-  console.log(sendorDataNode2);
-  }
 
-  if (sendorDataNode1.length >= 10) {
+  // Log the array for this node
-    sendorDataNode1.shift();
+  console.log(sensorData[nodeNumber]);
-  }
+
-  if (sendorDataNode2.length >= 10) {
+  // If the array for this node has more than 10 elements, remove the oldest one
-    sendorDataNode2.shift();
+  if (sensorData[nodeNumber].length >= 10) {
+    sensorData[nodeNumber].shift();
   }
 }
 
+
+
 function pushArray(array) {
   for (let i = 0; i < 10; i++) {
     array.push(Math.random() * 10);
@@ -187,10 +150,6 @@ function nodeData(data, node) {
   // console.log("Hello World");
 }
 
-// nodeData("Temperature: ", 1);
-// nodeData("Humidity: ", 2);
-
-
 function createNodeData(node) {
   // Create main div
   var nodeData = document.createElement("div");
@@ -212,9 +171,9 @@ function createNodeData(node) {
   flexLiveData.className = "flex-LiveData";
 
   // Create data divs (Temperature, Humidity, Light Intensity)
-  var dataTypes = ["Temperatuur", "Luchtvochtigheid", "Lichtintensiteit"];
+  var dataTypes = ["Temperatuur", "Luchtvochtigheid", "CO2", "TVOC"];
-  var ids = ["temperature", "humidity", "lightIntensity"];
+  var ids = ["temperature", "humidity", "CO2", "TVOC"];
-  var statusIds = ["tempStatus", "humidStatus", "lightIntensityStatus"];
+  var statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"];
 
   for (var i = 0; i < dataTypes.length; i++) {
       var dataDiv = document.createElement("div");
@@ -223,7 +182,7 @@ function createNodeData(node) {
       dataTypeDiv.textContent = dataTypes[i] + ": ";
 
       var pElement = document.createElement("p");
-      pElement.id = ids[i];
+      pElement.id = ids[i] + node;
       pElement.textContent = "Not connected";
 
       dataTypeDiv.appendChild(pElement);
@@ -278,6 +237,20 @@ function createNodeData(node) {
   }
 }
 
+function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
+  // Update the temperature, humidity and light intensity values
+  document.getElementById("temperature" + node).textContent = temperature;
+  document.getElementById("humidity" + node).textContent = humidity;
+  document.getElementById("CO2" + node).textContent = eCO2;
+  document.getElementById("TVOC" + node).textContent = TVOC;
+
+  // Update the status text
+  document.getElementById("tempStatus").textContent = "Connected";
+  document.getElementById("humidStatus").textContent = "Connected";
+  document.getElementById("CO2Status").textContent = "Connected";
+  document.getElementById("TVOCStatus").textContent = "Connected";
+}
+
 // Call the function to create the HTML structure
 createNodeData(1);
 createNodeData(2);