Merge branch 'main' of gitlab.fdmci.hva.nl:propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59

server/Flask/queries.py

@@ -1,5 +1,13 @@
 def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd):
- if node and dataType:
+ if dateStart and dateEnd and node: 
+      query = f'''SELECT *
+               FROM Measurement
+               WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node};'''
+ elif dateStart and dateEnd: 
+      query = f'''SELECT *
+               FROM Measurement
+               WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';'''
+ elif node and dataType:
     query = f"SELECT * FROM Measurement WHERE NodeID = {node} AND Type = '{dataType}'"
  elif node:
     query = f"SELECT * FROM Measurement WHERE NodeID = {node}"
@@ -13,7 +21,7 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd):
     query = f"SELECT * FROM Question"
  elif replies:
     query = f"SELECT * FROM Reply"
- elif dateStart and dateEnd: 
+ elif dateStart and dateEnd and node: 
       query = f'''SELECT *
                FROM Measurement
                WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';'''

web/newWebsite/graph-classes.js

@@ -10,6 +10,9 @@ class Graph {
 
   // Function to create a graph
   makeGraph(line, lineColor, name) {
+    let div = document.createElement("div");
+    div.setAttribute("id", this.id);
+    document.body.appendChild(div);
     let lineArray;
     switch (line) {
       case "temp":
@@ -27,7 +30,6 @@ class Graph {
       default:
         console.error("Invalid line");
     }
-    this.timeArray.push(new Date());
     Plotly.plot(this.id, [
       {
         x: this.timeArray,
@@ -39,7 +41,9 @@ class Graph {
     ]);
   }
 
-  updateData(type, value) {
+  updateData(type, value, timestamp) {
+    this.timeArray.push(timestamp);
+
     switch (type) {
       case "Temp":
         this.tempArray.push(value);
@@ -59,8 +63,6 @@ class Graph {
   }
 
   updateGraph() {
-    let time = new Date();
-    this.timeArray.push(time);
     let update = {
       x: [[this.timeArray]],
       y: [
@@ -71,15 +73,7 @@ class Graph {
       ],
     };
 
-    let olderTime = time.setMinutes(time.getMinutes() - 1);
-    let futureTime = time.setMinutes(time.getMinutes() + 1);
-    let minuteView = {
-      xaxis: {
-        type: "date",
-        range: [olderTime, futureTime],
-      },
-    };
-    Plotly.relayout(this.id, minuteView);
+    Plotly.relayout(this.id, update);
   }
 }
 
@@ -142,9 +136,6 @@ class DataProcessor {
   }
 
   makeGraph() {
-    let div = document.createElement("div");
-    div.setAttribute("id", "graph1");
-    document.body.appendChild(div);
     this.graph = new Graph(1);
     this.graph.makeGraph("temp", "red", "Temperature");
     this.graph.makeGraph("humi", "blue", "Humidity");
@@ -153,15 +144,10 @@ class DataProcessor {
   }
 
   updateGraph() {
-    this.graph.updateData(this.data[0].Type, this.data[0].Value);
-    console.log(this.data[0].Type, this.data[0].Value);
-    this.graph.updateData(this.data[1].Type, this.data[1].Value);
-    console.log(this.data[1].Type, this.data[1].Value);
-    this.graph.updateData(this.data[2].Type, this.data[2].Value);
-    console.log(this.data[2].Type, this.data[2].Value);
-    this.graph.updateData(this.data[3].Type, this.data[3].Value);
-    console.log(this.data[3].Type, this.data[3].Value);
-
-    this.graph.updateGraph();
+    for (let i = 0; i < this.data.length; i++) {
+      this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
+      console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
+      this.graph.updateGraph();
+    }
   }
 }

web/newWebsite/graph-main.js

@@ -1,6 +1,7 @@
 // Sample data - you can replace this with your actual dataset
 const data = [];
 processor = new DataProcessor();
+
 // Function to create checkbox with label
 function createCheckBox(id, label) {
   const checkbox = document.createElement("input");
@@ -107,9 +108,15 @@ function createFilterContainer() {
   document.body.appendChild(container);
 }
 
+// Function to get the link for the get request
+function getLink(startDate, endDate, node) {
+  return link = "http://getMeasurements?dateStart=" + startDate.toISOString() + 
+                "&dateEnd=" + endDate.toISOString() + 
+                "&node=" + node;
+}
 // Get request to fetch data from the server
-function fetchData() {
-  fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-27%2011:47:11")
+function fetchData(link) {
+  fetch(link)
     .then((response) => {
       if (!response.ok) {
         throw new Error("Network response was not ok");
@@ -120,7 +127,7 @@ function fetchData() {
       createFilterContainer();
       processor.update(data);
       processor.makeGraph();
-      processor.updateGraph();
+      processor.updateGraph(dateStart, dateEnd);
     })
     .catch((error) => {
       console.error("Error fetching data:", error);