import React from "react"; import "./weatherForecastData.css"; const HistoricalWeatherData = (props) => { return (












Hourly










Dayly











Output:



            



); 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; //Checkboxes const latitude = document.getElementById("latitude").checked; const longitude = document.getElementById("longitude").checked; const generationtime_ms = document.getElementById("generationtime_ms").checked; const utc_offset_seconds = document.getElementById("utc_offset_seconds").checked; const timezone = document.getElementById("timezone").checked; const timezone_abbreviation = document.getElementById( "timezone_abbreviation" ).checked; const elevation = document.getElementById("elevation").checked; 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; let filterArray = []; if (latitude) { filterArray.push("latitude"); } if (longitude) { filterArray.push("longitude"); } if (generationtime_ms) { filterArray.push("generationtime_ms"); } if (utc_offset_seconds) { filterArray.push("utc_offset_seconds"); } if (timezone) { filterArray.push("timezone"); } if (timezone_abbreviation) { filterArray.push("timezone_abbreviation"); } if (elevation) { filterArray.push("elevation"); } if (hourly_time) { filterArray.push("hourly.time"); } if (temperature_2m) { filterArray.push("hourly.temperature_2m"); } if (relative_humidity_2m) { filterArray.push("hourly.relative_humidity_2m"); } if (precipitation) { filterArray.push("hourly.precipitation"); } if (surface_pressure) { filterArray.push("hourly.surface_pressure"); } if (wind_speed_10m) { filterArray.push("hourly.wind_speed_10m"); } if (wind_direction_10m) { filterArray.push("hourly.wind_direction_10m"); } if (wind_gusts_10m) { filterArray.push("hourly.wind_gusts_10m"); } if (daily_time) { filterArray.push("daily.time"); } if (temperature_2m_max) { filterArray.push("daily.temperature_2m_max"); } if (temperature_2m_min) { filterArray.push("daily.temperature_2m_min"); } if (temperature_2m_mean) { filterArray.push("daily.temperature_2m_mean"); } if (precipitation_sum) { filterArray.push("daily.precipitation_sum"); } if (precipitation_hours) { filterArray.push("daily.precipitation_hours"); } if (wind_speed_10m_max) { filterArray.push("daily.wind_speed_10m_max"); } if (wind_gusts_10m_max) { filterArray.push("daily.wind_gusts_10m_max"); } if (wind_direction_10m_dominant) { filterArray.push("daily.wind_direction_10m_dominant"); } let filterString = filterArray.join(","); console.log("FilterString = " + filterString); const apiUrl = `http://localhost:8080/historicalweather?latitude=${latitude_text}&longitude=${longitude_text}&start_date=&end_date=&filter=${filterString}`; 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;