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