145 lines
4.6 KiB
JavaScript
145 lines
4.6 KiB
JavaScript
// Sample data - you can replace this with your actual dataset
|
|
const data = [];
|
|
processor = new DataProcessor();
|
|
let link;
|
|
|
|
// 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 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");
|
|
|
|
const dataTypesContainer = document.createElement("div");
|
|
dataTypesContainer.setAttribute("class", "data-types");
|
|
|
|
const temperatureCheckbox = createCheckBox("Temp", "Temperature");
|
|
const humidityCheckbox = createCheckBox("Humi", "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);
|
|
|
|
const filterButton = document.createElement("button");
|
|
filterButton.textContent = "Filter Data";
|
|
filterButton.setAttribute("class", "filter-button");
|
|
filterButton.addEventListener("click", () => {
|
|
const startDate = document.getElementById("start-date").value
|
|
const endDate = 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(String(checkbox.checkbox.id));
|
|
}
|
|
});
|
|
|
|
let selectedFieldsString = selectedFields.map(String);
|
|
|
|
let formattedString = '(' + selectedFieldsString.map(item => `'${item}'`).join(', ') + ')';
|
|
|
|
const filteredData = [
|
|
startDate,
|
|
endDate,
|
|
selectedNodes,
|
|
formattedString
|
|
];
|
|
|
|
console.log(filteredData);
|
|
console.log(startDate, endDate, selectedNodes);
|
|
|
|
generateLink(startDate, endDate, selectedNodes, formattedString);
|
|
fetchData();
|
|
});
|
|
|
|
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);
|
|
|
|
// Function to get the link for the get request
|
|
function generateLink(dateStart, dateEnd, node, dataTypes) {
|
|
const baseUrl = 'http://145.92.8.114/getMeasurements';
|
|
const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20');
|
|
const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20');
|
|
|
|
link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}&dataType=${dataTypes}`;
|
|
|
|
console.log(link);
|
|
}
|
|
processor.makeGraph();
|
|
// Get request to fetch data from the server
|
|
function fetchData() {
|
|
fetch(link)
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
processor.update(data);
|
|
processor.updateGraph();
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error fetching data:", error);
|
|
});
|
|
} |