Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update graph styles and input field margins

Browse Source
This commit is contained in:
sietse jonker
2024-03-30 20:43:51 +01:00
parent 49dc40a2c2
commit 79c3c956fe
2 changed files with 118 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
web/newWebsite/graph-main.js
View File

@@ -1,95 +1,99 @@
// Sample data - you can replace this with your actual dataset // Sample data - you can replace this with your actual dataset
const data = [ const data = [
{ node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 }, { 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: '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: '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: '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: '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 } { 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 to create checkbox with label
function filterData(data, startDate, endDate, nodes, selectedFields) { function createCheckBox(id, label) {
const filteredData = data.filter(item => { const checkbox = document.createElement('input');
const timestamp = new Date(item.timestamp); checkbox.setAttribute('type', 'checkbox');
return timestamp >= startDate && timestamp <= endDate && nodes.includes(item.node); checkbox.setAttribute('id', id);
}).map(item => { checkbox.setAttribute('class', 'checkbox');
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 const checkboxLabel = document.createElement('label');
// Include checkboxes for each data field checkboxLabel.setAttribute('for', id);
const temperatureCheckbox = createCheckBox('temperature', 'Temperature'); checkboxLabel.textContent = label;
const humidityCheckbox = createCheckBox('humidity', 'Humidity');
const eco2Checkbox = createCheckBox('eco2', 'eCO2');
const tvocCheckbox = createCheckBox('tvoc', 'TVOC');
// Create a checkbox element with label return { checkbox, checkboxLabel };
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'); // Create HTML input elements for user input
checkboxLabel.setAttribute('for', id); const container = document.createElement('div');
checkboxLabel.textContent = label; container.setAttribute('class', 'container');
return { checkbox, checkboxLabel }; const dataTypesContainer = document.createElement('div');
} dataTypesContainer.setAttribute('class', 'data-types');
const startDateInput = document.createElement('input'); const temperatureCheckbox = createCheckBox('temperature', 'Temperature');
startDateInput.setAttribute('type', 'datetime-local'); const humidityCheckbox = createCheckBox('humidity', 'Humidity');
startDateInput.setAttribute('id', 'start-date'); const eco2Checkbox = createCheckBox('eco2', 'eCO2');
startDateInput.setAttribute('class', 'input-field'); const tvocCheckbox = createCheckBox('tvoc', 'TVOC');
const endDateInput = document.createElement('input'); dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
endDateInput.setAttribute('type', 'datetime-local'); dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
endDateInput.setAttribute('id', 'end-date'); dataTypesContainer.appendChild(humidityCheckbox.checkbox);
endDateInput.setAttribute('class', 'input-field'); dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
dataTypesContainer.appendChild(eco2Checkbox.checkbox);
dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
dataTypesContainer.appendChild(tvocCheckbox.checkbox);
dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
const nodeInput = document.createElement('input'); const filterButton = document.createElement('button');
nodeInput.setAttribute('type', 'text'); filterButton.textContent = 'Filter Data';
nodeInput.setAttribute('placeholder', 'Enter node (A, B, etc.)'); filterButton.setAttribute('class', 'filter-button');
nodeInput.setAttribute('id', 'node-input'); filterButton.addEventListener('click', () => {
nodeInput.setAttribute('class', 'input-field'); 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'); const selectedFields = [];
filterButton.textContent = 'Filter Data'; const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox];
filterButton.setAttribute('class', 'filter-button'); checkboxes.forEach(checkbox => {
filterButton.addEventListener('click', () => { if (checkbox.checkbox.checked) {
const startDate = new Date(document.getElementById('start-date').value); selectedFields.push(checkbox.checkbox.id);
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 const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields);
document.body.appendChild(startDateInput); console.log(filteredData);
document.body.appendChild(endDateInput); });
document.body.appendChild(nodeInput);
document.body.appendChild(temperatureCheckbox.checkbox); container.appendChild(dataTypesContainer);
document.body.appendChild(temperatureCheckbox.checkboxLabel);
document.body.appendChild(humidityCheckbox.checkbox); const dateFilter = document.createElement('div');
document.body.appendChild(humidityCheckbox.checkboxLabel); dateFilter.setAttribute('class', 'date-filter');
document.body.appendChild(eco2Checkbox.checkbox);
document.body.appendChild(eco2Checkbox.checkboxLabel); const startDateInput = document.createElement('input');
document.body.appendChild(tvocCheckbox.checkbox); startDateInput.setAttribute('type', 'datetime-local');
document.body.appendChild(tvocCheckbox.checkboxLabel); startDateInput.setAttribute('id', 'start-date');
document.body.appendChild(filterButton); 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);

24
web/newWebsite/styles/graph-styles.css
View File

@@ -167,8 +167,28 @@ body {
font-size: 18px; font-size: 18px;
} }
.input-field { .container {
margin: 10px; 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; padding: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;