historicalWeatherData.js

import React, { useState } from "react";
import { saveAs } from "file-saver";

import "./weatherForecastData.css";

const HistoricalWeatherData = (props) => {
  const [query, setQuery] = useState("");
  const [data, setData] = useState([]);
  const [weatherdata, setweatherData] = useState([]);

  const handleInputChange = (e) => {
    setQuery(e.target.value);
    if (e.target.value.trim() !== "") {
      searchAPI(e.target.value.trim());
    }
  };

  const downloadData = () => {
    const fileformat = document.getElementById("fileformat").value;

    switch (fileformat) {
      case "json":
        downloadJson(weatherdata);
        break;
      case "xml":
        downloadXml(weatherdata);
        break;
      case "csv":
        downloadCsv(weatherdata);
        break;
      default:
        alert("Unsupported file format");
    }
  };

  const downloadJson = (weatherdata) => {
    const json = JSON.stringify(weatherdata, null, 2);
    const blob = new Blob([json], { type: "application/json" });
    saveAs(blob, "weatherdata.json");
  };

  const downloadXml = (weatherdata) => {
    var xml = jsonToXml(weatherdata);
    xml =
      "<?xml version='1.0' encoding='UTF-8' ?><weatherdata>" +
      xml +
      "</weatherdata>";
    const blob = new Blob([xml], { type: "application/xml" });
    saveAs(blob, "weatherdata.xml");
  };

  const downloadCsv = (weatherdata) => {
    const csv = jsonToCsv(weatherdata);
    const blob = new Blob([csv], { type: "text/csv" });
    saveAs(blob, "weatherdata.csv");
  };

  const jsonToXml = (obj) => {
    var xml = "";
    for (var prop in obj) {
      xml += "<" + prop + ">";
      if (Array.isArray(obj[prop])) {
        for (var array of obj[prop]) {
          // A real botch fix here
          xml += "</" + prop + ">";
          xml += "<" + prop + ">";

          xml += jsonToXml(new Object(array));
        }
      } else if (typeof obj[prop] == "object") {
        xml += jsonToXml(new Object(obj[prop]));
      } else {
        xml += obj[prop];
      }
      xml += "</" + prop + ">";
    }
    var xml = xml.replace(/<\/?[0-9]{1,}>/g, "");
    return xml;
  };

  const jsonToCsv = (json) => {
    const keys = Object.keys(json);
    const values = Object.values(json);
    return `${keys.join(",")}\n${values.join(",")}`;
  };

  return (
    <div className="home-container">
      <div className="thq-grid-5">
        <div class="h1">
          <h1>Choose your Customised Data</h1>
          <br />
        </div>
        <div class="field_write">
          <div class="fw">
            <div class="h3">
              <h3>Choose your Location</h3>
            </div>
            <label htmlFor="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}
              />
            ))}
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your Region</h3>
            </div>
            <label for="region_text"></label>
            <input type="text" id="region_text" placeholder="Region" />
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your Country</h3>
            </div>
            <label for="country_text"></label>
            <input type="text" id="country_text" placeholder="Country" />
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your Latitude</h3>
            </div>
            <label for="latitude_text"></label>
            <input type="text" id="latitude_text" placeholder="Latitude" />
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your Longitude</h3>
            </div>
            <label for="longitude_text"></label>
            <input type="text" id="longitude_text" placeholder="Longitude" />
          </div>
        </div>
        <div class="field_write">
          <div class="fw">
            <div class="h3">
              <h3>Choose your Time Zone</h3>
            </div>
            <label for="timezone_text"></label>
            <input type="text" id="timezone_text" placeholder="Timezone" />
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your Start date</h3>
            </div>
            <label for="start_date"></label>
            <input type="date" id="start_date" name="Startdate"></input>
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your End date</h3>
            </div>
            <label for="end_date"></label>
            <input type="date" id="end_date" name="Enddate"></input>
          </div>
        </div>
        <div class="h1">
          <h1>Choose your custom output Data</h1>
          <br />
        </div>
        <div className="dataselect">
          <div class="data">
            <div class="h3">
              <h3>Primery Data</h3>
            </div>
            <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>
          </div>
          <div class="data">
            <div class="h3">
              <h3>Secondary Data</h3>
            </div>
            <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>
          </div>
          <div class="data">
            <div class="h3">
              <h3>Dayly Data</h3>
            </div>
            <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>
          </div>
        </div>

        <div class="field_write">
          <div class="fw">
            <div class="h3">
              <h3>Choose a Temperature Unit</h3>
            </div>
            <label for="temp_units"></label>
            <select name="unnits" id="temp_units">
              <option value="celsius">Celsius C°</option>
              <option value="fahrenheit">Fahrenheit F°</option>
            </select>
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose a Wind Speed Unit</h3>
            </div>
            <label for="wind_units"></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>
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose a Precipitation Unit</h3>
            </div>
            <label for="prec_units"></label>
            <select name="unnits" id="prec_units">
              <option value="mm">Millimeter</option>
              <option value="inch">Inch</option>
            </select>
          </div>
        </div>

        <button className="thq-button-filled" onClick={getData}>
          Generate your data
        </button>
        <div class="fw1">
          <div class="h3">
            <h3>Choose a Fileformat</h3>
          </div>
          <select name="fileformat" id="fileformat">
            <option value="json">JSON</option>
            <option value="xml">XML</option>
            <option value="csv">CSV</option>
          </select>
        </div>
        <button className="thq-button-filled" onClick={downloadData}>
          Download your data
        </button>
        <div id="apiUrl">
          <div class="fw1">
            <div class="h3">
              <h3>Your Generated apiUrl with your custom Data</h3>
            </div>
            <input className="input" type="text" id="apiUrloutput" readOnly />
          </div>
        </div>
        <div class="output">
          <h2>Output:</h2>
          <br />
          <pre id="weatherData"></pre>
        </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 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 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 (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 (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;
        setweatherData(data);
      })
      .catch((error) => {
        console.error("There was a problem with the fetch operation:", error);
      });
  }
  function searchAPI() {
    const cityInput = document.getElementById("city_text").value;

    const apiUrl = `http://localhost:8080/search?city=${cityInput}`;

    fetch(apiUrl)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }

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