import React, { useState } from "react";
import { saveAs } from "file-saver";
import "./weatherForecastData.css";
const HistoricalWeatherData = (props) => {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
const [weatherdata, setweatherData] = useState([]);
const handleInputChange = (e) => {
setQuery(e.target.value);
if (e.target.value.trim() !== "") {
searchAPI(e.target.value.trim());
}
};
const downloadData = () => {
const fileformat = document.getElementById("fileformat").value;
switch (fileformat) {
case "json":
downloadJson(weatherdata);
break;
case "xml":
downloadXml(weatherdata);
break;
case "csv":
downloadCsv(weatherdata);
break;
default:
alert("Unsupported file format");
}
};
const downloadJson = (weatherdata) => {
const json = JSON.stringify(weatherdata, null, 2);
const blob = new Blob([json], { type: "application/json" });
saveAs(blob, "weatherdata.json");
};
const downloadXml = (weatherdata) => {
var xml = jsonToXml(weatherdata);
xml =
"" +
xml +
"";
const blob = new Blob([xml], { type: "application/xml" });
saveAs(blob, "weatherdata.xml");
};
const downloadCsv = (weatherdata) => {
const csv = jsonToCsv(weatherdata);
const blob = new Blob([csv], { type: "text/csv" });
saveAs(blob, "weatherdata.csv");
};
const jsonToXml = (obj) => {
var xml = "";
for (var prop in obj) {
xml += "<" + prop + ">";
if (Array.isArray(obj[prop])) {
for (var array of obj[prop]) {
// A real botch fix here
xml += "" + prop + ">";
xml += "<" + prop + ">";
xml += jsonToXml(new Object(array));
}
} else if (typeof obj[prop] == "object") {
xml += jsonToXml(new Object(obj[prop]));
} else {
xml += obj[prop];
}
xml += "" + prop + ">";
}
var xml = xml.replace(/<\/?[0-9]{1,}>/g, "");
return xml;
};
const jsonToCsv = (json) => {
const keys = Object.keys(json);
const values = Object.values(json);
return `${keys.join(",")}\n${values.join(",")}`;
};
return (
Choose your Customised Data
Choose your Location
{data.map((item) => (
))}
Choose your custom output Data
Choose a Temperature Unit
Choose a Wind Speed Unit
Choose a Precipitation Unit
Choose a Fileformat
);
function getData() {
const city_text = document.getElementById("city_text").value;
const region_text = document.getElementById("region_text").value;
const country_text = document.getElementById("country_text").value;
const latitude_text = document.getElementById("latitude_text").value;
const longitude_text = document.getElementById("longitude_text").value;
const timezone_text = document.getElementById("timezone_text").value;
const start_date = document.getElementById("start_date").value;
const end_date = document.getElementById("end_date").value;
//Checkboxes
const temperature_2m = document.getElementById("temperature_2m").checked;
const relative_humidity_2m = document.getElementById(
"relative_humidity_2m"
).checked;
const precipitation = document.getElementById("precipitation").checked;
const surface_pressure =
document.getElementById("surface_pressure").checked;
const wind_speed_10m = document.getElementById("wind_speed_10m").checked;
const wind_direction_10m =
document.getElementById("wind_direction_10m").checked;
const wind_gusts_10m = document.getElementById("wind_gusts_10m").checked;
const temperature_2m_max =
document.getElementById("temperature_2m_max").checked;
const temperature_2m_min =
document.getElementById("temperature_2m_min").checked;
const temperature_2m_mean = document.getElementById(
"temperature_2m_mean"
).checked;
const precipitation_sum =
document.getElementById("precipitation_sum").checked;
const precipitation_hours = document.getElementById(
"precipitation_hours"
).checked;
const wind_speed_10m_max =
document.getElementById("wind_speed_10m_max").checked;
const wind_gusts_10m_max =
document.getElementById("wind_gusts_10m_max").checked;
const wind_direction_10m_dominant = document.getElementById(
"wind_direction_10m_dominant"
).checked;
const temp_units = document.getElementById("temp_units").value;
const wind_units = document.getElementById("wind_units").value;
const prec_units = document.getElementById("prec_units").value;
let filterHourlyArray = [];
let filterDailyArray = [];
if (temperature_2m) {
filterHourlyArray.push("temperature_2m");
}
if (relative_humidity_2m) {
filterHourlyArray.push("relative_humidity_2m");
}
if (precipitation) {
filterHourlyArray.push("precipitation");
}
if (surface_pressure) {
filterHourlyArray.push("surface_pressure");
}
if (wind_speed_10m) {
filterHourlyArray.push("wind_speed_10m");
}
if (wind_direction_10m) {
filterHourlyArray.push("wind_direction_10m");
}
if (wind_gusts_10m) {
filterHourlyArray.push("wind_gusts_10m");
}
if (temperature_2m_max) {
filterDailyArray.push("temperature_2m_max");
}
if (temperature_2m_min) {
filterDailyArray.push("temperature_2m_min");
}
if (temperature_2m_mean) {
filterDailyArray.push("temperature_2m_mean");
}
if (precipitation_sum) {
filterDailyArray.push("precipitation_sum");
}
if (precipitation_hours) {
filterDailyArray.push("precipitation_hours");
}
if (wind_speed_10m_max) {
filterDailyArray.push("wind_speed_10m_max");
}
if (wind_gusts_10m_max) {
filterDailyArray.push("wind_gusts_10m_max");
}
if (wind_direction_10m_dominant) {
filterDailyArray.push("wind_direction_10m_dominant");
}
let filterHourlyString = filterHourlyArray.join(",");
let filterDailyString = filterDailyArray.join(",");
const apiUrl = `http://localhost:8080/historicalweather?latitude=${latitude_text}&longitude=${longitude_text}&start_date=${start_date}&end_date=${end_date}&filterHourly=${filterHourlyString}&filterDaily=${filterDailyString}&temperature_unit=${temp_units}&wind_speed_unit=${wind_units}&precipitation_unit=${prec_units}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
// Wetterdaten anzeigen
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
document.getElementById("apiUrloutput").value = apiUrl;
setweatherData(data);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
function searchAPI() {
const cityInput = document.getElementById("city_text").value;
const apiUrl = `http://localhost:8080/search?city=${cityInput}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
setData(data);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
};
const ListItem = ({ name, country, region, lat, lon }) => {
const handleClick = () => {
document.getElementById("city_text").value = name;
document.getElementById("region_text").value = country;
document.getElementById("country_text").value = region;
document.getElementById("latitude_text").value = lat;
document.getElementById("longitude_text").value = lon;
};
return (
{name}
Country: {country}
Region: {region}
Lat: {lat}, Lon: {lon}
);
};
export default HistoricalWeatherData;