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 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/currentweather?q=${city_text}&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").value;

    const apiKey = "1244099aeaee4b179e6111803241304";
    const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;

    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
        );
      })
      .catch((error) => {
        console.error("There was a problem with the fetch operation:", error);
      });
  }

  function boolToWord(bool) {
    return bool ? "yes" : "no";
  }

};

export default HistoricalWeatherData;