Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bram Barbieri
2024-04-01 13:19:27 +02:00
parent 38722052f3 59377aa2b5
commit ab8249702e
10 changed files with 126 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/newWebsite/graph-classes.js
View File

@@ -52,10 +52,10 @@ class Graph {
this.humiArray.push(value);
break;
case "eCO2":
this.eco2Array.push(value);
this.eco2Array.push(value / 10);
break;
case "TVOC":
this.tvocArray.push(value);
this.tvocArray.push(value / 10);
break;
default:
console.error("Invalid type");
@@ -64,16 +64,11 @@ class Graph {
updateGraph() {
let update = {
x: [[this.timeArray]],
y: [
[this.tempArray],
[this.humiArray],
[this.eco2Array],
[this.tvocArray],
],
x: [this.timeArray],
y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray],
};
Plotly.relayout(this.id, update);
Plotly.update(this.id, update);
}
}
@@ -126,11 +121,12 @@ class LiveGraph extends Graph {
class DataProcessor {
constructor(data) {
this.data = data;
this.graph;
}
// You can add more filtering methods based on different criteria if needed
update(data) {
this.data = data;
this.graph;
console.log("Data updated");
console.log(data);
}
@@ -144,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();
}
}
}
}

176
web/newWebsite/graph-main.js
View File

