Skip to content
GitLab
Menu
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
ca8fe76d
Commit
ca8fe76d
authored
Jun 09, 2024
by
EnesKarakas
Browse files
csy
parent
3c0e9b8d
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/weather/currentData.js
View file @
ca8fe76d
...
@@ -18,8 +18,24 @@ const Currentdata = (props) => {
...
@@ -18,8 +18,24 @@ const Currentdata = (props) => {
<
div
>
<
div
>
<
div
className
=
"
thq-grid-5
"
>
<
div
className
=
"
thq-grid-5
"
>
<
div
class
=
"
filter
"
>
<
div
class
=
"
filter
"
>
<
label
for
=
"
location
"
>
Location
:
<
/label
>
<
label
htmlFor
=
"
location
"
>
Location
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
/>
<
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
}
/
>
))}
<
br
/>
<
br
/>
<
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
"
/>
...
@@ -420,7 +436,7 @@ const Currentdata = (props) => {
...
@@ -420,7 +436,7 @@ const Currentdata = (props) => {
console
.
log
(
"
FilterString =
"
+
filterString
);
console
.
log
(
"
FilterString =
"
+
filterString
);
const
apiUrl
=
`http://localhost:8080/currentweather?q=
${
city
_text
}
&filter=
${
filterString
}
`
;
const
apiUrl
=
`http://localhost:8080/currentweather?q=
${
latitude_text
}
,
${
longitude
_text
}
&filter=
${
filterString
}
`
;
fetch
(
apiUrl
)
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
...
@@ -470,7 +486,11 @@ const Currentdata = (props) => {
...
@@ -470,7 +486,11 @@ const Currentdata = (props) => {
const
ListItem
=
({
name
,
country
,
region
,
lat
,
lon
})
=>
{
const
ListItem
=
({
name
,
country
,
region
,
lat
,
lon
})
=>
{
const
handleClick
=
()
=>
{
const
handleClick
=
()
=>
{
alert
(
`Element geklickt:
${
name
}
`
);
document
.
getElementById
(
"
city_text
"
).
value
=
name
;
document
.
getElementById
(
"
region_text
"
).
value
=
country
;
document
.
getElementById
(
"
country_text
"
).
value
=
region
;
document
.
getElementById
(
"
latitude_text
"
).
value
=
lat
;
document
.
getElementById
(
"
longitude_text
"
).
value
=
lon
;
};
};
return
(
return
(
...
...
frontend/src/components/weather/historicalWeatherData.js
View file @
ca8fe76d
...
@@ -3,114 +3,178 @@ import React from "react";
...
@@ -3,114 +3,178 @@ import React from "react";
import
"
./weatherForecastData.css
"
;
import
"
./weatherForecastData.css
"
;
const
HistoricalWeatherData
=
(
props
)
=>
{
const
HistoricalWeatherData
=
(
props
)
=>
{
return
(
return
(
<
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
=
"
filter
"
>
<
div
class
=
"
filter
"
>
<
div
class
=
"
filter
"
>
<
label
for
=
"
location
"
>
Location
:
<
/label
>
<
label
for
=
"
location
"
>
Location
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
/>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
/>
<
br
/>
<
br
/>
<
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
/>
<
br
/>
<
label
>
Country
:
<
/label
>
<
label
>
Country
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
country_text
"
placeholder
=
"
Country
"
/>
<
input
type
=
"
text
"
id
=
"
country_text
"
placeholder
=
"
Country
"
/>
<
br
/>
<
br
/>
<
label
>
Latitude
:
<
/label
>
<
label
>
Latitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
latitude_text
"
placeholder
=
"
Latitude
"
/>
<
input
type
=
"
text
"
id
=
"
latitude_text
"
placeholder
=
"
Latitude
"
/>
<
label
>
Longitude
:
<
/label
>
<
label
>
Longitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
longitude_text
"
placeholder
=
"
Longitude
"
/>
<
input
type
=
"
text
"
id
=
"
longitude_text
"
placeholder
=
"
Longitude
"
/>
<
br
/>
<
br
/>
<
label
>
Time
Zone
:
<
/label
>
<
label
>
Time
Zone
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
timezone_text
"
placeholder
=
"
Timezone
"
/>
<
input
type
=
"
text
"
id
=
"
timezone_text
"
placeholder
=
"
Timezone
"
/>
<
br
/>
<
br
/>
<
/div
>
<
/div
>
<
input
type
=
"
checkbox
"
id
=
"
latitude
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
latitude
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
latitude
"
>
Latitude
<
/label
>
<
label
for
=
"
latitude
"
>
Latitude
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
longitude
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
longitude
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
longitude
"
>
Longitude
<
/label
>
<
label
for
=
"
longitude
"
>
Longitude
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
generationtime_ms
"
class
=
"
checkBoxFilter
"
/>
<
input
<
label
for
=
"
generationtime_ms
"
>
Generation
Time
(
ms
)
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
generationtime_ms
"
<
input
type
=
"
checkbox
"
id
=
"
utc_offset_seconds
"
class
=
"
checkBoxFilter
"
/>
class
=
"
checkBoxFilter
"
<
label
for
=
"
utc_offset_seconds
"
>
UTC
Offset
(
Seconds
)
<
/label
>
/>
<
br
/>
<
label
for
=
"
generationtime_ms
"
>
Generation
Time
(
ms
)
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
timezone
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
timezone
"
>
Timezone
<
/label
>
<
input
<
br
/>
type
=
"
checkbox
"
<
input
type
=
"
checkbox
"
id
=
"
timezone_abbreviation
"
class
=
"
checkBoxFilter
"
/>
id
=
"
utc_offset_seconds
"
<
label
for
=
"
timezone_abbreviation
"
>
Timezone
Abbreviation
<
/label
>
class
=
"
checkBoxFilter
"
<
br
/>
/>
<
input
type
=
"
checkbox
"
id
=
"
elevation
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
utc_offset_seconds
"
>
UTC
Offset
(
Seconds
)
<
/label
>
<
label
for
=
"
elevation
"
>
Elevation
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
timezone
"
class
=
"
checkBoxFilter
"
/>
<
p
>
Hourly
<
/p
>
<
label
for
=
"
timezone
"
>
Timezone
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hourly_time
"
class
=
"
checkBoxFilter
"
/>
<
input
<
label
for
=
"
hourly_time
"
>
Hourly
Time
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
timezone_abbreviation
"
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m
"
class
=
"
checkBoxFilter
"
/>
class
=
"
checkBoxFilter
"
<
label
for
=
"
temperature_2m
"
>
Temperature
2
m
<
/label
>
/>
<
br
/>
<
label
for
=
"
timezone_abbreviation
"
>
Timezone
Abbreviation
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
relative_humidity_2m
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
relative_humidity_2m
"
>
Relative
Humidity
2
m
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
elevation
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
elevation
"
>
Elevation
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
precipitation
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
precipitation
"
>
Precipitation
<
/label
>
<
p
>
Hourly
<
/p
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
surface_pressure
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hourly_time
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
surface_pressure
"
>
Surface
Pressure
<
/label
>
<
label
for
=
"
hourly_time
"
>
Hourly
Time
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_speed_10m
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_speed_10m
"
>
Wind
Speed
10
m
<
/label
>
<
label
for
=
"
temperature_2m
"
>
Temperature
2
m
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_direction_10m
"
className
=
"
checkBoxFilter
"
/>
<
input
<
label
for
=
"
wind_direction_10m
"
>
Wind
Direction
10
m
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
relative_humidity_2m
"
<
input
type
=
"
checkbox
"
id
=
"
wind_gusts_10m
"
className
=
"
checkBoxFilter
"
/>
class
=
"
checkBoxFilter
"
<
label
for
=
"
wind_gusts_10m
"
>
Wind
Gusts
10
m
<
/label
>
/>
<
br
/>
<
label
for
=
"
relative_humidity_2m
"
>
Relative
Humidity
2
m
<
/label
>
<
p
>
Dayly
<
/p
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_time
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
precipitation
"
>
Precipitation
<
/label
>
<
label
for
=
"
daily_time
"
>
Daily
Time
<
/label
>
<
br
/>
<
br
/>
<
input
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_max
"
class
=
"
checkBoxFilter
"
/>
type
=
"
checkbox
"
<
label
for
=
"
temperature_2m_max
"
>
Temperature
2
m
Max
<
/label
>
id
=
"
surface_pressure
"
<
br
/>
class
=
"
checkBoxFilter
"
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_min
"
class
=
"
checkBoxFilter
"
/>
/>
<
label
for
=
"
temperature_2m_min
"
>
Temperature
2
m
Min
<
/label
>
<
label
for
=
"
surface_pressure
"
>
Surface
Pressure
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_mean
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_speed_10m
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temperature_2m_mean
"
>
Temperature
2
m
Mean
<
/label
>
<
label
for
=
"
wind_speed_10m
"
>
Wind
Speed
10
m
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation_sum
"
class
=
"
checkBoxFilter
"
/>
<
input
<
label
for
=
"
precipitation_sum
"
>
Precipitation
Sum
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
wind_direction_10m
"
<
input
type
=
"
checkbox
"
id
=
"
precipitation_hours
"
class
=
"
checkBoxFilter
"
/>
className
=
"
checkBoxFilter
"
<
label
for
=
"
precipitation_hours
"
>
Precipitation
Hours
<
/label
>
/>
<
br
/>
<
label
for
=
"
wind_direction_10m
"
>
Wind
Direction
10
m
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
wind_speed_10m_max
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
wind_speed_10m_max
"
>
Wind
Speed
10
m
Max
<
/label
>
<
input
<
br
/>
type
=
"
checkbox
"
<
input
type
=
"
checkbox
"
id
=
"
wind_gusts_10m_max
"
class
=
"
checkBoxFilter
"
/>
id
=
"
wind_gusts_10m
"
<
label
for
=
"
wind_gusts_10m_max
"
>
Wind
Gusts
10
m
Max
<
/label
>
className
=
"
checkBoxFilter
"
<
br
/>
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_direction_10m_dominant
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_gusts_10m
"
>
Wind
Gusts
10
m
<
/label
>
<
label
for
=
"
wind_direction_10m_dominant
"
>
Wind
Direction
10
m
Dominant
<
/label
>
<
br
/>
<
br
/>
<
p
>
Dayly
<
/p
>
<
div
>
<
br
/>
<
label
for
=
"
units
"
>
Choose
a
unit
:
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
daily_time
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
daily_time
"
>
Daily
Time
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_max
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temperature_2m_max
"
>
Temperature
2
m
Max
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_min
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temperature_2m_min
"
>
Temperature
2
m
Min
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_mean
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temperature_2m_mean
"
>
Temperature
2
m
Mean
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation_sum
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
precipitation_sum
"
>
Precipitation
Sum
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation_hours
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
precipitation_hours
"
>
Precipitation
Hours
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_speed_10m_max
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_speed_10m_max
"
>
Wind
Speed
10
m
Max
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_gusts_10m_max
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_gusts_10m_max
"
>
Wind
Gusts
10
m
Max
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_direction_10m_dominant
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_direction_10m_dominant
"
>
Wind
Direction
10
m
Dominant
<
/label
>
<
br
/>
<
div
>
<
label
for
=
"
units
"
>
Choose
a
unit
:
<
/label
>
<
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
"
>
American
units
:
/eagles per shool shootings</
option
>
<
option
value
=
"
american
"
>
American
units
:
/eagles per shool shooting
s
<
/option
>
<
/select
>
<
/select
>
<
/div
>
<
/div
>
<
div
class
=
"
output
"
>
<
div
class
=
"
output
"
>
<
h2
>
Output
:
<
/h2
>
<
h2
>
Output
:
<
/h2
>
<
br
/>
<
br
/>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
pre
id
=
"
weatherData
"
><
/pre
>
...
@@ -129,123 +193,142 @@ const HistoricalWeatherData = (props) => {
...
@@ -129,123 +193,142 @@ const HistoricalWeatherData = (props) => {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
);
function
getData
()
{
function
getData
()
{
const
city_text
=
document
.
getElementById
(
"
city_text
"
).
value
;
const
city_text
=
document
.
getElementById
(
"
city_text
"
).
value
;
const
region_text
=
document
.
getElementById
(
"
region_text
"
).
value
;
const
region_text
=
document
.
getElementById
(
"
region_text
"
).
value
;
const
country_text
=
document
.
getElementById
(
"
country_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
;
const
timezone_text
=
document
.
getElementById
(
"
timezone_text
"
).
value
;
const
timezone_text
=
document
.
getElementById
(
"
timezone_text
"
).
value
;
//Checkboxes
//Checkboxes
const
latitude
=
document
.
getElementById
(
"
latitude
"
).
checked
;
const
latitude
=
document
.
getElementById
(
"
latitude
"
).
checked
;
const
longitude
=
document
.
getElementById
(
"
longitude
"
).
checked
;
const
longitude
=
document
.
getElementById
(
"
longitude
"
).
checked
;
const
generationtime_ms
=
document
.
getElementById
(
"
generationtime_ms
"
).
checked
;
const
generationtime_ms
=
const
utc_offset_seconds
=
document
.
getElementById
(
"
utc_offset_seconds
"
).
checked
;
document
.
getElementById
(
"
generationtime_ms
"
).
checked
;
const
timezone
=
document
.
getElementById
(
"
timezone
"
).
checked
;
const
utc_offset_seconds
=
const
timezone_abbreviation
=
document
.
getElementById
(
"
timezone_abbreviation
"
).
checked
;
document
.
getElementById
(
"
utc_offset_seconds
"
).
checked
;
const
elevation
=
document
.
getElementById
(
"
elevation
"
).
checked
;
const
timezone
=
document
.
getElementById
(
"
timezone
"
).
checked
;
const
hourly_time
=
document
.
getElementById
(
"
hourly_time
"
).
checked
;
const
timezone_abbreviation
=
document
.
getElementById
(
const
temperature_2m
=
document
.
getElementById
(
"
temperature_2m
"
).
checked
;
"
timezone_abbreviation
"
const
relative_humidity_2m
=
document
.
getElementById
(
"
relative_humidity_2m
"
).
checked
;
).
checked
;
const
precipitation
=
document
.
getElementById
(
"
precipitation
"
).
checked
;
const
elevation
=
document
.
getElementById
(
"
elevation
"
).
checked
;
const
surface_pressure
=
document
.
getElementById
(
"
surface_pressure
"
).
checked
;
const
hourly_time
=
document
.
getElementById
(
"
hourly_time
"
).
checked
;
const
wind_speed_10m
=
document
.
getElementById
(
"
wind_speed_10m
"
).
checked
;
const
temperature_2m
=
document
.
getElementById
(
"
temperature_2m
"
).
checked
;
const
wind_direction_10m
=
document
.
getElementById
(
"
wind_direction_10m
"
).
checked
;
const
relative_humidity_2m
=
document
.
getElementById
(
const
wind_gusts_10m
=
document
.
getElementById
(
"
wind_gusts_10m
"
).
checked
;
"
relative_humidity_2m
"
const
daily_time
=
document
.
getElementById
(
"
daily_time
"
).
checked
;
).
checked
;
const
temperature_2m_max
=
document
.
getElementById
(
"
temperature_2m_max
"
).
checked
;
const
precipitation
=
document
.
getElementById
(
"
precipitation
"
).
checked
;
const
temperature_2m_min
=
document
.
getElementById
(
"
temperature_2m_min
"
).
checked
;
const
surface_pressure
=
const
temperature_2m_mean
=
document
.
getElementById
(
"
temperature_2m_mean
"
).
checked
;
document
.
getElementById
(
"
surface_pressure
"
).
checked
;
const
precipitation_sum
=
document
.
getElementById
(
"
precipitation_sum
"
).
checked
;
const
wind_speed_10m
=
document
.
getElementById
(
"
wind_speed_10m
"
).
checked
;
const
precipitation_hours
=
document
.
getElementById
(
"
precipitation_hours
"
).
checked
;
const
wind_direction_10m
=
const
wind_speed_10m_max
=
document
.
getElementById
(
"
wind_speed_10m_max
"
).
checked
;
document
.
getElementById
(
"
wind_direction_10m
"
).
checked
;
const
wind_gusts_10m_max
=
document
.
getElementById
(
"
wind_gusts_10m_max
"
).
checked
;
const
wind_gusts_10m
=
document
.
getElementById
(
"
wind_gusts_10m
"
).
checked
;
const
wind_direction_10m_dominant
=
document
.
getElementById
(
"
wind_direction_10m_dominant
"
).
checked
;
const
daily_time
=
document
.
getElementById
(
"
daily_time
"
).
checked
;
const
temperature_2m_max
=
let
filterArray
=
[];
document
.
getElementById
(
"
temperature_2m_max
"
).
checked
;
const
temperature_2m_min
=
if
(
latitude
)
{
document
.
getElementById
(
"
temperature_2m_min
"
).
checked
;
filterArray
.
push
(
"
latitude
"
);
const
temperature_2m_mean
=
document
.
getElementById
(
}
"
temperature_2m_mean
"
if
(
longitude
)
{
).
checked
;
filterArray
.
push
(
"
longitude
"
);
const
precipitation_sum
=
}
document
.
getElementById
(
"
precipitation_sum
"
).
checked
;
if
(
generationtime_ms
)
{
const
precipitation_hours
=
document
.
getElementById
(
filterArray
.
push
(
"
generationtime_ms
"
);
"
precipitation_hours
"
}
).
checked
;
if
(
utc_offset_seconds
)
{
const
wind_speed_10m_max
=
filterArray
.
push
(
"
utc_offset_seconds
"
);
document
.
getElementById
(
"
wind_speed_10m_max
"
).
checked
;
}
const
wind_gusts_10m_max
=
if
(
timezone
)
{
document
.
getElementById
(
"
wind_gusts_10m_max
"
).
checked
;
filterArray
.
push
(
"
timezone
"
);
const
wind_direction_10m_dominant
=
document
.
getElementById
(
}
"
wind_direction_10m_dominant
"
if
(
timezone_abbreviation
)
{
).
checked
;
filterArray
.
push
(
"
timezone_abbreviation
"
);
}
let
filterArray
=
[];
if
(
elevation
)
{
filterArray
.
push
(
"
elevation
"
);
if
(
latitude
)
{
}
filterArray
.
push
(
"
latitude
"
);
if
(
hourly_time
)
{
}
filterArray
.
push
(
"
hourly.time
"
);
if
(
longitude
)
{
}
filterArray
.
push
(
"
longitude
"
);
if
(
temperature_2m
)
{
}
filterArray
.
push
(
"
hourly.temperature_2m
"
);
if
(
generationtime_ms
)
{
}
filterArray
.
push
(
"
generationtime_ms
"
);
if
(
relative_humidity_2m
)
{
}
filterArray
.
push
(
"
hourly.relative_humidity_2m
"
);
if
(
utc_offset_seconds
)
{
}
filterArray
.
push
(
"
utc_offset_seconds
"
);
if
(
precipitation
)
{
}
filterArray
.
push
(
"
hourly.precipitation
"
);
if
(
timezone
)
{
}
filterArray
.
push
(
"
timezone
"
);
if
(
surface_pressure
)
{
}
filterArray
.
push
(
"
hourly.surface_pressure
"
);
if
(
timezone_abbreviation
)
{
}
filterArray
.
push
(
"
timezone_abbreviation
"
);
if
(
wind_speed_10m
)
{
}
filterArray
.
push
(
"
hourly.wind_speed_10m
"
);
if
(
elevation
)
{
}
filterArray
.
push
(
"
elevation
"
);
if
(
wind_direction_10m
)
{
}
filterArray
.
push
(
"
hourly.wind_direction_10m
"
);
if
(
hourly_time
)
{
}
filterArray
.
push
(
"
hourly.time
"
);
if
(
wind_gusts_10m
)
{
}
filterArray
.
push
(
"
hourly.wind_gusts_10m
"
);
if
(
temperature_2m
)
{
}
filterArray
.
push
(
"
hourly.temperature_2m
"
);
if
(
daily_time
)
{
}
filterArray
.
push
(
"
daily.time
"
);
if
(
relative_humidity_2m
)
{
}
filterArray
.
push
(
"
hourly.relative_humidity_2m
"
);
if
(
temperature_2m_max
)
{
}
filterArray
.
push
(
"
daily.temperature_2m_max
"
);
if
(
precipitation
)
{
}
filterArray
.
push
(
"
hourly.precipitation
"
);
if
(
temperature_2m_min
)
{
}
filterArray
.
push
(
"
daily.temperature_2m_min
"
);
if
(
surface_pressure
)
{
}
filterArray
.
push
(
"
hourly.surface_pressure
"
);
if
(
temperature_2m_mean
)
{
}
filterArray
.
push
(
"
daily.temperature_2m_mean
"
);
if
(
wind_speed_10m
)
{
}
filterArray
.
push
(
"
hourly.wind_speed_10m
"
);
if
(
precipitation_sum
)
{
}
filterArray
.
push
(
"
daily.precipitation_sum
"
);
if
(
wind_direction_10m
)
{
}
filterArray
.
push
(
"
hourly.wind_direction_10m
"
);
if
(
precipitation_hours
)
{
}
filterArray
.
push
(
"
daily.precipitation_hours
"
);
if
(
wind_gusts_10m
)
{
}
filterArray
.
push
(
"
hourly.wind_gusts_10m
"
);
if
(
wind_speed_10m_max
)
{
}
filterArray
.
push
(
"
daily.wind_speed_10m_max
"
);
if
(
daily_time
)
{
}
filterArray
.
push
(
"
daily.time
"
);
if
(
wind_gusts_10m_max
)
{
}
filterArray
.
push
(
"
daily.wind_gusts_10m_max
"
);
if
(
temperature_2m_max
)
{
}
filterArray
.
push
(
"
daily.temperature_2m_max
"
);
if
(
wind_direction_10m_dominant
)
{
}
filterArray
.
push
(
"
daily.wind_direction_10m_dominant
"
);
if
(
temperature_2m_min
)
{
}
filterArray
.
push
(
"
daily.temperature_2m_min
"
);
}
let
filterString
=
filterArray
.
join
(
"
,
"
);
if
(
temperature_2m_mean
)
{
filterArray
.
push
(
"
daily.temperature_2m_mean
"
);
}
if
(
precipitation_sum
)
{
filterArray
.
push
(
"
daily.precipitation_sum
"
);
}
if
(
precipitation_hours
)
{
filterArray
.
push
(
"
daily.precipitation_hours
"
);
}
if
(
wind_speed_10m_max
)
{
filterArray
.
push
(
"
daily.wind_speed_10m_max
"
);
}
if
(
wind_gusts_10m_max
)
{
filterArray
.
push
(
"
daily.wind_gusts_10m_max
"
);
}
if
(
wind_direction_10m_dominant
)
{
filterArray
.
push
(
"
daily.wind_direction_10m_dominant
"
);
}
let
filterString
=
filterArray
.
join
(
"
,
"
);
console
.
log
(
"
FilterString =
"
+
filterString
);
const
apiUrl
=
`http://localhost:8080/historicalweather?latitude=
${
latitude_text
}
&longitude=
${
longitude_text
}
&start_date=&end_date=&filter=
${
filterString
}
`
;
console
.
log
(
"
FilterString =
"
+
filterString
);
const
apiUrl
=
`http://localhost:8080/currentweather?q=
${
city_text
}
&filter=
${
filterString
}
`
;
fetch
(
apiUrl
)
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
if
(
!
response
.
ok
)
{
if
(
!
response
.
ok
)
{
...
@@ -267,10 +350,9 @@ const HistoricalWeatherData = (props) => {
...
@@ -267,10 +350,9 @@ const HistoricalWeatherData = (props) => {
});
});
}
}
function
searchAPI
()
{
function
searchAPI
()
{
const
cityInput
=
document
.
getElementById
(
"
city
"
).
value
;
const
cityInput
=
document
.
getElementById
(
"
city
_text
"
).
value
;
const
apiKey
=
"
1244099aeaee4b179e6111803241304
"
;
const
apiUrl
=
`http://localhost:8080/search?city=
${
cityInput
}
`
;
const
apiUrl
=
`https://api.weatherapi.com/v1/search.json?key=
${
apiKey
}
&q=
${
cityInput
}
`
;
fetch
(
apiUrl
)
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
...
@@ -281,12 +363,7 @@ const HistoricalWeatherData = (props) => {
...
@@ -281,12 +363,7 @@ const HistoricalWeatherData = (props) => {
return
response
.
json
();
return
response
.
json
();
})
})
.
then
((
data
)
=>
{
.
then
((
data
)
=>
{
// Wetterdaten anzeigen
setData
(
data
);
document
.
getElementById
(
"
weatherData
"
).
innerText
=
JSON
.
stringify
(
data
,
null
,
2
);
})
})
.
catch
((
error
)
=>
{
.
catch
((
error
)
=>
{
console
.
error
(
"
There was a problem with the fetch operation:
"
,
error
);
console
.
error
(
"
There was a problem with the fetch operation:
"
,
error
);
...
@@ -296,7 +373,25 @@ const HistoricalWeatherData = (props) => {
...
@@ -296,7 +373,25 @@ const HistoricalWeatherData = (props) => {
function
boolToWord
(
bool
)
{
function
boolToWord
(
bool
)
{
return
bool
?
"
yes
"
:
"
no
"
;
return
bool
?
"
yes
"
:
"
no
"
;
}
}
};
};
const
ListItem
=
({
name
,
country
,
region
,
lat
,
lon
})
=>
{
const
handleClick
=
()
=>
{
document
.
getElementById
(
"
city_text
"
).
value
=
name
;
document
.
getElementById
(
"
region_text
"
).
value
=
country
;
document
.
getElementById
(
"
country_text
"
).
value
=
region
;
document
.
getElementById
(
"
latitude_text
"
).
value
=
lat
;
document
.
getElementById
(
"
longitude_text
"
).
value
=
lon
;
};
export
default
HistoricalWeatherData
;
return
(
\ No newline at end of file
<
div
className
=
"
list-item
"
onClick
=
{
handleClick
}
>
<
div
className
=
"
title
"
>
{
name
}
<
/div
>
<
div
className
=
"
subtitle
"
>
Country
:
{
country
}
<
br
/>
Region
:
{
region
}
<
br
/>
Lat
:
{
lat
},
Lon
:
{
lon
}
<
/div
>
<
/div
>
);
};
export
default
HistoricalWeatherData
;
frontend/src/components/weather/weatherForecastData.js
View file @
ca8fe76d
...
@@ -3,363 +3,469 @@ import React from "react";
...
@@ -3,363 +3,469 @@ import React from "react";
import
"
./weatherForecastData.css
"
;
import
"
./weatherForecastData.css
"
;
const
WeatherForecastData
=
(
props
)
=>
{
const
WeatherForecastData
=
(
props
)
=>
{
return
(
return
(
<
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
=
"
filter
"
>
<
div
>
<
div
>
<
label
for
=
"
location
"
>
Location
:
<
/label
>
<
label
for
=
"
location
"
>
Location
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
/>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
/>
<
br
/>
<
br
/>
<
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
/>
<
br
/>
<
label
>
Country
:
<
/label
>
<
label
>
Country
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
country_text
"
placeholder
=
"
Country
"
/>
<
input
type
=
"
text
"
id
=
"
country_text
"
placeholder
=
"
Country
"
/>
<
br
/>
<
br
/>
<
label
>
Latitude
:
<
/label
>
<
label
>
Latitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
latitude_text
"
placeholder
=
"
Latitude
"
/>
<
input
type
=
"
text
"
id
=
"
latitude_text
"
placeholder
=
"
Latitude
"
/>
<
label
>
Longitude
:
<
/label
>
<
label
>
Longitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
longitude_text
"
placeholder
=
"
Longitude
"
/>
<
input
type
=
"
text
"
id
=
"
longitude_text
"
placeholder
=
"
Longitude
"
/>
<
br
/>
<
br
/>
<
/div
>
<
/div
>
<
div
>
<
div
>
<
input
type
=
"
checkbox
"
id
=
"
name
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
name
"
className
=
"
checkBoxFilter
"
/>
<
label
>
City
Name
<
/label
>
<
label
>
City
Name
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
region
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
region
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Region
<
/label
>
<
label
>
Region
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
country
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
country
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Country
<
/label
>
<
label
>
Country
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
lon
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
lon
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Longitude
<
/label
>
<
label
>
Longitude
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
lat
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
lat
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Latitude
<
/label
>
<
label
>
Latitude
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
tz_id
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
tz_id
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Timezone
Id
<
/label
>
<
label
>
Timezone
Id
<
/label
>
<
br
/>
<
br
/>
<
input
<
input
type
=
"
checkbox
"
type
=
"
checkbox
"
id
=
"
localtime_epoch
"
id
=
"
localtime_epoch
"
className
=
"
checkBoxFilter
"
className
=
"
checkBoxFilter
"
/>
/>
<
label
>
Localtime
Epoch
<
/label
>
<
label
>
Localtime
Epoch
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
localtime
"
className
=
"
checkBoxFilter
"
/>
<
input
<
label
>
Localtime
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
localtime
"
<
input
className
=
"
checkBoxFilter
"
type
=
"
checkbox
"
/>
id
=
"
last_updated_epoch
"
<
label
>
Localtime
<
/label
>
className
=
"
checkBoxFilter
"
<
br
/>
/>
<
input
<
label
>
Last
Updated
Epoch
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
last_updated_epoch
"
<
input
className
=
"
checkBoxFilter
"
type
=
"
checkbox
"
/>
id
=
"
last_updated
"
<
label
>
Last
Updated
Epoch
<
/label
>
className
=
"
checkBoxFilter
"
<
br
/>
/>
<
input
<
label
>
Last
Updated
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
last_updated
"
<
input
type
=
"
checkbox
"
id
=
"
date
"
class
=
"
checkBoxFilter
"
/>
className
=
"
checkBoxFilter
"
<
label
for
=
"
date
"
>
Date
<
/label
>
/>
<
br
/>
<
label
>
Last
Updated
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
date_epoch
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
date_epoch
"
>
Date
Epoch
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
date
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
date
"
>
Date
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
maxtemp
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
maxtemp
"
>
Max
Temperature
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
date_epoch
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
date_epoch
"
>
Date
Epoch
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
mintemp
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
mintemp
"
>
Min
Temperature
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
maxtemp
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
maxtemp
"
>
Max
Temperature
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
avgtemp
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
avgtemp
"
>
Average
Temperature
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
mintemp
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
mintemp
"
>
Min
Temperature
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
maxwind
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
maxwind
"
>
Max
Wind
Speed
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
avgtemp
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
avgtemp
"
>
Average
Temperature
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
totalprecip
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
totalprecip
"
>
Total
Precipitation
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
maxwind
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
maxwind
"
>
Max
Wind
Speed
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
avgvis
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
avgvis
"
>
Average
Visibility
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
totalprecip
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
totalprecip
"
>
Total
Precipitation
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
avghumidity
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
avghumidity
"
>
Average
Humidity
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
avgvis
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
avgvis
"
>
Average
Visibility
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
daily_will_it_rain
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
daily_will_it_rain
"
>
Daily
Will
it
Rain
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
avghumidity
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
avghumidity
"
>
Average
Humidity
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
daily_chance_of_rain
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
daily_chance_of_rain
"
>
Daily
Chance
of
Rain
<
/label
>
<
input
<
br
/>
type
=
"
checkbox
"
<
input
type
=
"
checkbox
"
id
=
"
daily_will_it_snow
"
class
=
"
checkBoxFilter
"
/>
id
=
"
daily_will_it_rain
"
<
label
for
=
"
daily_will_it_snow
"
>
Daily
Will
it
Snow
<
/label
>
class
=
"
checkBoxFilter
"
<
br
/>
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_chance_of_snow
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
daily_will_it_rain
"
>
Daily
Will
it
Rain
<
/label
>
<
label
for
=
"
daily_chance_of_snow
"
>
Daily
Chance
of
Snow
<
/label
>
<
br
/>
<
br
/>
<
input
<
input
type
=
"
checkbox
"
id
=
"
condition_text
"
class
=
"
checkBoxFilter
"
/>
type
=
"
checkbox
"
<
label
for
=
"
condition_text
"
>
Condition
Text
<
/label
>
id
=
"
daily_chance_of_rain
"
<
br
/>
class
=
"
checkBoxFilter
"
<
input
type
=
"
checkbox
"
id
=
"
condition_icon
"
class
=
"
checkBoxFilter
"
/>
/>
<
label
for
=
"
condition_icon
"
>
Condition
Icon
<
/label
>
<
label
for
=
"
daily_chance_of_rain
"
>
Daily
Chance
of
Rain
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_code
"
class
=
"
checkBoxFilter
"
/>
<
input
<
label
for
=
"
condition_code
"
>
Condition
Code
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
daily_will_it_snow
"
<
input
type
=
"
checkbox
"
id
=
"
uv
"
class
=
"
checkBoxFilter
"
/>
class
=
"
checkBoxFilter
"
<
label
for
=
"
uv
"
>
UV
Index
<
/label
>
/>
<
br
/>
<
label
for
=
"
daily_will_it_snow
"
>
Daily
Will
it
Snow
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
sunrise
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
sunrise
"
>
Sunrise
<
/label
>
<
input
<
br
/>
type
=
"
checkbox
"
<
input
type
=
"
checkbox
"
id
=
"
sunset
"
class
=
"
checkBoxFilter
"
/>
id
=
"
daily_chance_of_snow
"
<
label
for
=
"
sunset
"
>
Sunset
<
/label
>
class
=
"
checkBoxFilter
"
<
br
/>
/>
<
input
type
=
"
checkbox
"
id
=
"
moonrise
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
daily_chance_of_snow
"
>
Daily
Chance
of
Snow
<
/label
>
<
label
for
=
"
moonrise
"
>
Moonrise
<
/label
>
<
br
/>
<
br
/>
<
input
<
input
type
=
"
checkbox
"
id
=
"
moonset
"
class
=
"
checkBoxFilter
"
/>
type
=
"
checkbox
"
<
label
for
=
"
moonset
"
>
Moonset
<
/label
>
id
=
"
condition_text
"
<
br
/>
class
=
"
checkBoxFilter
"
<
input
type
=
"
checkbox
"
id
=
"
moon_phase
"
class
=
"
checkBoxFilter
"
/>
/>
<
label
for
=
"
moon_phase
"
>
Moon
Phase
<
/label
>
<
label
for
=
"
condition_text
"
>
Condition
Text
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
moon_illumination
"
class
=
"
checkBoxFilter
"
/>
<
input
<
label
for
=
"
moon_illumination
"
>
Moon
Illumination
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
condition_icon
"
<
input
type
=
"
checkbox
"
id
=
"
hour_time_epoch
"
class
=
"
checkBoxFilter
"
/>
class
=
"
checkBoxFilter
"
<
label
for
=
"
hour_time_epoch
"
>
Hour
Time
Epoch
<
/label
>
/>
<
br
/>
<
label
for
=
"
condition_icon
"
>
Condition
Icon
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
hour_time
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
hour_time
"
>
Hour
Time
<
/label
>
<
input
<
br
/>
type
=
"
checkbox
"
<
input
type
=
"
checkbox
"
id
=
"
hour_temp
"
class
=
"
checkBoxFilter
"
/>
id
=
"
condition_code
"
<
label
for
=
"
hour_temp
"
>
Hour
Temperature
<
/label
>
class
=
"
checkBoxFilter
"
<
br
/>
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_is_day
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_code
"
>
Condition
Code
<
/label
>
<
label
for
=
"
hour_is_day
"
>
Hour
Is
Day
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
uv
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_text
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
uv
"
>
UV
Index
<
/label
>
<
label
for
=
"
hour_condition_text
"
>
Hour
Condition
Text
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
sunrise
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_icon
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
sunrise
"
>
Sunrise
<
/label
>
<
label
for
=
"
hour_condition_icon
"
>
Hour
Condition
Icon
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
sunset
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_code
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
sunset
"
>
Sunset
<
/label
>
<
label
for
=
"
hour_condition_code
"
>
Hour
Condition
Code
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
moonrise
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
moonrise
"
>
Moonrise
<
/label
>
<
label
for
=
"
hour_wind
"
>
Hour
Wind
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
moonset
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind_degree
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
moonset
"
>
Moonset
<
/label
>
<
label
for
=
"
hour_wind_degree
"
>
Hour
Wind
Degree
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
moon_phase
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind_dir
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
moon_phase
"
>
Moon
Phase
<
/label
>
<
label
for
=
"
hour_wind_dir
"
>
Hour
Wind
Direction
<
/label
>
<
br
/>
<
br
/>
<
input
<
input
type
=
"
checkbox
"
id
=
"
hour_pressure
"
class
=
"
checkBoxFilter
"
/>
type
=
"
checkbox
"
<
label
for
=
"
hour_pressure
"
>
Hour
Pressure
<
/label
>
id
=
"
moon_illumination
"
<
br
/>
class
=
"
checkBoxFilter
"
<
input
type
=
"
checkbox
"
id
=
"
hour_precip
"
class
=
"
checkBoxFilter
"
/>
/>
<
label
for
=
"
hour_precip
"
>
Hour
Precipitation
<
/label
>
<
label
for
=
"
moon_illumination
"
>
Moon
Illumination
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_humidity
"
class
=
"
checkBoxFilter
"
/>
<
input
<
label
for
=
"
hour_humidity
"
>
Hour
Humidity
<
/label
>
type
=
"
checkbox
"
<
br
/>
id
=
"
hour_time_epoch
"
<
input
type
=
"
checkbox
"
id
=
"
hour_cloud
"
class
=
"
checkBoxFilter
"
/>
class
=
"
checkBoxFilter
"
<
label
for
=
"
hour_cloud
"
>
Hour
Cloud
<
/label
>
/>
<
br
/>
<
label
for
=
"
hour_time_epoch
"
>
Hour
Time
Epoch
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
hour_feelslike
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
hour_feelslike
"
>
Hour
Feels
Like
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
hour_time
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
hour_time
"
>
Hour
Time
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
hour_windchill
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
hour_windchill
"
>
Hour
Wind
Chill
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
hour_temp
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
hour_temp
"
>
Hour
Temperature
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
hour_heatindex
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
hour_heatindex
"
>
Hour
Heat
Index
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
hour_is_day
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
hour_is_day
"
>
Hour
Is
Day
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
hour_dewpoint
"
class
=
"
checkBoxFilter
"
/>
<
br
/>
<
label
for
=
"
hour_dewpoint
"
>
Hour
Dew
Point
<
/label
>
<
input
<
br
/>
type
=
"
checkbox
"
<
input
type
=
"
checkbox
"
id
=
"
hour_vis
"
class
=
"
checkBoxFilter
"
/>
id
=
"
hour_condition_text
"
<
label
for
=
"
hour_vis
"
>
Hour
Visibility
<
/label
>
class
=
"
checkBoxFilter
"
<
br
/>
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_gust
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_condition_text
"
>
Hour
Condition
Text
<
/label
>
<
label
for
=
"
hour_gust
"
>
Hour
Gust
<
/label
>
<
br
/>
<
br
/>
<
input
<
input
type
=
"
checkbox
"
id
=
"
hour_uv
"
class
=
"
checkBoxFilter
"
/>
type
=
"
checkbox
"
<
label
for
=
"
hour_uv
"
>
Hour
UV
<
/label
>
id
=
"
hour_condition_icon
"
<
br
/>
class
=
"
checkBoxFilter
"
<
br
/>
/>
<
div
>
<
label
for
=
"
hour_condition_icon
"
>
Hour
Condition
Icon
<
/label
>
<
label
for
=
"
units
"
>
Choose
a
unit
:
<
/label
>
<
br
/>
<
select
name
=
"
unnits
"
id
=
"
units
"
>
<
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
>
<
label
for
=
"
units
"
>
Choose
a
unit
:
<
/label
>
<
select
name
=
"
unnits
"
id
=
"
units
"
>
<
option
value
=
"
world
"
>
Rest
of
The
World
<
/option
>
<
option
value
=
"
world
"
>
Rest
of
The
World
<
/option
>
<
option
value
=
"
american
"
>
American
units
:
/eagles per shool shootings</
option
>
<
option
value
=
"
american
"
>
<
/select
>
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
>
<
div
>
<
div
id
=
"
apiUrl
"
>
<
button
className
=
"
thq-button-filled
"
onClick
=
{
getData
}
>
<
label
>
API
URL
:
<
/label
>
Generate
<
br
/>
<
input
className
=
"
input
"
type
=
"
text
"
id
=
"
apiUrloutput
"
readOnly
/>
<
/div
>
<
button
className
=
"
APIButton
"
onClick
=
{
searchAPI
}
>
City
api
<
/button
>
<
/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
>
<
button
className
=
"
APIButton
"
onClick
=
{
searchAPI
}
>
City
api
<
/button
>
<
br
/>
<
br
/>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
);
function
getData
()
{
const
city
=
document
.
getElementById
(
"
city_text
"
).
value
;
const
region
=
document
.
getElementById
(
"
region_text
"
).
value
;
const
country
=
document
.
getElementById
(
"
country_text
"
).
value
;
const
latitude
=
document
.
getElementById
(
"
latitude_text
"
).
value
;
const
longitude
=
document
.
getElementById
(
"
longitude_text
"
).
value
;
const
name
=
document
.
getElementById
(
"
name
"
).
checked
;
const
regionCheckbox
=
document
.
getElementById
(
"
region
"
).
checked
;
const
countryCheckbox
=
document
.
getElementById
(
"
country
"
).
checked
;
const
lon
=
document
.
getElementById
(
"
lon
"
).
checked
;
const
lat
=
document
.
getElementById
(
"
lat
"
).
checked
;
const
tz_id
=
document
.
getElementById
(
"
tz_id
"
).
checked
;
const
localtime_epoch
=
document
.
getElementById
(
"
localtime_epoch
"
).
checked
;
const
localtime
=
document
.
getElementById
(
"
localtime
"
).
checked
;
const
last_updated_epoch
=
document
.
getElementById
(
"
last_updated_epoch
"
).
checked
;
const
last_updated
=
document
.
getElementById
(
"
last_updated
"
).
checked
;
const
date
=
document
.
getElementById
(
"
date
"
).
checked
;
const
date_epoch
=
document
.
getElementById
(
"
date_epoch
"
).
checked
;
const
maxtemp
=
document
.
getElementById
(
"
maxtemp
"
).
checked
;
const
mintemp
=
document
.
getElementById
(
"
mintemp
"
).
checked
;
const
avgtemp
=
document
.
getElementById
(
"
avgtemp
"
).
checked
;
const
maxwind
=
document
.
getElementById
(
"
maxwind
"
).
checked
;
const
totalprecip
=
document
.
getElementById
(
"
totalprecip
"
).
checked
;
const
avgvis
=
document
.
getElementById
(
"
avgvis
"
).
checked
;
const
avghumidity
=
document
.
getElementById
(
"
avghumidity
"
).
checked
;
const
daily_will_it_rain
=
document
.
getElementById
(
"
daily_will_it_rain
"
).
checked
;
const
daily_chance_of_rain
=
document
.
getElementById
(
"
daily_chance_of_rain
"
).
checked
;
const
daily_will_it_snow
=
document
.
getElementById
(
"
daily_will_it_snow
"
).
checked
;
const
daily_chance_of_snow
=
document
.
getElementById
(
"
daily_chance_of_snow
"
).
checked
;
const
condition_text
=
document
.
getElementById
(
"
condition_text
"
).
checked
;
const
condition_icon
=
document
.
getElementById
(
"
condition_icon
"
).
checked
;
const
condition_code
=
document
.
getElementById
(
"
condition_code
"
).
checked
;
const
uv
=
document
.
getElementById
(
"
uv
"
).
checked
;
const
sunrise
=
document
.
getElementById
(
"
sunrise
"
).
checked
;
const
sunset
=
document
.
getElementById
(
"
sunset
"
).
checked
;
const
moonrise
=
document
.
getElementById
(
"
moonrise
"
).
checked
;
const
moonset
=
document
.
getElementById
(
"
moonset
"
).
checked
;
const
moon_phase
=
document
.
getElementById
(
"
moon_phase
"
).
checked
;
const
moon_illumination
=
document
.
getElementById
(
"
moon_illumination
"
).
checked
;
const
hour_time_epoch
=
document
.
getElementById
(
"
hour_time_epoch
"
).
checked
;
const
hour_time
=
document
.
getElementById
(
"
hour_time
"
).
checked
;
const
hour_temp
=
document
.
getElementById
(
"
hour_temp
"
).
checked
;
const
hour_is_day
=
document
.
getElementById
(
"
hour_is_day
"
).
checked
;
const
hour_condition_text
=
document
.
getElementById
(
"
hour_condition_text
"
).
checked
;
const
hour_condition_icon
=
document
.
getElementById
(
"
hour_condition_icon
"
).
checked
;
const
hour_condition_code
=
document
.
getElementById
(
"
hour_condition_code
"
).
checked
;
const
hour_wind
=
document
.
getElementById
(
"
hour_wind
"
).
checked
;
const
hour_wind_degree
=
document
.
getElementById
(
"
hour_wind_degree
"
).
checked
;
const
hour_wind_dir
=
document
.
getElementById
(
"
hour_wind_dir
"
).
checked
;
const
hour_pressure
=
document
.
getElementById
(
"
hour_pressure
"
).
checked
;
const
hour_precip
=
document
.
getElementById
(
"
hour_precip
"
).
checked
;
const
hour_humidity
=
document
.
getElementById
(
"
hour_humidity
"
).
checked
;
const
hour_cloud
=
document
.
getElementById
(
"
hour_cloud
"
).
checked
;
const
hour_feelslike
=
document
.
getElementById
(
"
hour_feelslike
"
).
checked
;
const
hour_windchill
=
document
.
getElementById
(
"
hour_windchill
"
).
checked
;
const
hour_heatindex
=
document
.
getElementById
(
"
hour_heatindex
"
).
checked
;
const
hour_dewpoint
=
document
.
getElementById
(
"
hour_dewpoint
"
).
checked
;
const
hour_vis
=
document
.
getElementById
(
"
hour_vis
"
).
checked
;
const
hour_gust
=
document
.
getElementById
(
"
hour_gust
"
).
checked
;
const
hour_uv
=
document
.
getElementById
(
"
hour_uv
"
).
checked
;
let
filterArray
=
[];
if
(
name
)
filterArray
.
push
(
"
name
"
);
if
(
regionCheckbox
)
filterArray
.
push
(
"
region
"
);
if
(
countryCheckbox
)
filterArray
.
push
(
"
country
"
);
if
(
lon
)
filterArray
.
push
(
"
lon
"
);
if
(
lat
)
filterArray
.
push
(
"
lat
"
);
if
(
tz_id
)
filterArray
.
push
(
"
tz_id
"
);
if
(
localtime_epoch
)
filterArray
.
push
(
"
localtime_epoch
"
);
if
(
localtime
)
filterArray
.
push
(
"
localtime
"
);
if
(
last_updated_epoch
)
filterArray
.
push
(
"
last_updated_epoch
"
);
if
(
last_updated
)
filterArray
.
push
(
"
last_updated
"
);
if
(
date
)
filterArray
.
push
(
"
date
"
);
if
(
date_epoch
)
filterArray
.
push
(
"
date_epoch
"
);
if
(
maxtemp
)
filterArray
.
push
(
"
maxtemp
"
);
if
(
mintemp
)
filterArray
.
push
(
"
mintemp
"
);
if
(
avgtemp
)
filterArray
.
push
(
"
avgtemp
"
);
if
(
maxwind
)
filterArray
.
push
(
"
maxwind
"
);
if
(
totalprecip
)
filterArray
.
push
(
"
totalprecip
"
);
if
(
avgvis
)
filterArray
.
push
(
"
avgvis
"
);
if
(
avghumidity
)
filterArray
.
push
(
"
avghumidity
"
);
if
(
daily_will_it_rain
)
filterArray
.
push
(
"
daily_will_it_rain
"
);
if
(
daily_chance_of_rain
)
filterArray
.
push
(
"
daily_chance_of_rain
"
);
if
(
daily_will_it_snow
)
filterArray
.
push
(
"
daily_will_it_snow
"
);
if
(
daily_chance_of_snow
)
filterArray
.
push
(
"
daily_chance_of_snow
"
);
if
(
condition_text
)
filterArray
.
push
(
"
condition_text
"
);
if
(
condition_icon
)
filterArray
.
push
(
"
condition_icon
"
);
if
(
condition_code
)
filterArray
.
push
(
"
condition_code
"
);
if
(
uv
)
filterArray
.
push
(
"
uv
"
);
if
(
sunrise
)
filterArray
.
push
(
"
sunrise
"
);
if
(
sunset
)
filterArray
.
push
(
"
sunset
"
);
if
(
moonrise
)
filterArray
.
push
(
"
moonrise
"
);
if
(
moonset
)
filterArray
.
push
(
"
moonset
"
);
if
(
moon_phase
)
filterArray
.
push
(
"
moon_phase
"
);
if
(
moon_illumination
)
filterArray
.
push
(
"
moon_illumination
"
);
if
(
hour_time_epoch
)
filterArray
.
push
(
"
hourly_time_epoch
"
);
if
(
hour_time
)
filterArray
.
push
(
"
hourly_time
"
);
if
(
hour_temp
)
filterArray
.
push
(
"
hourly_temp
"
);
if
(
hour_is_day
)
filterArray
.
push
(
"
hourly_is_day
"
);
if
(
hour_condition_text
)
filterArray
.
push
(
"
hourly_condition_text
"
);
if
(
hour_condition_icon
)
filterArray
.
push
(
"
hourly_condition_icon
"
);
if
(
hour_condition_code
)
filterArray
.
push
(
"
hourly_condition_code
"
);
if
(
hour_wind
)
filterArray
.
push
(
"
hourly_wind
"
);
if
(
hour_wind_degree
)
filterArray
.
push
(
"
hourly_wind_degree
"
);
if
(
hour_wind_dir
)
filterArray
.
push
(
"
hourly_wind_dir
"
);
if
(
hour_pressure
)
filterArray
.
push
(
"
hourly_pressure
"
);
if
(
hour_precip
)
filterArray
.
push
(
"
hourly_precip
"
);
if
(
hour_humidity
)
filterArray
.
push
(
"
hourly_humidity
"
);
if
(
hour_cloud
)
filterArray
.
push
(
"
hourly_cloud
"
);
if
(
hour_feelslike
)
filterArray
.
push
(
"
hourly_feelslike
"
);
if
(
hour_windchill
)
filterArray
.
push
(
"
hourly_windchill
"
);
if
(
hour_heatindex
)
filterArray
.
push
(
"
hourly_heatindex
"
);
if
(
hour_dewpoint
)
filterArray
.
push
(
"
hourly_dewpoint
"
);
if
(
hour_vis
)
filterArray
.
push
(
"
hourly_vis
"
);
if
(
hour_gust
)
filterArray
.
push
(
"
hourly_gust
"
);
if
(
hour_uv
)
filterArray
.
push
(
"
hourly_uv
"
);
let
filterString
=
filterArray
.
join
(
"
,
"
);
console
.
log
(
"
FilterString =
"
+
filterString
);
function
getData
()
{
const
apiUrl
=
`http://localhost:8080/forcastweather?q=
${
latitude_text
}
,
${
longitude_text
}
&filter=
${
filterString
}
`
;
const
city
=
document
.
getElementById
(
"
city_text
"
).
value
;
const
region
=
document
.
getElementById
(
"
region_text
"
).
value
;
const
country
=
document
.
getElementById
(
"
country_text
"
).
value
;
const
latitude
=
document
.
getElementById
(
"
latitude_text
"
).
value
;
const
longitude
=
document
.
getElementById
(
"
longitude_text
"
).
value
;
const
name
=
document
.
getElementById
(
"
name
"
).
checked
;
const
regionCheckbox
=
document
.
getElementById
(
"
region
"
).
checked
;
const
countryCheckbox
=
document
.
getElementById
(
"
country
"
).
checked
;
const
lon
=
document
.
getElementById
(
"
lon
"
).
checked
;
const
lat
=
document
.
getElementById
(
"
lat
"
).
checked
;
const
tz_id
=
document
.
getElementById
(
"
tz_id
"
).
checked
;
const
localtime_epoch
=
document
.
getElementById
(
"
localtime_epoch
"
).
checked
;
const
localtime
=
document
.
getElementById
(
"
localtime
"
).
checked
;
const
last_updated_epoch
=
document
.
getElementById
(
"
last_updated_epoch
"
).
checked
;
const
last_updated
=
document
.
getElementById
(
"
last_updated
"
).
checked
;
const
date
=
document
.
getElementById
(
"
date
"
).
checked
;
const
date_epoch
=
document
.
getElementById
(
"
date_epoch
"
).
checked
;
const
maxtemp
=
document
.
getElementById
(
"
maxtemp
"
).
checked
;
const
mintemp
=
document
.
getElementById
(
"
mintemp
"
).
checked
;
const
avgtemp
=
document
.
getElementById
(
"
avgtemp
"
).
checked
;
const
maxwind
=
document
.
getElementById
(
"
maxwind
"
).
checked
;
const
totalprecip
=
document
.
getElementById
(
"
totalprecip
"
).
checked
;
const
avgvis
=
document
.
getElementById
(
"
avgvis
"
).
checked
;
const
avghumidity
=
document
.
getElementById
(
"
avghumidity
"
).
checked
;
const
daily_will_it_rain
=
document
.
getElementById
(
"
daily_will_it_rain
"
).
checked
;
const
daily_chance_of_rain
=
document
.
getElementById
(
"
daily_chance_of_rain
"
).
checked
;
const
daily_will_it_snow
=
document
.
getElementById
(
"
daily_will_it_snow
"
).
checked
;
const
daily_chance_of_snow
=
document
.
getElementById
(
"
daily_chance_of_snow
"
).
checked
;
const
condition_text
=
document
.
getElementById
(
"
condition_text
"
).
checked
;
const
condition_icon
=
document
.
getElementById
(
"
condition_icon
"
).
checked
;
const
condition_code
=
document
.
getElementById
(
"
condition_code
"
).
checked
;
const
uv
=
document
.
getElementById
(
"
uv
"
).
checked
;
const
sunrise
=
document
.
getElementById
(
"
sunrise
"
).
checked
;
const
sunset
=
document
.
getElementById
(
"
sunset
"
).
checked
;
const
moonrise
=
document
.
getElementById
(
"
moonrise
"
).
checked
;
const
moonset
=
document
.
getElementById
(
"
moonset
"
).
checked
;
const
moon_phase
=
document
.
getElementById
(
"
moon_phase
"
).
checked
;
const
moon_illumination
=
document
.
getElementById
(
"
moon_illumination
"
).
checked
;
const
hour_time_epoch
=
document
.
getElementById
(
"
hour_time_epoch
"
).
checked
;
const
hour_time
=
document
.
getElementById
(
"
hour_time
"
).
checked
;
const
hour_temp
=
document
.
getElementById
(
"
hour_temp
"
).
checked
;
const
hour_is_day
=
document
.
getElementById
(
"
hour_is_day
"
).
checked
;
const
hour_condition_text
=
document
.
getElementById
(
"
hour_condition_text
"
).
checked
;
const
hour_condition_icon
=
document
.
getElementById
(
"
hour_condition_icon
"
).
checked
;
const
hour_condition_code
=
document
.
getElementById
(
"
hour_condition_code
"
).
checked
;
const
hour_wind
=
document
.
getElementById
(
"
hour_wind
"
).
checked
;
const
hour_wind_degree
=
document
.
getElementById
(
"
hour_wind_degree
"
).
checked
;
const
hour_wind_dir
=
document
.
getElementById
(
"
hour_wind_dir
"
).
checked
;
const
hour_pressure
=
document
.
getElementById
(
"
hour_pressure
"
).
checked
;
const
hour_precip
=
document
.
getElementById
(
"
hour_precip
"
).
checked
;
const
hour_humidity
=
document
.
getElementById
(
"
hour_humidity
"
).
checked
;
const
hour_cloud
=
document
.
getElementById
(
"
hour_cloud
"
).
checked
;
const
hour_feelslike
=
document
.
getElementById
(
"
hour_feelslike
"
).
checked
;
const
hour_windchill
=
document
.
getElementById
(
"
hour_windchill
"
).
checked
;
const
hour_heatindex
=
document
.
getElementById
(
"
hour_heatindex
"
).
checked
;
const
hour_dewpoint
=
document
.
getElementById
(
"
hour_dewpoint
"
).
checked
;
const
hour_vis
=
document
.
getElementById
(
"
hour_vis
"
).
checked
;
const
hour_gust
=
document
.
getElementById
(
"
hour_gust
"
).
checked
;
const
hour_uv
=
document
.
getElementById
(
"
hour_uv
"
).
checked
;
let
filterArray
=
[];
if
(
name
)
filterArray
.
push
(
"
name
"
);
if
(
regionCheckbox
)
filterArray
.
push
(
"
region
"
);
if
(
countryCheckbox
)
filterArray
.
push
(
"
country
"
);
if
(
lon
)
filterArray
.
push
(
"
lon
"
);
if
(
lat
)
filterArray
.
push
(
"
lat
"
);
if
(
tz_id
)
filterArray
.
push
(
"
tz_id
"
);
if
(
localtime_epoch
)
filterArray
.
push
(
"
localtime_epoch
"
);
if
(
localtime
)
filterArray
.
push
(
"
localtime
"
);
if
(
last_updated_epoch
)
filterArray
.
push
(
"
last_updated_epoch
"
);
if
(
last_updated
)
filterArray
.
push
(
"
last_updated
"
);
if
(
date
)
filterArray
.
push
(
"
date
"
);
if
(
date_epoch
)
filterArray
.
push
(
"
date_epoch
"
);
if
(
maxtemp
)
filterArray
.
push
(
"
maxtemp
"
);
if
(
mintemp
)
filterArray
.
push
(
"
mintemp
"
);
if
(
avgtemp
)
filterArray
.
push
(
"
avgtemp
"
);
if
(
maxwind
)
filterArray
.
push
(
"
maxwind
"
);
if
(
totalprecip
)
filterArray
.
push
(
"
totalprecip
"
);
if
(
avgvis
)
filterArray
.
push
(
"
avgvis
"
);
if
(
avghumidity
)
filterArray
.
push
(
"
avghumidity
"
);
if
(
daily_will_it_rain
)
filterArray
.
push
(
"
daily_will_it_rain
"
);
if
(
daily_chance_of_rain
)
filterArray
.
push
(
"
daily_chance_of_rain
"
);
if
(
daily_will_it_snow
)
filterArray
.
push
(
"
daily_will_it_snow
"
);
if
(
daily_chance_of_snow
)
filterArray
.
push
(
"
daily_chance_of_snow
"
);
if
(
condition_text
)
filterArray
.
push
(
"
condition_text
"
);
if
(
condition_icon
)
filterArray
.
push
(
"
condition_icon
"
);
if
(
condition_code
)
filterArray
.
push
(
"
condition_code
"
);
if
(
uv
)
filterArray
.
push
(
"
uv
"
);
if
(
sunrise
)
filterArray
.
push
(
"
sunrise
"
);
if
(
sunset
)
filterArray
.
push
(
"
sunset
"
);
if
(
moonrise
)
filterArray
.
push
(
"
moonrise
"
);
if
(
moonset
)
filterArray
.
push
(
"
moonset
"
);
if
(
moon_phase
)
filterArray
.
push
(
"
moon_phase
"
);
if
(
moon_illumination
)
filterArray
.
push
(
"
moon_illumination
"
);
if
(
hour_time_epoch
)
filterArray
.
push
(
"
hourly_time_epoch
"
);
if
(
hour_time
)
filterArray
.
push
(
"
hourly_time
"
);
if
(
hour_temp
)
filterArray
.
push
(
"
hourly_temp
"
);
if
(
hour_is_day
)
filterArray
.
push
(
"
hourly_is_day
"
);
if
(
hour_condition_text
)
filterArray
.
push
(
"
hourly_condition_text
"
);
if
(
hour_condition_icon
)
filterArray
.
push
(
"
hourly_condition_icon
"
);
if
(
hour_condition_code
)
filterArray
.
push
(
"
hourly_condition_code
"
);
if
(
hour_wind
)
filterArray
.
push
(
"
hourly_wind
"
);
if
(
hour_wind_degree
)
filterArray
.
push
(
"
hourly_wind_degree
"
);
if
(
hour_wind_dir
)
filterArray
.
push
(
"
hourly_wind_dir
"
);
if
(
hour_pressure
)
filterArray
.
push
(
"
hourly_pressure
"
);
if
(
hour_precip
)
filterArray
.
push
(
"
hourly_precip
"
);
if
(
hour_humidity
)
filterArray
.
push
(
"
hourly_humidity
"
);
if
(
hour_cloud
)
filterArray
.
push
(
"
hourly_cloud
"
);
if
(
hour_feelslike
)
filterArray
.
push
(
"
hourly_feelslike
"
);
if
(
hour_windchill
)
filterArray
.
push
(
"
hourly_windchill
"
);
if
(
hour_heatindex
)
filterArray
.
push
(
"
hourly_heatindex
"
);
if
(
hour_dewpoint
)
filterArray
.
push
(
"
hourly_dewpoint
"
);
if
(
hour_vis
)
filterArray
.
push
(
"
hourly_vis
"
);
if
(
hour_gust
)
filterArray
.
push
(
"
hourly_gust
"
);
if
(
hour_uv
)
filterArray
.
push
(
"
hourly_uv
"
);
let
filterString
=
filterArray
.
join
(
"
,
"
);
console
.
log
(
"
FilterString =
"
+
filterString
);
const
apiUrl
=
`http://localhost:8080/currentweather?q=
${
city_text
}
&filter=
${
filterString
}
`
;
fetch
(
apiUrl
)
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
if
(
!
response
.
ok
)
{
if
(
!
response
.
ok
)
{
...
@@ -381,10 +487,9 @@ const WeatherForecastData = (props) => {
...
@@ -381,10 +487,9 @@ const WeatherForecastData = (props) => {
});
});
}
}
function
searchAPI
()
{
function
searchAPI
()
{
const
cityInput
=
document
.
getElementById
(
"
city
"
).
value
;
const
cityInput
=
document
.
getElementById
(
"
city
_text
"
).
value
;
const
apiKey
=
"
1244099aeaee4b179e6111803241304
"
;
const
apiUrl
=
`http://localhost:8080/search?city=
${
cityInput
}
`
;
const
apiUrl
=
`https://api.weatherapi.com/v1/search.json?key=
${
apiKey
}
&q=
${
cityInput
}
`
;
fetch
(
apiUrl
)
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
...
@@ -395,12 +500,7 @@ const WeatherForecastData = (props) => {
...
@@ -395,12 +500,7 @@ const WeatherForecastData = (props) => {
return
response
.
json
();
return
response
.
json
();
})
})
.
then
((
data
)
=>
{
.
then
((
data
)
=>
{
// Wetterdaten anzeigen
setData
(
data
);
document
.
getElementById
(
"
weatherData
"
).
innerText
=
JSON
.
stringify
(
data
,
null
,
2
);
})
})
.
catch
((
error
)
=>
{
.
catch
((
error
)
=>
{
console
.
error
(
"
There was a problem with the fetch operation:
"
,
error
);
console
.
error
(
"
There was a problem with the fetch operation:
"
,
error
);
...
@@ -410,7 +510,25 @@ const WeatherForecastData = (props) => {
...
@@ -410,7 +510,25 @@ const WeatherForecastData = (props) => {
function
boolToWord
(
bool
)
{
function
boolToWord
(
bool
)
{
return
bool
?
"
yes
"
:
"
no
"
;
return
bool
?
"
yes
"
:
"
no
"
;
}
}
};
};
const
ListItem
=
({
name
,
country
,
region
,
lat
,
lon
})
=>
{
const
handleClick
=
()
=>
{
document
.
getElementById
(
"
city_text
"
).
value
=
name
;
document
.
getElementById
(
"
region_text
"
).
value
=
country
;
document
.
getElementById
(
"
country_text
"
).
value
=
region
;
document
.
getElementById
(
"
latitude_text
"
).
value
=
lat
;
document
.
getElementById
(
"
longitude_text
"
).
value
=
lon
;
};
export
default
WeatherForecastData
;
return
(
\ No newline at end of file
<
div
className
=
"
list-item
"
onClick
=
{
handleClick
}
>
<
div
className
=
"
title
"
>
{
name
}
<
/div
>
<
div
className
=
"
subtitle
"
>
Country
:
{
country
}
<
br
/>
Region
:
{
region
}
<
br
/>
Lat
:
{
lat
},
Lon
:
{
lon
}
<
/div
>
<
/div
>
);
};
export
default
WeatherForecastData
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a 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