weatherForecastData.js

import React, { useState } from "react";

import "./weatherForecastData.css";

const WeatherForecastData = (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 City</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"></label>
            <input type="text" id="region_text" placeholder="Region" />
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your Country</h3>
            </div>
            <label></label>
            <input type="text" id="country_text" placeholder="Country" />
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your Latitude</h3>
            </div>
            <label></label>
            <input type="text" id="latitude_text" placeholder="Latitude" />
          </div>
          <div class="fw">
            <div class="h3">
              <h3>Choose your Longitude</h3>
            </div>
            <label></label>
            <input type="text" id="longitude_text" placeholder="Longitude" />
          </div>
        </div>
        <div class="h1">
          <h1>Choose your custom output Data</h1>
          <br />
        </div>
        <div className="dataselect">
          <div class="data">
            <div class="h3">
              <h3>Location</h3>
            </div>
            <input type="checkbox" id="name" className="checkBoxFilter" />
            <label> City Name</label>
            <br />
            <input type="checkbox" id="region" className="checkBoxFilter" />
            <label> Region</label>
            <br />
            <input type="checkbox" id="country" className="checkBoxFilter" />
            <label> Country</label>
            <br />
            <input type="checkbox" id="lon" className="checkBoxFilter" />
            <label> Longitude</label>
            <br />
            <input type="checkbox" id="lat" className="checkBoxFilter" />
            <label> Latitude</label>
          </div>

          <div class="data">
            <div class="h3">
              <h3>Time</h3>
            </div>
            <input type="checkbox" id="tz_id" className="checkBoxFilter" />
            <label> Timezone Id</label>
            <br />
            <input
              type="checkbox"
              id="localtime_epoch"
              className="checkBoxFilter"
            />
            <label> Localtime Epoch</label>
            <br />
            <input type="checkbox" id="localtime" className="checkBoxFilter" />
            <label> Localtime</label>
            <br />
            <input
              type="checkbox"
              id="last_updated_epoch"
              className="checkBoxFilter"
            />
            <label> Last Updated Epoch</label>
            <br />
            <input
              type="checkbox"
              id="last_updated"
              className="checkBoxFilter"
            />
            <label> Last Updated</label>
            <br />
            <input type="checkbox" id="date" class="checkBoxFilter" />
            <label for="date">Date</label>
            <br />
            <input type="checkbox" id="date_epoch" class="checkBoxFilter" />
            <label for="date_epoch">Date Epoch</label>
          </div>
          <div class="data">
            <div class="h3">
              <h3>Primery Data</h3>
            </div>
            <input type="checkbox" id="maxtemp" class="checkBoxFilter" />
            <label for="maxtemp">Max Temperature</label>
            <br />
            <input type="checkbox" id="mintemp" class="checkBoxFilter" />
            <label for="mintemp">Min Temperature</label>
            <br />
            <input type="checkbox" id="avgtemp" class="checkBoxFilter" />
            <label for="avgtemp">Average Temperature</label>
            <br />
            <input type="checkbox" id="maxwind" class="checkBoxFilter" />
            <label for="maxwind">Max Wind Speed</label>
            <br />
            <input type="checkbox" id="totalprecip" class="checkBoxFilter" />
            <label for="totalprecip">Total Precipitation</label>
            <br />
            <input type="checkbox" id="avgvis" class="checkBoxFilter" />
            <label for="avgvis">Average Visibility</label>
            <br />
            <input type="checkbox" id="avghumidity" class="checkBoxFilter" />
            <label for="avghumidity">Average Humidity</label>
            <br />
            <input
              type="checkbox"
              id="daily_will_it_rain"
              class="checkBoxFilter"
            />
            <label for="daily_will_it_rain">Daily Will it Rain</label>
          </div>
          <div class="data">
            <div class="h3">
              <h3>Dayly Data</h3>
            </div>

            <input
              type="checkbox"
              id="daily_chance_of_rain"
              class="checkBoxFilter"
            />
            <label for="daily_chance_of_rain">Daily Chance of Rain</label>
            <br />
            <input
              type="checkbox"
              id="daily_will_it_snow"
              class="checkBoxFilter"
            />
            <label for="daily_will_it_snow">Daily Will it Snow</label>
            <br />
            <input
              type="checkbox"
              id="daily_chance_of_snow"
              class="checkBoxFilter"
            />
            <label for="daily_chance_of_snow">Daily Chance of Snow</label>
          </div>
          <div class="data">
            <div class="h3">
              <h3>Time of Day Data</h3>
            </div>
            <input type="checkbox" id="uv" class="checkBoxFilter" />
            <label for="uv">UV Index</label>
            <br />
            <input type="checkbox" id="sunrise" class="checkBoxFilter" />
            <label for="sunrise">Sunrise</label>
            <br />
            <input type="checkbox" id="sunset" class="checkBoxFilter" />
            <label for="sunset">Sunset</label>
            <br />
            <input type="checkbox" id="moonrise" class="checkBoxFilter" />
            <label for="moonrise">Moonrise</label>
            <br />
            <input type="checkbox" id="moonset" class="checkBoxFilter" />
            <label for="moonset">Moonset</label>
            <br />
            <input type="checkbox" id="moon_phase" class="checkBoxFilter" />
            <label for="moon_phase">Moon Phase</label>
            <br />
            <input
              type="checkbox"
              id="moon_illumination"
              class="checkBoxFilter"
            />
            <label for="moon_illumination">Moon Illumination</label>
            <br />
            <input
              type="checkbox"
              id="hour_time_epoch"
              class="checkBoxFilter"
            />
            <label for="hour_time_epoch">Hour Time Epoch</label>
          </div>
          <div class="data">
            <div class="h3">
              <h3>Hourly Data</h3>
            </div>
            <input type="checkbox" id="hour_time" class="checkBoxFilter" />
            <label for="hour_time">Hour Time</label>
            <br />
            <input type="checkbox" id="hour_temp" class="checkBoxFilter" />
            <label for="hour_temp">Hour Temperature</label>
            <br />
            <input type="checkbox" id="hour_is_day" class="checkBoxFilter" />
            <label for="hour_is_day">Hour Is Day</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="hourly_will_it_rain"
              class="checkBoxFilter"
            />
            <label for="hourly_will_it_rain">Will it Rain</label>
            <br />
            <input
              type="checkbox"
              id="hourly_chance_of_rain"
              class="checkBoxFilter"
            />
            <label for="hourly_chance_of_rain">Chance of Rain</label>
            <br />
            <input
              type="checkbox"
              id="hourly_will_it_snow"
              class="checkBoxFilter"
            />
            <label for="hourly_will_it_snow">Will it Snow</label>
            <br />
            <input
              type="checkbox"
              id="hourly_chance_of_snow"
              class="checkBoxFilter"
            />
            <label for="hourly_chance_of_snow">Chance of Snow</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>
          </div>
          <div class="data">
            <div class="h3">
              <h3>Weather Alerts</h3>
            </div>
            <input type="checkbox" id="alerts" class="checkBoxFilter" />
            <label for="alerts">Alerts</label>
          </div>
        </div>
        <div class="fw1">
          <div class="h3">
            <h3>How many forecast days do you want?</h3>
          </div>
          <label for="days"></label>
          <input type="range" id="days" name="days" min="1" max="7" />
        </div>
        <div class="fw1">
          <div class="h3">
            <h3>Choose a Unit</h3>
          </div>
          <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>
          <button className="thq-button-filled" onClick={getData}>
            Generate your data
          </button>
        </div>
        <br />
        <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 units = document.getElementById("units").value;
    const days = document.getElementById("days").value;
    const alerts = boolToWord(document.getElementById("alerts").checked);

    const latitude_text = document.getElementById("latitude_text").value;
    const longitude_text = 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 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_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 hourly_will_it_rain = document.getElementById(
      "hourly_will_it_rain"
    ).checked;
    const hourly_chance_of_rain = document.getElementById(
      "hourly_chance_of_rain"
    ).checked;
    const hourly_will_it_snow = document.getElementById(
      "hourly_will_it_snow"
    ).checked;
    const hourly_chance_of_snow = document.getElementById(
      "hourly_chance_of_snow"
    ).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)
      if (units == "world") {
        filterArray.push("maxtemp_c");
      } else {
        filterArray.push("maxtemp_f");
      }
    if (mintemp)
      if (units == "world") {
        filterArray.push("mintemp_c");
      } else {
        filterArray.push("mintemp");
      }
    if (avgtemp)
      if (units == "world") {
        filterArray.push("avgtemp_c");
      } else {
        filterArray.push("avgtemp_f");
      }
    if (maxwind)
      if (units == "world") {
        filterArray.push("maxwind_kph");
      } else {
        filterArray.push("maxwind_mph");
      }
    if (totalprecip)
      if (units == "world") {
        filterArray.push("totalprecip_mm");
      } else {
        filterArray.push("totalprecip_in");
      }
    if (avgvis)
      if (units == "world") {
        filterArray.push("avgis_km");
      } else {
        filterArray.push("avgvis_miles");
      }
    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 (uv) filterArray.push("uv_day");
    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)
      if (units == "world") {
        filterArray.push("hourly_temp_c");
      } else {
        filterArray.push("hourly_temp_f");
      }
    if (hour_is_day) filterArray.push("hourly_is_day");
    if (hour_wind)
      if (units == "world") {
        filterArray.push("hourly_wind_kph");
      } else {
        filterArray.push("hourly_wind_mph");
      }
    if (hour_wind_degree) filterArray.push("hourly_wind_degree");
    if (hour_wind_dir) filterArray.push("hourly_wind_dir");
    if (hour_pressure)
      if (units == "world") {
        filterArray.push("hourly_pressure_mb");
      } else {
        filterArray.push("hourly_pressure_in");
      }
    if (hour_precip)
      if (units == "world") {
        filterArray.push("hourly_precip_mm");
      } else {
        filterArray.push("hourly_precip_in");
      }
    if (hour_humidity) filterArray.push("hourly_humidity");
    if (hour_cloud) filterArray.push("hourly_cloud");
    if (hour_feelslike)
      if (units == "world") {
        filterArray.push("hourly_feelslike_c");
      } else {
        filterArray.push("hourly_feelslike_f");
      }
    if (hour_windchill)
      if (units == "world") {
        filterArray.push("hourly_windchill_c");
      } else {
        filterArray.push("hourly_windchill_f");
      }
    if (hour_heatindex)
      if (units == "world") {
        filterArray.push("hourly_heatindex_c");
      } else {
        filterArray.push("hourly_heatindex_f");
      }
    if (hour_dewpoint)
      if (units == "world") {
        filterArray.push("hourly_dewpoint_c");
      } else {
        filterArray.push("hourly_dewpoint_f");
      }
    if (hourly_will_it_rain) filterArray.push("hourly_will_it_rain");
    if (hourly_chance_of_rain) filterArray.push("hourly_chance_of_rain");
    if (hourly_will_it_snow) filterArray.push("hourly_will_it_snow");
    if (hourly_chance_of_snow) filterArray.push("hourly_chance_of_snow");
    if (hour_vis)
      if (units == "world") {
        filterArray.push("hourly_vis_km");
      } else {
        filterArray.push("hourly_vis_miles");
      }
    if (hour_gust)
      if (units == "world") {
        filterArray.push("hourly_gust_kph");
      } else {
        filterArray.push("hourly_gust_mph");
      }
    if (hour_uv) filterArray.push("hourly_uv");

    let filterString = filterArray.join(",");

    const apiUrl = `http://localhost:8080/forecastweather?q=${latitude_text},${longitude_text}&days=${days}&filter=${filterString}&alerts=${alerts}`;

    console.log(apiUrl);
    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);
      });
  }

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