From 9954d66af659cc4d76ae3ff5881ba36eddf5ad83 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:18:56 +0200 Subject: [PATCH 01/14] Refactor question creation and chart configuration --- web/newWebsite/questions-main.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 8bdaafc..010d6bf 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -13,15 +13,22 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ]; let dummydata5 = [30, 20, 20]; let questionOptionsDummy5 = ['no','yes', 'decently']; -const question1Data = new QuestionCreationClass(dummydata1,questionOptionsDummy1) -const question2Data = new QuestionCreationClass(dummydata2,questionOptionsDummy2) -const question3Data = new QuestionCreationClass(dummydata3, questionOptionsDummy3); -const question4Data = new QuestionCreationClass(dummydata4, questionOptionsDummy4); -const question5Data = new QuestionCreationClass(dummydata5, questionOptionsDummy5); + +let questionArray = []; +let questionOptionsDummy = []; +let dummydata = []; + +for (let i = 0; i < 5; i++) { + dummydata.push(dummydata1, dummydata2, dummydata3, dummydata4, dummydata5); + questionOptionsDummy.push(questionOptionsDummy1, questionOptionsDummy2, questionOptionsDummy3, questionOptionsDummy4, questionOptionsDummy5); + + questionArray.push(new QuestionCreationClass(dummydata[i], questionOptionsDummy[i])); +} + const chartConfig1 = { type: 'pie', - data: question1Data.questionData, + data: questionArray[0].questionData, options: { responsive: true, legend: { @@ -40,7 +47,7 @@ const chartConfig1 = { const chartConfig2 = { type: 'pie', - data: question2Data.questionData, + data: questionArray[1].questionData, options: { responsive: true, legend: { @@ -59,7 +66,7 @@ const chartConfig2 = { const chartConfig3 = { type: 'pie', - data: question3Data.questionData, + data: questionArray[2].questionData, options: { responsive: true, legend: { @@ -78,7 +85,7 @@ const chartConfig3 = { const chartConfig4 = { type: 'pie', - data: question4Data.questionData, + data: questionArray[3].questionData, options: { responsive: true, legend: { @@ -97,7 +104,7 @@ const chartConfig4 = { const chartConfig5 = { type: 'pie', - data: question5Data.questionData, + data: questionArray[4].questionData, options: { responsive: true, legend: { From 8ff9a4e9e409939c58cf0e7beee34b6b1e9c45a6 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:19:00 +0200 Subject: [PATCH 02/14] Fix updateGraph() method in DataProcessor class --- web/newWebsite/graph-classes.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 3e6e359..1889e51 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -67,7 +67,7 @@ class Graph { x: [this.timeArray], y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray], }; - + Plotly.update(this.id, update); } } @@ -140,10 +140,12 @@ class DataProcessor { } 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(); + for (let i = 0; i < this.data.length; i + 3) { + for (let i = 0; i < 4; 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(); + } } } } From 38722052f3075eea920c5fe3f586d76ac2daf2de Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Mon, 1 Apr 2024 13:19:25 +0200 Subject: [PATCH 03/14] resizing the pie graphs. --- web/newWebsite/styles/questions-dashboard-styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index eba538a..48fdf87 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -50,8 +50,8 @@ } .chart-container { - width: 80%; - margin: 20px auto; + width: 400px; + margin: 50px auto; } canvas { margin-bottom: 20px; From c539bb2edf06ff4ae8f8986aad19a32e64eeb289 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:50:49 +0200 Subject: [PATCH 04/14] Fix graph update bug and optimize data processing --- web/newWebsite/graph-classes.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 1889e51..b3e222a 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -42,8 +42,7 @@ class Graph { } updateData(type, value, timestamp) { - this.timeArray.push(timestamp); - + // this.timeArray.push(timestamp); switch (type) { case "Temp": this.tempArray.push(value); @@ -67,7 +66,7 @@ class Graph { x: [this.timeArray], y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray], }; - + console.log(update); Plotly.update(this.id, update); } } @@ -140,12 +139,13 @@ class DataProcessor { } updateGraph() { - for (let i = 0; i < this.data.length; i + 3) { - for (let i = 0; i < 4; 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(); + for (let i = 0; i < this.data.length; i++) { + if (i % 4 == 0){ + this.graph.timeArray.push(this.data[i].TimeStamp); } + 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(); + } } From 96d10b32fdeaeca9bfcdac527fe785621567c7d7 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Mon, 1 Apr 2024 13:56:49 +0200 Subject: [PATCH 05/14] chart class, shortcuts, for loop update. --- web/newWebsite/questions-chart-class.js | 27 +++++ ...n-class.js => questions-creation-class.js} | 0 web/newWebsite/questions-dashboard.html | 3 +- web/newWebsite/questions-main.js | 109 ++---------------- 4 files changed, 40 insertions(+), 99 deletions(-) create mode 100644 web/newWebsite/questions-chart-class.js rename web/newWebsite/{questions-main-class.js => questions-creation-class.js} (100%) diff --git a/web/newWebsite/questions-chart-class.js b/web/newWebsite/questions-chart-class.js new file mode 100644 index 0000000..42467d9 --- /dev/null +++ b/web/newWebsite/questions-chart-class.js @@ -0,0 +1,27 @@ +class ChartConfigClass{ + constructor(data, text){ + this.data = data + this.text = text + } + + get chartConfig() { + return{ + type: 'pie', + data: this.data, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: this.text + }, + animation: { + animateScale: true, + animateRotate: true + } + } + } + } +} \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-creation-class.js similarity index 100% rename from web/newWebsite/questions-main-class.js rename to web/newWebsite/questions-creation-class.js diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 46dad55..3594c6b 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -47,7 +47,8 @@ - + + \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 010d6bf..c9f996e 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -13,6 +13,8 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ]; let dummydata5 = [30, 20, 20]; let questionOptionsDummy5 = ['no','yes', 'decently']; +let chartConfigArray = []; +let textArray = []; let questionArray = []; let questionOptionsDummy = []; @@ -26,113 +28,24 @@ for (let i = 0; i < 5; i++) { } -const chartConfig1 = { - type: 'pie', - data: questionArray[0].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 1 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; +for (let i = 0; i < 5; i++){ + textArray.push('Question 1 Responses', 'Question 2 Responses', 'Question 3 Responses', 'Question 4 Responses', 'Question 5 Responses'); -const chartConfig2 = { - type: 'pie', - data: questionArray[1].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 2 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; - -const chartConfig3 = { - type: 'pie', - data: questionArray[2].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 3 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; - -const chartConfig4 = { - type: 'pie', - data: questionArray[3].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 4 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; - -const chartConfig5 = { - type: 'pie', - data: questionArray[4].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 5 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; + chartConfigArray.push(new ChartConfigClass(questionArray[i].questionData, textArray[i])); +} // Create the charts const ctx1 = document.getElementById('chart1').getContext('2d'); -const myChart1 = new Chart(ctx1, chartConfig1); +const myChart1 = new Chart(ctx1, chartConfigArray[0].chartConfig); const ctx2 = document.getElementById('chart2').getContext('2d'); -const myChart2 = new Chart(ctx2, chartConfig2); +const myChart2 = new Chart(ctx2, chartConfigArray[1].chartConfig); const ctx3 = document.getElementById('chart3').getContext('2d'); -const myChart3 = new Chart(ctx3, chartConfig3); +const myChart3 = new Chart(ctx3, chartConfigArray[2].chartConfig); const ctx4 = document.getElementById('chart4').getContext('2d'); -const myChart4 = new Chart(ctx4, chartConfig4); +const myChart4 = new Chart(ctx4, chartConfigArray[3].chartConfig); const ctx5 = document.getElementById('chart5').getContext('2d'); -const myChart5 = new Chart(ctx5, chartConfig5); +const myChart5 = new Chart(ctx5, chartConfigArray[4].chartConfig); From fdd4b647ec81cb59e8cf4729e2666492e206d24a Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:57:38 +0200 Subject: [PATCH 06/14] Update graph styles in CSS file --- web/newWebsite/styles/graph-styles.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index 70e4a11..370617f 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -50,7 +50,7 @@ body { border-radius: 10px; margin: 20px; padding: 20px; - width: 100%; + width: 90; box-sizing: border-box; } @@ -98,8 +98,7 @@ body { } .filter-button { - flex: 1; - width: 20%; + width: 10%; background-color: #007bff; color: white; padding: 10px; @@ -108,4 +107,10 @@ body { cursor: pointer; } +.js-plotly-plot { + align-self: center; + width: 95%; + height: 100%; + margin: 10px; +} /* Additional styling as needed */ From b0b1ed84c76c2a42b34cc41ee501d3b42502e029 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Mon, 1 Apr 2024 14:01:16 +0200 Subject: [PATCH 07/14] code comments added. --- web/newWebsite/questions-main.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index c9f996e..06bf47e 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,3 +1,4 @@ +//For now create dummy data to show on the website. let dummydata1 = [40, 30, 20]; let questionOptionsDummy1 = ['disgusting','clean', 'fine']; @@ -13,6 +14,7 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ]; let dummydata5 = [30, 20, 20]; let questionOptionsDummy5 = ['no','yes', 'decently']; +//make arrays to store data. let chartConfigArray = []; let textArray = []; @@ -20,6 +22,7 @@ let questionArray = []; let questionOptionsDummy = []; let dummydata = []; +//Go along the array's to fetch data, and push this in a class. for (let i = 0; i < 5; i++) { dummydata.push(dummydata1, dummydata2, dummydata3, dummydata4, dummydata5); questionOptionsDummy.push(questionOptionsDummy1, questionOptionsDummy2, questionOptionsDummy3, questionOptionsDummy4, questionOptionsDummy5); @@ -27,7 +30,7 @@ for (let i = 0; i < 5; i++) { questionArray.push(new QuestionCreationClass(dummydata[i], questionOptionsDummy[i])); } - +//Go allong another array to also give the class that creates the charts the data collected by the previous array. for (let i = 0; i < 5; i++){ textArray.push('Question 1 Responses', 'Question 2 Responses', 'Question 3 Responses', 'Question 4 Responses', 'Question 5 Responses'); From 650032fced8ba3f58a714856e28a6bf9e3660d5e Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 14:35:30 +0200 Subject: [PATCH 08/14] Refactor questions-dashboard.html and questions-dashboard-styles.css --- web/newWebsite/questions-dashboard.html | 15 +++++++++----- .../styles/questions-dashboard-styles.css | 20 +++++++++++++++---- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 3594c6b..5ce5f66 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -30,21 +30,26 @@
+

Question 1: How clean are the toilets?

- +
+

Question 2: How clean is the study area?

- +
+

Question 3: What do you think of the temperature in the study area?

- +
+

Question 4: How crowded would you say the study area is?

- +
+

Question 5: Is there enough help available on the 5th floor?

- +
diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index 48fdf87..b336bc0 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -4,6 +4,7 @@ } body { + flex-direction: row; padding-top: 5vw; display: flex; background-color: #dbd7d7; @@ -42,16 +43,27 @@ } #data-container { - width: 80%; - margin: 0 auto; padding: 20px; background-color: #f5f5f5; border: 1px solid #ccc; } .chart-container { - width: 400px; - margin: 50px auto; + justify-content: center; + align-self: start; + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} + +.chart { + width: 30%; + margin: 20px; + padding: 20px; + background-color: #dbd7d7; + border: 3px solid #000; + border-radius: 30px; } canvas { margin-bottom: 20px; From 4ab7709c8203e2085ebb6bdbcef14845cfbc8f54 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 14:41:02 +0200 Subject: [PATCH 09/14] Refactor getData function and fix query bug --- server/Flask/main.py | 4 ++-- server/Flask/queries.py | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index 349cf99..029b1e0 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -49,9 +49,9 @@ def loginDB(): ) return mydb -def getData(node, dataType, MAC, dateStart, dateEnd): +def getData(node, dataType, MAC, dateStart, dateEnd, type): mydb = loginDB() - query = get_query(node, dataType, MAC, False, False, dateStart, dateEnd) + query = get_query(node, dataType, MAC, dateStart, dateEnd, type) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results diff --git a/server/Flask/queries.py b/server/Flask/queries.py index 2257b79..8c6d004 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -1,12 +1,12 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): - if dateStart and dateEnd and node: + if dateStart and dateEnd and node and dataType: + query = f'''SELECT * + FROM Measurement + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node} AND Type IN {dataType} OR;''' + elif 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: From c789aec3730b6ce2d0b62b133a79b3c38b1b0c03 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 14:41:30 +0200 Subject: [PATCH 10/14] Add dataTypes parameter to generateLink function --- web/newWebsite/graph-main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index e07f628..457fbce 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -110,12 +110,12 @@ container.appendChild(filterButton); document.body.appendChild(container); // Function to get the link for the get request -function generateLink(dateStart, dateEnd, node) { +function generateLink(dateStart, dateEnd, node, dataTypes) { const baseUrl = 'http://145.92.8.114/getMeasurements'; const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20'); const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20'); - link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}`; + link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}&dataTypes=${dataTypes}`; console.log(link); } From a53ecb1c96c4aa4844ffb8677ba09e0f42fa7234 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 16:09:17 +0200 Subject: [PATCH 11/14] yippee het werkt --- web/newWebsite/graph-classes.js | 6 ++++++ web/newWebsite/graph-main.js | 24 +++++++++++++++--------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index b3e222a..9700ab0 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -139,6 +139,12 @@ class DataProcessor { } updateGraph() { + this.graph.timeArray = []; + this.graph.tempArray = []; + this.graph.humiArray = []; + this.graph.eco2Array = []; + this.graph.tvocArray = []; + for (let i = 0; i < this.data.length; i++) { if (i % 4 == 0){ this.graph.timeArray.push(this.data[i].TimeStamp); diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 457fbce..3d10f42 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -24,10 +24,10 @@ container.setAttribute("class", "container"); const dataTypesContainer = document.createElement("div"); dataTypesContainer.setAttribute("class", "data-types"); -const temperatureCheckbox = createCheckBox("temperature", "Temperature"); -const humidityCheckbox = createCheckBox("humidity", "Humidity"); -const eco2Checkbox = createCheckBox("eco2", "eCO2"); -const tvocCheckbox = createCheckBox("tvoc", "TVOC"); +const temperatureCheckbox = createCheckBox("Temp", "Temperature"); +const humidityCheckbox = createCheckBox("Humi", "Humidity"); +const eco2Checkbox = createCheckBox("eCO2", "eCO2"); +const tvocCheckbox = createCheckBox("TVOC", "TVOC"); dataTypesContainer.appendChild(temperatureCheckbox.checkbox); dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); @@ -55,24 +55,30 @@ filterButton.addEventListener("click", () => { temperatureCheckbox, humidityCheckbox, eco2Checkbox, - tvocCheckbox, + tvocCheckbox ]; + checkboxes.forEach((checkbox) => { if (checkbox.checkbox.checked) { - selectedFields.push(checkbox.checkbox.id); + selectedFields.push(String(checkbox.checkbox.id)); } }); + let selectedFieldsString = selectedFields.map(String); + + let formattedString = '(' + selectedFieldsString.map(item => `'${item}'`).join(', ') + ')'; + const filteredData = [ startDate, endDate, selectedNodes, - selectedFields + formattedString ]; + console.log(filteredData); console.log(startDate, endDate, selectedNodes); - generateLink(startDate, endDate, selectedNodes); + generateLink(startDate, endDate, selectedNodes, formattedString); fetchData(); }); @@ -115,7 +121,7 @@ function generateLink(dateStart, dateEnd, node, dataTypes) { const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20'); const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20'); - link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}&dataTypes=${dataTypes}`; + link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}&dataType=${dataTypes}`; console.log(link); } From 5aa494773e064b94f5a1e8875586a353be034491 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 16:09:20 +0200 Subject: [PATCH 12/14] Refactor getData function and fix SQL query in queries.py --- server/Flask/main.py | 6 ++++-- server/Flask/queries.py | 11 ++++++----- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index 029b1e0..87168c9 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -1,6 +1,7 @@ from flask import Flask, request, jsonify import mysql.connector from queries import * +import ast app = Flask(__name__) @app.route('/getMeasurements') @@ -49,9 +50,10 @@ def loginDB(): ) return mydb -def getData(node, dataType, MAC, dateStart, dateEnd, type): +def getData(node, dataType, MAC, dateStart, dateEnd): + dataTypeTuple = ast.literal_eval(dataType) mydb = loginDB() - query = get_query(node, dataType, MAC, dateStart, dateEnd, type) + query = get_query(node, dataTypeTuple, MAC, dateStart, dateEnd) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results diff --git a/server/Flask/queries.py b/server/Flask/queries.py index 8c6d004..0211c8d 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -2,11 +2,15 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): if dateStart and dateEnd and node and dataType: query = f'''SELECT * FROM Measurement - WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node} AND Type IN {dataType} OR;''' + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node} AND Type IN ('{dataType}');''' elif 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: @@ -21,10 +25,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 and node: - query = f'''SELECT * - FROM Measurement - WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' + else: query = "SELECT * FROM `Measurement`" return query From 267bb7db9cc019d9ed06b932ea4769bd2ead75b9 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 16:13:38 +0200 Subject: [PATCH 13/14] Refactor getData and getNodeInfo functions --- server/Flask/main.py | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index 87168c9..9fb35a1 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -1,7 +1,6 @@ from flask import Flask, request, jsonify import mysql.connector from queries import * -import ast app = Flask(__name__) @app.route('/getMeasurements') @@ -50,10 +49,9 @@ def loginDB(): ) return mydb -def getData(node, dataType, MAC, dateStart, dateEnd): - dataTypeTuple = ast.literal_eval(dataType) +def getData(node, dataTypes, MAC, dateStart, dateEnd): mydb = loginDB() - query = get_query(node, dataTypeTuple, MAC, dateStart, dateEnd) + query = get_query(node, dataTypes, MAC, False, False, dateStart, dateEnd) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results @@ -64,7 +62,7 @@ def getData(node, dataType, MAC, dateStart, dateEnd): def getNodeInfo(macAdress): mydb = loginDB() - query = get_query(False, False, macAdress, False, False) + query = get_query(False, False, macAdress, False, False, False, False) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results From 61d67fc1e295493ee525474fdbaa872ab735bb15 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 16:20:36 +0200 Subject: [PATCH 14/14] Update node input placeholder and adjust styles --- web/newWebsite/graph-main.js | 2 +- web/newWebsite/styles/settings-styles.css | 202 ++++++++++++++++++++++ 2 files changed, 203 insertions(+), 1 deletion(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 3d10f42..cd9760a 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -104,7 +104,7 @@ nodeFilter.setAttribute("class", "node-filter"); const nodeInput = document.createElement("input"); nodeInput.setAttribute("type", "text"); -nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)"); +nodeInput.setAttribute("placeholder", "Enter Node Name (* for all)"); nodeInput.setAttribute("id", "node-input"); nodeInput.setAttribute("class", "input-field"); diff --git a/web/newWebsite/styles/settings-styles.css b/web/newWebsite/styles/settings-styles.css index e69de29..f00eca5 100644 --- a/web/newWebsite/styles/settings-styles.css +++ b/web/newWebsite/styles/settings-styles.css @@ -0,0 +1,202 @@ +* { + box-sizing: border-box; + font-family: "Roboto", sans-serif; + + +} + +body { + display: flex; + justify-content: center; + margin: 0; + margin-top: 8vh; + background-color: #f0f0f0; + flex-direction: column; + background-color: #afafaf; + align-items: center; + +} + +.gaugeGroup { + width: 98vw; + height: auto; + display: flex; + flex-direction: column; /* Keep as column */ + justify-content: flex-start; + background-color: #333; + color: #fff; + padding: 10px; + border-radius: 50px; + border: 2px solid #333; + clear: both; + margin-bottom: 10px; + position: relative; +} + +.groupTitle { + width: 100%; + text-align: center; + font-size: 24px; +} + +.Node { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 100%; +} + +.Sensorvalues { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 15%; + height: 110%; + background-color: #ddd; + color: #333; + padding: 10px; + margin: 10px; + border-radius: 10px; + text-align: center; + position: relative; + padding-top: 3vh; /* Increase bottom padding */ + +} + +.gaugeContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 80%; /* Increase the height from 70% to 80% */ + position: relative; + overflow: visible; + height: 5vh; + margin-bottom: 1vh; + +} + +.gaugeImage { + width: 100%; + height: auto; + max-height: 120%; + object-fit: contain; + position: absolute; /* Make the image position absolute */ + top: 0; + left: 0; + z-index: 1; /* Make the image display below the needle */ + bottom: 0; +} + +.gaugeValue, .gaugeText { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; +} + +.gaugeText { + width: 100%; + text-align: center; + font-size: 1.4vw; + z-index: 2; + position: absolute; + top: -1.4vw; /* Adjust this value to move the text further down */ + +} + +.arrowimg { + width: 3vh; + height: auto; + max-height: 100%; + object-fit: contain; + position: absolute; + top: 0.5vw; + right: 1.2vw; + z-index: 2; +} + +.valueContainer { + display: flex; + justify-content: center; + margin-top: 10px; +} + +#valueText { + font-size: 20px; +} + +.needle { + position: absolute; + bottom: -10%; /* Lower the needle to the bottom */ + left: 50%; + width: 2px; + height: 100%; + background-color: black; + transform-origin: bottom; + z-index: 3; /* Make the needle display above the image */ + transition: transform 0.1s ease-out; + +} + +.contentContainer { + display: flex; + flex-direction: row; /* Layout children side by side */ + width: 100%; + height: 100%; +} + +.navbar { + background-color: #333; + height: 60px; + display: flex; + align-items: center; + padding: 0 20px; + position: fixed; /* Fix the navbar at the top of the page */ + top: 0; /* Position it at the very top */ + width: 100%; /* Make it span the full width of the page */ + z-index: 1000; /* Make sure it's above all other elements */ +} + +.navbar-nav { + list-style: none; + display: flex; + align-items: center; + justify-content: center; /* Center the links horizontally */ + height: 100%; + width: 100%; /* Make it span the full width of the navbar */ +} + +.nav-item { + margin-right: 20px; +} + +.nav-link { + color: #fff; + text-decoration: none; + font-size: 18px; +} + +.plotly-container { + width: 100%; + float: bottom; + padding: 1vw; + align-items: center; + justify-content: center; + display: flex; +} + +.js-plotly-plot { + width: 90%; + height: 100%; +} + +.disabled { + opacity: 0; + height: 0; + +} \ No newline at end of file