historicalWeatherData.js

import React from "react";

import "./weatherForecastData.css";

const HistoricalWeatherData = (props) => {
  return (
    <div className="home-container">
      <div>
        <div className="thq-grid-5">
          <div class="filter">
            <div class="filter">
              <label for="location">Location:</label>
              <input type="text" id="city_text" placeholder="Location" />
              <br />
              <label for="region">Region:</label>
              <input type="text" id="region_text" placeholder="Region" />
              <br />
              <label>Country:</label>
              <input type="text" id="country_text" placeholder="Country" />
              <br />
              <label>Latitude:</label>
              <input type="text" id="latitude_text" placeholder="Latitude" />
              <label>Longitude:</label>
              <input type="text" id="longitude_text" placeholder="Longitude" />
              <br />
              <label>Time Zone:</label>
              <input type="text" id="timezone_text" placeholder="Timezone" />
              <br />
            </div>
            <input type="checkbox" id="latitude" class="checkBoxFilter" />
            <label for="latitude">Latitude</label>
            <br />
            <input type="checkbox" id="longitude" class="checkBoxFilter" />
            <label for="longitude">Longitude</label>
            <br />
            <input
              type="checkbox"
              id="generationtime_ms"
              class="checkBoxFilter"
            />
            <label for="generationtime_ms">Generation Time (ms)</label>
            <br />
            <input
              type="checkbox"
              id="utc_offset_seconds"
              class="checkBoxFilter"
            />
            <label for="utc_offset_seconds">UTC Offset (Seconds)</label>
            <br />
            <input type="checkbox" id="timezone" class="checkBoxFilter" />
            <label for="timezone">Timezone</label>
            <br />
            <input
              type="checkbox"
              id="timezone_abbreviation"
              class="checkBoxFilter"
            />
            <label for="timezone_abbreviation">Timezone Abbreviation</label>
            <br />
            <input type="checkbox" id="elevation" class="checkBoxFilter" />
            <label for="elevation">Elevation</label>
            <br />
            <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 />
            <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>
              <label for="units">Choose a unit:</label>
              <select name="unnits" id="units">
                <option value="world">Rest of The World</option>
                <option value="american">
                  American units: /eagles per shool shootings
                </option>
              </select>
            </div>
            <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>
            <button className="APIButton" onClick={searchAPI}>
              City api
            </button>
            <br />
            <br />
          </div>
        </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;

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