Add data filtering functionality and input elements for user input

web/newWebsite/graph-main.js

@@ -1,2 +1,95 @@
-
+// Sample data - you can replace this with your actual dataset
-
+const data = [
+    { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 },
+    { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 26, humidity: 45, eco2: 450, tvoc: 2 },
+    { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 24, humidity: 55, eco2: 500, tvoc: 3 },
+    { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 27, humidity: 40, eco2: 550, tvoc: 4 },
+    { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 23, humidity: 60, eco2: 600, tvoc: 5 },
+    { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 25, humidity: 50, eco2: 650, tvoc: 6 }
+  ];
+  
+  // Function to filter data based on user input
+  function filterData(data, startDate, endDate, nodes, selectedFields) {
+    const filteredData = data.filter(item => {
+      const timestamp = new Date(item.timestamp);
+      return timestamp >= startDate && timestamp <= endDate && nodes.includes(item.node);
+    }).map(item => {
+      const filteredItem = { node: item.node, timestamp: item.timestamp };
+      selectedFields.forEach(field => {
+        filteredItem[field] = item[field];
+      });
+      return filteredItem;
+    });
+    return filteredData;
+  }
+  
+  // Create HTML input elements for user input
+  // Include checkboxes for each data field
+  const temperatureCheckbox = createCheckBox('temperature', 'Temperature');
+  const humidityCheckbox = createCheckBox('humidity', 'Humidity');
+  const eco2Checkbox = createCheckBox('eco2', 'eCO2');
+  const tvocCheckbox = createCheckBox('tvoc', 'TVOC');
+  
+  // Create a checkbox element with label
+  function createCheckBox(id, label) {
+    const checkbox = document.createElement('input');
+    checkbox.setAttribute('type', 'checkbox');
+    checkbox.setAttribute('id', id);
+    checkbox.setAttribute('class', 'checkbox');
+    
+    const checkboxLabel = document.createElement('label');
+    checkboxLabel.setAttribute('for', id);
+    checkboxLabel.textContent = label;
+    
+    return { checkbox, checkboxLabel };
+  }
+  
+  const startDateInput = document.createElement('input');
+  startDateInput.setAttribute('type', 'datetime-local');
+  startDateInput.setAttribute('id', 'start-date');
+  startDateInput.setAttribute('class', 'input-field');
+  
+  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');
+  
+  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 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);
+  });
+  
+  // Append input elements to the document body
+  document.body.appendChild(startDateInput);
+  document.body.appendChild(endDateInput);
+  document.body.appendChild(nodeInput);
+  document.body.appendChild(temperatureCheckbox.checkbox);
+  document.body.appendChild(temperatureCheckbox.checkboxLabel);
+  document.body.appendChild(humidityCheckbox.checkbox);
+  document.body.appendChild(humidityCheckbox.checkboxLabel);
+  document.body.appendChild(eco2Checkbox.checkbox);
+  document.body.appendChild(eco2Checkbox.checkboxLabel);
+  document.body.appendChild(tvocCheckbox.checkbox);
+  document.body.appendChild(tvocCheckbox.checkboxLabel);
+  document.body.appendChild(filterButton);

web/newWebsite/styles/graph-styles.css

@@ -165,4 +165,29 @@ body {
     color: #fff;
     text-decoration: none;
     font-size: 18px;
-}
+}
+
+.input-field {
+    margin: 10px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  
+  .checkbox {
+    margin-right: 5px;
+  }
+  
+  .filter-button {
+    margin: 10px;
+    padding: 5px 10px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .filter-button:hover {
+    background-color: #0056b3;
+  }