Added websocket script and modified it to work with the class

web/new website/main.js

@@ -0,0 +1,115 @@
+// Description: Main JavaScript file for the web application.
+// arrays and stuff
+const sensorData = {};
+let liveGraphs = [];
+let nodeArray = [];
+let nodeDict = {};
+
+// letiables
+let intervalDelay = 5000;
+let amountOfNodes = 3;
+
+const socket = new WebSocket("ws://145.92.8.114/ws");
+function openConnection() {
+  // Open connection
+  socket.addEventListener("open", (event) => {
+    console.log("Connected to the WebSocket server");
+  });
+
+  // Error handling
+  socket.addEventListener('error', (event) => {
+    console.error('WebSocket error:', event);
+    // Attempt to reconnect
+    setTimeout(openConnection, 1000); // Retry after 1 second
+  });
+
+  // Message handling
+  socket.addEventListener("message", (event) => {
+    try {
+      const jsonData = JSON.parse(event.data);
+      // Use the parsed JSON data as needed
+      handleIncomingData(jsonData);
+
+  } catch (error) {
+      console.error("Error parsing JSON:", error);
+  }
+  });
+
+  // Close handling
+  socket.addEventListener('close', (event) => {
+    console.log('Connection closed');
+    // Attempt to reconnect
+    setTimeout(openConnection, 1000); // Retry after 1 second
+  });
+  console.log("Connected to the WebSocket server");
+}
+
+openConnection();
+
+function handleIncomingData(data) {
+    if (!data.node || !data.Temp || !data.Humi || !data.eCO2 || !data.TVOC) {
+      console.error('Invalid data received:', data);
+      return;
+    }
+  
+    nodeAdressHandler(data.node, Object.keys(data).filter(key => key !== 'node'));
+  
+    nodeNumber = nodeDict[data.node];
+    temperature = data.Temp;
+    humidity = data.Humi;
+    CO2 = data.eCO2;
+    TVOC = data.TVOC;
+  
+    // Update the gauges with the new data
+    sensorData[data.node].updateGauge(1, temperature);
+    sensorData[data.node].updateGauge(2, humidity);
+    sensorData[data.node].updateGauge(3, CO2);
+    sensorData[data.node].updateGauge(4, TVOC);
+}
+
+function nodeAdressHandler(node, dataTypes) {
+    if (!nodeArray.includes(node)) {
+      nodeArray.push(node);
+      nodeDict[node] = nodeArray.length;
+  
+      // Define the maximum values for each data type
+      let maxGaugeValues = dataTypes.map(dataType => {
+        switch (dataType) {
+          case 'Temp': return 50;
+          case 'Humi': return 100;
+          case 'eCO2': return 3000;
+          case 'TVOC': return 2200;
+          default: return 100;
+        }
+      });
+  
+      // Create a new GaugeGroup for the node
+      let gaugeGroup = new GaugeGroup(node, dataTypes.length, maxGaugeValues, dataTypes);
+  
+      // Store the GaugeGroup in the sensorData object for later use
+      sensorData[node] = gaugeGroup;
+    }
+}
+
+function createGauge(node, dataType) {
+    // Create a new gauge here
+    let gauge = new GaugeGroup(node, dataType); // Assuming Gauge is the name of the class
+    sensorData[node][dataType] = gauge; // Store the gauge in the sensorData object for later use
+}
+  
+
+//function for making the html elements for the following html code
+function nodeData(data) {
+  let nodeData = document.createElement("div");
+  nodeData.innerHTML = data;
+  // nodeData.setAttribute("id", "node" + node);
+  document.body.appendChild(nodeData);
+  // console.log("Hello World");
+}
+
+
+function updateGauge(nodeNumber, dataType, value) {
+    // Update the gauge here
+    let gauge = sensorData[nodeNumber][dataType]; // Get the gauge from the sensorData object
+    gauge.update(value); // Assuming the Gauge class has an update method
+  }