Skip to content

GitLab

Commit f1792a8c authored by EnesKarakas's avatar EnesKarakas
Browse files

dw

parent 143f1062
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.css
View file @ f1792a8c
.filter label { .filter label {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
.filter input[type="text"], .filter input[type="text"],
.filter select {
.filter select { width: 100%;
width: 100%; padding: 8px;
padding: 8px; margin-bottom: 10px;
margin-bottom: 10px; border: 1px solid #ccc;
border: 1px solid #ccc; border-radius: 5px;
border-radius: 5px; }
}
.filter button {
.filter button { padding: 10px 20px;
padding: 10px 20px; background-color: var(--dl-color-theme-primary1);
background-color: var(--dl-color-theme-primary1); color: #fff;
color: #fff; border: none;
border: none; border-radius: 5px;
border-radius: 5px; cursor: pointer;
cursor: pointer; transition: background-color 0.3s;
transition: background-color 0.3s; }
}
.filter button:hover {
.filter button:hover { background-color: var(--dl-color-theme-primary2);
background-color: var(--dl-color-theme-primary2); }
}
.output {
.output { margin-top: 40px;
margin-top: 40px; }
}
.checkBoxFilter {
.checkBoxFilter { margin-bottom: 10px;
margin-bottom: 10px; }
}
#weatherData {
#weatherData { white-space: pre-wrap; /* Umbruch von langen Zeilen */
white-space: pre-wrap; /* Umbruch von langen Zeilen */ }
} #apiUrl {
#apiUrl { margin-top: 50px;
margin-top: 50px; }
}
#apiUrloutput {
#apiUrloutput { width: 1250px;
width: 1250px; }
} .list-container {
\ No newline at end of file width: 300px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.list-item {
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s;
cursor: pointer;
}
.list-item:hover {
background-color: #f0f0f0;
}
.title {
font-size: 18px;
font-weight: bold;
}
.subtitle {
font-size: 14px;
color: #666;
}
.APIButton {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
frontend/src/components/weather/currentData.js
View file @ f1792a8c
import React from "react"; import React, { useState } from "react";
import "./currentData.css"; import "./currentData.css";
const Currentdata = (props) => { 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 ( return (
<div className="home-container"> <div className="home-container">
<div> <div className="thq-grid-3">
<div className="thq-grid-5"> <div class="filter">
<div class="filter"> <label htmlFor="location">Location:</label>
<label for="location">Location:</label> <input
<input type="text" id="city_text" placeholder="Location" /> type="text"
<br /> id="city_text"
<label for="region">Region:</label> placeholder="Location"
<input type="text" id="region_text" placeholder="Region" /> value={query}
<br /> onChange={handleInputChange}
<label>Country:</label> />
<input type="text" id="country_text" placeholder="Country" /> {data.map((item) => (
<br /> <ListItem
<label>Latitude:</label> key={item.id}
<input type="text" id="latitude_text" placeholder="Latitude" /> name={item.name}
<label>Longitude:</label> country={item.country}
<input type="text" id="longitude_text" placeholder="Longitude" /> region={item.region}
<br /> lat={item.lat}
</div> lon={item.lon}
<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 /> <br />
<div> <label for="region">Region:</label>
<button className="thq-button-filled" onClick={getData}> <input type="text" id="region_text" placeholder="Region" />
Generate <br />
</button> <label>Country:</label>
</div> <input type="text" id="country_text" placeholder="Country" />
<br /> <br />
<div class="output"> <label>Latitude:</label>
<h2>Output:</h2> <input type="text" id="latitude_text" placeholder="Latitude" />
<br /> <label>Longitude:</label>
<pre id="weatherData"></pre> <input type="text" id="longitude_text" placeholder="Longitude" />
</div> <br />
<div id="apiUrl"> </div>
<label>API URL:</label> <div>
<br /> <input type="checkbox" id="name" className="checkBoxFilter" />
<input className="input" type="text" id="apiUrloutput" readOnly /> <label> City Name</label>
</div> <br />
<button className="APIButton" onClick={searchAPI}> <input type="checkbox" id="region" className="checkBoxFilter" />
City api <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> </button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br /> <br />
<pre id="weatherData"></pre>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br /> <br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div> </div>
<br />
<br />
</div> </div>
</div> </div>
</div> </div>
...@@ -424,10 +437,9 @@ const Currentdata = (props) => { ...@@ -424,10 +437,9 @@ const Currentdata = (props) => {
}); });
} }
function searchAPI() { function searchAPI() {
const cityInput = document.getElementById("city").value; const cityInput = document.getElementById("city_text").value;
const apiKey = "1244099aeaee4b179e6111803241304"; const apiUrl = `http://localhost:8080/search?city=${cityInput}`;
const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => { .then((response) => {
...@@ -438,12 +450,7 @@ const Currentdata = (props) => { ...@@ -438,12 +450,7 @@ const Currentdata = (props) => {
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
// Wetterdaten anzeigen setData(data);
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
}) })
.catch((error) => { .catch((error) => {
console.error("There was a problem with the fetch operation:", error); console.error("There was a problem with the fetch operation:", error);
...@@ -455,4 +462,21 @@ const Currentdata = (props) => { ...@@ -455,4 +462,21 @@ const Currentdata = (props) => {
} }
}; };
const ListItem = ({ name, country, region, lat, lon }) => {
const handleClick = () => {
alert(`Element geklickt: ${name}`);
};
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; export default Currentdata;
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