import React, { useState } from "react";
import "./weatherForecastData.css";
const HistoricalWeatherData = (props) => {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
const handleInputChange = (e) => {
setQuery(e.target.value);
if (e.target.value.trim() !== "") {
searchAPI(e.target.value.trim());
}
};
return (
);
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 hourly_time = document.getElementById("hourly_time").checked;
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 daily_time = document.getElementById("daily_time").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 (hourly_time) {
filterHourlyArray.push("time");
}
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 (daily_time) {
filterDailyArray.push("time");
}
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;
})
.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);
});
}
function boolToWord(bool) {
return bool ? "yes" : "no";
}
};
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;