Skip to content

GitLab

Commit 67fe26a5 authored by Weiser's avatar Weiser
Browse files

Merge branch 'devbackend' of... 

Merge branch 'devbackend' of https://transfer.hft-stuttgart.de/gitlab/22kaen1bdi/swp_ss24_wetterdaten_sammeln into devbackend
parents 0331081e f31da304
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.js
View file @ 67fe26a5
...@@ -18,8 +18,24 @@ const Currentdata = (props) => { ...@@ -18,8 +18,24 @@ const Currentdata = (props) => {
<div> <div>
<div className="thq-grid-5"> <div className="thq-grid-5">
<div class="filter"> <div class="filter">
<label for="location">Location:</label> <label htmlFor="location">Location:</label>
<input type="text" id="city_text" placeholder="Location" /> <input
type="text"
id="city_text"
placeholder="Location"
value={query}
onChange={handleInputChange}
/>
{data.map((item) => (
<ListItem
key={item.id}
name={item.name}
country={item.country}
region={item.region}
lat={item.lat}
lon={item.lon}
/>
))}
<br /> <br />
<label for="region">Region:</label> <label for="region">Region:</label>
<input type="text" id="region_text" placeholder="Region" /> <input type="text" id="region_text" placeholder="Region" />
...@@ -446,7 +462,7 @@ const Currentdata = (props) => { ...@@ -446,7 +462,7 @@ const Currentdata = (props) => {
console.log("FilterString = " + filterString); console.log("FilterString = " + filterString);
const apiUrl = `http://localhost:8080/currentweather?q=${city_text}&filter=${filterString}`; const apiUrl = `http://localhost:8080/currentweather?q=${latitude_text},${longitude_text}&filter=${filterString}`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => { .then((response) => {
...@@ -496,7 +512,11 @@ const Currentdata = (props) => { ...@@ -496,7 +512,11 @@ const Currentdata = (props) => {
const ListItem = ({ name, country, region, lat, lon }) => { const ListItem = ({ name, country, region, lat, lon }) => {
const handleClick = () => { const handleClick = () => {
alert(`Element geklickt: ${name}`); 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 ( return (
......
frontend/src/components/weather/historicalWeatherData.js
View file @ 67fe26a5
...@@ -3,114 +3,178 @@ import React from "react"; ...@@ -3,114 +3,178 @@ import React from "react";
import "./weatherForecastData.css"; import "./weatherForecastData.css";
const HistoricalWeatherData = (props) => { const HistoricalWeatherData = (props) => {
return ( return (
<div className="home-container"> <div className="home-container">
<div> <div>
<div className="thq-grid-5"> <div className="thq-grid-5">
<div class="filter"> <div class="filter">
<div class="filter"> <div class="filter">
<label for="location">Location:</label> <label for="location">Location:</label>
<input type="text" id="city_text" placeholder="Location" /> <input type="text" id="city_text" placeholder="Location" />
<br /> <br />
<label for="region">Region:</label> <label for="region">Region:</label>
<input type="text" id="region_text" placeholder="Region" /> <input type="text" id="region_text" placeholder="Region" />
<br /> <br />
<label>Country:</label> <label>Country:</label>
<input type="text" id="country_text" placeholder="Country" /> <input type="text" id="country_text" placeholder="Country" />
<br /> <br />
<label>Latitude:</label> <label>Latitude:</label>
<input type="text" id="latitude_text" placeholder="Latitude" /> <input type="text" id="latitude_text" placeholder="Latitude" />
<label>Longitude:</label> <label>Longitude:</label>
<input type="text" id="longitude_text" placeholder="Longitude" /> <input type="text" id="longitude_text" placeholder="Longitude" />
<br /> <br />
<label>Time Zone:</label> <label>Time Zone:</label>
<input type="text" id="timezone_text" placeholder="Timezone" /> <input type="text" id="timezone_text" placeholder="Timezone" />
<br /> <br />
</div> </div>
<input type="checkbox" id="latitude" class="checkBoxFilter" /> <input type="checkbox" id="latitude" class="checkBoxFilter" />
<label for="latitude">Latitude</label> <label for="latitude">Latitude</label>
<br /> <br />
<input type="checkbox" id="longitude" class="checkBoxFilter" /> <input type="checkbox" id="longitude" class="checkBoxFilter" />
<label for="longitude">Longitude</label> <label for="longitude">Longitude</label>
<br /> <br />
<input type="checkbox" id="generationtime_ms" class="checkBoxFilter" /> <input
<label for="generationtime_ms">Generation Time (ms)</label> type="checkbox"
<br /> id="generationtime_ms"
<input type="checkbox" id="utc_offset_seconds" class="checkBoxFilter" /> class="checkBoxFilter"
<label for="utc_offset_seconds">UTC Offset (Seconds)</label> />
<br /> <label for="generationtime_ms">Generation Time (ms)</label>
<input type="checkbox" id="timezone" class="checkBoxFilter" /> <br />
<label for="timezone">Timezone</label> <input
<br /> type="checkbox"
<input type="checkbox" id="timezone_abbreviation" class="checkBoxFilter" /> id="utc_offset_seconds"
<label for="timezone_abbreviation">Timezone Abbreviation</label> class="checkBoxFilter"
<br /> />
<input type="checkbox" id="elevation" class="checkBoxFilter" /> <label for="utc_offset_seconds">UTC Offset (Seconds)</label>
<label for="elevation">Elevation</label> <br />
<br /> <input type="checkbox" id="timezone" class="checkBoxFilter" />
<p>Hourly</p> <label for="timezone">Timezone</label>
<br /> <br />
<input type="checkbox" id="hourly_time" class="checkBoxFilter" /> <input
<label for="hourly_time">Hourly Time</label> type="checkbox"
<br /> id="timezone_abbreviation"
<input type="checkbox" id="temperature_2m" class="checkBoxFilter" /> class="checkBoxFilter"
<label for="temperature_2m">Temperature 2m</label> />
<br /> <label for="timezone_abbreviation">Timezone Abbreviation</label>
<input type="checkbox" id="relative_humidity_2m" class="checkBoxFilter" /> <br />
<label for="relative_humidity_2m">Relative Humidity 2m</label> <input type="checkbox" id="elevation" class="checkBoxFilter" />
<br /> <label for="elevation">Elevation</label>
<input type="checkbox" id="precipitation" class="checkBoxFilter" /> <br />
<label for="precipitation">Precipitation</label> <p>Hourly</p>
<br /> <br />
<input type="checkbox" id="surface_pressure" class="checkBoxFilter" /> <input type="checkbox" id="hourly_time" class="checkBoxFilter" />
<label for="surface_pressure">Surface Pressure</label> <label for="hourly_time">Hourly Time</label>
<br /> <br />
<input type="checkbox" id="wind_speed_10m" class="checkBoxFilter" /> <input type="checkbox" id="temperature_2m" class="checkBoxFilter" />
<label for="wind_speed_10m">Wind Speed 10m</label> <label for="temperature_2m">Temperature 2m</label>
<br /> <br />
<input type="checkbox" id="wind_direction_10m" className="checkBoxFilter" /> <input
<label for="wind_direction_10m">Wind Direction 10m</label> type="checkbox"
<br /> id="relative_humidity_2m"
<input type="checkbox" id="wind_gusts_10m" className="checkBoxFilter" /> class="checkBoxFilter"
<label for="wind_gusts_10m">Wind Gusts 10m</label> />
<br /> <label for="relative_humidity_2m">Relative Humidity 2m</label>
<p>Dayly</p> <br />
<br /> <input type="checkbox" id="precipitation" class="checkBoxFilter" />
<input type="checkbox" id="daily_time" class="checkBoxFilter" /> <label for="precipitation">Precipitation</label>
<label for="daily_time">Daily Time</label> <br />
<br /> <input
<input type="checkbox" id="temperature_2m_max" class="checkBoxFilter" /> type="checkbox"
<label for="temperature_2m_max">Temperature 2m Max</label> id="surface_pressure"
<br /> class="checkBoxFilter"
<input type="checkbox" id="temperature_2m_min" class="checkBoxFilter" /> />
<label for="temperature_2m_min">Temperature 2m Min</label> <label for="surface_pressure">Surface Pressure</label>
<br /> <br />
<input type="checkbox" id="temperature_2m_mean" class="checkBoxFilter" /> <input type="checkbox" id="wind_speed_10m" class="checkBoxFilter" />
<label for="temperature_2m_mean">Temperature 2m Mean</label> <label for="wind_speed_10m">Wind Speed 10m</label>
<br /> <br />
<input type="checkbox" id="precipitation_sum" class="checkBoxFilter" /> <input
<label for="precipitation_sum">Precipitation Sum</label> type="checkbox"
<br /> id="wind_direction_10m"
<input type="checkbox" id="precipitation_hours" class="checkBoxFilter" /> className="checkBoxFilter"
<label for="precipitation_hours">Precipitation Hours</label> />
<br /> <label for="wind_direction_10m">Wind Direction 10m</label>
<input type="checkbox" id="wind_speed_10m_max" class="checkBoxFilter" /> <br />
<label for="wind_speed_10m_max">Wind Speed 10m Max</label> <input
<br /> type="checkbox"
<input type="checkbox" id="wind_gusts_10m_max" class="checkBoxFilter" /> id="wind_gusts_10m"
<label for="wind_gusts_10m_max">Wind Gusts 10m Max</label> className="checkBoxFilter"
<br /> />
<input type="checkbox" id="wind_direction_10m_dominant" class="checkBoxFilter" /> <label for="wind_gusts_10m">Wind Gusts 10m</label>
<label for="wind_direction_10m_dominant">Wind Direction 10m Dominant</label> <br />
<br /> <p>Dayly</p>
<div> <br />
<label for="units">Choose a unit:</label> <input type="checkbox" id="daily_time" class="checkBoxFilter" />
<label for="daily_time">Daily Time</label>
<br />
<input
type="checkbox"
id="temperature_2m_max"
class="checkBoxFilter"
/>
<label for="temperature_2m_max">Temperature 2m Max</label>
<br />
<input
type="checkbox"
id="temperature_2m_min"
class="checkBoxFilter"
/>
<label for="temperature_2m_min">Temperature 2m Min</label>
<br />
<input
type="checkbox"
id="temperature_2m_mean"
class="checkBoxFilter"
/>
<label for="temperature_2m_mean">Temperature 2m Mean</label>
<br />
<input
type="checkbox"
id="precipitation_sum"
class="checkBoxFilter"
/>
<label for="precipitation_sum">Precipitation Sum</label>
<br />
<input
type="checkbox"
id="precipitation_hours"
class="checkBoxFilter"
/>
<label for="precipitation_hours">Precipitation Hours</label>
<br />
<input
type="checkbox"
id="wind_speed_10m_max"
class="checkBoxFilter"
/>
<label for="wind_speed_10m_max">Wind Speed 10m Max</label>
<br />
<input
type="checkbox"
id="wind_gusts_10m_max"
class="checkBoxFilter"
/>
<label for="wind_gusts_10m_max">Wind Gusts 10m Max</label>
<br />
<input
type="checkbox"
id="wind_direction_10m_dominant"
class="checkBoxFilter"
/>
<label for="wind_direction_10m_dominant">
Wind Direction 10m Dominant
</label>
<br />
<div>
<label for="units">Choose a unit:</label>
<select name="unnits" id="units"> <select name="unnits" id="units">
<option value="world">Rest of The World</option> <option value="world">Rest of The World</option>
<option value="american">American units: /eagles per shool shootings</option> <option value="american">
American units: /eagles per shool shootings
</option>
</select> </select>
</div> </div>
<div class="output"> <div class="output">
<h2>Output:</h2> <h2>Output:</h2>
<br /> <br />
<pre id="weatherData"></pre> <pre id="weatherData"></pre>
...@@ -129,123 +193,142 @@ const HistoricalWeatherData = (props) => { ...@@ -129,123 +193,142 @@ const HistoricalWeatherData = (props) => {
</div> </div>
</div> </div>
</div> </div>
); );
function getData() { function getData() {
const city_text = document.getElementById("city_text").value; const city_text = document.getElementById("city_text").value;
const region_text = document.getElementById("region_text").value; const region_text = document.getElementById("region_text").value;
const country_text = document.getElementById("country_text").value; const country_text = document.getElementById("country_text").value;
const latitude_text = document.getElementById("latitude_text").value; const latitude_text = document.getElementById("latitude_text").value;
const longitude_text = document.getElementById("longitude_text").value; const longitude_text = document.getElementById("longitude_text").value;
const timezone_text = document.getElementById("timezone_text").value; const timezone_text = document.getElementById("timezone_text").value;
//Checkboxes //Checkboxes
const latitude = document.getElementById("latitude").checked; const latitude = document.getElementById("latitude").checked;
const longitude = document.getElementById("longitude").checked; const longitude = document.getElementById("longitude").checked;
const generationtime_ms = document.getElementById("generationtime_ms").checked; const generationtime_ms =
const utc_offset_seconds = document.getElementById("utc_offset_seconds").checked; document.getElementById("generationtime_ms").checked;
const timezone = document.getElementById("timezone").checked; const utc_offset_seconds =
const timezone_abbreviation = document.getElementById("timezone_abbreviation").checked; document.getElementById("utc_offset_seconds").checked;
const elevation = document.getElementById("elevation").checked; const timezone = document.getElementById("timezone").checked;
const hourly_time = document.getElementById("hourly_time").checked; const timezone_abbreviation = document.getElementById(
const temperature_2m = document.getElementById("temperature_2m").checked; "timezone_abbreviation"
const relative_humidity_2m = document.getElementById("relative_humidity_2m").checked; ).checked;
const precipitation = document.getElementById("precipitation").checked; const elevation = document.getElementById("elevation").checked;
const surface_pressure = document.getElementById("surface_pressure").checked; const hourly_time = document.getElementById("hourly_time").checked;
const wind_speed_10m = document.getElementById("wind_speed_10m").checked; const temperature_2m = document.getElementById("temperature_2m").checked;
const wind_direction_10m = document.getElementById("wind_direction_10m").checked; const relative_humidity_2m = document.getElementById(
const wind_gusts_10m = document.getElementById("wind_gusts_10m").checked; "relative_humidity_2m"
const daily_time = document.getElementById("daily_time").checked; ).checked;
const temperature_2m_max = document.getElementById("temperature_2m_max").checked; const precipitation = document.getElementById("precipitation").checked;
const temperature_2m_min = document.getElementById("temperature_2m_min").checked; const surface_pressure =
const temperature_2m_mean = document.getElementById("temperature_2m_mean").checked; document.getElementById("surface_pressure").checked;
const precipitation_sum = document.getElementById("precipitation_sum").checked; const wind_speed_10m = document.getElementById("wind_speed_10m").checked;
const precipitation_hours = document.getElementById("precipitation_hours").checked; const wind_direction_10m =
const wind_speed_10m_max = document.getElementById("wind_speed_10m_max").checked; document.getElementById("wind_direction_10m").checked;
const wind_gusts_10m_max = document.getElementById("wind_gusts_10m_max").checked; const wind_gusts_10m = document.getElementById("wind_gusts_10m").checked;
const wind_direction_10m_dominant = document.getElementById("wind_direction_10m_dominant").checked; const daily_time = document.getElementById("daily_time").checked;
const temperature_2m_max =
let filterArray = []; document.getElementById("temperature_2m_max").checked;
const temperature_2m_min =
if (latitude) { document.getElementById("temperature_2m_min").checked;
filterArray.push("latitude"); const temperature_2m_mean = document.getElementById(
} "temperature_2m_mean"
if (longitude) { ).checked;
filterArray.push("longitude"); const precipitation_sum =
} document.getElementById("precipitation_sum").checked;
if (generationtime_ms) { const precipitation_hours = document.getElementById(
filterArray.push("generationtime_ms"); "precipitation_hours"
} ).checked;
if (utc_offset_seconds) { const wind_speed_10m_max =
filterArray.push("utc_offset_seconds"); document.getElementById("wind_speed_10m_max").checked;
} const wind_gusts_10m_max =
if (timezone) { document.getElementById("wind_gusts_10m_max").checked;
filterArray.push("timezone"); const wind_direction_10m_dominant = document.getElementById(
} "wind_direction_10m_dominant"
if (timezone_abbreviation) { ).checked;
filterArray.push("timezone_abbreviation");
} let filterArray = [];
if (elevation) {
filterArray.push("elevation"); if (latitude) {
} filterArray.push("latitude");
if (hourly_time) { }
filterArray.push("hourly.time"); if (longitude) {
} filterArray.push("longitude");
if (temperature_2m) { }
filterArray.push("hourly.temperature_2m"); if (generationtime_ms) {
} filterArray.push("generationtime_ms");
if (relative_humidity_2m) { }
filterArray.push("hourly.relative_humidity_2m"); if (utc_offset_seconds) {
} filterArray.push("utc_offset_seconds");
if (precipitation) { }
filterArray.push("hourly.precipitation"); if (timezone) {
} filterArray.push("timezone");
if (surface_pressure) { }
filterArray.push("hourly.surface_pressure"); if (timezone_abbreviation) {
} filterArray.push("timezone_abbreviation");
if (wind_speed_10m) { }
filterArray.push("hourly.wind_speed_10m"); if (elevation) {
} filterArray.push("elevation");
if (wind_direction_10m) { }
filterArray.push("hourly.wind_direction_10m"); if (hourly_time) {
} filterArray.push("hourly.time");
if (wind_gusts_10m) { }
filterArray.push("hourly.wind_gusts_10m"); if (temperature_2m) {
} filterArray.push("hourly.temperature_2m");
if (daily_time) { }
filterArray.push("daily.time"); if (relative_humidity_2m) {
} filterArray.push("hourly.relative_humidity_2m");
if (temperature_2m_max) { }
filterArray.push("daily.temperature_2m_max"); if (precipitation) {
} filterArray.push("hourly.precipitation");
if (temperature_2m_min) { }
filterArray.push("daily.temperature_2m_min"); if (surface_pressure) {
} filterArray.push("hourly.surface_pressure");
if (temperature_2m_mean) { }
filterArray.push("daily.temperature_2m_mean"); if (wind_speed_10m) {
} filterArray.push("hourly.wind_speed_10m");
if (precipitation_sum) { }
filterArray.push("daily.precipitation_sum"); if (wind_direction_10m) {
} filterArray.push("hourly.wind_direction_10m");
if (precipitation_hours) { }
filterArray.push("daily.precipitation_hours"); if (wind_gusts_10m) {
} filterArray.push("hourly.wind_gusts_10m");
if (wind_speed_10m_max) { }
filterArray.push("daily.wind_speed_10m_max"); if (daily_time) {
} filterArray.push("daily.time");
if (wind_gusts_10m_max) { }
filterArray.push("daily.wind_gusts_10m_max"); if (temperature_2m_max) {
} filterArray.push("daily.temperature_2m_max");
if (wind_direction_10m_dominant) { }
filterArray.push("daily.wind_direction_10m_dominant"); if (temperature_2m_min) {
} filterArray.push("daily.temperature_2m_min");
}
let filterString = filterArray.join(","); 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}`;
console.log("FilterString = " + filterString);
const apiUrl = `http://localhost:8080/currentweather?q=${city_text}&filter=${filterString}`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
...@@ -267,10 +350,9 @@ const HistoricalWeatherData = (props) => { ...@@ -267,10 +350,9 @@ const HistoricalWeatherData = (props) => {
}); });
} }
function searchAPI() { function searchAPI() {
const cityInput = document.getElementById("city").value; const cityInput = document.getElementById("city_text").value;
const apiKey = "1244099aeaee4b179e6111803241304"; const apiUrl = `http://localhost:8080/search?city=${cityInput}`;
const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => { .then((response) => {
...@@ -281,12 +363,7 @@ const HistoricalWeatherData = (props) => { ...@@ -281,12 +363,7 @@ const HistoricalWeatherData = (props) => {
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
// Wetterdaten anzeigen setData(data);
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
}) })
.catch((error) => { .catch((error) => {
console.error("There was a problem with the fetch operation:", error); console.error("There was a problem with the fetch operation:", error);
...@@ -296,7 +373,25 @@ const HistoricalWeatherData = (props) => { ...@@ -296,7 +373,25 @@ const HistoricalWeatherData = (props) => {
function boolToWord(bool) { function boolToWord(bool) {
return bool ? "yes" : "no"; 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;
};
export default HistoricalWeatherData; return (
\ No newline at end of file <div className="list-item" onClick={handleClick}>
<div className="title">{name}</div>
<div className="subtitle">
Country: {country} <br />
Region: {region} <br />
Lat: {lat}, Lon: {lon}
</div>
</div>
);
};
export default HistoricalWeatherData;
frontend/src/components/weather/weatherForecastData.js
View file @ 67fe26a5
...@@ -3,363 +3,469 @@ import React from "react"; ...@@ -3,363 +3,469 @@ import React from "react";
import "./weatherForecastData.css"; import "./weatherForecastData.css";
const WeatherForecastData = (props) => { const WeatherForecastData = (props) => {
return ( return (
<div className="home-container"> <div className="home-container">
<div> <div>
<div className="thq-grid-5"> <div className="thq-grid-5">
<div class="filter"> <div class="filter">
<div> <div>
<label for="location">Location:</label> <label for="location">Location:</label>
<input type="text" id="city_text" placeholder="Location" /> <input type="text" id="city_text" placeholder="Location" />
<br /> <br />
<label for="region">Region:</label> <label for="region">Region:</label>
<input type="text" id="region_text" placeholder="Region" /> <input type="text" id="region_text" placeholder="Region" />
<br /> <br />
<label>Country:</label> <label>Country:</label>
<input type="text" id="country_text" placeholder="Country" /> <input type="text" id="country_text" placeholder="Country" />
<br /> <br />
<label>Latitude:</label> <label>Latitude:</label>
<input type="text" id="latitude_text" placeholder="Latitude" /> <input type="text" id="latitude_text" placeholder="Latitude" />
<label>Longitude:</label> <label>Longitude:</label>
<input type="text" id="longitude_text" placeholder="Longitude" /> <input type="text" id="longitude_text" placeholder="Longitude" />
<br /> <br />
</div> </div>
<div> <div>
<input type="checkbox" id="name" className="checkBoxFilter" /> <input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label> <label> City Name</label>
<br /> <br />
<input type="checkbox" id="region" className="checkBoxFilter" /> <input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label> <label> Region</label>
<br /> <br />
<input type="checkbox" id="country" className="checkBoxFilter" /> <input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label> <label> Country</label>
<br /> <br />
<input type="checkbox" id="lon" className="checkBoxFilter" /> <input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label> <label> Longitude</label>
<br /> <br />
<input type="checkbox" id="lat" className="checkBoxFilter" /> <input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label> <label> Latitude</label>
<br /> <br />
<input type="checkbox" id="tz_id" className="checkBoxFilter" /> <input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label> <label> Timezone Id</label>
<br /> <br />
<input <input
type="checkbox" type="checkbox"
id="localtime_epoch" id="localtime_epoch"
className="checkBoxFilter" className="checkBoxFilter"
/> />
<label> Localtime Epoch</label> <label> Localtime Epoch</label>
<br /> <br />
<input type="checkbox" id="localtime" className="checkBoxFilter" /> <input
<label> Localtime</label> type="checkbox"
<br /> id="localtime"
<input className="checkBoxFilter"
type="checkbox" />
id="last_updated_epoch" <label> Localtime</label>
className="checkBoxFilter" <br />
/> <input
<label> Last Updated Epoch</label> type="checkbox"
<br /> id="last_updated_epoch"
<input className="checkBoxFilter"
type="checkbox" />
id="last_updated" <label> Last Updated Epoch</label>
className="checkBoxFilter" <br />
/> <input
<label> Last Updated</label> type="checkbox"
<br /> id="last_updated"
<input type="checkbox" id="date" class="checkBoxFilter" /> className="checkBoxFilter"
<label for="date">Date</label> />
<br /> <label> Last Updated</label>
<input type="checkbox" id="date_epoch" class="checkBoxFilter" /> <br />
<label for="date_epoch">Date Epoch</label> <input type="checkbox" id="date" class="checkBoxFilter" />
<br /> <label for="date">Date</label>
<input type="checkbox" id="maxtemp" class="checkBoxFilter" /> <br />
<label for="maxtemp">Max Temperature</label> <input type="checkbox" id="date_epoch" class="checkBoxFilter" />
<br /> <label for="date_epoch">Date Epoch</label>
<input type="checkbox" id="mintemp" class="checkBoxFilter" /> <br />
<label for="mintemp">Min Temperature</label> <input type="checkbox" id="maxtemp" class="checkBoxFilter" />
<br /> <label for="maxtemp">Max Temperature</label>
<input type="checkbox" id="avgtemp" class="checkBoxFilter" /> <br />
<label for="avgtemp">Average Temperature</label> <input type="checkbox" id="mintemp" class="checkBoxFilter" />
<br /> <label for="mintemp">Min Temperature</label>
<input type="checkbox" id="maxwind" class="checkBoxFilter" /> <br />
<label for="maxwind">Max Wind Speed</label> <input type="checkbox" id="avgtemp" class="checkBoxFilter" />
<br /> <label for="avgtemp">Average Temperature</label>
<input type="checkbox" id="totalprecip" class="checkBoxFilter" /> <br />
<label for="totalprecip">Total Precipitation</label> <input type="checkbox" id="maxwind" class="checkBoxFilter" />
<br /> <label for="maxwind">Max Wind Speed</label>
<input type="checkbox" id="avgvis" class="checkBoxFilter" /> <br />
<label for="avgvis">Average Visibility</label> <input type="checkbox" id="totalprecip" class="checkBoxFilter" />
<br /> <label for="totalprecip">Total Precipitation</label>
<input type="checkbox" id="avghumidity" class="checkBoxFilter" /> <br />
<label for="avghumidity">Average Humidity</label> <input type="checkbox" id="avgvis" class="checkBoxFilter" />
<br /> <label for="avgvis">Average Visibility</label>
<input type="checkbox" id="daily_will_it_rain" class="checkBoxFilter" /> <br />
<label for="daily_will_it_rain">Daily Will it Rain</label> <input type="checkbox" id="avghumidity" class="checkBoxFilter" />
<br /> <label for="avghumidity">Average Humidity</label>
<input type="checkbox" id="daily_chance_of_rain" class="checkBoxFilter" /> <br />
<label for="daily_chance_of_rain">Daily Chance of Rain</label> <input
<br /> type="checkbox"
<input type="checkbox" id="daily_will_it_snow" class="checkBoxFilter" /> id="daily_will_it_rain"
<label for="daily_will_it_snow">Daily Will it Snow</label> class="checkBoxFilter"
<br /> />
<input type="checkbox" id="daily_chance_of_snow" class="checkBoxFilter" /> <label for="daily_will_it_rain">Daily Will it Rain</label>
<label for="daily_chance_of_snow">Daily Chance of Snow</label> <br />
<br /> <input
<input type="checkbox" id="condition_text" class="checkBoxFilter" /> type="checkbox"
<label for="condition_text">Condition Text</label> id="daily_chance_of_rain"
<br /> class="checkBoxFilter"
<input type="checkbox" id="condition_icon" class="checkBoxFilter" /> />
<label for="condition_icon">Condition Icon</label> <label for="daily_chance_of_rain">Daily Chance of Rain</label>
<br /> <br />
<input type="checkbox" id="condition_code" class="checkBoxFilter" /> <input
<label for="condition_code">Condition Code</label> type="checkbox"
<br /> id="daily_will_it_snow"
<input type="checkbox" id="uv" class="checkBoxFilter" /> class="checkBoxFilter"
<label for="uv">UV Index</label> />
<br /> <label for="daily_will_it_snow">Daily Will it Snow</label>
<input type="checkbox" id="sunrise" class="checkBoxFilter" /> <br />
<label for="sunrise">Sunrise</label> <input
<br /> type="checkbox"
<input type="checkbox" id="sunset" class="checkBoxFilter" /> id="daily_chance_of_snow"
<label for="sunset">Sunset</label> class="checkBoxFilter"
<br /> />
<input type="checkbox" id="moonrise" class="checkBoxFilter" /> <label for="daily_chance_of_snow">Daily Chance of Snow</label>
<label for="moonrise">Moonrise</label> <br />
<br /> <input
<input type="checkbox" id="moonset" class="checkBoxFilter" /> type="checkbox"
<label for="moonset">Moonset</label> id="condition_text"
<br /> class="checkBoxFilter"
<input type="checkbox" id="moon_phase" class="checkBoxFilter" /> />
<label for="moon_phase">Moon Phase</label> <label for="condition_text">Condition Text</label>
<br /> <br />
<input type="checkbox" id="moon_illumination" class="checkBoxFilter" /> <input
<label for="moon_illumination">Moon Illumination</label> type="checkbox"
<br /> id="condition_icon"
<input type="checkbox" id="hour_time_epoch" class="checkBoxFilter" /> class="checkBoxFilter"
<label for="hour_time_epoch">Hour Time Epoch</label> />
<br /> <label for="condition_icon">Condition Icon</label>
<input type="checkbox" id="hour_time" class="checkBoxFilter" /> <br />
<label for="hour_time">Hour Time</label> <input
<br /> type="checkbox"
<input type="checkbox" id="hour_temp" class="checkBoxFilter" /> id="condition_code"
<label for="hour_temp">Hour Temperature</label> class="checkBoxFilter"
<br /> />
<input type="checkbox" id="hour_is_day" class="checkBoxFilter" /> <label for="condition_code">Condition Code</label>
<label for="hour_is_day">Hour Is Day</label> <br />
<br /> <input type="checkbox" id="uv" class="checkBoxFilter" />
<input type="checkbox" id="hour_condition_text" class="checkBoxFilter" /> <label for="uv">UV Index</label>
<label for="hour_condition_text">Hour Condition Text</label> <br />
<br /> <input type="checkbox" id="sunrise" class="checkBoxFilter" />
<input type="checkbox" id="hour_condition_icon" class="checkBoxFilter" /> <label for="sunrise">Sunrise</label>
<label for="hour_condition_icon">Hour Condition Icon</label> <br />
<br /> <input type="checkbox" id="sunset" class="checkBoxFilter" />
<input type="checkbox" id="hour_condition_code" class="checkBoxFilter" /> <label for="sunset">Sunset</label>
<label for="hour_condition_code">Hour Condition Code</label> <br />
<br /> <input type="checkbox" id="moonrise" class="checkBoxFilter" />
<input type="checkbox" id="hour_wind" class="checkBoxFilter" /> <label for="moonrise">Moonrise</label>
<label for="hour_wind">Hour Wind</label> <br />
<br /> <input type="checkbox" id="moonset" class="checkBoxFilter" />
<input type="checkbox" id="hour_wind_degree" class="checkBoxFilter" /> <label for="moonset">Moonset</label>
<label for="hour_wind_degree">Hour Wind Degree</label> <br />
<br /> <input type="checkbox" id="moon_phase" class="checkBoxFilter" />
<input type="checkbox" id="hour_wind_dir" class="checkBoxFilter" /> <label for="moon_phase">Moon Phase</label>
<label for="hour_wind_dir">Hour Wind Direction</label> <br />
<br /> <input
<input type="checkbox" id="hour_pressure" class="checkBoxFilter" /> type="checkbox"
<label for="hour_pressure">Hour Pressure</label> id="moon_illumination"
<br /> class="checkBoxFilter"
<input type="checkbox" id="hour_precip" class="checkBoxFilter" /> />
<label for="hour_precip">Hour Precipitation</label> <label for="moon_illumination">Moon Illumination</label>
<br /> <br />
<input type="checkbox" id="hour_humidity" class="checkBoxFilter" /> <input
<label for="hour_humidity">Hour Humidity</label> type="checkbox"
<br /> id="hour_time_epoch"
<input type="checkbox" id="hour_cloud" class="checkBoxFilter" /> class="checkBoxFilter"
<label for="hour_cloud">Hour Cloud</label> />
<br /> <label for="hour_time_epoch">Hour Time Epoch</label>
<input type="checkbox" id="hour_feelslike" class="checkBoxFilter" /> <br />
<label for="hour_feelslike">Hour Feels Like</label> <input type="checkbox" id="hour_time" class="checkBoxFilter" />
<br /> <label for="hour_time">Hour Time</label>
<input type="checkbox" id="hour_windchill" class="checkBoxFilter" /> <br />
<label for="hour_windchill">Hour Wind Chill</label> <input type="checkbox" id="hour_temp" class="checkBoxFilter" />
<br /> <label for="hour_temp">Hour Temperature</label>
<input type="checkbox" id="hour_heatindex" class="checkBoxFilter" /> <br />
<label for="hour_heatindex">Hour Heat Index</label> <input type="checkbox" id="hour_is_day" class="checkBoxFilter" />
<br /> <label for="hour_is_day">Hour Is Day</label>
<input type="checkbox" id="hour_dewpoint" class="checkBoxFilter" /> <br />
<label for="hour_dewpoint">Hour Dew Point</label> <input
<br /> type="checkbox"
<input type="checkbox" id="hour_vis" class="checkBoxFilter" /> id="hour_condition_text"
<label for="hour_vis">Hour Visibility</label> class="checkBoxFilter"
<br /> />
<input type="checkbox" id="hour_gust" class="checkBoxFilter" /> <label for="hour_condition_text">Hour Condition Text</label>
<label for="hour_gust">Hour Gust</label> <br />
<br /> <input
<input type="checkbox" id="hour_uv" class="checkBoxFilter" /> type="checkbox"
<label for="hour_uv">Hour UV</label> id="hour_condition_icon"
<br /> class="checkBoxFilter"
<br /> />
<div> <label for="hour_condition_icon">Hour Condition Icon</label>
<label for="units">Choose a unit:</label> <br />
<select name="unnits" id="units"> <input
type="checkbox"
id="hour_condition_code"
class="checkBoxFilter"
/>
<label for="hour_condition_code">Hour Condition Code</label>
<br />
<input type="checkbox" id="hour_wind" class="checkBoxFilter" />
<label for="hour_wind">Hour Wind</label>
<br />
<input
type="checkbox"
id="hour_wind_degree"
class="checkBoxFilter"
/>
<label for="hour_wind_degree">Hour Wind Degree</label>
<br />
<input
type="checkbox"
id="hour_wind_dir"
class="checkBoxFilter"
/>
<label for="hour_wind_dir">Hour Wind Direction</label>
<br />
<input
type="checkbox"
id="hour_pressure"
class="checkBoxFilter"
/>
<label for="hour_pressure">Hour Pressure</label>
<br />
<input type="checkbox" id="hour_precip" class="checkBoxFilter" />
<label for="hour_precip">Hour Precipitation</label>
<br />
<input
type="checkbox"
id="hour_humidity"
class="checkBoxFilter"
/>
<label for="hour_humidity">Hour Humidity</label>
<br />
<input type="checkbox" id="hour_cloud" class="checkBoxFilter" />
<label for="hour_cloud">Hour Cloud</label>
<br />
<input
type="checkbox"
id="hour_feelslike"
class="checkBoxFilter"
/>
<label for="hour_feelslike">Hour Feels Like</label>
<br />
<input
type="checkbox"
id="hour_windchill"
class="checkBoxFilter"
/>
<label for="hour_windchill">Hour Wind Chill</label>
<br />
<input
type="checkbox"
id="hour_heatindex"
class="checkBoxFilter"
/>
<label for="hour_heatindex">Hour Heat Index</label>
<br />
<input
type="checkbox"
id="hour_dewpoint"
class="checkBoxFilter"
/>
<label for="hour_dewpoint">Hour Dew Point</label>
<br />
<input type="checkbox" id="hour_vis" class="checkBoxFilter" />
<label for="hour_vis">Hour Visibility</label>
<br />
<input type="checkbox" id="hour_gust" class="checkBoxFilter" />
<label for="hour_gust">Hour Gust</label>
<br />
<input type="checkbox" id="hour_uv" class="checkBoxFilter" />
<label for="hour_uv">Hour UV</label>
<br />
<br />
<div>
<label for="units">Choose a unit:</label>
<select name="unnits" id="units">
<option value="world">Rest of The World</option> <option value="world">Rest of The World</option>
<option value="american">American units: /eagles per shool shootings</option> <option value="american">
</select> American units: /eagles per shool shootings
</option>
</select>
</div>
<div>
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div> </div>
<div> <div id="apiUrl">
<button className="thq-button-filled" onClick={getData}> <label>API URL:</label>
Generate <br />
<input
className="input"
type="text"
id="apiUrloutput"
readOnly
/>
</div>
<button className="APIButton" onClick={searchAPI}>
City api
</button> </button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br /> <br />
<pre id="weatherData"></pre>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br /> <br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div> </div>
<button className="APIButton" onClick={searchAPI}>
City api
</button>
<br />
<br />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> );
);
function getData() {
const city = document.getElementById("city_text").value;
const region = document.getElementById("region_text").value;
const country = document.getElementById("country_text").value;
const latitude = document.getElementById("latitude_text").value;
const longitude = 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 condition_text = document.getElementById("condition_text").checked;
const condition_icon = document.getElementById("condition_icon").checked;
const condition_code = document.getElementById("condition_code").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_condition_text = document.getElementById(
"hour_condition_text"
).checked;
const hour_condition_icon = document.getElementById(
"hour_condition_icon"
).checked;
const hour_condition_code = document.getElementById(
"hour_condition_code"
).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 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) filterArray.push("maxtemp");
if (mintemp) filterArray.push("mintemp");
if (avgtemp) filterArray.push("avgtemp");
if (maxwind) filterArray.push("maxwind");
if (totalprecip) filterArray.push("totalprecip");
if (avgvis) filterArray.push("avgvis");
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 (condition_text) filterArray.push("condition_text");
if (condition_icon) filterArray.push("condition_icon");
if (condition_code) filterArray.push("condition_code");
if (uv) filterArray.push("uv");
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) filterArray.push("hourly_temp");
if (hour_is_day) filterArray.push("hourly_is_day");
if (hour_condition_text) filterArray.push("hourly_condition_text");
if (hour_condition_icon) filterArray.push("hourly_condition_icon");
if (hour_condition_code) filterArray.push("hourly_condition_code");
if (hour_wind) filterArray.push("hourly_wind");
if (hour_wind_degree) filterArray.push("hourly_wind_degree");
if (hour_wind_dir) filterArray.push("hourly_wind_dir");
if (hour_pressure) filterArray.push("hourly_pressure");
if (hour_precip) filterArray.push("hourly_precip");
if (hour_humidity) filterArray.push("hourly_humidity");
if (hour_cloud) filterArray.push("hourly_cloud");
if (hour_feelslike) filterArray.push("hourly_feelslike");
if (hour_windchill) filterArray.push("hourly_windchill");
if (hour_heatindex) filterArray.push("hourly_heatindex");
if (hour_dewpoint) filterArray.push("hourly_dewpoint");
if (hour_vis) filterArray.push("hourly_vis");
if (hour_gust) filterArray.push("hourly_gust");
if (hour_uv) filterArray.push("hourly_uv");
let filterString = filterArray.join(",");
console.log("FilterString = " + filterString);
function getData() { const apiUrl = `http://localhost:8080/forcastweather?q=${latitude_text},${longitude_text}&filter=${filterString}`;
const city = document.getElementById("city_text").value;
const region = document.getElementById("region_text").value;
const country = document.getElementById("country_text").value;
const latitude = document.getElementById("latitude_text").value;
const longitude = 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 condition_text = document.getElementById("condition_text").checked;
const condition_icon = document.getElementById("condition_icon").checked;
const condition_code = document.getElementById("condition_code").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_condition_text = document.getElementById("hour_condition_text").checked;
const hour_condition_icon = document.getElementById("hour_condition_icon").checked;
const hour_condition_code = document.getElementById("hour_condition_code").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 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) filterArray.push("maxtemp");
if (mintemp) filterArray.push("mintemp");
if (avgtemp) filterArray.push("avgtemp");
if (maxwind) filterArray.push("maxwind");
if (totalprecip) filterArray.push("totalprecip");
if (avgvis) filterArray.push("avgvis");
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 (condition_text) filterArray.push("condition_text");
if (condition_icon) filterArray.push("condition_icon");
if (condition_code) filterArray.push("condition_code");
if (uv) filterArray.push("uv");
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) filterArray.push("hourly_temp");
if (hour_is_day) filterArray.push("hourly_is_day");
if (hour_condition_text) filterArray.push("hourly_condition_text");
if (hour_condition_icon) filterArray.push("hourly_condition_icon");
if (hour_condition_code) filterArray.push("hourly_condition_code");
if (hour_wind) filterArray.push("hourly_wind");
if (hour_wind_degree) filterArray.push("hourly_wind_degree");
if (hour_wind_dir) filterArray.push("hourly_wind_dir");
if (hour_pressure) filterArray.push("hourly_pressure");
if (hour_precip) filterArray.push("hourly_precip");
if (hour_humidity) filterArray.push("hourly_humidity");
if (hour_cloud) filterArray.push("hourly_cloud");
if (hour_feelslike) filterArray.push("hourly_feelslike");
if (hour_windchill) filterArray.push("hourly_windchill");
if (hour_heatindex) filterArray.push("hourly_heatindex");
if (hour_dewpoint) filterArray.push("hourly_dewpoint");
if (hour_vis) filterArray.push("hourly_vis");
if (hour_gust) filterArray.push("hourly_gust");
if (hour_uv) filterArray.push("hourly_uv");
let filterString = filterArray.join(",");
console.log("FilterString = " + filterString);
const apiUrl = `http://localhost:8080/currentweather?q=${city_text}&filter=${filterString}`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
...@@ -381,10 +487,9 @@ const WeatherForecastData = (props) => { ...@@ -381,10 +487,9 @@ const WeatherForecastData = (props) => {
}); });
} }
function searchAPI() { function searchAPI() {
const cityInput = document.getElementById("city").value; const cityInput = document.getElementById("city_text").value;
const apiKey = "1244099aeaee4b179e6111803241304"; const apiUrl = `http://localhost:8080/search?city=${cityInput}`;
const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => { .then((response) => {
...@@ -395,12 +500,7 @@ const WeatherForecastData = (props) => { ...@@ -395,12 +500,7 @@ const WeatherForecastData = (props) => {
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
// Wetterdaten anzeigen setData(data);
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
}) })
.catch((error) => { .catch((error) => {
console.error("There was a problem with the fetch operation:", error); console.error("There was a problem with the fetch operation:", error);
...@@ -410,7 +510,25 @@ const WeatherForecastData = (props) => { ...@@ -410,7 +510,25 @@ const WeatherForecastData = (props) => {
function boolToWord(bool) { function boolToWord(bool) {
return bool ? "yes" : "no"; 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;
};
export default WeatherForecastData; return (
\ No newline at end of file <div className="list-item" onClick={handleClick}>
<div className="title">{name}</div>
<div className="subtitle">
Country: {country} <br />
Region: {region} <br />
Lat: {lat}, Lon: {lon}
</div>
</div>
);
};
export default WeatherForecastData;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal