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

docs/brainstorm/Questions Enquete.md

@@ -9,7 +9,7 @@ Questions shouldn't be able to measure using sensors. 3 possible answers.
 - How clean is the study area? (clean, normal, disgusting).
 - What do you think of the temperature in the study area? (hot, perfect, cold).
 - How crowded would you say the study area is?(not at all, its fine, really crowded).
-- Is there enough help available? (no, decently, yes).
+- Is there enough help available on the 5th floor? (no, decently, yes).
 
 ### Feedback questions
 

web/newWebsite/graph-classes.js

@@ -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);
   }

web/newWebsite/graph-main.js

@@ -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();
+}

web/newWebsite/questions-dashboard.html

@@ -30,19 +30,24 @@
 
 <body>
     <div class="chart-container">
-        <h2>Question 1</h2>
+        <h2>Question 1: How clean are the toilets?</h2>
         <canvas id="chart1"></canvas>
 
-        <h2>Question 2</h2>
+        <h2>Question 2: How clean is the study area?</h2>
         <canvas id="chart2"></canvas>
 
-        <h2>Question 3</h2>
+        <h2>Question 3: What do you think of the temperature in the study area?</h2>
         <canvas id="chart3"></canvas>
 
+        <h2>Question 4: How crowded would you say the study area is?</h2>
+        <canvas id="chart4"></canvas>
+
+        <h2>Question 5: Is there enough help available on the 5th floor?</h2>
+        <canvas id="chart5"></canvas>
+
         <!-- Add more questions and canvas elements as needed -->
     </div>
-
-    <script src="questions-main.js"></script>
     <script src="questions-main-class.js"></script>
+    <script src="questions-main.js"></script>
 </body>
 </html>

web/newWebsite/questions-main-class.js

@@ -1,27 +1,27 @@
-// class QuestionCreationClass {
-//     constructor(data, label) {
-//         this.data = data;
-//         this.label = label;
-//     }
+class QuestionCreationClass {
+    constructor(data, label) {
+        this.data = data;
+        this.label = label;
+    }
 
-//     get questionData() {
-//         return {
-//             labels: this.label,
-//             datasets: [{
-//                 label: 'Responses',
-//                 data: this.data,
-//                 backgroundColor: [
-//                     'rgba(255, 99, 132, 0.2)',
-//                     'rgba(54, 162, 235, 0.2)',
-//                     'rgba(255, 206, 86, 0.2)'
-//                 ],
-//                 borderColor: [
-//                     'rgba(255, 99, 132, 1)',
-//                     'rgba(54, 162, 235, 1)',
-//                     'rgba(255, 206, 86, 1)'
-//                 ],
-//                 borderWidth: 1
-//             }]
-//         };
-//     }
-// }
+    get questionData() {
+        return {
+            labels: this.label,
+            datasets: [{
+                label: 'Responses',
+                data: this.data,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.2)',
+                    'rgba(54, 162, 235, 0.2)',
+                    'rgba(255, 206, 86, 0.2)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)'
+                ],
+                borderWidth: 1
+            }]
+        };
+    }
+}

web/newWebsite/questions-main.js

@@ -1,78 +1,27 @@
-class QuestionCreationClass {
-    constructor(data, label) {
-        this.data = data;
-        this.label = label;
-    }
+let dummydata1 = [40, 30, 20];
+let questionOptionsDummy1 = ['disgusting','clean', 'fine'];
 
-    get questionData() {
-        return {
-            labels: this.label,
-            datasets: [{
-                label: 'Responses',
-                data: this.data,
-                backgroundColor: [
-                    'rgba(255, 99, 132, 0.2)',
-                    'rgba(54, 162, 235, 0.2)',
-                    'rgba(255, 206, 86, 0.2)'
-                ],
-                borderColor: [
-                    'rgba(255, 99, 132, 1)',
-                    'rgba(54, 162, 235, 1)',
-                    'rgba(255, 206, 86, 1)'
-                ],
-                borderWidth: 1
-            }]
-        };
-    }
-}
+let dummydata2 = [25, 35, 40];
+let questionOptionsDummy2 = ['disgusting', 'clean', 'normal'];
 
-const question1Data = {
-    labels: ['Option A', 'Option B', 'Option C'],
-    datasets: [{
-        label: 'Responses',
-        data: [40, 30, 20],
-        backgroundColor: [
-            'rgba(255, 99, 132, 0.2)',
-            'rgba(54, 162, 235, 0.2)',
-            'rgba(255, 206, 86, 0.2)'
-        ],
-        borderColor: [
-            'rgba(255, 99, 132, 1)',
-            'rgba(54, 162, 235, 1)',
-            'rgba(255, 206, 86, 1)'
-        ],
-        borderWidth: 1
-    }]
-};
+let dummydata3 = [30, 20, 20];
+let questionOptionsDummy3 = ['cold', 'perfect', 'hot'];
 
-let dummydata = [30, 20, 20];
-let questionOptionsDummy = ['Option A', 'Option B', 'Option C'];
+let dummydata4 = [30, 20, 20];
+let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ];
 
-const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy);
+let dummydata5 = [30, 20, 20];
+let questionOptionsDummy5 = ['no','yes', 'decently'];
 
-const question2Data = {
-    labels: ['Option A', 'Option B', 'Option C'],
-    datasets: [{
-        label: 'Responses',
-        data: [25, 35, 40],
-        backgroundColor: [
-            'rgba(255, 99, 132, 0.2)',
-            'rgba(54, 162, 235, 0.2)',
-            'rgba(255, 206, 86, 0.2)'
-        ],
-        borderColor: [
-            'rgba(255, 99, 132, 1)',
-            'rgba(54, 162, 235, 1)',
-            'rgba(255, 206, 86, 1)'
-        ],
-        borderWidth: 1
-    }]
-};
+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);
 
-// Chart configurations for each question
 const chartConfig1 = {
     type: 'pie',
-    data: question1Data,
+    data: question1Data.questionData,
     options: {
         responsive: true,
         legend: {
@@ -91,7 +40,7 @@ const chartConfig1 = {
 
 const chartConfig2 = {
     type: 'pie',
-    data: question2Data,
+    data: question2Data.questionData,
     options: {
         responsive: true,
         legend: {
@@ -127,6 +76,44 @@ const chartConfig3 = {
     }
 };
 
+const chartConfig4 = {
+    type: 'pie',
+    data: question4Data.questionData,
+    options: {
+        responsive: true,
+        legend: {
+            position: 'top',
+        },
+        title: {
+            display: true,
+            text: 'Question 4 Responses'
+        },
+        animation: {
+            animateScale: true,
+            animateRotate: true
+        }
+    }
+};
+
+const chartConfig5 = {
+    type: 'pie',
+    data: question5Data.questionData,
+    options: {
+        responsive: true,
+        legend: {
+            position: 'top',
+        },
+        title: {
+            display: true,
+            text: 'Question 5 Responses'
+        },
+        animation: {
+            animateScale: true,
+            animateRotate: true
+        }
+    }
+};
+
 // Create the charts
 const ctx1 = document.getElementById('chart1').getContext('2d');
 const myChart1 = new Chart(ctx1, chartConfig1);
@@ -137,3 +124,8 @@ const myChart2 = new Chart(ctx2, chartConfig2);
 const ctx3 = document.getElementById('chart3').getContext('2d');
 const myChart3 = new Chart(ctx3, chartConfig3);
 
+const ctx4 = document.getElementById('chart4').getContext('2d');
+const myChart4 = new Chart(ctx4, chartConfig4);
+
+const ctx5 = document.getElementById('chart5').getContext('2d');
+const myChart5 = new Chart(ctx5, chartConfig5);

web/newWebsite/styles/dashboard-styles.css

@@ -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;