@@ -1,6 +1,7 @@
// Sample data - you can replace this with your actual dataset
const data = [];
processor = new DataProcessor();
let link;
// Function to create checkbox with label
function createCheckBox(id, label) {
@@ -16,106 +17,111 @@ function createCheckBox(id, label) {
return { checkbox, checkboxLabel };
}
// Function to ceate filter container and all the input elements
function createFilterContainer() {
// Create HTML input elements for user input
const container = document.createElement("div");
container.setAttribute("class", "container");
// Create HTML input elements for user input
const container = document.createElement("div");
container.setAttribute("class", "container");
const dataTypesContainer = document.createElement("div");
dataTypesContainer.setAttribute("class", "data-types");
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("temperature", "Temperature");
const humidityCheckbox = createCheckBox("humidity", "Humidity");
const eco2Checkbox = createCheckBox("eco2", "eCO2");
const tvocCheckbox = createCheckBox("tvoc", "TVOC");
dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
dataTypesContainer.appendChild(humidityCheckbox.checkbox);
dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
dataTypesContainer.appendChild(eco2Checkbox.checkbox);
dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
dataTypesContainer.appendChild(tvocCheckbox.checkbox);
dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
container.appendChild(dataTypesContainer);
dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
dataTypesContainer.appendChild(humidityCheckbox.checkbox);
dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
dataTypesContainer.appendChild(eco2Checkbox.checkbox);
dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
dataTypesContainer.appendChild(tvocCheckbox.checkbox);
dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
container.appendChild(dataTypesContainer);
const filterButton = document.createElement("button");
filterButton.textContent = "Filter Data";
filterButton.setAttribute("class", "filter-button");
filterButton.addEventListener("click", () => {
const startDate = new Date(document.getElementById("start-date").value);
const endDate = new Date(document.getElementById("end-date").value);
const selectedNodes = document
.getElementById("node-input")
.value.split(",")
.map((node) => node.trim());
const filterButton = document.createElement("button");
filterButton.textContent = "Filter Data";
filterButton.setAttribute("class", "filter-button");
filterButton.addEventListener("click", () => {
const startDate = document.getElementById("start-date").value
const endDate = document.getElementById("end-date").value
const selectedNodes = document
.getElementById("node-input")
.value.split(",")
.map((node) => node.trim());
const selectedFields = [];
const checkboxes = [
temperatureCheckbox,
humidityCheckbox,
eco2Checkbox,
tvocCheckbox,
];
checkboxes.forEach((checkbox) => {
if (checkbox.checkbox.checked) {
selectedFields.push(checkbox.checkbox.id);
}
});
const filteredData = filterData(
data,
startDate,
endDate,
selectedNodes,
selectedFields
);
console.log(filteredData);
const selectedFields = [];
const checkboxes = [
temperatureCheckbox,
humidityCheckbox,
eco2Checkbox,
tvocCheckbox,
];
checkboxes.forEach((checkbox) => {
if (checkbox.checkbox.checked) {
selectedFields.push(checkbox.checkbox.id);
}
});
const dateFilter = document.createElement("div");
dateFilter.setAttribute("class", "date-filter");
const filteredData = [
startDate,
endDate,
selectedNodes,
selectedFields
];
console.log(filteredData);
console.log(startDate, endDate, selectedNodes);
const startDateInput = document.createElement("input");
startDateInput.setAttribute("type", "datetime-local");
startDateInput.setAttribute("id", "start-date");
startDateInput.setAttribute("class", "input-field");
generateLink(startDate, endDate, selectedNodes);
fetchData();
});
const endDateInput = document.createElement("input");
endDateInput.setAttribute("type", "datetime-local");
endDateInput.setAttribute("id", "end-date");
endDateInput.setAttribute("class", "input-field");
const dateFilter = document.createElement("div");
dateFilter.setAttribute("class", "date-filter");
dateFilter.appendChild(startDateInput);
dateFilter.appendChild(endDateInput);
container.appendChild(dateFilter);
const startDateInput = document.createElement("input");
startDateInput.setAttribute("type", "datetime-local");
startDateInput.setAttribute("id", "start-date");
startDateInput.setAttribute("class", "input-field");
const nodeFilter = document.createElement("div");
nodeFilter.setAttribute("class", "node-filter");
const endDateInput = document.createElement("input");
endDateInput.setAttribute("type", "datetime-local");
endDateInput.setAttribute("id", "end-date");
endDateInput.setAttribute("class", "input-field");
const nodeInput = document.createElement("input");
nodeInput.setAttribute("type", "text");
nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)");
nodeInput.setAttribute("id", "node-input");
nodeInput.setAttribute("class", "input-field");
dateFilter.appendChild(startDateInput);
dateFilter.appendChild(endDateInput);
container.appendChild(dateFilter);
nodeFilter.appendChild(nodeInput);
container.appendChild(nodeFilter);
const nodeFilter = document.createElement("div");
nodeFilter.setAttribute("class", "node-filter");
container.appendChild(filterButton);
const nodeInput = document.createElement("input");
nodeInput.setAttribute("type", "text");
nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)");
nodeInput.setAttribute("id", "node-input");
nodeInput.setAttribute("class", "input-field");
document.body.appendChild(container);
}
nodeFilter.appendChild(nodeInput);
container.appendChild(nodeFilter);
container.appendChild(filterButton);
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;
function generateLink(dateStart, dateEnd, node) {
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}`;
console.log(link);
}
processor.makeGraph();
// Get request to fetch data from the server
function fetchData(link) {
function fetchData() {
fetch(link)
.then((response) => {
if (!response.ok) {
@@ -124,14 +130,10 @@ function fetchData(link) {
return response.json();
})
.then((data) => {
createFilterContainer();
processor.update(data);
processor.makeGraph();
processor.updateGraph(dateStart, dateEnd);
processor.updateGraph();
})
.catch((error) => {
console.error("Error fetching data:", error);
});
}
fetchData();
}

27
web/newWebsite/questions-main.js
View File

@@ -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: {

12
web/newWebsite/styles/dashboard-styles.css
View File

@@ -182,17 +182,19 @@ body {
}
.plotly-container {
width: 100%;
float: bottom;
margin: auto;
padding: 1vw;
align-items: center;
justify-content: center;
display: flex;
width: 20vw;
}
*
.js-plotly-plot {
width: 90%;
height: 100%;
}
.disabled {
opacity: 0;
height: 0;