import React, { useState } from "react";
import "./weatherForecastData.css";
const WeatherForecastData = (props) => {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
const [weatherdata, setweatherData] = useState([]);
const [sliderValue, setSliderValue] = useState(1);
// Handler-Funktion, um den Wert des Schiebereglers zu aktualisieren
const handleSliderChange = (event) => {
setSliderValue(event.target.value);
};
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 rows = [];
// Funktion, um die Header und die Werte zu extrahieren
function processObject(obj, parentKey = "") {
const keys = Object.keys(obj);
keys.forEach((key) => {
const newKey = parentKey ? `${parentKey}_${key}` : key;
if (typeof obj[key] === "object" && !Array.isArray(obj[key])) {
processObject(obj[key], newKey);
} else {
rows.push({ key: newKey, value: obj[key] });
}
});
}
// JSON verarbeiten
processObject(json);
// Header und Werte trennen
const headers = rows.map((row) => row.key).join(";");
const values = rows.map((row) => row.value).join(";");
// CSV-Zeilen erstellen
const csv = `${headers}\n${values}`;
return csv;
};
return (
Choose your City
Choose your Location
{data.map((item) => (
))}
Choose your custom output Data
Choose a Unit
Choose a Fileformat
);
function getData() {
const units = document.getElementById("units").value;
const days = document.getElementById("days").value;
const alerts = boolToWord(document.getElementById("alerts").checked);
const latitude_text = document.getElementById("latitude_text").value;
const longitude_text = document.getElementById("longitude_text").value;
const name = document.getElementById("name").checked;
const regionCheckbox = document.getElementById("region").checked;
const countryCheckbox = document.getElementById("country").checked;
const lon = document.getElementById("lon").checked;
const lat = document.getElementById("lat").checked;
const tz_id = document.getElementById("tz_id").checked;
const localtime_epoch = document.getElementById("localtime_epoch").checked;
const localtime = document.getElementById("localtime").checked;
const last_updated_epoch =
document.getElementById("last_updated_epoch").checked;
const last_updated = document.getElementById("last_updated").checked;
const date = document.getElementById("date").checked;
const date_epoch = document.getElementById("date_epoch").checked;
const maxtemp = document.getElementById("maxtemp").checked;
const mintemp = document.getElementById("mintemp").checked;
const avgtemp = document.getElementById("avgtemp").checked;
const maxwind = document.getElementById("maxwind").checked;
const totalprecip = document.getElementById("totalprecip").checked;
const avgvis = document.getElementById("avgvis").checked;
const avghumidity = document.getElementById("avghumidity").checked;
const daily_will_it_rain =
document.getElementById("daily_will_it_rain").checked;
const daily_chance_of_rain = document.getElementById(
"daily_chance_of_rain"
).checked;
const daily_will_it_snow =
document.getElementById("daily_will_it_snow").checked;
const daily_chance_of_snow = document.getElementById(
"daily_chance_of_snow"
).checked;
const uv = document.getElementById("uv").checked;
const sunrise = document.getElementById("sunrise").checked;
const sunset = document.getElementById("sunset").checked;
const moonrise = document.getElementById("moonrise").checked;
const moonset = document.getElementById("moonset").checked;
const moon_phase = document.getElementById("moon_phase").checked;
const moon_illumination =
document.getElementById("moon_illumination").checked;
const hour_time_epoch = document.getElementById("hour_time_epoch").checked;
const hour_time = document.getElementById("hour_time").checked;
const hour_temp = document.getElementById("hour_temp").checked;
const hour_is_day = document.getElementById("hour_is_day").checked;
const hour_wind = document.getElementById("hour_wind").checked;
const hour_wind_degree =
document.getElementById("hour_wind_degree").checked;
const hour_wind_dir = document.getElementById("hour_wind_dir").checked;
const hour_pressure = document.getElementById("hour_pressure").checked;
const hour_precip = document.getElementById("hour_precip").checked;
const hour_humidity = document.getElementById("hour_humidity").checked;
const hour_cloud = document.getElementById("hour_cloud").checked;
const hour_feelslike = document.getElementById("hour_feelslike").checked;
const hour_windchill = document.getElementById("hour_windchill").checked;
const hour_heatindex = document.getElementById("hour_heatindex").checked;
const hour_dewpoint = document.getElementById("hour_dewpoint").checked;
const hourly_will_it_rain = document.getElementById(
"hourly_will_it_rain"
).checked;
const hourly_chance_of_rain = document.getElementById(
"hourly_chance_of_rain"
).checked;
const hourly_will_it_snow = document.getElementById(
"hourly_will_it_snow"
).checked;
const hourly_chance_of_snow = document.getElementById(
"hourly_chance_of_snow"
).checked;
const hour_vis = document.getElementById("hour_vis").checked;
const hour_gust = document.getElementById("hour_gust").checked;
const hour_uv = document.getElementById("hour_uv").checked;
let filterArray = [];
if (name) filterArray.push("name");
if (regionCheckbox) filterArray.push("region");
if (countryCheckbox) filterArray.push("country");
if (lon) filterArray.push("lon");
if (lat) filterArray.push("lat");
if (tz_id) filterArray.push("tz_id");
if (localtime_epoch) filterArray.push("localtime_epoch");
if (localtime) filterArray.push("localtime");
if (last_updated_epoch) filterArray.push("last_updated_epoch");
if (last_updated) filterArray.push("last_updated");
if (date) filterArray.push("date");
if (date_epoch) filterArray.push("date_epoch");
if (maxtemp)
if (units == "world") {
filterArray.push("maxtemp_c");
} else {
filterArray.push("maxtemp_f");
}
if (mintemp)
if (units == "world") {
filterArray.push("mintemp_c");
} else {
filterArray.push("mintemp");
}
if (avgtemp)
if (units == "world") {
filterArray.push("avgtemp_c");
} else {
filterArray.push("avgtemp_f");
}
if (maxwind)
if (units == "world") {
filterArray.push("maxwind_kph");
} else {
filterArray.push("maxwind_mph");
}
if (totalprecip)
if (units == "world") {
filterArray.push("totalprecip_mm");
} else {
filterArray.push("totalprecip_in");
}
if (avgvis)
if (units == "world") {
filterArray.push("avgis_km");
} else {
filterArray.push("avgvis_miles");
}
if (avghumidity) filterArray.push("avghumidity");
if (daily_will_it_rain) filterArray.push("daily_will_it_rain");
if (daily_chance_of_rain) filterArray.push("daily_chance_of_rain");
if (daily_will_it_snow) filterArray.push("daily_will_it_snow");
if (daily_chance_of_snow) filterArray.push("daily_chance_of_snow");
if (uv) filterArray.push("uv_day");
if (sunrise) filterArray.push("sunrise");
if (sunset) filterArray.push("sunset");
if (moonrise) filterArray.push("moonrise");
if (moonset) filterArray.push("moonset");
if (moon_phase) filterArray.push("moon_phase");
if (moon_illumination) filterArray.push("moon_illumination");
if (hour_time_epoch) filterArray.push("hourly_time_epoch");
if (hour_time) filterArray.push("hourly_time");
if (hour_temp)
if (units == "world") {
filterArray.push("hourly_temp_c");
} else {
filterArray.push("hourly_temp_f");
}
if (hour_is_day) filterArray.push("hourly_is_day");
if (hour_wind)
if (units == "world") {
filterArray.push("hourly_wind_kph");
} else {
filterArray.push("hourly_wind_mph");
}
if (hour_wind_degree) filterArray.push("hourly_wind_degree");
if (hour_wind_dir) filterArray.push("hourly_wind_dir");
if (hour_pressure)
if (units == "world") {
filterArray.push("hourly_pressure_mb");
} else {
filterArray.push("hourly_pressure_in");
}
if (hour_precip)
if (units == "world") {
filterArray.push("hourly_precip_mm");
} else {
filterArray.push("hourly_precip_in");
}
if (hour_humidity) filterArray.push("hourly_humidity");
if (hour_cloud) filterArray.push("hourly_cloud");
if (hour_feelslike)
if (units == "world") {
filterArray.push("hourly_feelslike_c");
} else {
filterArray.push("hourly_feelslike_f");
}
if (hour_windchill)
if (units == "world") {
filterArray.push("hourly_windchill_c");
} else {
filterArray.push("hourly_windchill_f");
}
if (hour_heatindex)
if (units == "world") {
filterArray.push("hourly_heatindex_c");
} else {
filterArray.push("hourly_heatindex_f");
}
if (hour_dewpoint)
if (units == "world") {
filterArray.push("hourly_dewpoint_c");
} else {
filterArray.push("hourly_dewpoint_f");
}
if (hourly_will_it_rain) filterArray.push("hourly_will_it_rain");
if (hourly_chance_of_rain) filterArray.push("hourly_chance_of_rain");
if (hourly_will_it_snow) filterArray.push("hourly_will_it_snow");
if (hourly_chance_of_snow) filterArray.push("hourly_chance_of_snow");
if (hour_vis)
if (units == "world") {
filterArray.push("hourly_vis_km");
} else {
filterArray.push("hourly_vis_miles");
}
if (hour_gust)
if (units == "world") {
filterArray.push("hourly_gust_kph");
} else {
filterArray.push("hourly_gust_mph");
}
if (hour_uv) filterArray.push("hourly_uv");
let filterString = filterArray.join(",");
const apiUrl = `http://localhost:8080/forecastweather?q=${latitude_text},${longitude_text}&days=${days}&filter=${filterString}&alerts=${alerts}`;
console.log(apiUrl);
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);
});
}
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 WeatherForecastData;