Update graph styles and input field margins

web/newWebsite/graph-main.js

@@ -8,29 +8,7 @@ const data = [
   { 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 to create checkbox with label
 function createCheckBox(id, label) {
   const checkbox = document.createElement('input');
   checkbox.setAttribute('type', 'checkbox');
@@ -44,21 +22,26 @@ const data = [
   return { checkbox, checkboxLabel };
 }
 
-  const startDateInput = document.createElement('input');
-  startDateInput.setAttribute('type', 'datetime-local');
-  startDateInput.setAttribute('id', 'start-date');
-  startDateInput.setAttribute('class', 'input-field');
+// Create HTML input elements for user input
+const container = document.createElement('div');
+container.setAttribute('class', 'container');
 
-  const endDateInput = document.createElement('input');
-  endDateInput.setAttribute('type', 'datetime-local');
-  endDateInput.setAttribute('id', 'end-date');
-  endDateInput.setAttribute('class', 'input-field');
+const dataTypesContainer = document.createElement('div');
+dataTypesContainer.setAttribute('class', 'data-types');
 
-  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 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);
 
 const filterButton = document.createElement('button');
 filterButton.textContent = 'Filter Data';
@@ -80,16 +63,37 @@ const data = [
   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);
+container.appendChild(dataTypesContainer);
+
+const dateFilter = document.createElement('div');
+dateFilter.setAttribute('class', 'date-filter');
+
+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');
+
+dateFilter.appendChild(startDateInput);
+dateFilter.appendChild(endDateInput);
+container.appendChild(dateFilter);
+
+const nodeFilter = document.createElement('div');
+nodeFilter.setAttribute('class', 'node-filter');
+
+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');
+
+nodeFilter.appendChild(nodeInput);
+container.appendChild(nodeFilter);
+
+container.appendChild(filterButton);
+
+document.body.appendChild(container);

web/newWebsite/styles/graph-styles.css

@@ -167,8 +167,28 @@ body {
     font-size: 18px;
 }
 
+.container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    padding: 10px;
+    margin: 20px;
+  }
+  
+  .data-types {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .date-filter,
+  .node-filter {
+    margin-left: 10px;
+  }
+  
   .input-field {
-    margin: 10px;
+    margin: 5px;
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 5px;