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

new

parent 5d445a5f
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/historicalWeatherData.css
View file @ 6d771a40
.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
frontend/src/components/weather/historicalWeatherData.js
View file @ 6d771a40
import React from "react";
import "./currentData.css";
import "./weatherForecastData.css";
const HistoricalWeatherData = (props) => {
return (
......
frontend/src/components/weather/weatherForecastData.css
View file @ 6d771a40
.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
frontend/src/components/weather/weatherForecastData.js
View file @ 6d771a40
import React from "react";
import "./weatherForecastData";
import "./weatherForecastData.css";
const WeatherForecastData = (props) => {
return (
......@@ -8,138 +8,147 @@ const WeatherForecastData = (props) => {
<div>
<div className="thq-grid-5">
<div class="filter">
<label for="location">Location:</label>
<input type="text" id="location" placeholder="Location" />
<br />
<label for="region">Region:</label>
<input type="text" id="region" placeholder="Region" />
<br />
<label>Country:</label>
<input type="text" id="country" placeholder="Country" />
<br />
<label>Latitude:</label>
<input type="text" id="latitude" placeholder="Latitude" />
<label>Longitude:</label>
<input type="text" id="longitude" placeholder="Longitude" />
<br />
</div>
<div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
<br />
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input type="checkbox" id="localtime_epoch" className="checkBoxFilter" />
<label> Localtime Epoch</label>
<br />
<input type="checkbox" id="localtime" className="checkBoxFilter" />
<label> Localtime</label>
<br />
<input type="checkbox" id="last_updated_epoch" className="checkBoxFilter" />
<label> Last Updated Epoch</label>
<br />
<input type="checkbox" id="last_updated" className="checkBoxFilter" />
<label> Last Updated</label>
<br />
<input type="checkbox" id="temp_c" className="checkBoxFilter" />
<label for="temp_c">Temp C</label>
<br />
<input type="checkbox" id="temp_f" className="checkBoxFilter" />
<label for="temp_f">Temp F</label>
<br />
<input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label>
<br />
<input type="checkbox" id="condition_text" className="checkBoxFilter" />
<label for="condition_text">Condition Text</label>
<br />
<input type="checkbox" id="condition_icon" className="checkBoxFilter" />
<label for="condition_icon">Condition Icon</label>
<br />
<input type="checkbox" id="condition_code" className="checkBoxFilter" />
<label for="condition_code">Condition Code</label>
<input type="checkbox" id="wind" className="checkBoxFilter" />
<label for="wind">Wind </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" />
<label for="wind_dir">Wind Direction</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label for="pressure">Pressure</label>
<br />
<input type="checkbox" id="precip" className="checkBoxFilter" />
<label for="precip">Precip</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label for="humidity">Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label for="cloud">Cloud</label>
<br />
<input type="checkbox" id="feelslike" className="checkBoxFilter" />
<label for="feelslike">Feelslike</label>
<br />
<input type="checkbox" id="windchill" className="checkBoxFilter" />
<label for="windchill">Windchill</label>
<br />
<input type="checkbox" id="heatindex" className="checkBoxFilter" />
<label for="heatindex">Heatindex</label>
<br />
<input type="checkbox" id="dewpoint" className="checkBoxFilter" />
<label for="dewpoint">Dewpoint</label>
<br />
<input type="checkbox" id="vis" className="checkBoxFilter" />
<label for="vis">Visibility </label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label for="gust">Gust </label>
<br />
<input type="checkbox" id="air_quality_co" className="checkBoxFilter" />
<label for="air_quality_co">Air Quality CO</label>
<br />
<input type="checkbox" id="air_quality_no2" className="checkBoxFilter" />
<label for="air_quality_no2">Air Quality NO2</label>
<br />
<input type="checkbox" id="air_quality_o3" className="checkBoxFilter" />
<label for="air_quality_o3">Air Quality O3</label>
<br />
<input type="checkbox" id="air_quality_so2" className="checkBoxFilter" />
<label for="air_quality_so2">Air Quality SO2</label>
<br />
<input type="checkbox" id="air_quality_pm2_5" className="checkBoxFilter" />
<label for="air_quality_pm2_5">Air Quality PM2.5</label>
<br />
<input type="checkbox" id="air_quality_pm10" className="checkBoxFilter" />
<label for="air_quality_pm10">Air Quality PM10</label>
<br />
<input type="checkbox" id="air_quality_us_epa_index" className="checkBoxFilter" />
<label for="air_quality_us_epa_index">US EPA Index</label>
<br />
<input type="checkbox" id="air_quality_gb_defra_index" className="checkBoxFilter" />
<label for="air_quality_gb_defra_index">GB DEFRA Index</label>
<br />
<br />
<br />
<br />
<div>
<input type="checkbox" id="last_updated_epoch" class="checkBoxFilter" />
<label for="last_updated_epoch">Last Updated Epoch</label>
<br />
<input type="checkbox" id="last_updated" class="checkBoxFilter" />
<label for="last_updated">Last Updated</label>
<br />
<input type="checkbox" id="date" class="checkBoxFilter" />
<label for="date">Date</label>
<br />
<input type="checkbox" id="date_epoch" class="checkBoxFilter" />
<label for="date_epoch">Date Epoch</label>
<br />
<input type="checkbox" id="maxtemp" class="checkBoxFilter" />
<label for="maxtemp">Max Temperature</label>
<br />
<input type="checkbox" id="mintemp" class="checkBoxFilter" />
<label for="mintemp">Min Temperature</label>
<br />
<input type="checkbox" id="avgtemp" class="checkBoxFilter" />
<label for="avgtemp">Average Temperature</label>
<br />
<input type="checkbox" id="maxwind" class="checkBoxFilter" />
<label for="maxwind">Max Wind Speed</label>
<br />
<input type="checkbox" id="totalprecip" class="checkBoxFilter" />
<label for="totalprecip">Total Precipitation</label>
<br />
<input type="checkbox" id="avgvis" class="checkBoxFilter" />
<label for="avgvis">Average Visibility</label>
<br />
<input type="checkbox" id="avghumidity" class="checkBoxFilter" />
<label for="avghumidity">Average Humidity</label>
<br />
<input type="checkbox" id="daily_will_it_rain" class="checkBoxFilter" />
<label for="daily_will_it_rain">Daily Will it Rain</label>
<br />
<input type="checkbox" id="daily_chance_of_rain" class="checkBoxFilter" />
<label for="daily_chance_of_rain">Daily Chance of Rain</label>
<br />
<input type="checkbox" id="daily_will_it_snow" class="checkBoxFilter" />
<label for="daily_will_it_snow">Daily Will it Snow</label>
<br />
<input type="checkbox" id="daily_chance_of_snow" class="checkBoxFilter" />
<label for="daily_chance_of_snow">Daily Chance of Snow</label>
<br />
<input type="checkbox" id="condition_text" class="checkBoxFilter" />
<label for="condition_text">Condition Text</label>
<br />
<input type="checkbox" id="condition_icon" class="checkBoxFilter" />
<label for="condition_icon">Condition Icon</label>
<br />
<input type="checkbox" id="condition_code" class="checkBoxFilter" />
<label for="condition_code">Condition Code</label>
<br />
<input type="checkbox" id="uv" class="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="sunrise" class="checkBoxFilter" />
<label for="sunrise">Sunrise</label>
<br />
<input type="checkbox" id="sunset" class="checkBoxFilter" />
<label for="sunset">Sunset</label>
<br />
<input type="checkbox" id="moonrise" class="checkBoxFilter" />
<label for="moonrise">Moonrise</label>
<br />
<input type="checkbox" id="moonset" class="checkBoxFilter" />
<label for="moonset">Moonset</label>
<br />
<input type="checkbox" id="moon_phase" class="checkBoxFilter" />
<label for="moon_phase">Moon Phase</label>
<br />
<input type="checkbox" id="moon_illumination" class="checkBoxFilter" />
<label for="moon_illumination">Moon Illumination</label>
<br />
<input type="checkbox" id="hour_time_epoch" class="checkBoxFilter" />
<label for="hour_time_epoch">Hour Time Epoch</label>
<br />
<input type="checkbox" id="hour_time" class="checkBoxFilter" />
<label for="hour_time">Hour Time</label>
<br />
<input type="checkbox" id="hour_temp" class="checkBoxFilter" />
<label for="hour_temp">Hour Temperature</label>
<br />
<input type="checkbox" id="hour_is_day" class="checkBoxFilter" />
<label for="hour_is_day">Hour Is Day</label>
<br />
<input type="checkbox" id="hour_condition_text" class="checkBoxFilter" />
<label for="hour_condition_text">Hour Condition Text</label>
<br />
<input type="checkbox" id="hour_condition_icon" class="checkBoxFilter" />
<label for="hour_condition_icon">Hour Condition Icon</label>
<br />
<input type="checkbox" id="hour_condition_code" class="checkBoxFilter" />
<label for="hour_condition_code">Hour Condition Code</label>
<br />
<input type="checkbox" id="hour_wind" class="checkBoxFilter" />
<label for="hour_wind">Hour Wind</label>
<br />
<input type="checkbox" id="hour_wind_degree" class="checkBoxFilter" />
<label for="hour_wind_degree">Hour Wind Degree</label>
<br />
<input type="checkbox" id="hour_wind_dir" class="checkBoxFilter" />
<label for="hour_wind_dir">Hour Wind Direction</label>
<br />
<input type="checkbox" id="hour_pressure" class="checkBoxFilter" />
<label for="hour_pressure">Hour Pressure</label>
<br />
<input type="checkbox" id="hour_precip" class="checkBoxFilter" />
<label for="hour_precip">Hour Precipitation</label>
<br />
<input type="checkbox" id="hour_humidity" class="checkBoxFilter" />
<label for="hour_humidity">Hour Humidity</label>
<br />
<input type="checkbox" id="hour_cloud" class="checkBoxFilter" />
<label for="hour_cloud">Hour Cloud</label>
<br />
<input type="checkbox" id="hour_feelslike" class="checkBoxFilter" />
<label for="hour_feelslike">Hour Feels Like</label>
<br />
<input type="checkbox" id="hour_windchill" class="checkBoxFilter" />
<label for="hour_windchill">Hour Wind Chill</label>
<br />
<input type="checkbox" id="hour_heatindex" class="checkBoxFilter" />
<label for="hour_heatindex">Hour Heat Index</label>
<br />
<input type="checkbox" id="hour_dewpoint" class="checkBoxFilter" />
<label for="hour_dewpoint">Hour Dew Point</label>
<br />
<input type="checkbox" id="hour_vis" class="checkBoxFilter" />
<label for="hour_vis">Hour Visibility</label>
<br />
<input type="checkbox" id="hour_gust" class="checkBoxFilter" />
<label for="hour_gust">Hour Gust</label>
<br />
<input type="checkbox" id="hour_uv" class="checkBoxFilter" />
<label for="hour_uv">Hour UV</label>
<br />
<br />
</div>
</div>
</div>
</div>
......
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