currentData.js

import React from "react";

import "./currentData.css";

const Currentdata = (props) => {
  return (
    <div className="home-container">
      <div>
        <div className="thq-grid-5">
          <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 />
          </div>
          <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 />
            <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="temp_c" className="checkBoxFilter" />
            <label for="temp_c">Temp C</label>
            <br />
            <input type="checkbox" id="temp_f" className="checkBoxFilter" />
            <label for="temp_f">Temp F</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_text">Condition Text</label>
            <br />
            <input
              type="checkbox"
              id="condition_icon"
              className="checkBoxFilter"
            />
            <label for="condition_icon">Condition Icon</label>
            <br />
            <input
              type="checkbox"
              id="condition_code"
              className="checkBoxFilter"
            />
            <label for="condition_code">Condition Code</label>
            <input type="checkbox" id="wind" className="checkBoxFilter" />
            <label for="wind">Wind </label>
            <br />
            <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 />
            <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 />
            <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>
              <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>
            <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;

    //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 temperature = document.getElementById("temperature").checked;
    const isDay = document.getElementById("isDay").checked;
    const condition = document.getElementById("condition").checked;
    const pressure = document.getElementById("pressure").checked;
    const precipitation = document.getElementById("precipitation").checked;
    const humidity = document.getElementById("humidity").checked;
    const cloud = document.getElementById("cloud").checked;
    const feelslikeTemp = document.getElementById("feelslikeTemp").checked;
    const visibility = document.getElementById("visibility").checked;
    const uv = document.getElementById("uv").checked;
    const gust = document.getElementById("gust").checked;
    const airquality = boolToWord(
      document.getElementById("airquality").checked
    );
    const unitTemperature = document.getElementById("unitTemperature").value;
    const unitWindSpeed = document.getElementById("unitWindSpeed").value;
    const unitPressure = document.getElementById("unitPressure").value;
    const unitPrecipitation =
      document.getElementById("unitPrecipitation").value;
    const output = document.getElementById("output").value;
    const format = document.getElementById("format").value;

    let filterArray = [];

    if (document.getElementById("name").checked) {
      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");
    }
    let filterString = filterArray.join(",");

    console.log(filterString);

    const apiUrl = `localhost:8080/currentwaether?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 Currentdata;