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
Show 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
...
@@ -33,16 +33,28 @@ const HistoricalWeatherData = (props) => {
...
@@ -33,16 +33,28 @@ const HistoricalWeatherData = (props) => {
<
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
type
=
"
checkbox
"
id
=
"
generationtime_ms
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
generationtime_ms
"
>
Generation
Time
(
ms
)
<
/label
>
<
label
for
=
"
generationtime_ms
"
>
Generation
Time
(
ms
)
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
utc_offset_seconds
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
utc_offset_seconds
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
utc_offset_seconds
"
>
UTC
Offset
(
Seconds
)
<
/label
>
<
label
for
=
"
utc_offset_seconds
"
>
UTC
Offset
(
Seconds
)
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
timezone
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
timezone
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
timezone
"
>
Timezone
<
/label
>
<
label
for
=
"
timezone
"
>
Timezone
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
timezone_abbreviation
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
timezone_abbreviation
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
timezone_abbreviation
"
>
Timezone
Abbreviation
<
/label
>
<
label
for
=
"
timezone_abbreviation
"
>
Timezone
Abbreviation
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
elevation
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
elevation
"
class
=
"
checkBoxFilter
"
/>
...
@@ -56,22 +68,38 @@ const HistoricalWeatherData = (props) => {
...
@@ -56,22 +68,38 @@ const HistoricalWeatherData = (props) => {
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temperature_2m
"
>
Temperature
2
m
<
/label
>
<
label
for
=
"
temperature_2m
"
>
Temperature
2
m
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
relative_humidity_2m
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
relative_humidity_2m
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
relative_humidity_2m
"
>
Relative
Humidity
2
m
<
/label
>
<
label
for
=
"
relative_humidity_2m
"
>
Relative
Humidity
2
m
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
precipitation
"
>
Precipitation
<
/label
>
<
label
for
=
"
precipitation
"
>
Precipitation
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
surface_pressure
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
surface_pressure
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
surface_pressure
"
>
Surface
Pressure
<
/label
>
<
label
for
=
"
surface_pressure
"
>
Surface
Pressure
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_speed_10m
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_speed_10m
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_speed_10m
"
>
Wind
Speed
10
m
<
/label
>
<
label
for
=
"
wind_speed_10m
"
>
Wind
Speed
10
m
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_direction_10m
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_direction_10m
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_direction_10m
"
>
Wind
Direction
10
m
<
/label
>
<
label
for
=
"
wind_direction_10m
"
>
Wind
Direction
10
m
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_gusts_10m
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_gusts_10m
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_gusts_10m
"
>
Wind
Gusts
10
m
<
/label
>
<
label
for
=
"
wind_gusts_10m
"
>
Wind
Gusts
10
m
<
/label
>
<
br
/>
<
br
/>
<
p
>
Dayly
<
/p
>
<
p
>
Dayly
<
/p
>
...
@@ -79,35 +107,71 @@ const HistoricalWeatherData = (props) => {
...
@@ -79,35 +107,71 @@ const HistoricalWeatherData = (props) => {
<
input
type
=
"
checkbox
"
id
=
"
daily_time
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_time
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
daily_time
"
>
Daily
Time
<
/label
>
<
label
for
=
"
daily_time
"
>
Daily
Time
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_max
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_max
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temperature_2m_max
"
>
Temperature
2
m
Max
<
/label
>
<
label
for
=
"
temperature_2m_max
"
>
Temperature
2
m
Max
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_min
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_min
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temperature_2m_min
"
>
Temperature
2
m
Min
<
/label
>
<
label
for
=
"
temperature_2m_min
"
>
Temperature
2
m
Min
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_mean
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
temperature_2m_mean
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temperature_2m_mean
"
>
Temperature
2
m
Mean
<
/label
>
<
label
for
=
"
temperature_2m_mean
"
>
Temperature
2
m
Mean
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation_sum
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation_sum
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
precipitation_sum
"
>
Precipitation
Sum
<
/label
>
<
label
for
=
"
precipitation_sum
"
>
Precipitation
Sum
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation_hours
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
precipitation_hours
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
precipitation_hours
"
>
Precipitation
Hours
<
/label
>
<
label
for
=
"
precipitation_hours
"
>
Precipitation
Hours
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_speed_10m_max
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_speed_10m_max
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_speed_10m_max
"
>
Wind
Speed
10
m
Max
<
/label
>
<
label
for
=
"
wind_speed_10m_max
"
>
Wind
Speed
10
m
Max
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_gusts_10m_max
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_gusts_10m_max
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_gusts_10m_max
"
>
Wind
Gusts
10
m
Max
<
/label
>
<
label
for
=
"
wind_gusts_10m_max
"
>
Wind
Gusts
10
m
Max
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_direction_10m_dominant
"
class
=
"
checkBoxFilter
"
/>
<
input
<
label
for
=
"
wind_direction_10m_dominant
"
>
Wind
Direction
10
m
Dominant
<
/label
>
type
=
"
checkbox
"
id
=
"
wind_direction_10m_dominant
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_direction_10m_dominant
"
>
Wind
Direction
10
m
Dominant
<
/label
>
<
br
/>
<
br
/>
<
div
>
<
div
>
<
label
for
=
"
units
"
>
Choose
a
unit
:
<
/label
>
<
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
"
>
...
@@ -142,28 +206,47 @@ const HistoricalWeatherData = (props) => {
...
@@ -142,28 +206,47 @@ const HistoricalWeatherData = (props) => {
//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
utc_offset_seconds
=
document
.
getElementById
(
"
utc_offset_seconds
"
).
checked
;
const
timezone
=
document
.
getElementById
(
"
timezone
"
).
checked
;
const
timezone
=
document
.
getElementById
(
"
timezone
"
).
checked
;
const
timezone_abbreviation
=
document
.
getElementById
(
"
timezone_abbreviation
"
).
checked
;
const
timezone_abbreviation
=
document
.
getElementById
(
"
timezone_abbreviation
"
).
checked
;
const
elevation
=
document
.
getElementById
(
"
elevation
"
).
checked
;
const
elevation
=
document
.
getElementById
(
"
elevation
"
).
checked
;
const
hourly_time
=
document
.
getElementById
(
"
hourly_time
"
).
checked
;
const
hourly_time
=
document
.
getElementById
(
"
hourly_time
"
).
checked
;
const
temperature_2m
=
document
.
getElementById
(
"
temperature_2m
"
).
checked
;
const
temperature_2m
=
document
.
getElementById
(
"
temperature_2m
"
).
checked
;
const
relative_humidity_2m
=
document
.
getElementById
(
"
relative_humidity_2m
"
).
checked
;
const
relative_humidity_2m
=
document
.
getElementById
(
"
relative_humidity_2m
"
).
checked
;
const
precipitation
=
document
.
getElementById
(
"
precipitation
"
).
checked
;
const
precipitation
=
document
.
getElementById
(
"
precipitation
"
).
checked
;
const
surface_pressure
=
document
.
getElementById
(
"
surface_pressure
"
).
checked
;
const
surface_pressure
=
document
.
getElementById
(
"
surface_pressure
"
).
checked
;
const
wind_speed_10m
=
document
.
getElementById
(
"
wind_speed_10m
"
).
checked
;
const
wind_speed_10m
=
document
.
getElementById
(
"
wind_speed_10m
"
).
checked
;
const
wind_direction_10m
=
document
.
getElementById
(
"
wind_direction_10m
"
).
checked
;
const
wind_direction_10m
=
document
.
getElementById
(
"
wind_direction_10m
"
).
checked
;
const
wind_gusts_10m
=
document
.
getElementById
(
"
wind_gusts_10m
"
).
checked
;
const
wind_gusts_10m
=
document
.
getElementById
(
"
wind_gusts_10m
"
).
checked
;
const
daily_time
=
document
.
getElementById
(
"
daily_time
"
).
checked
;
const
daily_time
=
document
.
getElementById
(
"
daily_time
"
).
checked
;
const
temperature_2m_max
=
document
.
getElementById
(
"
temperature_2m_max
"
).
checked
;
const
temperature_2m_max
=
const
temperature_2m_min
=
document
.
getElementById
(
"
temperature_2m_min
"
).
checked
;
document
.
getElementById
(
"
temperature_2m_max
"
).
checked
;
const
temperature_2m_mean
=
document
.
getElementById
(
"
temperature_2m_mean
"
).
checked
;
const
temperature_2m_min
=
const
precipitation_sum
=
document
.
getElementById
(
"
precipitation_sum
"
).
checked
;
document
.
getElementById
(
"
temperature_2m_min
"
).
checked
;
const
precipitation_hours
=
document
.
getElementById
(
"
precipitation_hours
"
).
checked
;
const
temperature_2m_mean
=
document
.
getElementById
(
const
wind_speed_10m_max
=
document
.
getElementById
(
"
wind_speed_10m_max
"
).
checked
;
"
temperature_2m_mean
"
const
wind_gusts_10m_max
=
document
.
getElementById
(
"
wind_gusts_10m_max
"
).
checked
;
).
checked
;
const
wind_direction_10m_dominant
=
document
.
getElementById
(
"
wind_direction_10m_dominant
"
).
checked
;
const
precipitation_sum
=
document
.
getElementById
(
"
precipitation_sum
"
).
checked
;
const
precipitation_hours
=
document
.
getElementById
(
"
precipitation_hours
"
).
checked
;
const
wind_speed_10m_max
=
document
.
getElementById
(
"
wind_speed_10m_max
"
).
checked
;
const
wind_gusts_10m_max
=
document
.
getElementById
(
"
wind_gusts_10m_max
"
).
checked
;
const
wind_direction_10m_dominant
=
document
.
getElementById
(
"
wind_direction_10m_dominant
"
).
checked
;
let
filterArray
=
[];
let
filterArray
=
[];
...
@@ -244,7 +327,7 @@ const HistoricalWeatherData = (props) => {
...
@@ -244,7 +327,7 @@ const HistoricalWeatherData = (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/
historicalweather?latitude=
${
latitude_text
}
&longitude=
${
longitude_text
}
&start_date=&end_date=
&filter=
${
filterString
}
`
;
fetch
(
apiUrl
)
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
...
@@ -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
;
};
return
(
<
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
;
export
default
HistoricalWeatherData
;
frontend/src/components/weather/weatherForecastData.js
View file @
ca8fe76d
...
@@ -50,7 +50,11 @@ const WeatherForecastData = (props) => {
...
@@ -50,7 +50,11 @@ const WeatherForecastData = (props) => {
/>
/>
<
label
>
Localtime
Epoch
<
/label
>
<
label
>
Localtime
Epoch
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
localtime
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
localtime
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Localtime
<
/label
>
<
label
>
Localtime
<
/label
>
<
br
/>
<
br
/>
<
input
<
input
...
@@ -94,25 +98,53 @@ const WeatherForecastData = (props) => {
...
@@ -94,25 +98,53 @@ const WeatherForecastData = (props) => {
<
input
type
=
"
checkbox
"
id
=
"
avghumidity
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
avghumidity
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
avghumidity
"
>
Average
Humidity
<
/label
>
<
label
for
=
"
avghumidity
"
>
Average
Humidity
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_will_it_rain
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_will_it_rain
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
daily_will_it_rain
"
>
Daily
Will
it
Rain
<
/label
>
<
label
for
=
"
daily_will_it_rain
"
>
Daily
Will
it
Rain
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_chance_of_rain
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_chance_of_rain
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
daily_chance_of_rain
"
>
Daily
Chance
of
Rain
<
/label
>
<
label
for
=
"
daily_chance_of_rain
"
>
Daily
Chance
of
Rain
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_will_it_snow
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_will_it_snow
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
daily_will_it_snow
"
>
Daily
Will
it
Snow
<
/label
>
<
label
for
=
"
daily_will_it_snow
"
>
Daily
Will
it
Snow
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_chance_of_snow
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
daily_chance_of_snow
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
daily_chance_of_snow
"
>
Daily
Chance
of
Snow
<
/label
>
<
label
for
=
"
daily_chance_of_snow
"
>
Daily
Chance
of
Snow
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_text
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_text
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_text
"
>
Condition
Text
<
/label
>
<
label
for
=
"
condition_text
"
>
Condition
Text
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_icon
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_icon
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_icon
"
>
Condition
Icon
<
/label
>
<
label
for
=
"
condition_icon
"
>
Condition
Icon
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_code
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_code
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_code
"
>
Condition
Code
<
/label
>
<
label
for
=
"
condition_code
"
>
Condition
Code
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
uv
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
uv
"
class
=
"
checkBoxFilter
"
/>
...
@@ -133,10 +165,18 @@ const WeatherForecastData = (props) => {
...
@@ -133,10 +165,18 @@ const WeatherForecastData = (props) => {
<
input
type
=
"
checkbox
"
id
=
"
moon_phase
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
moon_phase
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
moon_phase
"
>
Moon
Phase
<
/label
>
<
label
for
=
"
moon_phase
"
>
Moon
Phase
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
moon_illumination
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
moon_illumination
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
moon_illumination
"
>
Moon
Illumination
<
/label
>
<
label
for
=
"
moon_illumination
"
>
Moon
Illumination
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_time_epoch
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_time_epoch
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_time_epoch
"
>
Hour
Time
Epoch
<
/label
>
<
label
for
=
"
hour_time_epoch
"
>
Hour
Time
Epoch
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_time
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_time
"
class
=
"
checkBoxFilter
"
/>
...
@@ -148,46 +188,90 @@ const WeatherForecastData = (props) => {
...
@@ -148,46 +188,90 @@ const WeatherForecastData = (props) => {
<
input
type
=
"
checkbox
"
id
=
"
hour_is_day
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_is_day
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_is_day
"
>
Hour
Is
Day
<
/label
>
<
label
for
=
"
hour_is_day
"
>
Hour
Is
Day
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_text
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_text
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_condition_text
"
>
Hour
Condition
Text
<
/label
>
<
label
for
=
"
hour_condition_text
"
>
Hour
Condition
Text
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_icon
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_icon
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_condition_icon
"
>
Hour
Condition
Icon
<
/label
>
<
label
for
=
"
hour_condition_icon
"
>
Hour
Condition
Icon
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_code
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_condition_code
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_condition_code
"
>
Hour
Condition
Code
<
/label
>
<
label
for
=
"
hour_condition_code
"
>
Hour
Condition
Code
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_wind
"
>
Hour
Wind
<
/label
>
<
label
for
=
"
hour_wind
"
>
Hour
Wind
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind_degree
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind_degree
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_wind_degree
"
>
Hour
Wind
Degree
<
/label
>
<
label
for
=
"
hour_wind_degree
"
>
Hour
Wind
Degree
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind_dir
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_wind_dir
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_wind_dir
"
>
Hour
Wind
Direction
<
/label
>
<
label
for
=
"
hour_wind_dir
"
>
Hour
Wind
Direction
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_pressure
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_pressure
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_pressure
"
>
Hour
Pressure
<
/label
>
<
label
for
=
"
hour_pressure
"
>
Hour
Pressure
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_precip
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_precip
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_precip
"
>
Hour
Precipitation
<
/label
>
<
label
for
=
"
hour_precip
"
>
Hour
Precipitation
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_humidity
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_humidity
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_humidity
"
>
Hour
Humidity
<
/label
>
<
label
for
=
"
hour_humidity
"
>
Hour
Humidity
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_cloud
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_cloud
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_cloud
"
>
Hour
Cloud
<
/label
>
<
label
for
=
"
hour_cloud
"
>
Hour
Cloud
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_feelslike
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_feelslike
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_feelslike
"
>
Hour
Feels
Like
<
/label
>
<
label
for
=
"
hour_feelslike
"
>
Hour
Feels
Like
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_windchill
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_windchill
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_windchill
"
>
Hour
Wind
Chill
<
/label
>
<
label
for
=
"
hour_windchill
"
>
Hour
Wind
Chill
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_heatindex
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_heatindex
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_heatindex
"
>
Hour
Heat
Index
<
/label
>
<
label
for
=
"
hour_heatindex
"
>
Hour
Heat
Index
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_dewpoint
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_dewpoint
"
class
=
"
checkBoxFilter
"
/>
<
label
for
=
"
hour_dewpoint
"
>
Hour
Dew
Point
<
/label
>
<
label
for
=
"
hour_dewpoint
"
>
Hour
Dew
Point
<
/label
>
<
br
/>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_vis
"
class
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
hour_vis
"
class
=
"
checkBoxFilter
"
/>
...
@@ -204,7 +288,9 @@ const WeatherForecastData = (props) => {
...
@@ -204,7 +288,9 @@ const WeatherForecastData = (props) => {
<
label
for
=
"
units
"
>
Choose
a
unit
:
<
/label
>
<
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
>
<
div
>
...
@@ -221,7 +307,12 @@ const WeatherForecastData = (props) => {
...
@@ -221,7 +307,12 @@ const WeatherForecastData = (props) => {
<
div
id
=
"
apiUrl
"
>
<
div
id
=
"
apiUrl
"
>
<
label
>
API
URL
:
<
/label
>
<
label
>
API
URL
:
<
/label
>
<
br
/>
<
br
/>
<
input
className
=
"
input
"
type
=
"
text
"
id
=
"
apiUrloutput
"
readOnly
/>
<
input
className
=
"
input
"
type
=
"
text
"
id
=
"
apiUrloutput
"
readOnly
/>
<
/div
>
<
/div
>
<
button
className
=
"
APIButton
"
onClick
=
{
searchAPI
}
>
<
button
className
=
"
APIButton
"
onClick
=
{
searchAPI
}
>
City
api
City
api
...
@@ -250,7 +341,8 @@ const WeatherForecastData = (props) => {
...
@@ -250,7 +341,8 @@ const WeatherForecastData = (props) => {
const
tz_id
=
document
.
getElementById
(
"
tz_id
"
).
checked
;
const
tz_id
=
document
.
getElementById
(
"
tz_id
"
).
checked
;
const
localtime_epoch
=
document
.
getElementById
(
"
localtime_epoch
"
).
checked
;
const
localtime_epoch
=
document
.
getElementById
(
"
localtime_epoch
"
).
checked
;
const
localtime
=
document
.
getElementById
(
"
localtime
"
).
checked
;
const
localtime
=
document
.
getElementById
(
"
localtime
"
).
checked
;
const
last_updated_epoch
=
document
.
getElementById
(
"
last_updated_epoch
"
).
checked
;
const
last_updated_epoch
=
document
.
getElementById
(
"
last_updated_epoch
"
).
checked
;
const
last_updated
=
document
.
getElementById
(
"
last_updated
"
).
checked
;
const
last_updated
=
document
.
getElementById
(
"
last_updated
"
).
checked
;
const
date
=
document
.
getElementById
(
"
date
"
).
checked
;
const
date
=
document
.
getElementById
(
"
date
"
).
checked
;
const
date_epoch
=
document
.
getElementById
(
"
date_epoch
"
).
checked
;
const
date_epoch
=
document
.
getElementById
(
"
date_epoch
"
).
checked
;
...
@@ -261,10 +353,16 @@ const WeatherForecastData = (props) => {
...
@@ -261,10 +353,16 @@ const WeatherForecastData = (props) => {
const
totalprecip
=
document
.
getElementById
(
"
totalprecip
"
).
checked
;
const
totalprecip
=
document
.
getElementById
(
"
totalprecip
"
).
checked
;
const
avgvis
=
document
.
getElementById
(
"
avgvis
"
).
checked
;
const
avgvis
=
document
.
getElementById
(
"
avgvis
"
).
checked
;
const
avghumidity
=
document
.
getElementById
(
"
avghumidity
"
).
checked
;
const
avghumidity
=
document
.
getElementById
(
"
avghumidity
"
).
checked
;
const
daily_will_it_rain
=
document
.
getElementById
(
"
daily_will_it_rain
"
).
checked
;
const
daily_will_it_rain
=
const
daily_chance_of_rain
=
document
.
getElementById
(
"
daily_chance_of_rain
"
).
checked
;
document
.
getElementById
(
"
daily_will_it_rain
"
).
checked
;
const
daily_will_it_snow
=
document
.
getElementById
(
"
daily_will_it_snow
"
).
checked
;
const
daily_chance_of_rain
=
document
.
getElementById
(
const
daily_chance_of_snow
=
document
.
getElementById
(
"
daily_chance_of_snow
"
).
checked
;
"
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_text
=
document
.
getElementById
(
"
condition_text
"
).
checked
;
const
condition_icon
=
document
.
getElementById
(
"
condition_icon
"
).
checked
;
const
condition_icon
=
document
.
getElementById
(
"
condition_icon
"
).
checked
;
const
condition_code
=
document
.
getElementById
(
"
condition_code
"
).
checked
;
const
condition_code
=
document
.
getElementById
(
"
condition_code
"
).
checked
;
...
@@ -274,16 +372,24 @@ const WeatherForecastData = (props) => {
...
@@ -274,16 +372,24 @@ const WeatherForecastData = (props) => {
const
moonrise
=
document
.
getElementById
(
"
moonrise
"
).
checked
;
const
moonrise
=
document
.
getElementById
(
"
moonrise
"
).
checked
;
const
moonset
=
document
.
getElementById
(
"
moonset
"
).
checked
;
const
moonset
=
document
.
getElementById
(
"
moonset
"
).
checked
;
const
moon_phase
=
document
.
getElementById
(
"
moon_phase
"
).
checked
;
const
moon_phase
=
document
.
getElementById
(
"
moon_phase
"
).
checked
;
const
moon_illumination
=
document
.
getElementById
(
"
moon_illumination
"
).
checked
;
const
moon_illumination
=
document
.
getElementById
(
"
moon_illumination
"
).
checked
;
const
hour_time_epoch
=
document
.
getElementById
(
"
hour_time_epoch
"
).
checked
;
const
hour_time_epoch
=
document
.
getElementById
(
"
hour_time_epoch
"
).
checked
;
const
hour_time
=
document
.
getElementById
(
"
hour_time
"
).
checked
;
const
hour_time
=
document
.
getElementById
(
"
hour_time
"
).
checked
;
const
hour_temp
=
document
.
getElementById
(
"
hour_temp
"
).
checked
;
const
hour_temp
=
document
.
getElementById
(
"
hour_temp
"
).
checked
;
const
hour_is_day
=
document
.
getElementById
(
"
hour_is_day
"
).
checked
;
const
hour_is_day
=
document
.
getElementById
(
"
hour_is_day
"
).
checked
;
const
hour_condition_text
=
document
.
getElementById
(
"
hour_condition_text
"
).
checked
;
const
hour_condition_text
=
document
.
getElementById
(
const
hour_condition_icon
=
document
.
getElementById
(
"
hour_condition_icon
"
).
checked
;
"
hour_condition_text
"
const
hour_condition_code
=
document
.
getElementById
(
"
hour_condition_code
"
).
checked
;
).
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
=
document
.
getElementById
(
"
hour_wind
"
).
checked
;
const
hour_wind_degree
=
document
.
getElementById
(
"
hour_wind_degree
"
).
checked
;
const
hour_wind_degree
=
document
.
getElementById
(
"
hour_wind_degree
"
).
checked
;
const
hour_wind_dir
=
document
.
getElementById
(
"
hour_wind_dir
"
).
checked
;
const
hour_wind_dir
=
document
.
getElementById
(
"
hour_wind_dir
"
).
checked
;
const
hour_pressure
=
document
.
getElementById
(
"
hour_pressure
"
).
checked
;
const
hour_pressure
=
document
.
getElementById
(
"
hour_pressure
"
).
checked
;
const
hour_precip
=
document
.
getElementById
(
"
hour_precip
"
).
checked
;
const
hour_precip
=
document
.
getElementById
(
"
hour_precip
"
).
checked
;
...
@@ -358,7 +464,7 @@ const WeatherForecastData = (props) => {
...
@@ -358,7 +464,7 @@ const WeatherForecastData = (props) => {
console
.
log
(
"
FilterString =
"
+
filterString
);
console
.
log
(
"
FilterString =
"
+
filterString
);
const
apiUrl
=
`http://localhost:8080/
curren
tweather?q=
${
city
_text
}
&filter=
${
filterString
}
`
;
const
apiUrl
=
`http://localhost:8080/
forcas
tweather?q=
${
latitude_text
}
,
${
longitude
_text
}
&filter=
${
filterString
}
`
;
fetch
(
apiUrl
)
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
...
@@ -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
;
};
return
(
<
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
;
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