currentData.js

import React, { useState } from "react";

import "./currentData.css";

const Currentdata = (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-5">
          <div class="h1">
          <h1>Choose your City</h1>
          <br />
          </div>
          <div class="field_write">
            <div class="fw">
            <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}
              />
            ))}
            </div>
            <div class="fw"> 
            <label for="region">Region:</label>
            <input type="text" id="region_text" placeholder="Region" />
            </div>
            <div class="fw">      
            <label>Country:</label>
            <input type="text" id="country_text" placeholder="Country" />
            </div>
            <div class="fw">   
            <label>Latitude:</label>
            <input type="text" id="latitude_text" placeholder="Latitude" />
            </div>
            <div class="fw">
            <label>Longitude:</label>
            <input type="text" id="longitude_text" placeholder="Longitude" />
            </div>
          </div>
        </div>
        <div class="h2">
        <h2>Choose the variables you want.</h2>
        </div>
        <div className="dataselect">
        <div class="location">
        <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>
          <br />
          </div>
          <div class="time">
          <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 />
          </div>
          <div class="data">
          <div class="h3">
          <h3>Temperature</h3>
          </div>
          <input type="checkbox" id="temp" className="checkBoxFilter" />
          <label for="temp">Temp</label>
          <br />
          <input type="checkbox" id="id_day" className="checkBoxFilter" />
          <label for="id_day">ID Day</label>
          <br />
          <input type="checkbox"id="condition_text"className="checkBoxFilter"/>
          <label for="condition">Condition Text</label>
          <br />
          </div>
          <div class="data">
          <div class="h3">
          <h3>Wind</h3>
          </div>
          <input type="checkbox" id="wind_degree" className="checkBoxFilter" />
          <label for="wind_degree">Wind Degree</label>
          <br />
          <input type="checkbox" id="wind_dir" className="checkBoxFilter" />
          <label for="wind_dir">Wind Direction</label>
          <br />
          <input type="checkbox" id="pressure" className="checkBoxFilter" />
          <label for="pressure">Pressure</label>
          <br />
          <input type="checkbox" id="precip" className="checkBoxFilter" />
          <label for="precip">Precip</label>
          <br />
          <input type="checkbox" id="humidity" className="checkBoxFilter" />
          <label for="humidity">Humidity</label>
          <br />
          <input type="checkbox" id="cloud" className="checkBoxFilter" />
          <label for="cloud">Cloud</label>
          <br />
          </div>
          <div class="data">
          <div class="h3">
          <h3>Temperature</h3>
          </div>
          <input type="checkbox" id="feelslike" className="checkBoxFilter" />
          <label for="feelslike">Feelslike</label>
          <br />
          <input type="checkbox" id="windchill" className="checkBoxFilter" />
          <label for="windchill">Windchill</label>
          <br />
          <input type="checkbox" id="heatindex" className="checkBoxFilter" />
          <label for="heatindex">Heatindex</label>
          <br />
          <input type="checkbox" id="dewpoint" className="checkBoxFilter" />
          <label for="dewpoint">Dewpoint</label>
          <br />
          <input type="checkbox" id="vis" className="checkBoxFilter" />
          <label for="vis">Visibility </label>
          <br />
          <input type="checkbox" id="uv" className="checkBoxFilter" />
          <label for="uv">UV Index</label>
          <br />
          <input type="checkbox" id="gust" className="checkBoxFilter" />
          <label for="gust">Gust </label>
          <br />
          </div>
          <div class="data">
          <div class="h3">
          <h3>Air Quality</h3>
          </div>
          <input
            type="checkbox"
            id="air_quality_co"
            className="checkBoxFilter"
          />
          <label for="air_quality_co">Air Quality CO</label>
          <br />
          <input
            type="checkbox"
            id="air_quality_no2"
            className="checkBoxFilter"
          />
          <label for="air_quality_no2">Air Quality NO2</label>
          <br />
          <input
            type="checkbox"
            id="air_quality_o3"
            className="checkBoxFilter"
          />
          <label for="air_quality_o3">Air Quality O3</label>
          <br />
          <input
            type="checkbox"
            id="air_quality_so2"
            className="checkBoxFilter"
          />
          <label for="air_quality_so2">Air Quality SO2</label>
          <br />
          <input
            type="checkbox"
            id="air_quality_pm2_5"
            className="checkBoxFilter"
          />
          <label for="air_quality_pm2_5">Air Quality PM2.5</label>
          <br />
          <input
            type="checkbox"
            id="air_quality_pm10"
            className="checkBoxFilter"
          />
          <label for="air_quality_pm10">Air Quality PM10</label>
          <br />
          <input
            type="checkbox"
            id="air_quality_us_epa_index"
            className="checkBoxFilter"
          />
          <label for="air_quality_us_epa_index">US EPA Index</label>
          <br />
          <input
            type="checkbox"
            id="air_quality_gb_defra_index"
            className="checkBoxFilter"
          />
          <label for="air_quality_gb_defra_index">GB DEFRA Index</label>
          <br />
          </div>
          </div>
        <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="generate">
          <button className="thq-button-filled" onClick={getData}>
            Generate
          </button>
        </div>
          <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>
          <br />
          <br />
      </div>
    </div>
  );

  function getData() {
    //switch
    const units = document.getElementById("units").value;

    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;

    //Checkboxes
    //location
    const name = document.getElementById("name").checked;
    const region = document.getElementById("region").checked;
    const country = 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;
    //current
    const last_updated_epoch =
      document.getElementById("last_updated_epoch").checked;
    const last_updated = document.getElementById("last_updated").checked;
    const temp = document.getElementById("temp").checked;
    const id_day = document.getElementById("id_day").checked;
    const condition = document.getElementById("condition_text").checked;
    const wind = document.getElementById("wind").checked;
    const wind_degree = document.getElementById("wind_degree").checked;
    const wind_dir = document.getElementById("wind_dir").checked;
    const pressure = document.getElementById("pressure").checked;
    const precip = document.getElementById("precip").checked;
    const humidity = document.getElementById("humidity").checked;
    const cloud = document.getElementById("cloud").checked;
    const feelslike = document.getElementById("feelslike").checked;
    const windchill = document.getElementById("windchill").checked;
    const heatindex = document.getElementById("heatindex").checked;
    const dewpoint = document.getElementById("dewpoint").checked;
    const vis = document.getElementById("vis").checked;
    const uv = document.getElementById("uv").checked;
    const gust = document.getElementById("gust").checked;
    const air_quality_co = document.getElementById("air_quality_co").checked;
    const air_quality_no2 = document.getElementById("air_quality_no2").checked;
    const air_quality_o3 = document.getElementById("air_quality_o3").checked;
    const air_quality_so2 = document.getElementById("air_quality_so2").checked;
    const air_quality_pm2_5 =
      document.getElementById("air_quality_pm2_5").checked;
    const air_quality_pm10 =
      document.getElementById("air_quality_pm10").checked;
    const air_quality_us_epa_index = document.getElementById(
      "air_quality_us_epa_index"
    ).checked;
    const air_quality_gb_defra_index = document.getElementById(
      "air_quality_gb_defra_index"
    ).checked;

    let filterArray = [];

    if (name) {
      filterArray.push("name");
    }
    if (region) {
      filterArray.push("region");
    }
    if (country) {
      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 (temp) {
      if (units == "world") {
        filterArray.push("temp_c");
      } else {
        filterArray.push("temp_f");
      }
    }

    if (id_day) {
      filterArray.push("id_day");
    }
    if (condition) {
      filterArray.push("condition");
    }
    if (wind) {
      if (units == "world") {
        filterArray.push("wind_kph");
      } else {
        filterArray.push("wind_mph");
      }
    }
    if (wind_degree) {
      filterArray.push("wind_degree");
    }
    if (wind_dir) {
      filterArray.push("wind_dir");
    }
    if (pressure) {
      if (units == "world") {
        filterArray.push("temp_mb");
      } else {
        filterArray.push("pressure_in");
      }
    }
    if (precip) {
      if (units == "world") {
        filterArray.push("temp_mm");
      } else {
        filterArray.push("precip_in");
      }
    }
    if (humidity) {
      filterArray.push("humidity");
    }
    if (cloud) {
      filterArray.push("cloud");
    }
    if (feelslike) {
      if (units == "world") {
        filterArray.push("feelslike_c");
      } else {
        filterArray.push("feelslike_f");
      }
    }
    if (windchill) {
      if (units == "world") {
        filterArray.push("windchill_c");
      } else {
        filterArray.push("windchill_f");
      }
    }
    if (heatindex) {
      if (units == "world") {
        filterArray.push("heatindex_c");
      } else {
        filterArray.push("heatindex_f");
      }
    }
    if (dewpoint) {
      if (units == "world") {
        filterArray.push("dewpoint_c");
      } else {
        filterArray.push("dewpoint_f");
      }
    }
    if (vis) {
      if (units == "world") {
        filterArray.push("vis_km");
      } else {
        filterArray.push("vis_miles");
      }
    }
    if (uv) {
      filterArray.push("uv");
    }
    if (gust) {
      if (units == "world") {
        filterArray.push("gust_kph");
      } else {
        filterArray.push("gust_mph");
      }
    }
    if (air_quality_co) {
      filterArray.push("co");
    }
    if (air_quality_no2) {
      filterArray.push("no2");
    }
    if (air_quality_o3) {
      filterArray.push("o3");
    }
    if (air_quality_so2) {
      filterArray.push("so2");
    }
    if (air_quality_pm2_5) {
      filterArray.push("pm2_5");
    }
    if (air_quality_pm10) {
      filterArray.push("pm10");
    }
    if (air_quality_us_epa_index) {
      filterArray.push("us-epa-index");
    }
    if (air_quality_gb_defra_index) {
      filterArray.push("gb-defra-index");
    }

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

    const apiUrl = `http://localhost:8080/currentweather?q=${latitude_text},${longitude_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_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 Currentdata;