Merge branch '44-als-gebruiker-wil-ik-dat-de-website-automatisch-het-aantal-nodes-dat-ik-heb-aangesloten-op-de'

web/classes.js

@@ -1,7 +1,47 @@
-class liveGraph {
+class node {
+  // Constructor to initialize the node
+  constructor(nodeId) {
+    this.nodeId = nodeId;
+    this.temperature = 0;
+    this.humidity = 0;
+    this.eCO2 = 0;
+    this.TVOC = 0;
+    this.connected = false;
+  }
+  // Function to update the data
+  updateData(temperature, humidity, eCO2, TVOC) {
+    this.temperature = temperature;
+    this.humidity = humidity;
+    this.eCO2 = eCO2;
+    this.TVOC = TVOC;
+  }
+  // Function to update the connection status
+  updateConnection() {
+    if (connectedNodes[this.nodeId]) {
+      this.connected = true;
+    } else {
+      this.connected = false;
+    }
+  }
+}
+
+class feedbackNode extends node {
+  // Constructor to initialize the feedback node
+  constructor(nodeId) {
+    super(nodeId);
+    this.feedback = {};
+    this.answers = 0;
+  }
+  // Function to update the feedback
+  updateFeedback(feedback) {
+    this.feedback = feedback;
+  }
+}
+
+class liveGraph extends graph {
   // Constructor to initialize the graph
   constructor(id) {
-    this.timeArray = [];
+    super(id);
     this.tempArray = [];
     this.humiArray = [];
     this.eco2Array = [];
@@ -60,7 +100,12 @@ class liveGraph {
 
     let update = {
       x: [[this.timeArray]],
-      y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]]
+      y: [
+        [this.tempArray],
+        [this.humiArray],
+        [this.eco2Array],
+        [this.tvocArray],
+      ],
     };
 
     let olderTime = time.setMinutes(time.getMinutes() - 1);
@@ -82,4 +127,46 @@ class liveGraph {
     this.eco2Array.push(eCO2 / 10);
     this.tvocArray.push(TVOC / 10);
   }
-}
+}
+
+class graph {
+  // Constructor to initialize the graph
+  constructor(id) {
+      this.nodeId = "graph" + id;
+      this.timeArray = [];
+  }
+  // Function to create a graph
+  makeGraph(amountOfGraphs, array1, array2, array3, array4) {
+    for (let i = 0; i < amountOfGraphs; i++) {
+      // Create a new line for temperature
+      Plotly.plot(this.nodeId, [
+        {
+          x: this.timeArray, // Use timeArray as x values
+          y: array + i,
+          mode: "lines",
+          line: { color: "#FF0000" },
+          name: "Temperature",
+        },
+      ]);
+    }
+  }
+  // Function to update the graph with new values got from updateData function
+  updateGraph(array1, array2, array3, array4) {
+    let time = new Date();
+    this.timeArray.push(new Date());
+
+    let update = {
+      x: [[this.timeArray]],
+      y: [array1, array2, array3, array4],
+    };
+
+    let olderTime = time.setMinutes(time.getMinutes() - 1);
+    let futureTime = time.setMinutes(time.getMinutes() + 1);
+    let minuteView = {
+      xaxis: {
+        type: "date",
+        range: [olderTime, futureTime],
+      },
+    };
+  }
+}

web/main.js

@@ -5,10 +5,6 @@ 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
@@ -29,6 +25,7 @@ function openConnection() {
       const jsonData = JSON.parse(event.data);
       // Use the parsed JSON data as needed
       handleIncomingData(jsonData);
+      console.log(jsonData);
 
   } catch (error) {
       console.error("Error parsing JSON:", error);
@@ -47,24 +44,36 @@ function openConnection() {
 openConnection();
 
 function handleIncomingData(data) {
-  nodeAdressHandler(data.Node);
-
-  nodeNumber = nodeDict[data.Node];
+  if (!data.message) {
+  nodeEventHandler(data.node);
+  nodeNumber = nodeDict[data.node];
   temperature = data.Temp;
   humidity = data.Humi;
   CO2 = data.eCO2;
   TVOC = data.TVOC;
 
   updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
+  }
 }
 
-function nodeAdressHandler(node) {
+function nodeEventHandler(node) {
   if (!nodeArray.includes(node)) {
     nodeArray.push(node);
     nodeDict[node] = nodeArray.length;
+
+    makeLiveGraph(nodeArray.length);    
   }
 }
 
+function makeLiveGraph(node) {
+  createNodeData(node);
+  liveGraphs.push(new liveGraph(node));
+
+  console.log("Node " + node + " added to the liveGraphs array");
+
+  liveGraphs[node - 1].makeGraph();
+}
+
 //function for making the html elements for the following html code
 function nodeData(data, node) {
   let nodeData = document.createElement("div");
@@ -175,20 +184,6 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
   document.getElementById("TVOCStatus").textContent = "Connected";
 
   // Update the graph
-  liveGraphs[0].updateData(temperature, humidity, eCO2, TVOC);
-  liveGraphs[0].updateGraph();
-
-  console.log(nodeDict[node]);
-  console.log(nodeArray);
-}
-
-// Call the function to create the HTML structure
-for (let i = 1; i <= amountOfNodes; i++) {
-  createNodeData(i);
-  liveGraphs.push(new liveGraph(i));
-}
-
-// make the graphs
-liveGraphs.forEach((graph) => {
-  graph.makeGraph();
-});
+  liveGraphs[node - 1].updateData(temperature, humidity, eCO2, TVOC);
+  liveGraphs[node - 1].updateGraph();
+}