Update graph styles and input field margins
This commit is contained in:
@@ -6,32 +6,10 @@ const data = [
|
||||
{ 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) {
|
||||
// Function to create checkbox with label
|
||||
function createCheckBox(id, label) {
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.setAttribute('type', 'checkbox');
|
||||
checkbox.setAttribute('id', id);
|
||||
@@ -42,28 +20,33 @@ const data = [
|
||||
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');
|
||||
// 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');
|
||||
|
||||
const filterButton = document.createElement('button');
|
||||
filterButton.textContent = 'Filter Data';
|
||||
filterButton.setAttribute('class', 'filter-button');
|
||||
filterButton.addEventListener('click', () => {
|
||||
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';
|
||||
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());
|
||||
@@ -78,18 +61,39 @@ const data = [
|
||||
|
||||
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);
|
||||
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);
|
@@ -167,8 +167,28 @@ body {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
margin: 10px;
|
||||
.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: 5px;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
|
Reference in New Issue
Block a user