historicalWeatherData.js

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 (
    <div className="home-container">
      <div>
        <div className="thq-grid-4">
          <div class="filter">
            <label htmlFor="location">Location:</label>
            <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 />
            <label for="region_text">Region:</label>
            <input type="text" id="region_text" placeholder="Region" />
            <br />
            <label for="country_text">Country:</label>
            <input type="text" id="country_text" placeholder="Country" />
            <br />
            <label for="latitude_text">Latitude:</label>
            <input type="text" id="latitude_text" placeholder="Latitude" />
            <br />
            <label for="longitude_text">Longitude:</label>
            <input type="text" id="longitude_text" placeholder="Longitude" />
            <br />
            <label for="timezone_text">Time Zone:</label>
            <input type="text" id="timezone_text" placeholder="Timezone" />
            <br />
            <label for="start_date">Start date:</label>
            <input type="date" id="start_date" name="Startdate"></input>
            <br />
            <label for="end_date">End date:</label>
            <input type="date" id="end_date" name="Enddate"></input>
            <br />
          </div>
          <div class="filter">
            <p>Hourly</p>
            <br />
            <input type="checkbox" id="hourly_time" class="checkBoxFilter" />
            <label for="hourly_time">Hourly Time</label>
            <br />
            <input type="checkbox" id="temperature_2m" class="checkBoxFilter" />
            <label for="temperature_2m">Temperature 2m</label>
            <br />
            <input
              type="checkbox"
              id="relative_humidity_2m"
              class="checkBoxFilter"
            />
            <label for="relative_humidity_2m">Relative Humidity 2m</label>
            <br />
            <input type="checkbox" id="precipitation" class="checkBoxFilter" />
            <label for="precipitation">Precipitation</label>
            <br />
            <input
              type="checkbox"
              id="surface_pressure"
              class="checkBoxFilter"
            />
            <label for="surface_pressure">Surface Pressure</label>
            <br />
            <input type="checkbox" id="wind_speed_10m" class="checkBoxFilter" />
            <label for="wind_speed_10m">Wind Speed 10m</label>
            <br />
            <input
              type="checkbox"
              id="wind_direction_10m"
              className="checkBoxFilter"
            />
            <label for="wind_direction_10m">Wind Direction 10m</label>
            <br />
            <input
              type="checkbox"
              id="wind_gusts_10m"
              className="checkBoxFilter"
            />
            <label for="wind_gusts_10m">Wind Gusts 10m</label>
            <br />
          </div>
          <div class="filter">
            <p>Dayly</p>
            <br />
            <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>
          <div class="filter">
            <label for="temp_units">Choose a Temeprature Unit:</label>
            <select name="unnits" id="temp_units">
              <option value="celsius">Celsius C°</option>
              <option value="fahrenheit">Fahrenheit F°</option>
            </select>
            <br />
            <label for="wind_units">Choose a Wind Speed Unit:</label>
            <select name="unnits" id="wind_units">
              <option value="kmh">Km/h</option>
              <option value="mph">Mph</option>
              <option value="ms">m/s</option>
              <option value="kn">Knots</option>
            </select>
            <br />
            <label for="prec_units">Choose a Precipitation Unit:</label>
            <select name="unnits" id="prec_units">
              <option value="mm">Millimeter</option>
              <option value="inch">Inch</option>
            </select>
          </div>
        </div>
        <div class="filter">
          <button className="thq-button-filled" onClick={getData}>
            Generate
          </button>
          <div class="output">
            <h2>Output:</h2>
            <br />
            <pre id="weatherData"></pre>
          </div>
          <div id="apiUrl">
            <label>API URL:</label>
            <br />
            <input className="input" type="text" id="apiUrloutput" readOnly />
          </div>
          <br />
          <br />
        </div>
      </div>
    </div>
  );

  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 (
    <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;