Skip to content

GitLab

Commit 26508673 authored by EnesKarakas's avatar EnesKarakas
Browse files

r

parent 6be17fe5
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.js
View file @ 26508673
......@@ -69,9 +69,9 @@ const Currentdata = (props) => {
<div class="h1">
<h1>Choose your City</h1>
<br />
</div>
<div class="field_write">
<div class="fw">
</div>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose your Location</h3>
</div>
......@@ -93,26 +93,26 @@ const Currentdata = (props) => {
lon={item.lon}
/>
))}
</div>
<div class="fw">
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Region</h3>
</div>
<input type="text" id="region_text" placeholder="Region" />
</div>
<div class="fw">
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Country</h3>
</div>
<input type="text" id="country_text" placeholder="Country" />
</div>
<div class="fw">
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Latitude</h3>
</div>
<input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Longitude</h3>
</div>
......@@ -122,7 +122,7 @@ const Currentdata = (props) => {
<div class="h1">
<h1>Choose your custom output Data</h1>
<br />
</div>
</div>
<div className="dataselect">
<div class="data">
<div class="h3">
......@@ -186,7 +186,11 @@ const Currentdata = (props) => {
<input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label>
<br />
<input type="checkbox" id="condition_text" className="checkBoxFilter" />
<input
type="checkbox"
id="condition_text"
className="checkBoxFilter"
/>
<label for="condition">Condition Text</label>
<br />
</div>
......@@ -194,7 +198,14 @@ const Currentdata = (props) => {
<div class="h3">
<h3>Wind</h3>
</div>
<input type="checkbox" id="wind_degree" className="checkBoxFilter" />
<input type="checkbox" id="wind" className="checkBoxFilter" />
<label for="wind">Wind Speed</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" />
......@@ -302,9 +313,9 @@ const Currentdata = (props) => {
</div>
</div>
<div class="fw1">
<div class="h3">
<h3>Choose a unit</h3>
</div>
<div class="h3">
<h3>Choose a unit</h3>
</div>
<select name="unnits" id="units">
<option value="world">Rest of The World</option>
<option value="american">
......@@ -319,24 +330,24 @@ const Currentdata = (props) => {
</div>
<br />
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
<div class="fw1">
<div class="h3">
<div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
......@@ -352,12 +363,8 @@ const Currentdata = (props) => {
//switch
const units = document.getElementById("units").value;
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;
......@@ -375,7 +382,9 @@ const Currentdata = (props) => {
const temp = document.getElementById("temp").checked;
const id_day = document.getElementById("id_day").checked;
const condition = document.getElementById("condition_text").checked;
const wind = document.getElementById("wind").checked;
const wind_degree = document.getElementById("wind_degree").checked;
const wind_dir = document.getElementById("wind_dir").checked;
const pressure = document.getElementById("pressure").checked;
......@@ -403,7 +412,6 @@ const Currentdata = (props) => {
const air_quality_gb_defra_index = document.getElementById(
"air_quality_gb_defra_index"
).checked;
let filterArray = [];
if (name) {
......
frontend/src/components/weather/historicalWeatherData.css
View file @ 26508673
......@@ -4,7 +4,6 @@
}
.fw input[type="text"],
.fw {
width: 100%;
padding: 8px;
......@@ -27,14 +26,13 @@
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
display:grid;
display: grid;
}
.fw1 {
......@@ -48,7 +46,12 @@
}
.output {
margin-top: 40px;
padding: 10px 20px;
color: #fff;
border-style: dashed;
border-color: #fff;
cursor: pointer;
transition: background-color 0.3s;
}
.checkBoxFilter {
......@@ -65,29 +68,33 @@
#apiUrloutput {
width: 1250px;
}
.field_write{
margin-top: 30px;
display: flex;
.field_write {
margin-top: 30px;
display: flex;
}
.fw{
margin-left:20px;
.fw {
margin-left: 20px;
}
.h1{
margin-bottom: -30px;
.h1 {
margin-bottom: -30px;
}
.thq-grid-5{
.thq-grid-5 {
display: flex;
flex-direction: column;
}
.dataselect{
.dataselect {
display: flex;
flex-direction: row;
}
.data{
margin-top:40px;
margin-left:80px;
.data {
margin-top: 40px;
margin-left: 80px;
}
.h3{
.h3 {
margin-bottom: 10px;
}
.listStyle {
border-style: solid;
border-color: #ccc;
}
frontend/src/components/weather/historicalWeatherData.js
View file @ 26508673
......@@ -72,95 +72,92 @@ const HistoricalWeatherData = (props) => {
<div class="h1">
<h1>Choose your Customised Data</h1>
<br />
</div>
<div class="field_write">
<div class="fw">
</div>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose your Location</h3>
</div>
<label htmlFor="location"></label>
<input
type="text"
id="city_text"
placeholder="Location"
value={query}
onChange={handleInputChange}
<label htmlFor="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}
/>
{data.map((item) => (
<ListItem
key={item.id}
name={item.name}
country={item.country}
region={item.region}
lat={item.lat}
lon={item.lon}
/>
))}
</div>
<div class="fw">
<div class="h3">
))}
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Region</h3>
</div>
<label for="region_text"></label>
<input type="text" id="region_text" placeholder="Region" />
</div>
<div class="fw">
<div class="h3">
<label for="region_text"></label>
<input type="text" id="region_text" placeholder="Region" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Country</h3>
</div>
<label for="country_text"></label>
<input type="text" id="country_text" placeholder="Country" />
</div>
<div class="fw">
<div class="h3">
<label for="country_text"></label>
<input type="text" id="country_text" placeholder="Country" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Latitude</h3>
</div>
<label for="latitude_text"></label>
<input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<div class="h3">
<label for="latitude_text"></label>
<input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Longitude</h3>
</div>
<label for="longitude_text"></label>
<input type="text" id="longitude_text" placeholder="Longitude" />
</div>
</div>
<div class="field_write">
<div class="fw">
<label for="longitude_text"></label>
<input type="text" id="longitude_text" placeholder="Longitude" />
</div>
</div>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose your Time Zone</h3>
</div>
<label for="timezone_text"></label>
<input type="text" id="timezone_text" placeholder="Timezone" />
</div>
<div class="fw">
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Start date</h3>
</div>
<label for="start_date"></label>
<input type="date" id="start_date" name="Startdate"></input>
</div>
<div class="fw">
</div>
<div class="fw">
<div class="h3">
<h3>Choose your End date</h3>
</div>
<label for="end_date"></label>
<input type="date" id="end_date" name="Enddate"></input>
</div>
</div>
<div class="h1">
</div>
<div class="h1">
<h1>Choose your custom output Data</h1>
<br />
</div>
<div className="dataselect">
</div>
<div className="dataselect">
<div class="data">
<div class="h3">
<div class="h3">
<h3>Primery Data</h3>
</div>
<input type="checkbox" id="hourly_time" class="checkBoxFilter" />
<label for="hourly_time">Hourly Time</label>
<br />
<input type="checkbox" id="temperature_2m" class="checkBoxFilter" />
<label for="temperature_2m">Temperature 2m</label>
<br />
......@@ -173,8 +170,8 @@ const HistoricalWeatherData = (props) => {
<br />
<input type="checkbox" id="precipitation" class="checkBoxFilter" />
<label for="precipitation">Precipitation</label>
</div>
<div class="data">
</div>
<div class="data">
<div class="h3">
<h3>Secondary Data</h3>
</div>
......@@ -201,14 +198,11 @@ const HistoricalWeatherData = (props) => {
className="checkBoxFilter"
/>
<label for="wind_gusts_10m">Wind Gusts 10m</label>
</div>
<div class="data">
</div>
<div class="data">
<div class="h3">
<h3>Dayly Data</h3>
</div>
<input type="checkbox" id="daily_time" class="checkBoxFilter" />
<label for="daily_time">Daily Time</label>
<br />
<input
type="checkbox"
id="temperature_2m_max"
......@@ -266,11 +260,11 @@ const HistoricalWeatherData = (props) => {
<label for="wind_direction_10m_dominant">
Wind Direction 10m Dominant
</label>
</div>
</div>
</div>
<div class="field_write">
<div class="fw">
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose a Temperature Unit</h3>
</div>
......@@ -279,8 +273,8 @@ const HistoricalWeatherData = (props) => {
<option value="celsius">Celsius C°</option>
<option value="fahrenheit">Fahrenheit F°</option>
</select>
</div>
<div class="fw">
</div>
<div class="fw">
<div class="h3">
<h3>Choose a Wind Speed Unit</h3>
</div>
......@@ -291,8 +285,8 @@ const HistoricalWeatherData = (props) => {
<option value="ms">m/s</option>
<option value="kn">Knots</option>
</select>
</div>
<div class="fw">
</div>
<div class="fw">
<div class="h3">
<h3>Choose a Precipitation Unit</h3>
</div>
......@@ -301,40 +295,40 @@ const HistoricalWeatherData = (props) => {
<option value="mm">Millimeter</option>
<option value="inch">Inch</option>
</select>
</div>
</div>
<button className="thq-button-filled" onClick={getData}>
Generate your data
</button>
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
</div>
<button className="thq-button-filled" onClick={getData}>
Generate your data
</button>
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
<div class="fw1">
<div class="h3">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
</div>
</div>
);
function getData() {
const city_text = document.getElementById("city_text").value;
......@@ -348,7 +342,6 @@ const HistoricalWeatherData = (props) => {
//Checkboxes
const hourly_time = document.getElementById("hourly_time").checked;
const temperature_2m = document.getElementById("temperature_2m").checked;
const relative_humidity_2m = document.getElementById(
"relative_humidity_2m"
......@@ -360,7 +353,6 @@ const HistoricalWeatherData = (props) => {
const wind_direction_10m =
document.getElementById("wind_direction_10m").checked;
const wind_gusts_10m = document.getElementById("wind_gusts_10m").checked;
const daily_time = document.getElementById("daily_time").checked;
const temperature_2m_max =
document.getElementById("temperature_2m_max").checked;
const temperature_2m_min =
......@@ -387,9 +379,6 @@ const HistoricalWeatherData = (props) => {
let filterHourlyArray = [];
let filterDailyArray = [];
if (hourly_time) {
filterHourlyArray.push("time");
}
if (temperature_2m) {
filterHourlyArray.push("temperature_2m");
}
......@@ -411,9 +400,6 @@ const HistoricalWeatherData = (props) => {
if (wind_gusts_10m) {
filterHourlyArray.push("wind_gusts_10m");
}
if (daily_time) {
filterDailyArray.push("time");
}
if (temperature_2m_max) {
filterDailyArray.push("temperature_2m_max");
}
......
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