Merge branch 'Website_websocket' into 'main'

Website websocket

See merge request propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59!4

docs/brainstorm/SoftwareDocumentatie/Dev_page.md

@@ -2,15 +2,17 @@
 
 ### parsing JSON
 
+The data that is send by the nodes is send in json data. We chose this becouse we can easily use the data within javascript, this is called parsing. We use the parced data and send that in to the next function to make the data more acceseble to use in further instences. 
+
 ```js
       const jsonData = JSON.parse(event.data);
       // Use the parsed JSON data as needed
       handleIncomingData(jsonData);
 ```
 
-### Pro
-
+Here is the function that receves the parced JSON data and set it into variables. So that it can be more easlily used in the next function with is the processNodeData, witch is setting the data in to the right array.
 
+```js
 function handleIncomingData(data) {
   nodeNumber = data.node;
   temperature = data.Temp;
@@ -20,13 +22,20 @@ function handleIncomingData(data) {
 
   processNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
 }
+```
 
-function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) {
+In the function processNodeData we first check if there is a array for the node that is sending the data, this is done becouse if we want to seperate the data in to show witch node is sending what data. So if the nodeNumber plus sensorData (the name of the array) not already there the array is made.
+
+```js
   // Initialize the array for this node if it doesn't exist yet
   if (!sensorData[nodeNumber]) {
     sensorData[nodeNumber] = [];
   }
+```
 
+For the actual data put in to array function is there a simple array.push for the data that is send allong from when the function is called.
+
+```js
   // Push the new data onto the array for this node
   sensorData[nodeNumber].push({
     'node': nodeNumber,
@@ -35,106 +44,22 @@ function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) {
     'CO2': CO2,
     'TVOC': TVOC,
   });
+```
 
-  // updateNodeData(node, temperature, humidity, lightIntensity)
-  updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
-
-  // Log the array for this node
-  console.log(sensorData[nodeNumber]);
+We want only use the last 10 readings from the nodes so there is a check for if the array is longer than 10 the first (or the oldest reading), if that is so there is a .shift executed. This is done to be later used in the graph function. Than there is a call for the next function, that is the updateNodeData and that will acctually find the right html id coresponding with the right reading to update that.
 
+```js
   // If the array for this node has more than 10 elements, remove the oldest one
   if (sensorData[nodeNumber].length >= 10) {
     sensorData[nodeNumber].shift();
   }
-}
 
-function createNodeData(node) {
-  // Create main div
-  var nodeData = document.createElement("div");
-  nodeData.className = "nodeData";
+  updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
+```
 
-  // Create flex-NodeData div
-  var flexNodeData = document.createElement("div");
-  flexNodeData.clsName = "flex-NodeData";
-
-  // Create p element
-  var pNode = document.createElement("p");
-  pNode.textContent = "Node " + node;
-
-  // Append p to flex-NodeData
-  flexNodeData.appendChild(pNode);
-
-  // Create flex-LiveData div
-  var flexLiveData = document.createElement("div");
-  flexLiveData.className = "flex-LiveData";
-
-  // Create data divs (Temperature, Humidity, Light Intensity)
-  var dataTypes = ["Temperatuur", "Luchtvochtigheid", "CO2", "TVOC"];
-  var ids = ["temperature", "humidity", "CO2", "TVOC"];
-  var statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"];
-
-  for (var i = 0; i < dataTypes.length; i++) {
-      var dataDiv = document.createElement("div");
-
-      var dataTypeDiv = document.createElement("div");
-      dataTypeDiv.textContent = dataTypes[i] + ": ";
-
-      var pElement = document.createElement("p");
-      pElement.id = ids[i] + node;
-      pElement.textContent = "Not connected";
-
-      dataTypeDiv.appendChild(pElement);
-      dataDiv.appendChild(dataTypeDiv);
-
-      var statusElement = document.createElement("div");
-      statusElement.className = "statusElement";
-
-      var statusText = document.createElement("p");
-      statusText.className = "statusText";
-      statusText.id = statusIds[i];
-      statusText.textContent = "Not connected";
-
-      statusElement.appendChild(statusText);
-      dataDiv.appendChild(statusElement);
-
-      flexLiveData.appendChild(dataDiv);
-  }
-
-  // Append flex-LiveData to flex-NodeData
-  flexNodeData.appendChild(flexLiveData);
-
-  // Create flex-graph div
-  var flexGraph = document.createElement("div");
-  flexGraph.className = "flex-graph";
-
-  var graphDiv = document.createElement("div");
-
-  var graphP = document.createElement("p");
-  graphP.textContent = "Live graph:";
-
-  var liveGraph = document.createElement("div");
-  liveGraph.id = "liveGraph";
-
-  graphDiv.appendChild(graphP);
-  graphDiv.appendChild(liveGraph);
-  flexGraph.appendChild(graphDiv);
-
-  // Append flex-graph to flex-NodeData
-  flexNodeData.appendChild(flexGraph);
-
-  // Append flex-NodeData to main div
-  nodeData.appendChild(flexNodeData);
-
-  // Check if nodeDataLocation element exists
-  var nodeDataLocation = document.getElementById("nodeDataLocation");
-  if (nodeDataLocation) {
-    // Append main div to nodeDataLocation
-    nodeDataLocation.appendChild(nodeData);
-  } else {
-    console.error("Element with ID 'nodeDataLocation' does not exist.");
-  }
-}
+In the last function there are 2 updates the first is to actually update the text to the right value that we are getting from the node, and the connection checker. 
 
+```js
 function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
   // Update the temperature, humidity and light intensity values
   document.getElementById("temperature" + node).textContent = temperature;
@@ -148,4 +73,4 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
   document.getElementById("CO2Status").textContent = "Connected";
   document.getElementById("TVOCStatus").textContent = "Connected";
 }
-
+```