Skip to content

GitLab

Commit 613e2d74 authored by EnesKarakas's avatar EnesKarakas
Browse files

dawd

parent 2d6c61d2
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.js
View file @ 613e2d74
...@@ -346,8 +346,8 @@ const Currentdata = (props) => { ...@@ -346,8 +346,8 @@ const Currentdata = (props) => {
if (temp) { if (temp) {
if (units == world) { if (units == world) {
filterArray.push("temp_c"); filterArray.push("temp_c");
} else{ } else {
filterArray.push("temp_f"); filterArray.push("temp_f");
} }
} }
...@@ -468,8 +468,6 @@ const Currentdata = (props) => { ...@@ -468,8 +468,6 @@ const Currentdata = (props) => {
let filterString = filterArray.join(","); let filterString = filterArray.join(",");
console.log("FilterString = " + filterString);
const apiUrl = `http://localhost:8080/currentweather?q=${latitude_text},${longitude_text}&filter=${filterString}`; const apiUrl = `http://localhost:8080/currentweather?q=${latitude_text},${longitude_text}&filter=${filterString}`;
fetch(apiUrl) fetch(apiUrl)
......
frontend/src/components/weather/historicalWeatherData.js
View file @ 613e2d74
import React from "react"; import React, { useState } from "react";
import "./weatherForecastData.css"; import "./weatherForecastData.css";
const HistoricalWeatherData = (props) => { const HistoricalWeatherData = (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>
<div className="thq-grid-5"> <div className="thq-grid-4">
<div class="filter"> <div class="filter">
<div class="filter"> <label htmlFor="location">Location:</label>
<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 />
<label>Time Zone:</label>
<input type="text" id="timezone_text" placeholder="Timezone" />
<br />
</div>
<input type="checkbox" id="latitude" class="checkBoxFilter" />
<label for="latitude">Latitude</label>
<br />
<input type="checkbox" id="longitude" class="checkBoxFilter" />
<label for="longitude">Longitude</label>
<br />
<input <input
type="checkbox" type="text"
id="generationtime_ms" id="city_text"
class="checkBoxFilter" placeholder="Location"
value={query}
onChange={handleInputChange}
/> />
<label for="generationtime_ms">Generation Time (ms)</label> {data.map((item) => (
<ListItem
key={item.id}
name={item.name}
country={item.country}
region={item.region}
lat={item.lat}
lon={item.lon}
/>
))}
<br /> <br />
<input <label for="region_text">Region:</label>
type="checkbox" <input type="text" id="region_text" placeholder="Region" />
id="utc_offset_seconds"
class="checkBoxFilter"
/>
<label for="utc_offset_seconds">UTC Offset (Seconds)</label>
<br /> <br />
<input type="checkbox" id="timezone" class="checkBoxFilter" /> <label for="country_text">Country:</label>
<label for="timezone">Timezone</label> <input type="text" id="country_text" placeholder="Country" />
<br /> <br />
<input <label for="latitude_text">Latitude:</label>
type="checkbox" <input type="text" id="latitude_text" placeholder="Latitude" />
id="timezone_abbreviation"
class="checkBoxFilter"
/>
<label for="timezone_abbreviation">Timezone Abbreviation</label>
<br /> <br />
<input type="checkbox" id="elevation" class="checkBoxFilter" /> <label for="longitude_text">Longitude:</label>
<label for="elevation">Elevation</label> <input type="text" id="longitude_text" placeholder="Longitude" />
<br /> <br />
<label for="timezone_text">Time Zone:</label>
<input type="text" id="timezone_text" placeholder="Timezone" />
<br />
<label for="start_date">Start date:</label>
<input type="date" id="start_date" name="Startdate"></input>
<br />
<label for="end_date">End date:</label>
<input type="date" id="end_date" name="Enddate"></input>
<br />
</div>
<div class="filter">
<p>Hourly</p> <p>Hourly</p>
<br /> <br />
<input type="checkbox" id="hourly_time" class="checkBoxFilter" /> <input type="checkbox" id="hourly_time" class="checkBoxFilter" />
...@@ -102,6 +101,8 @@ const HistoricalWeatherData = (props) => { ...@@ -102,6 +101,8 @@ const HistoricalWeatherData = (props) => {
/> />
<label for="wind_gusts_10m">Wind Gusts 10m</label> <label for="wind_gusts_10m">Wind Gusts 10m</label>
<br /> <br />
</div>
<div class="filter">
<p>Dayly</p> <p>Dayly</p>
<br /> <br />
<input type="checkbox" id="daily_time" class="checkBoxFilter" /> <input type="checkbox" id="daily_time" class="checkBoxFilter" />
...@@ -165,28 +166,45 @@ const HistoricalWeatherData = (props) => { ...@@ -165,28 +166,45 @@ const HistoricalWeatherData = (props) => {
Wind Direction 10m Dominant Wind Direction 10m Dominant
</label> </label>
<br /> <br />
<div> </div>
<label for="units">Choose a unit:</label> <div class="filter">
<select name="unnits" id="units"> <label for="temp_units">Choose a Temeprature Unit:</label>
<option value="world">Rest of The World</option> <select name="unnits" id="temp_units">
<option value="american"> <option value="celsius">Celsius C°</option>
American units: /eagles per shool shootings <option value="fahrenheit">Fahrenheit F°</option>
</option> </select>
</select> <br />
</div> <label for="wind_units">Choose a Wind Speed Unit:</label>
<div class="output"> <select name="unnits" id="wind_units">
<h2>Output:</h2> <option value="kmh">Km/h</option>
<br /> <option value="mph">Mph</option>
<pre id="weatherData"></pre> <option value="ms">m/s</option>
</div> <option value="kn">Knots</option>
<div id="apiUrl"> </select>
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<br /> <br />
<label for="prec_units">Choose a Precipitation Unit:</label>
<select name="unnits" id="prec_units">
<option value="mm">Millimeter</option>
<option value="inch">Inch</option>
</select>
</div>
</div>
<div class="filter">
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
<div class="output">
<h2>Output:</h2>
<br /> <br />
<pre id="weatherData"></pre>
</div> </div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<br />
<br />
</div> </div>
</div> </div>
</div> </div>
...@@ -199,19 +217,11 @@ const HistoricalWeatherData = (props) => { ...@@ -199,19 +217,11 @@ const HistoricalWeatherData = (props) => {
const latitude_text = document.getElementById("latitude_text").value; const latitude_text = document.getElementById("latitude_text").value;
const longitude_text = document.getElementById("longitude_text").value; const longitude_text = document.getElementById("longitude_text").value;
const timezone_text = document.getElementById("timezone_text").value; const timezone_text = document.getElementById("timezone_text").value;
const start_date = document.getElementById("start_date").value;
const end_date = document.getElementById("end_date").value;
//Checkboxes //Checkboxes
const latitude = document.getElementById("latitude").checked;
const longitude = document.getElementById("longitude").checked;
const generationtime_ms =
document.getElementById("generationtime_ms").checked;
const utc_offset_seconds =
document.getElementById("utc_offset_seconds").checked;
const timezone = document.getElementById("timezone").checked;
const timezone_abbreviation = document.getElementById(
"timezone_abbreviation"
).checked;
const elevation = document.getElementById("elevation").checked;
const hourly_time = document.getElementById("hourly_time").checked; const hourly_time = document.getElementById("hourly_time").checked;
const temperature_2m = document.getElementById("temperature_2m").checked; const temperature_2m = document.getElementById("temperature_2m").checked;
const relative_humidity_2m = document.getElementById( const relative_humidity_2m = document.getElementById(
...@@ -244,87 +254,70 @@ const HistoricalWeatherData = (props) => { ...@@ -244,87 +254,70 @@ const HistoricalWeatherData = (props) => {
const wind_direction_10m_dominant = document.getElementById( const wind_direction_10m_dominant = document.getElementById(
"wind_direction_10m_dominant" "wind_direction_10m_dominant"
).checked; ).checked;
const temp_units = document.getElementById("temp_units").value;
const wind_units = document.getElementById("wind_units").value;
const prec_units = document.getElementById("prec_units").value;
let filterArray = []; let filterHourlyArray = [];
let filterDailyArray = [];
if (latitude) {
filterArray.push("latitude");
}
if (longitude) {
filterArray.push("longitude");
}
if (generationtime_ms) {
filterArray.push("generationtime_ms");
}
if (utc_offset_seconds) {
filterArray.push("utc_offset_seconds");
}
if (timezone) {
filterArray.push("timezone");
}
if (timezone_abbreviation) {
filterArray.push("timezone_abbreviation");
}
if (elevation) {
filterArray.push("elevation");
}
if (hourly_time) { if (hourly_time) {
filterArray.push("hourly.time"); filterHourlyArray.push("time");
} }
if (temperature_2m) { if (temperature_2m) {
filterArray.push("hourly.temperature_2m"); filterHourlyArray.push("temperature_2m");
} }
if (relative_humidity_2m) { if (relative_humidity_2m) {
filterArray.push("hourly.relative_humidity_2m"); filterHourlyArray.push("relative_humidity_2m");
} }
if (precipitation) { if (precipitation) {
filterArray.push("hourly.precipitation"); filterHourlyArray.push("precipitation");
} }
if (surface_pressure) { if (surface_pressure) {
filterArray.push("hourly.surface_pressure"); filterHourlyArray.push("surface_pressure");
} }
if (wind_speed_10m) { if (wind_speed_10m) {
filterArray.push("hourly.wind_speed_10m"); filterHourlyArray.push("wind_speed_10m");
} }
if (wind_direction_10m) { if (wind_direction_10m) {
filterArray.push("hourly.wind_direction_10m"); filterHourlyArray.push("wind_direction_10m");
} }
if (wind_gusts_10m) { if (wind_gusts_10m) {
filterArray.push("hourly.wind_gusts_10m"); filterHourlyArray.push("wind_gusts_10m");
} }
if (daily_time) { if (daily_time) {
filterArray.push("daily.time"); filterDailyArray.push("time");
} }
if (temperature_2m_max) { if (temperature_2m_max) {
filterArray.push("daily.temperature_2m_max"); filterDailyArray.push("temperature_2m_max");
} }
if (temperature_2m_min) { if (temperature_2m_min) {
filterArray.push("daily.temperature_2m_min"); filterDailyArray.push("temperature_2m_min");
} }
if (temperature_2m_mean) { if (temperature_2m_mean) {
filterArray.push("daily.temperature_2m_mean"); filterDailyArray.push("temperature_2m_mean");
} }
if (precipitation_sum) { if (precipitation_sum) {
filterArray.push("daily.precipitation_sum"); filterDailyArray.push("precipitation_sum");
} }
if (precipitation_hours) { if (precipitation_hours) {
filterArray.push("daily.precipitation_hours"); filterDailyArray.push("precipitation_hours");
} }
if (wind_speed_10m_max) { if (wind_speed_10m_max) {
filterArray.push("daily.wind_speed_10m_max"); filterDailyArray.push("wind_speed_10m_max");
} }
if (wind_gusts_10m_max) { if (wind_gusts_10m_max) {
filterArray.push("daily.wind_gusts_10m_max"); filterDailyArray.push("wind_gusts_10m_max");
} }
if (wind_direction_10m_dominant) { if (wind_direction_10m_dominant) {
filterArray.push("daily.wind_direction_10m_dominant"); filterDailyArray.push("wind_direction_10m_dominant");
} }
let filterString = filterArray.join(","); let filterHourlyString = filterHourlyArray.join(",");
let filterDailyString = filterDailyArray.join(",");
console.log("FilterString = " + filterString);
const apiUrl = `http://localhost:8080/historicalweather?latitude=${latitude_text}&longitude=${longitude_text}&start_date=&end_date=&filter=${filterString}`; const apiUrl = `http://localhost:8080/historicalweather?latitude=${latitude_text}&longitude=${longitude_text}&start_date=${start_date}&end_date=${end_date}&filterHourly=${filterHourlyString}&filterDaily=${filterDailyString}&temperature_unit=${temp_units}
&wind_speed_unit=${wind_units}&precipitation_unit=${prec_units}`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => { .then((response) => {
......
frontend/src/components/weather/weatherForecastData.js
View file @ 613e2d74
import React from "react"; import React, { useState } from "react";
import "./weatherForecastData.css"; import "./weatherForecastData.css";
const WeatherForecastData = (props) => { const WeatherForecastData = (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>
<div className="thq-grid-5"> <div className="thq-grid-5">
<div class="filter"> <div class="filter">
<div> <div>
<label for="location">Location:</label> <label htmlFor="location">Location:</label>
<input type="text" id="city_text" placeholder="Location" /> <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}
/>
))}
<br /> <br />
<label for="region">Region:</label> <label for="region">Region:</label>
<input type="text" id="region_text" placeholder="Region" /> <input type="text" id="region_text" placeholder="Region" />
...@@ -459,8 +484,6 @@ const WeatherForecastData = (props) => { ...@@ -459,8 +484,6 @@ const WeatherForecastData = (props) => {
let filterString = filterArray.join(","); let filterString = filterArray.join(",");
console.log("FilterString = " + filterString);
const apiUrl = `http://localhost:8080/forcastweather?q=${latitude_text},${longitude_text}&filter=${filterString}`; const apiUrl = `http://localhost:8080/forcastweather?q=${latitude_text},${longitude_text}&filter=${filterString}`;
fetch(apiUrl) fetch(apiUrl)
......
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