From 8416254d6c6a12bb9ce6e1cb80b4c7af483bd94a Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 22:33:45 +0100 Subject: [PATCH] Refactor code to create filter container and fetch data from server --- web/newWebsite/graph-main.js | 174 ++++++++++++++++++++--------------- 1 file changed, 102 insertions(+), 72 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 024aad6..c1436ed 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,98 +1,128 @@ // Sample data - you can replace this with your actual dataset -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 } -]; +const data = []; // Function to create checkbox with label function createCheckBox(id, label) { - const checkbox = document.createElement('input'); - checkbox.setAttribute('type', 'checkbox'); - checkbox.setAttribute('id', id); - checkbox.setAttribute('class', 'checkbox'); + const checkbox = document.createElement("input"); + checkbox.setAttribute("type", "checkbox"); + checkbox.setAttribute("id", id); + checkbox.setAttribute("class", "checkbox"); - const checkboxLabel = document.createElement('label'); - checkboxLabel.setAttribute('for', id); + const checkboxLabel = document.createElement("label"); + checkboxLabel.setAttribute("for", id); checkboxLabel.textContent = label; return { checkbox, checkboxLabel }; } -// Create HTML input elements for user input -const container = document.createElement('div'); -container.setAttribute('class', 'container'); +// Function to ceate filter container and all the input elements +function createFilterContainer() { + // Create HTML input elements for user input + const container = document.createElement("div"); + container.setAttribute("class", "container"); -const dataTypesContainer = document.createElement('div'); -dataTypesContainer.setAttribute('class', 'data-types'); + const dataTypesContainer = document.createElement("div"); + dataTypesContainer.setAttribute("class", "data-types"); -const temperatureCheckbox = createCheckBox('temperature', 'Temperature'); -const humidityCheckbox = createCheckBox('humidity', 'Humidity'); -const eco2Checkbox = createCheckBox('eco2', 'eCO2'); -const tvocCheckbox = createCheckBox('tvoc', 'TVOC'); + 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); -container.appendChild(dataTypesContainer); + 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); + container.appendChild(dataTypesContainer); -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()); + 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()); - const selectedFields = []; - const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox]; - checkboxes.forEach(checkbox => { - if (checkbox.checkbox.checked) { - selectedFields.push(checkbox.checkbox.id); - } + 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); }); - const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields); - console.log(filteredData); -}); + const dateFilter = document.createElement("div"); + dateFilter.setAttribute("class", "date-filter"); -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 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"); -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); -dateFilter.appendChild(startDateInput); -dateFilter.appendChild(endDateInput); -container.appendChild(dateFilter); + const nodeFilter = document.createElement("div"); + nodeFilter.setAttribute("class", "node-filter"); -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"); -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); -nodeFilter.appendChild(nodeInput); -container.appendChild(nodeFilter); + container.appendChild(filterButton); -container.appendChild(filterButton); + document.body.appendChild(container); +} -document.body.appendChild(container); \ No newline at end of file +// 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(); \ No newline at end of file