Skip to content
GitLab
Commit c326d65d authored by Weiser's avatar Weiser
Browse files

cscscscsraaahhh

parent 52355777
Hide whitespace changes
Inline Side-by-side
frontend/src/components/homepage/navbar4.js
View file @ c326d65d
......@@ -34,9 +34,6 @@ const Navbar4 = (props) => {
<span className="thq-link thq-body-small"
onClick={() => (window.location.href = "/historicalweather")}>{props.link5}</span>
</nav>
<div className="navbar4-buttons">
<button className="thq-button-outline">{props.action2}</button>
</div>
</div>
</header>
</div>
......@@ -52,7 +49,6 @@ Navbar4.defaultProps = {
logoAlt: "Weather App",
logoSrc:
"https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original",
action2: "Dark Mode",
imageSrc: "23887698-7562-4cff-bf5f-d07a1767f79b",
imageAlt: "image",
imageSrc1: "23887698-7562-4cff-bf5f-d07a1767f79b",
......
frontend/src/components/weather/currentData.css
View file @ c326d65d
......@@ -58,13 +58,6 @@ display: flex;
.h2{
margin-top: 40px;
}
.location{
margin-top: 40px;
}
.time{
margin-top:40px;
margin-left:80px;
}
.dataselect{
display: flex;
flex-direction: row;
......
frontend/src/components/weather/currentData.js
View file @ c326d65d
......@@ -72,7 +72,10 @@ const Currentdata = (props) => {
</div>
<div class="field_write">
<div class="fw">
<label htmlFor="location">Location:</label>
<div class="h3">
<h3>Choose your Location</h3>
</div>
<label htmlFor="location"></label>
<input
type="text"
id="city_text"
......@@ -92,28 +95,36 @@ const Currentdata = (props) => {
))}
</div>
<div class="fw">
<label for="region">Region:</label>
<div class="h3">
<h3>Choose your Region</h3>
</div>
<input type="text" id="region_text" placeholder="Region" />
</div>
<div class="fw">
<label>Country:</label>
<div class="h3">
<h3>Choose your Country</h3>
</div>
<input type="text" id="country_text" placeholder="Country" />
</div>
<div class="fw">
<label>Latitude:</label>
<div class="h3">
<h3>Choose your Latitude</h3>
</div>
<input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<label>Longitude:</label>
<div class="h3">
<h3>Choose your Longitude</h3>
</div>
<input type="text" id="longitude_text" placeholder="Longitude" />
</div>
</div>
<div class="h2">
<h2>Choose the variables you want.</h2>
</div>
<div class="h1">
<h1>Choose your custom output Data</h1>
<br />
</div>
<div className="dataselect">
<div class="location">
<div class="data">
<div class="h3">
<h3>Location</h3>
</div>
......@@ -133,7 +144,7 @@ const Currentdata = (props) => {
<label> Latitude</label>
<br />
</div>
<div class="time">
<div class="data">
<div class="h3">
<h3>Time</h3>
</div>
......@@ -316,7 +327,7 @@ const Currentdata = (props) => {
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
</div>
</div>
);
function getData() {
......
frontend/src/components/weather/historicalWeatherData.css
View file @ c326d65d
.filter label {
display: block;
margin-bottom: 5px;
}
.filter input[type="text"],
.filter select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.filter button {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.filter button:hover {
background-color: var(--dl-color-theme-primary2);
}
.output {
margin-top: 40px;
}
.checkBoxFilter {
margin-bottom: 10px;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
#apiUrl {
margin-top: 50px;
}
#apiUrloutput {
width: 1250px;
}
\ No newline at end of file
.fw {
display: block;
margin-bottom: 5px;
}
.fw input[type="text"],
.fw {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.fw {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output {
margin-top: 40px;
}
.checkBoxFilter {
margin-bottom: 10px;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
#apiUrl {
margin-top: 50px;
}
#apiUrloutput {
width: 1250px;
}
.field_write{
margin-top: 30px;
display: flex;
}
.fw{
margin-left:20px;
}
.h1{
margin-bottom: -30px;
}
.thq-grid-5{
display: flex;
flex-direction: column;
}
.dataselect{
display: flex;
flex-direction: row;
}
.data{
margin-top:40px;
margin-left:80px;
}
.h3{
margin-bottom: 10px;
}
.generate{
margin-top: 20px;
}
\ No newline at end of file
frontend/src/components/weather/historicalWeatherData.js
View file @ c326d65d
......@@ -68,53 +68,96 @@ const HistoricalWeatherData = (props) => {
return (
<div className="home-container">
<div>
<div className="thq-grid-4">
<div class="filter">
<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}
<div className="thq-grid-5">
<div class="h1">
<h1>Choose your Customised Data</h1>
<br />
</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}
/>
))}
<br />
<label for="region_text">Region:</label>
<input type="text" id="region_text" placeholder="Region" />
<br />
<label for="country_text">Country:</label>
<input type="text" id="country_text" placeholder="Country" />
<br />
<label for="latitude_text">Latitude:</label>
<input type="text" id="latitude_text" placeholder="Latitude" />
<br />
<label for="longitude_text">Longitude:</label>
<input type="text" id="longitude_text" placeholder="Longitude" />
<br />
<label for="timezone_text">Time Zone:</label>
{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">
<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">
<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">
<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">
<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">
<div class="h3">
<h3>Choose your Time Zone</h3>
</div>
<label for="timezone_text"></label>
<input type="text" id="timezone_text" placeholder="Timezone" />
<br />
<label for="start_date">Start date:</label>
</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>
<br />
<label for="end_date">End date:</label>
</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>
<br />
</div>
</div>
<div class="filter">
<p>Hourly</p>
<br />
<div class="h1">
<h1>Choose your custom output Data</h1>
<br />
</div>
<div className="dataselect">
<div class="data">
<div class="h3">
<h3>Primery Data</h3>
</div>
<input type="checkbox" id="hourly_time" class="checkBoxFilter" />
<label for="hourly_time">Hourly Time</label>
<br />
......@@ -130,7 +173,11 @@ const HistoricalWeatherData = (props) => {
<br />
<input type="checkbox" id="precipitation" class="checkBoxFilter" />
<label for="precipitation">Precipitation</label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Secondary Data</h3>
</div>
<input
type="checkbox"
id="surface_pressure"
......@@ -154,11 +201,11 @@ const HistoricalWeatherData = (props) => {
className="checkBoxFilter"
/>
<label for="wind_gusts_10m">Wind Gusts 10m</label>
<br />
</div>
<div class="filter">
<p>Dayly</p>
<br />
</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 />
......@@ -219,31 +266,44 @@ const HistoricalWeatherData = (props) => {
<label for="wind_direction_10m_dominant">
Wind Direction 10m Dominant
</label>
<br />
</div>
</div>
<div class="filter">
<label for="temp_units">Choose a Temeprature Unit:</label>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose a Temperature Unit</h3>
</div>
<label for="temp_units"></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>
</div>
<div class="fw">
<div class="h3">
<h3>Choose a Wind Speed Unit</h3>
</div>
<label for="wind_units"></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>
</div>
<div class="fw">
<div class="h3">
<h3>Choose a Precipitation Unit</h3>
</div>
<label for="prec_units"></label>
<select name="unnits" id="prec_units">
<option value="mm">Millimeter</option>
<option value="inch">Inch</option>
</select>
</div>
</div>
</div>
<div class="filter">
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
......@@ -266,11 +326,8 @@ const HistoricalWeatherData = (props) => {
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<br />
<br />
</div>
</div>
</div>
</div>
);
function getData() {
const city_text = document.getElementById("city_text").value;
......
frontend/src/components/weather/weatherForecastData.css
View file @ c326d65d
.filter label {
display: block;
margin-bottom: 5px;
}
.filter input[type="text"],
.filter select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.filter button {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.filter button:hover {
background-color: var(--dl-color-theme-primary2);
}
.output {
margin-top: 40px;
}
.checkBoxFilter {
margin-bottom: 10px;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
#apiUrl {
margin-top: 50px;
}
#apiUrloutput {
width: 1250px;
}
\ No newline at end of file
.fw {
display: block;
margin-bottom: 5px;
}
.fw input[type="text"],
.fw {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.fw {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output {
margin-top: 40px;
}
.checkBoxFilter {
margin-bottom: 10px;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
#apiUrl {
margin-top: 50px;
}
#apiUrloutput {
width: 1250px;
}
.field_write{
margin-top: 30px;
display: flex;
}
.fw{
margin-left:20px;
}
.h1{
margin-bottom: -30px;
}
.thq-grid-5{
display: flex;
flex-direction: column;
}
.dataselect{
display: flex;
flex-direction: row;
}
.data{
margin-top:40px;
margin-left:80px;
}
.h3{
margin-bottom: 10px;
}