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
f1792a8c
Commit
f1792a8c
authored
Jun 09, 2024
by
EnesKarakas
Browse files
dw
parent
143f1062
Changes
2
Show whitespace changes
Inline
Side-by-side
frontend/src/components/weather/currentData.css
View file @
f1792a8c
.filter
label
{
display
:
block
;
margin-bottom
:
5px
;
}
}
.filter
input
[
type
=
"text"
],
.filter
select
{
.filter
input
[
type
=
"text"
],
.filter
select
{
width
:
100%
;
padding
:
8px
;
margin-bottom
:
10px
;
border
:
1px
solid
#ccc
;
border-radius
:
5px
;
}
}
.filter
button
{
.filter
button
{
padding
:
10px
20px
;
background-color
:
var
(
--dl-color-theme-primary1
);
color
:
#fff
;
...
...
@@ -21,27 +20,63 @@
border-radius
:
5px
;
cursor
:
pointer
;
transition
:
background-color
0.3s
;
}
}
.filter
button
:hover
{
.filter
button
:hover
{
background-color
:
var
(
--dl-color-theme-primary2
);
}
}
.output
{
.output
{
margin-top
:
40px
;
}
}
.checkBoxFilter
{
.checkBoxFilter
{
margin-bottom
:
10px
;
}
}
#weatherData
{
#weatherData
{
white-space
:
pre-wrap
;
/* Umbruch von langen Zeilen */
}
#apiUrl
{
}
#apiUrl
{
margin-top
:
50px
;
}
}
#apiUrloutput
{
#apiUrloutput
{
width
:
1250px
;
}
\ No newline at end of file
}
.list-container
{
width
:
300px
;
margin
:
20px
auto
;
font-family
:
Arial
,
sans-serif
;
}
.list-item
{
border
:
1px
solid
#ccc
;
margin
:
10px
0
;
padding
:
10px
;
border-radius
:
5px
;
transition
:
background-color
0.3s
;
cursor
:
pointer
;
}
.list-item
:hover
{
background-color
:
#f0f0f0
;
}
.title
{
font-size
:
18px
;
font-weight
:
bold
;
}
.subtitle
{
font-size
:
14px
;
color
:
#666
;
}
.APIButton
{
display
:
block
;
margin
:
10px
auto
;
padding
:
10px
20px
;
font-size
:
16px
;
cursor
:
pointer
;
}
frontend/src/components/weather/currentData.js
View file @
f1792a8c
import
React
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
"
./currentData.css
"
;
const
Currentdata
=
(
props
)
=>
{
const
[
query
,
setQuery
]
=
useState
(
""
);
const
[
data
,
setData
]
=
useState
([]);
const
handleInputChange
=
(
e
)
=>
{
setQuery
(
e
.
target
.
value
);
if
(
e
.
target
.
value
.
trim
()
!==
""
)
{
searchAPI
(
e
.
target
.
value
.
trim
());
}
};
return
(
<
div
className
=
"
home-container
"
>
<
div
>
<
div
className
=
"
thq-grid-5
"
>
<
div
className
=
"
thq-grid-3
"
>
<
div
class
=
"
filter
"
>
<
label
for
=
"
location
"
>
Location
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
/>
<
label
htmlFor
=
"
location
"
>
Location
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
value
=
{
query
}
onChange
=
{
handleInputChange
}
/
>
{
data
.
map
((
item
)
=>
(
<
ListItem
key
=
{
item
.
id
}
name
=
{
item
.
name
}
country
=
{
item
.
country
}
region
=
{
item
.
region
}
lat
=
{
item
.
lat
}
lon
=
{
item
.
lon
}
/
>
))}
<
br
/>
<
label
for
=
"
region
"
>
Region
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
region_text
"
placeholder
=
"
Region
"
/>
...
...
@@ -59,11 +84,7 @@ const Currentdata = (props) => {
/>
<
label
>
Last
Updated
Epoch
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
last_updated
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
last_updated
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Last
Updated
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temp_c
"
className
=
"
checkBoxFilter
"
/>
...
...
@@ -98,11 +119,7 @@ const Currentdata = (props) => {
<
input
type
=
"
checkbox
"
id
=
"
wind
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind
"
>
Wind
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_degree
"
className
=
"
checkBoxFilter
"
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_degree
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_degree
"
>
Wind
Degree
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_dir
"
className
=
"
checkBoxFilter
"
/>
...
...
@@ -213,15 +230,11 @@ const Currentdata = (props) => {
<
br
/>
<
input
className
=
"
input
"
type
=
"
text
"
id
=
"
apiUrloutput
"
readOnly
/>
<
/div
>
<
button
className
=
"
APIButton
"
onClick
=
{
searchAPI
}
>
City
api
<
/button
>
<
br
/>
<
br
/>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
function
getData
()
{
...
...
@@ -424,10 +437,9 @@ const Currentdata = (props) => {
});
}
function
searchAPI
()
{
const
cityInput
=
document
.
getElementById
(
"
city
"
).
value
;
const
cityInput
=
document
.
getElementById
(
"
city
_text
"
).
value
;
const
apiKey
=
"
1244099aeaee4b179e6111803241304
"
;
const
apiUrl
=
`https://api.weatherapi.com/v1/search.json?key=
${
apiKey
}
&q=
${
cityInput
}
`
;
const
apiUrl
=
`http://localhost:8080/search?city=
${
cityInput
}
`
;
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
...
...
@@ -438,12 +450,7 @@ const Currentdata = (props) => {
return
response
.
json
();
})
.
then
((
data
)
=>
{
// Wetterdaten anzeigen
document
.
getElementById
(
"
weatherData
"
).
innerText
=
JSON
.
stringify
(
data
,
null
,
2
);
setData
(
data
);
})
.
catch
((
error
)
=>
{
console
.
error
(
"
There was a problem with the fetch operation:
"
,
error
);
...
...
@@ -455,4 +462,21 @@ const Currentdata = (props) => {
}
};
const
ListItem
=
({
name
,
country
,
region
,
lat
,
lon
})
=>
{
const
handleClick
=
()
=>
{
alert
(
`Element geklickt:
${
name
}
`
);
};
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
Currentdata
;
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