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

web/newWebsite/graph-classes.js

@@ -8,11 +8,16 @@ class Graph {
     this.tvocArray = [];
   }
 
+  createDiv() {
+    let div = document.createElement("div");
+    let graphDiv = document.createElement("div");
+    div.setAttribute("class", "graphBody");
+    graphDiv.setAttribute("id", this.id);
+    div.appendChild(graphDiv);
+    document.body.appendChild(div);
+  }
   // 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":
@@ -132,10 +137,11 @@ class DataProcessor {
 
   makeGraph() {
     this.graph = new Graph(1);
+    this.graph.createDiv();
     this.graph.makeGraph("temp", "red", "Temperature");
     this.graph.makeGraph("humi", "blue", "Humidity");
     this.graph.makeGraph("eco2", "green", "eCO2");
-    this.graph.makeGraph("tvoc", "#F5G644", "TVOC");
+    this.graph.makeGraph("tvoc", "black", "TVOC");
   }
 
   updateGraph() {

web/newWebsite/graph-main.js

@@ -2,6 +2,7 @@
 const data = [];
 processor = new DataProcessor();
 let link;
+nodeDataArray = {};
 
 // Function to create checkbox with label
 function createCheckBox(id, label) {
@@ -16,7 +17,41 @@ function createCheckBox(id, label) {
 
   return { checkbox, checkboxLabel };
 }
+  fetch("http://145.92.8.114/getNodeInfo?macAdress=*")
+    .then(response => {
+      if (!response.ok) {
+          throw new Error('Network response was not ok');
+      }
+      return response.json();
+    })
+    .then(data => {
+      handleData(data);
+    })
+  
+function handleData(JSONdata) {
+  select = document.getElementById('node-input');
 
+  console.log(JSONdata);
+  for (var i = 0; i < JSONdata.length; i++) {
+    console.log(JSONdata[i]);
+    console.log(option)
+    var node = JSONdata[i].NodeID;
+    var name = JSONdata[i].Name;
+    var location = JSONdata[i].Location;
+    nodeDataArray[node] = { name: name, location: location };
+    // Create new option element
+    var option = document.createElement('option');
+
+    // Set the value of the option
+    option.value = node;
+
+    // Set the text of the option
+    option.text = name;
+
+    // Add the option to the select
+    select.add(option);
+  }
+}
 // Create HTML input elements for user input
 const container = document.createElement("div");
 container.setAttribute("class", "container");
@@ -102,11 +137,10 @@ container.appendChild(dateFilter);
 const nodeFilter = document.createElement("div");
 nodeFilter.setAttribute("class", "node-filter");
 
-const nodeInput = document.createElement("input");
-nodeInput.setAttribute("type", "text");
+const nodeInput = document.createElement("select");
+nodeInput.setAttribute("type", "select");
 nodeInput.setAttribute("placeholder", "Enter Node Name (* for all)");
 nodeInput.setAttribute("id", "node-input");
-nodeInput.setAttribute("class", "input-field");
 
 nodeFilter.appendChild(nodeInput);
 container.appendChild(nodeFilter);

web/newWebsite/index.html

@@ -25,6 +25,9 @@
         <li class="nav-item">
             <a href="settings.html" class="nav-link">Settings</a>
         </li>
+        <li class="nav-item">
+            <a href="questions-dashboard.html" class="nav-link">Questions</a>
+        </li>
     </ul>
 </nav>
 

web/newWebsite/questions-main.js

@@ -1,17 +1,54 @@
 //For now create dummy data to show on the website.
-let dummydata1 = [40, 30, 20];
+let awa;
+
+data();
+
+
+async function data() {
+  fetch("http://145.92.8.114/getQuestionData")
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      return response.json();
+    })
+    .then(data => {
+      console.log(data);
+
+      // Initialize an array to hold the counts for each question
+      let questionCounts = [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]];
+
+      // Iterate over the data
+      for (let item of data) {
+        // Increment the count for the appropriate question and result
+        questionCounts[item.Question_QuestionID - 1][item.Result]++;
+      }
+
+      // Log the counts for each question
+      for (let i = 0; i < questionCounts.length; i++) {
+        console.log(`Question ${i + 1} counts: ${questionCounts[i]}`);
+      }
+
+      // Update the dummydata arrays
+      dummydata1 = questionCounts[0];
+      dummydata2 = questionCounts[1];
+      dummydata3 = questionCounts[2];
+      dummydata4 = questionCounts[3];
+      dummydata5 = questionCounts[4];
+
+      graph();
+    })
+}
+// for each(Result == 0) in 
+async function graph() {
 let questionOptionsDummy1 = ['disgusting','clean', 'fine'];
 
-let dummydata2 = [25, 35, 40];
 let questionOptionsDummy2 = ['disgusting', 'clean', 'normal'];
 
-let dummydata3 = [30, 20, 20];
 let questionOptionsDummy3 = ['cold', 'perfect', 'hot'];
 
-let dummydata4 = [30, 20, 20];
 let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ];
 
-let dummydata5 = [30, 20, 20];
 let questionOptionsDummy5 = ['no','yes', 'decently'];
 
 //make arrays to store data.
@@ -52,3 +89,4 @@ const myChart4 = new Chart(ctx4, chartConfigArray[3].chartConfig);
 
 const ctx5 = document.getElementById('chart5').getContext('2d');
 const myChart5 = new Chart(ctx5, chartConfigArray[4].chartConfig);
+}

web/newWebsite/styles/dashboard-styles.css

@@ -55,9 +55,8 @@ body {
     justify-content: center;
     margin: 0;
     margin-top: 8vh;
-    background-color: #f0f0f0;
     flex-direction: column;
-    background-color: #afafaf;
+    background-color: #bfbfbf;
     align-items: center;
 
 }
@@ -68,11 +67,11 @@ body {
     display: flex;
     flex-direction: column; /* Keep as column */
     justify-content: flex-start;
-    background-color: #333;
+    background-color: #9f9f9f;
     color: #fff;
     padding: 10px;
     border-radius: 50px;
-    border: 2px solid #333;
+    border: 2px solid #CC2936;
     clear: both;
     margin-bottom: 10px;
     position: relative;
@@ -108,7 +107,6 @@ body {
     text-align: center;
     position: relative;
     padding-top: 3vh; /* Increase bottom padding */
-
 }
 
 .gaugeContainer {
@@ -128,7 +126,7 @@ body {
 .gaugeImage {
     width: 100%;
     height: auto;
-    max-height: 120%;
+    max-height: 140%;
     object-fit: contain;
     position: absolute; /* Make the image position absolute */
     top: 0;
@@ -196,7 +194,8 @@ body {
 }
 
 .navbar {
-    background-color: #333;
+    background-color: #bfbfbf;
+    border-bottom: 2px solid #CC2936;
     height: 60px;
     display: flex;
     align-items: center;

web/newWebsite/styles/graph-styles.css

@@ -46,11 +46,12 @@ body {
   display: flex;
   flex-direction: row;
   align-items: center;
-  border: 2px solid #ccc;
+  align-self: center;
+  border: 3px solid #ccc;
   border-radius: 10px;
   margin: 20px;
   padding: 20px;
-  width: 90;
+  width: 95%;
   box-sizing: border-box;
 }
 
@@ -108,9 +109,20 @@ body {
 }
 
 .js-plotly-plot {
-  align-self: center;
-  width: 95%;
+  width: 100%;
   height: 100%;
-  margin: 10px;
+  align-self: center center;
 }
 /* Additional styling as needed */
+
+.graphBody {
+  display: flex;
+  padding: 10px;
+  border: 3px solid #ccc;
+  border-radius: 10px;
+  justify-content: center;
+  width: 95%;
+  height: 100%;
+  align-content: center;
+  align-self: center;
+}

web/newWebsite/styles/questions-dashboard-styles.css

@@ -65,6 +65,7 @@
   border: 3px solid #000;
   border-radius: 30px;
 }
+
 canvas {
   margin-bottom: 20px;
 }