Refactor code to create filter container and fetch data from server

This commit is contained in:
sietse jonker
2024-03-30 22:33:45 +01:00
parent 97c21f9d31
commit 8416254d6c

View File

@@ -1,38 +1,33 @@
// 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 };
} }
// Function to ceate filter container and all the input elements
function createFilterContainer() {
// Create HTML input elements for user input // Create HTML input elements for user input
const container = document.createElement('div'); const container = document.createElement("div");
container.setAttribute('class', 'container'); 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);
@@ -44,51 +39,65 @@ 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);
@@ -96,3 +105,24 @@ 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();