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) => {
if (temp) {
if (units == world) {
filterArray.push("temp_c");
} else{
filterArray.push("temp_f");
} else {
filterArray.push("temp_f");
}
}
......@@ -468,8 +468,6 @@ const Currentdata = (props) => {
let filterString = filterArray.join(",");
console.log("FilterString = " + filterString);
const apiUrl = `http://localhost:8080/currentweather?q=${latitude_text},${longitude_text}&filter=${filterString}`;
fetch(apiUrl)
......
frontend/src/components/weather/historicalWeatherData.js
View file @ 613e2d74
import React from "react";
import React, { useState } from "react";
import "./weatherForecastData.css";
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 (
<div className="home-container">
<div>
<div className="thq-grid-5">
<div className="thq-grid-4">
<div class="filter">
<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 />
<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 />
<label htmlFor="location">Location:</label>
<input
type="checkbox"
id="generationtime_ms"
class="checkBoxFilter"
type="text"
id="city_text"
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 />
<input
type="checkbox"
id="utc_offset_seconds"
class="checkBoxFilter"
/>
<label for="utc_offset_seconds">UTC Offset (Seconds)</label>
<label for="region_text">Region:</label>
<input type="text" id="region_text" placeholder="Region" />
<br />
<input type="checkbox" id="timezone" class="checkBoxFilter" />
<label for="timezone">Timezone</label>
<label for="country_text">Country:</label>
<input type="text" id="country_text" placeholder="Country" />
<br />
<input
type="checkbox"
id="timezone_abbreviation"
class="checkBoxFilter"
/>
<label for="timezone_abbreviation">Timezone Abbreviation</label>
<label for="latitude_text">Latitude:</label>
<input type="text" id="latitude_text" placeholder="Latitude" />
<br />
<input type="checkbox" id="elevation" class="checkBoxFilter" />
<label for="elevation">Elevation</label>
<label for="longitude_text">Longitude:</label>
<input type="text" id="longitude_text" placeholder="Longitude" />
<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>
<br />
<input type="checkbox" id="hourly_time" class="checkBoxFilter" />
......@@ -102,6 +101,8 @@ const HistoricalWeatherData = (props) => {
/>
<label for="wind_gusts_10m">Wind Gusts 10m</label>
<br />
</div>
<div class="filter">
<p>Dayly</p>
<br />
<input type="checkbox" id="daily_time" class="checkBoxFilter" />
......@@ -165,28 +166,45 @@ const HistoricalWeatherData = (props) => {
Wind Direction 10m Dominant
</label>
<br />
<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="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>
</div>
<div class="filter">
<label for="temp_units">Choose a Temeprature Unit:</label>
<select name="unnits" id="temp_units">
<option value="celsius">Celsius C°</option>
<option value="fahrenheit">Fahrenheit F°</option>
</select>
<br />
<label for="wind_units">Choose a Wind Speed Unit:</label>
<select name="unnits" id="wind_units">
<option value="kmh">Km/h</option>
<option value="mph">Mph</option>
<option value="ms">m/s</option>
<option value="kn">Knots</option>
</select>
<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 />
<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>
</div>
......@@ -199,19 +217,11 @@ const HistoricalWeatherData = (props) => {
const latitude_text = document.getElementById("latitude_text").value;
const longitude_text = document.getElementById("longitude_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
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 temperature_2m = document.getElementById("temperature_2m").checked;
const relative_humidity_2m = document.getElementById(
......@@ -244,87 +254,70 @@ const HistoricalWeatherData = (props) => {
const wind_direction_10m_dominant = document.getElementById(
"wind_direction_10m_dominant"
).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) {
filterArray.push("hourly.time");
filterHourlyArray.push("time");
}
if (temperature_2m) {
filterArray.push("hourly.temperature_2m");
filterHourlyArray.push("temperature_2m");
}
if (relative_humidity_2m) {
filterArray.push("hourly.relative_humidity_2m");
filterHourlyArray.push("relative_humidity_2m");
}
if (precipitation) {
filterArray.push("hourly.precipitation");
filterHourlyArray.push("precipitation");
}
if (surface_pressure) {
filterArray.push("hourly.surface_pressure");
filterHourlyArray.push("surface_pressure");
}
if (wind_speed_10m) {
filterArray.push("hourly.wind_speed_10m");
filterHourlyArray.push("wind_speed_10m");
}
if (wind_direction_10m) {
filterArray.push("hourly.wind_direction_10m");
filterHourlyArray.push("wind_direction_10m");
}
if (wind_gusts_10m) {
filterArray.push("hourly.wind_gusts_10m");
filterHourlyArray.push("wind_gusts_10m");
}
if (daily_time) {
filterArray.push("daily.time");
filterDailyArray.push("time");
}
if (temperature_2m_max) {
filterArray.push("daily.temperature_2m_max");
filterDailyArray.push("temperature_2m_max");
}
if (temperature_2m_min) {
filterArray.push("daily.temperature_2m_min");
filterDailyArray.push("temperature_2m_min");
}
if (temperature_2m_mean) {
filterArray.push("daily.temperature_2m_mean");
filterDailyArray.push("temperature_2m_mean");
}
if (precipitation_sum) {
filterArray.push("daily.precipitation_sum");
filterDailyArray.push("precipitation_sum");
}
if (precipitation_hours) {
filterArray.push("daily.precipitation_hours");
filterDailyArray.push("precipitation_hours");
}
if (wind_speed_10m_max) {
filterArray.push("daily.wind_speed_10m_max");
filterDailyArray.push("wind_speed_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) {
filterArray.push("daily.wind_direction_10m_dominant");
filterDailyArray.push("wind_direction_10m_dominant");
}
let filterString = filterArray.join(",");
console.log("FilterString = " + filterString);
let filterHourlyString = filterHourlyArray.join(",");
let filterDailyString = filterDailyArray.join(",");
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)
.then((response) => {
......
frontend/src/components/weather/weatherForecastData.js
View file @ 613e2d74
import React from "react";
import React, { useState } from "react";
import "./weatherForecastData.css";
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 (
<div className="home-container">
<div>
<div className="thq-grid-5">
<div class="filter">
<div>
<label for="location">Location:</label>
<input type="text" id="city_text" placeholder="Location" />
<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}
/>
))}
<br />
<label for="region">Region:</label>
<input type="text" id="region_text" placeholder="Region" />
......@@ -459,8 +484,6 @@ const WeatherForecastData = (props) => {
let filterString = filterArray.join(",");
console.log("FilterString = " + filterString);
const apiUrl = `http://localhost:8080/forcastweather?q=${latitude_text},${longitude_text}&filter=${filterString}`;
fetch(apiUrl)
......
Supports Markdown
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