Skip to content

GitLab

Commit 5d445a5f authored by Weiser's avatar Weiser
Browse files

Merge branch 'devbackend' of... 

Merge branch 'devbackend' of https://transfer.hft-stuttgart.de/gitlab/22kaen1bdi/swp_ss24_wetterdaten_sammeln into devbackend
parents 3ee7a473 4bb21405
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.js
View file @ 5d445a5f
...@@ -3,155 +3,227 @@ import React from "react"; ...@@ -3,155 +3,227 @@ import React from "react";
import "./currentData.css"; import "./currentData.css";
const Currentdata = (props) => { const Currentdata = (props) => {
return ( return (
<div className="home-container"> <div className="home-container">
<div>
<div className="thq-grid-5">
<div class="filter">
<label for="location">Location:</label>
<input type="text" id="location" placeholder="Location" />
<br />
<label for="region">Region:</label>
<input type="text" id="region" placeholder="Region" />
<br />
<label>Country:</label>
<input type="text" id="country" placeholder="Country" />
<br />
<label>Latitude:</label>
<input type="text" id="latitude" placeholder="Latitude" />
<label>Longitude:</label>
<input type="text" id="longitude" placeholder="Longitude" />
<br />
</div>
<div> <div>
<div className="thq-grid-5"> <input type="checkbox" id="name" className="checkBoxFilter" />
<div class="filter"> <label> City Name</label>
<label for="location">Location:</label> <br />
<input type="text" id="location" placeholder="Location" /> <input type="checkbox" id="region" className="checkBoxFilter" />
<br /> <label> Region</label>
<label for="region">Region:</label> <br />
<input type="text" id="region" placeholder="Region" /> <input type="checkbox" id="country" className="checkBoxFilter" />
<br /> <label> Country</label>
<label>Country:</label> <br />
<input type="text" id="country" placeholder="Country" /> <input type="checkbox" id="lon" className="checkBoxFilter" />
<br /> <label> Longitude</label>
<label>Latitude:</label> <br />
<input type="text" id="latitude" placeholder="Latitude" /> <input type="checkbox" id="lat" className="checkBoxFilter" />
<label>Longitude:</label> <label> Latitude</label>
<input type="text" id="longitude" placeholder="Longitude" /> <br />
<br /> <input type="checkbox" id="tz_id" className="checkBoxFilter" />
</div> <label> Timezone Id</label>
<div> <br />
<input type="checkbox" id="name" className="checkBoxFilter" /> <input
<label> City Name</label> type="checkbox"
<br /> id="localtime_epoch"
<input type="checkbox" id="region" className="checkBoxFilter" /> className="checkBoxFilter"
<label> Region</label> />
<br /> <label> Localtime Epoch</label>
<input type="checkbox" id="country" className="checkBoxFilter" /> <br />
<label> Country</label> <input type="checkbox" id="localtime" className="checkBoxFilter" />
<br /> <label> Localtime</label>
<input type="checkbox" id="lon" className="checkBoxFilter" /> <br />
<label> Longitude</label> <input
<br /> type="checkbox"
<input type="checkbox" id="lat" className="checkBoxFilter" /> id="last_updated_epoch"
<label> Latitude</label> className="checkBoxFilter"
<br /> />
<input type="checkbox" id="tz_id" className="checkBoxFilter" /> <label> Last Updated Epoch</label>
<label> Timezone Id</label> <br />
<br /> <input
<input type="checkbox" id="localtime_epoch" className="checkBoxFilter" /> type="checkbox"
<label> Localtime Epoch</label> id="last_updated"
<br /> className="checkBoxFilter"
<input type="checkbox" id="localtime" className="checkBoxFilter" /> />
<label> Localtime</label> <label> Last Updated</label>
<br /> <br />
<input type="checkbox" id="last_updated_epoch" className="checkBoxFilter" /> <input type="checkbox" id="temp_c" className="checkBoxFilter" />
<label> Last Updated Epoch</label> <label for="temp_c">Temp C</label>
<br /> <br />
<input type="checkbox" id="last_updated" className="checkBoxFilter" /> <input type="checkbox" id="temp_f" className="checkBoxFilter" />
<label> Last Updated</label> <label for="temp_f">Temp F</label>
<br /> <br />
<input type="checkbox" id="temp_c" className="checkBoxFilter" /> <input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="temp_c">Temp C</label> <label for="id_day">ID Day</label>
<br /> <br />
<input type="checkbox" id="temp_f" className="checkBoxFilter" /> <input
<label for="temp_f">Temp F</label> type="checkbox"
<br /> id="condition_text"
<input type="checkbox" id="id_day" className="checkBoxFilter" /> className="checkBoxFilter"
<label for="id_day">ID Day</label> />
<br /> <label for="condition_text">Condition Text</label>
<input type="checkbox" id="condition_text" className="checkBoxFilter" /> <br />
<label for="condition_text">Condition Text</label> <input
<br /> type="checkbox"
<input type="checkbox" id="condition_icon" className="checkBoxFilter" /> id="condition_icon"
<label for="condition_icon">Condition Icon</label> className="checkBoxFilter"
<br /> />
<input type="checkbox" id="condition_code" className="checkBoxFilter" /> <label for="condition_icon">Condition Icon</label>
<label for="condition_code">Condition Code</label> <br />
<input type="checkbox" id="wind" className="checkBoxFilter" /> <input
<label for="wind">Wind </label> type="checkbox"
<br /> id="condition_code"
<input type="checkbox" id="wind_degree" className="checkBoxFilter" /> className="checkBoxFilter"
<label for="wind_degree">Wind Degree</label> />
<br /> <label for="condition_code">Condition Code</label>
<input type="checkbox" id="wind_dir" className="checkBoxFilter" /> <input type="checkbox" id="wind" className="checkBoxFilter" />
<label for="wind_dir">Wind Direction</label> <label for="wind">Wind </label>
<br /> <br />
<input type="checkbox" id="pressure" className="checkBoxFilter" /> <input
<label for="pressure">Pressure</label> type="checkbox"
<br /> id="wind_degree"
<input type="checkbox" id="precip" className="checkBoxFilter" /> className="checkBoxFilter"
<label for="precip">Precip</label> />
<br /> <label for="wind_degree">Wind Degree</label>
<input type="checkbox" id="humidity" className="checkBoxFilter" /> <br />
<label for="humidity">Humidity</label> <input type="checkbox" id="wind_dir" className="checkBoxFilter" />
<br /> <label for="wind_dir">Wind Direction</label>
<input type="checkbox" id="cloud" className="checkBoxFilter" /> <br />
<label for="cloud">Cloud</label> <input type="checkbox" id="pressure" className="checkBoxFilter" />
<br /> <label for="pressure">Pressure</label>
<input type="checkbox" id="feelslike" className="checkBoxFilter" /> <br />
<label for="feelslike">Feelslike</label> <input type="checkbox" id="precip" className="checkBoxFilter" />
<br /> <label for="precip">Precip</label>
<input type="checkbox" id="windchill" className="checkBoxFilter" /> <br />
<label for="windchill">Windchill</label> <input type="checkbox" id="humidity" className="checkBoxFilter" />
<br /> <label for="humidity">Humidity</label>
<input type="checkbox" id="heatindex" className="checkBoxFilter" /> <br />
<label for="heatindex">Heatindex</label> <input type="checkbox" id="cloud" className="checkBoxFilter" />
<br /> <label for="cloud">Cloud</label>
<input type="checkbox" id="dewpoint" className="checkBoxFilter" /> <br />
<label for="dewpoint">Dewpoint</label> <input type="checkbox" id="feelslike" className="checkBoxFilter" />
<br /> <label for="feelslike">Feelslike</label>
<input type="checkbox" id="vis" className="checkBoxFilter" /> <br />
<label for="vis">Visibility </label> <input type="checkbox" id="windchill" className="checkBoxFilter" />
<br /> <label for="windchill">Windchill</label>
<input type="checkbox" id="uv" className="checkBoxFilter" /> <br />
<label for="uv">UV Index</label> <input type="checkbox" id="heatindex" className="checkBoxFilter" />
<br /> <label for="heatindex">Heatindex</label>
<input type="checkbox" id="gust" className="checkBoxFilter" /> <br />
<label for="gust">Gust </label> <input type="checkbox" id="dewpoint" className="checkBoxFilter" />
<br /> <label for="dewpoint">Dewpoint</label>
<input type="checkbox" id="air_quality_co" className="checkBoxFilter" /> <br />
<label for="air_quality_co">Air Quality CO</label> <input type="checkbox" id="vis" className="checkBoxFilter" />
<br /> <label for="vis">Visibility </label>
<input type="checkbox" id="air_quality_no2" className="checkBoxFilter" /> <br />
<label for="air_quality_no2">Air Quality NO2</label> <input type="checkbox" id="uv" className="checkBoxFilter" />
<br /> <label for="uv">UV Index</label>
<input type="checkbox" id="air_quality_o3" className="checkBoxFilter" /> <br />
<label for="air_quality_o3">Air Quality O3</label> <input type="checkbox" id="gust" className="checkBoxFilter" />
<br /> <label for="gust">Gust </label>
<input type="checkbox" id="air_quality_so2" className="checkBoxFilter" /> <br />
<label for="air_quality_so2">Air Quality SO2</label> <input
<br /> type="checkbox"
<input type="checkbox" id="air_quality_pm2_5" className="checkBoxFilter" /> id="air_quality_co"
<label for="air_quality_pm2_5">Air Quality PM2.5</label> className="checkBoxFilter"
<br /> />
<input type="checkbox" id="air_quality_pm10" className="checkBoxFilter" /> <label for="air_quality_co">Air Quality CO</label>
<label for="air_quality_pm10">Air Quality PM10</label> <br />
<br /> <input
<input type="checkbox" id="air_quality_us_epa_index" className="checkBoxFilter" /> type="checkbox"
<label for="air_quality_us_epa_index">US EPA Index</label> id="air_quality_no2"
<br /> className="checkBoxFilter"
<input type="checkbox" id="air_quality_gb_defra_index" className="checkBoxFilter" /> />
<label for="air_quality_gb_defra_index">GB DEFRA Index</label> <label for="air_quality_no2">Air Quality NO2</label>
<br /> <br />
<br /> <input
<br /> type="checkbox"
<br /> id="air_quality_o3"
</div> className="checkBoxFilter"
</div> />
<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 />
<br />
<br />
<br />
</div> </div>
</div> </div>
); </div>
</div>
);
function getData() { function getData() {
const city = document.getElementById("city").value; const city_text = document.getElementById("city_text").value;
const region = document.getElementById("region").value; const region_text = document.getElementById("region_text").value;
const country = document.getElementById("country").value; const country_text = document.getElementById("country_text").value;
const latitude = document.getElementById("latitude").value; const latitude_text = document.getElementById("latitude_text").value;
const longitude = document.getElementById("longitude").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 temperature = document.getElementById("temperature").checked;
const isDay = document.getElementById("isDay").checked; const isDay = document.getElementById("isDay").checked;
const condition = document.getElementById("condition").checked; const condition = document.getElementById("condition").checked;
...@@ -174,8 +246,37 @@ const Currentdata = (props) => { ...@@ -174,8 +246,37 @@ const Currentdata = (props) => {
const output = document.getElementById("output").value; const output = document.getElementById("output").value;
const format = document.getElementById("format").value; const format = document.getElementById("format").value;
const apiKey = "1244099aeaee4b179e6111803241304"; let filterArray = [];
const apiUrl = `https://api.weatherapi.com/v1/current.${format}?key=${apiKey}&q=${city}&aqi=${airquality}`;
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");
}
let filterString = filterArray.join(",");
console.log(filterString);
const apiUrl = `localhost:8080/currentwaether?q=${city_text}&filter=${filterString}`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => { .then((response) => {
...@@ -227,7 +328,6 @@ const Currentdata = (props) => { ...@@ -227,7 +328,6 @@ const Currentdata = (props) => {
function boolToWord(bool) { function boolToWord(bool) {
return bool ? "yes" : "no"; return bool ? "yes" : "no";
} }
}; };
export default Currentdata; export default Currentdata;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal