Refactor code to create filter container and fetch data from server
This commit is contained in:
@@ -1,98 +1,128 @@
|
|||||||
// 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: '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 create checkbox with label
|
// Function to create checkbox with label
|
||||||
function createCheckBox(id, label) {
|
function createCheckBox(id, label) {
|
||||||
const checkbox = document.createElement('input');
|
const checkbox = document.createElement("input");
|
||||||
checkbox.setAttribute('type', 'checkbox');
|
checkbox.setAttribute("type", "checkbox");
|
||||||
checkbox.setAttribute('id', id);
|
checkbox.setAttribute("id", id);
|
||||||
checkbox.setAttribute('class', 'checkbox');
|
checkbox.setAttribute("class", "checkbox");
|
||||||
|
|
||||||
const checkboxLabel = document.createElement('label');
|
const checkboxLabel = document.createElement("label");
|
||||||
checkboxLabel.setAttribute('for', id);
|
checkboxLabel.setAttribute("for", id);
|
||||||
checkboxLabel.textContent = label;
|
checkboxLabel.textContent = label;
|
||||||
|
|
||||||
return { checkbox, checkboxLabel };
|
return { checkbox, checkboxLabel };
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create HTML input elements for user input
|
// Function to ceate filter container and all the input elements
|
||||||
const container = document.createElement('div');
|
function createFilterContainer() {
|
||||||
container.setAttribute('class', 'container');
|
// Create HTML input elements for user input
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.setAttribute("class", "container");
|
||||||
|
|
||||||
const dataTypesContainer = document.createElement('div');
|
const dataTypesContainer = document.createElement("div");
|
||||||
dataTypesContainer.setAttribute('class', 'data-types');
|
dataTypesContainer.setAttribute("class", "data-types");
|
||||||
|
|
||||||
const temperatureCheckbox = createCheckBox('temperature', 'Temperature');
|
const temperatureCheckbox = createCheckBox("temperature", "Temperature");
|
||||||
const humidityCheckbox = createCheckBox('humidity', 'Humidity');
|
const humidityCheckbox = createCheckBox("humidity", "Humidity");
|
||||||
const eco2Checkbox = createCheckBox('eco2', 'eCO2');
|
const eco2Checkbox = createCheckBox("eco2", "eCO2");
|
||||||
const tvocCheckbox = createCheckBox('tvoc', 'TVOC');
|
const tvocCheckbox = createCheckBox("tvoc", "TVOC");
|
||||||
|
|
||||||
dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
|
dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
|
||||||
dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
|
dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
|
||||||
dataTypesContainer.appendChild(humidityCheckbox.checkbox);
|
dataTypesContainer.appendChild(humidityCheckbox.checkbox);
|
||||||
dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
|
dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
|
||||||
dataTypesContainer.appendChild(eco2Checkbox.checkbox);
|
dataTypesContainer.appendChild(eco2Checkbox.checkbox);
|
||||||
dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
|
dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
|
||||||
dataTypesContainer.appendChild(tvocCheckbox.checkbox);
|
dataTypesContainer.appendChild(tvocCheckbox.checkbox);
|
||||||
dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
|
dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
|
||||||
container.appendChild(dataTypesContainer);
|
container.appendChild(dataTypesContainer);
|
||||||
|
|
||||||
const filterButton = document.createElement('button');
|
const filterButton = document.createElement("button");
|
||||||
filterButton.textContent = 'Filter Data';
|
filterButton.textContent = "Filter Data";
|
||||||
filterButton.setAttribute('class', 'filter-button');
|
filterButton.setAttribute("class", "filter-button");
|
||||||
filterButton.addEventListener('click', () => {
|
filterButton.addEventListener("click", () => {
|
||||||
const startDate = new Date(document.getElementById('start-date').value);
|
const startDate = new Date(document.getElementById("start-date").value);
|
||||||
const endDate = new Date(document.getElementById('end-date').value);
|
const endDate = new Date(document.getElementById("end-date").value);
|
||||||
const selectedNodes = document.getElementById('node-input').value.split(',').map(node => node.trim());
|
const selectedNodes = document
|
||||||
|
.getElementById("node-input")
|
||||||
|
.value.split(",")
|
||||||
|
.map((node) => node.trim());
|
||||||
|
|
||||||
const selectedFields = [];
|
const selectedFields = [];
|
||||||
const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox];
|
const checkboxes = [
|
||||||
checkboxes.forEach(checkbox => {
|
temperatureCheckbox,
|
||||||
|
humidityCheckbox,
|
||||||
|
eco2Checkbox,
|
||||||
|
tvocCheckbox,
|
||||||
|
];
|
||||||
|
checkboxes.forEach((checkbox) => {
|
||||||
if (checkbox.checkbox.checked) {
|
if (checkbox.checkbox.checked) {
|
||||||
selectedFields.push(checkbox.checkbox.id);
|
selectedFields.push(checkbox.checkbox.id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields);
|
const filteredData = filterData(
|
||||||
|
data,
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
selectedNodes,
|
||||||
|
selectedFields
|
||||||
|
);
|
||||||
console.log(filteredData);
|
console.log(filteredData);
|
||||||
});
|
});
|
||||||
|
|
||||||
const dateFilter = document.createElement('div');
|
const dateFilter = document.createElement("div");
|
||||||
dateFilter.setAttribute('class', 'date-filter');
|
dateFilter.setAttribute("class", "date-filter");
|
||||||
|
|
||||||
const startDateInput = document.createElement('input');
|
const startDateInput = document.createElement("input");
|
||||||
startDateInput.setAttribute('type', 'datetime-local');
|
startDateInput.setAttribute("type", "datetime-local");
|
||||||
startDateInput.setAttribute('id', 'start-date');
|
startDateInput.setAttribute("id", "start-date");
|
||||||
startDateInput.setAttribute('class', 'input-field');
|
startDateInput.setAttribute("class", "input-field");
|
||||||
|
|
||||||
const endDateInput = document.createElement('input');
|
const endDateInput = document.createElement("input");
|
||||||
endDateInput.setAttribute('type', 'datetime-local');
|
endDateInput.setAttribute("type", "datetime-local");
|
||||||
endDateInput.setAttribute('id', 'end-date');
|
endDateInput.setAttribute("id", "end-date");
|
||||||
endDateInput.setAttribute('class', 'input-field');
|
endDateInput.setAttribute("class", "input-field");
|
||||||
|
|
||||||
dateFilter.appendChild(startDateInput);
|
dateFilter.appendChild(startDateInput);
|
||||||
dateFilter.appendChild(endDateInput);
|
dateFilter.appendChild(endDateInput);
|
||||||
container.appendChild(dateFilter);
|
container.appendChild(dateFilter);
|
||||||
|
|
||||||
const nodeFilter = document.createElement('div');
|
const nodeFilter = document.createElement("div");
|
||||||
nodeFilter.setAttribute('class', 'node-filter');
|
nodeFilter.setAttribute("class", "node-filter");
|
||||||
|
|
||||||
const nodeInput = document.createElement('input');
|
const nodeInput = document.createElement("input");
|
||||||
nodeInput.setAttribute('type', 'text');
|
nodeInput.setAttribute("type", "text");
|
||||||
nodeInput.setAttribute('placeholder', 'Enter node (A, B, etc.)');
|
nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)");
|
||||||
nodeInput.setAttribute('id', 'node-input');
|
nodeInput.setAttribute("id", "node-input");
|
||||||
nodeInput.setAttribute('class', 'input-field');
|
nodeInput.setAttribute("class", "input-field");
|
||||||
|
|
||||||
nodeFilter.appendChild(nodeInput);
|
nodeFilter.appendChild(nodeInput);
|
||||||
container.appendChild(nodeFilter);
|
container.appendChild(nodeFilter);
|
||||||
|
|
||||||
container.appendChild(filterButton);
|
container.appendChild(filterButton);
|
||||||
|
|
||||||
document.body.appendChild(container);
|
document.body.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get request to fetch data from the server
|
||||||
|
function fetchData() {
|
||||||
|
fetch("http://145.92.8.114/getNodeInfo")
|
||||||
|
.then((response) => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Network response was not ok");
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
data.push(...data);
|
||||||
|
createFilterContainer();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error fetching data:", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData();
|
Reference in New Issue
Block a user