Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Karakas
SWP_SS24_Wetterdaten_sammeln
Commits
d96323a7
Commit
d96323a7
authored
Jun 10, 2024
by
Weiser
Browse files
css
parent
b04ad954
Changes
2
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/weather/currentData.css
View file @
d96323a7
...
@@ -4,6 +4,7 @@
...
@@ -4,6 +4,7 @@
}
}
.filter
input
[
type
=
"text"
],
.filter
input
[
type
=
"text"
],
.filter
select
{
.filter
select
{
width
:
100%
;
width
:
100%
;
padding
:
8px
;
padding
:
8px
;
...
@@ -44,39 +45,43 @@
...
@@ -44,39 +45,43 @@
#apiUrloutput
{
#apiUrloutput
{
width
:
1250px
;
width
:
1250px
;
}
}
.
list-container
{
.
field_write
{
width
:
30
0
px
;
margin-top
:
30px
;
margin
:
20px
auto
;
display
:
flex
;
font-family
:
Arial
,
sans-serif
;
flex-direction
:
row
;
}
}
.fw
{
.list-item
{
margin-left
:
20px
;
border
:
1px
solid
#ccc
;
margin
:
10px
0
;
padding
:
10px
;
border-radius
:
5px
;
transition
:
background-color
0.3s
;
cursor
:
pointer
;
}
}
.h1
{
.list-item
:hover
{
margin-bottom
:
-30px
;
background-color
:
#f0f0f0
;
}
}
.thq-grid-5
{
.title
{
display
:
flex
;
font-size
:
18px
;
flex-direction
:
column
;
font-weight
:
bold
;
}
}
.h2
{
.subtitle
{
margin-top
:
40px
;
font-size
:
14px
;
color
:
#666
;
}
}
.location
{
margin-top
:
40px
;
}
.time
{
margin-top
:
40px
;
margin-left
:
80px
;
}
.dataselect
{
display
:
flex
;
flex-direction
:
row
;
.APIButton
{
display
:
block
;
margin
:
10px
auto
;
padding
:
10px
20px
;
font-size
:
16px
;
cursor
:
pointer
;
}
}
.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/currentData.js
View file @
d96323a7
...
@@ -17,7 +17,12 @@ const Currentdata = (props) => {
...
@@ -17,7 +17,12 @@ const Currentdata = (props) => {
<
div
className
=
"
home-container
"
>
<
div
className
=
"
home-container
"
>
<
div
>
<
div
>
<
div
className
=
"
thq-grid-5
"
>
<
div
className
=
"
thq-grid-5
"
>
<
div
class
=
"
filter
"
>
<
div
class
=
"
h1
"
>
<
h1
>
Choose
your
City
<
/h1
>
<
br
/>
<
/div
>
<
div
class
=
"
field_write
"
>
<
div
class
=
"
fw
"
>
<
label
htmlFor
=
"
location
"
>
Location
:
<
/label
>
<
label
htmlFor
=
"
location
"
>
Location
:
<
/label
>
<
input
<
input
type
=
"
text
"
type
=
"
text
"
...
@@ -36,208 +41,233 @@ const Currentdata = (props) => {
...
@@ -36,208 +41,233 @@ const Currentdata = (props) => {
lon
=
{
item
.
lon
}
lon
=
{
item
.
lon
}
/
>
/
>
))}
))}
<
br
/>
<
/div
>
<
div
class
=
"
fw
"
>
<
label
for
=
"
region
"
>
Region
:
<
/label
>
<
label
for
=
"
region
"
>
Region
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
region_text
"
placeholder
=
"
Region
"
/>
<
input
type
=
"
text
"
id
=
"
region_text
"
placeholder
=
"
Region
"
/>
<
br
/>
<
/div
>
<
div
class
=
"
fw
"
>
<
label
>
Country
:
<
/label
>
<
label
>
Country
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
country_text
"
placeholder
=
"
Country
"
/>
<
input
type
=
"
text
"
id
=
"
country_text
"
placeholder
=
"
Country
"
/>
<
br
/>
<
/div
>
<
div
class
=
"
fw
"
>
<
label
>
Latitude
:
<
/label
>
<
label
>
Latitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
latitude_text
"
placeholder
=
"
Latitude
"
/>
<
input
type
=
"
text
"
id
=
"
latitude_text
"
placeholder
=
"
Latitude
"
/>
<
/div
>
<
div
class
=
"
fw
"
>
<
label
>
Longitude
:
<
/label
>
<
label
>
Longitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
longitude_text
"
placeholder
=
"
Longitude
"
/>
<
input
type
=
"
text
"
id
=
"
longitude_text
"
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
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temp
"
>
Temp
<
/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
"
>
Condition
Text
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition
"
className
=
"
checkBoxFilter
"
/>
<
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
/>
<
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 shooting
s
<
/option
>
<
/select
>
<
/div
>
<
div
>
<
button
className
=
"
thq-button-filled
"
onClick
=
{
getData
}
>
Generate
<
/button
>
<
/div
>
<
br
/>
<
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
>
<
/div
>
<
div
class
=
"
h2
"
>
<
h2
>
Choose
the
variables
you
want
.
<
/h2
>
<
/div
>
<
div
className
=
"
dataselect
"
>
<
div
class
=
"
location
"
>
<
div
class
=
"
h3
"
>
<
h3
>
Location
<
/h3
>
<
/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
/>
<
/div
>
<
div
class
=
"
time
"
>
<
div
class
=
"
h3
"
>
<
h3
>
Time
<
/h3
>
<
/div
>
<
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
/>
<
/div
>
<
div
class
=
"
data
"
>
<
div
class
=
"
h3
"
>
<
h3
>
Temperature
<
/h3
>
<
/div
>
<
input
type
=
"
checkbox
"
id
=
"
temp
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temp
"
>
Temp
<
/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
"
>
Condition
Text
<
/label
>
<
br
/>
<
/div
>
<
div
class
=
"
data
"
>
<
div
class
=
"
h3
"
>
<
h3
>
Wind
<
/h3
>
<
/div
>
<
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
/>
<
/div
>
<
div
class
=
"
data
"
>
<
div
class
=
"
h3
"
>
<
h3
>
Temperature
<
/h3
>
<
/div
>
<
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
/>
<
/div
>
<
div
class
=
"
data
"
>
<
div
class
=
"
h3
"
>
<
h3
>
Air
Quality
<
/h3
>
<
/div
>
<
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
/>
<
/div
>
<
/div
>
<
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 shooting
s
<
/option
>
<
/select
>
<
/div
>
<
div
class
=
"
generate
"
>
<
button
className
=
"
thq-button-filled
"
onClick
=
{
getData
}
>
Generate
<
/button
>
<
/div
>
<
br
/>
<
div
class
=
"
output
"
>
<
h2
>
Output
:
<
/h2
>
<
br
/>
<
br
/>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
/div
>
<
div
id
=
"
apiUrl
"
>
<
label
>
API
URL
:
<
/label
>
<
br
/>
<
br
/>
<
input
className
=
"
input
"
type
=
"
text
"
id
=
"
apiUrloutput
"
readOnly
/>
<
/div
>
<
/div
>
<
/div
>
<
br
/>
<
br
/>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
);
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment