Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Karakas
SWP_SS24_Wetterdaten_sammeln
Commits
6e989979
Commit
6e989979
authored
Jun 09, 2024
by
EnesKarakas
Browse files
dawd
parent
576b3e31
Changes
5
Show whitespace changes
Inline
Side-by-side
frontend/package-lock.json
View file @
6e989979
...
@@ -8,6 +8,8 @@
...
@@ -8,6 +8,8 @@
"name": "weather-app",
"name": "weather-app",
"version": "1.0.0",
"version": "1.0.0",
"dependencies": {
"dependencies": {
"file-saver": "^2.0.5",
"json2xml": "^0.1.3",
"prop-types": "15.7.2",
"prop-types": "15.7.2",
"react": "^18.3.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dom": "^18.3.1",
...
@@ -8569,6 +8571,11 @@
...
@@ -8569,6 +8571,11 @@
"webpack": "^4.0.0 || ^5.0.0"
"webpack": "^4.0.0 || ^5.0.0"
}
}
},
},
"node_modules/file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"node_modules/filelist": {
"node_modules/filelist": {
"version": "1.0.4",
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
...
@@ -12726,6 +12733,14 @@
...
@@ -12726,6 +12733,14 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"dev": true
"dev": true
},
},
"node_modules/json2xml": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/json2xml/-/json2xml-0.1.3.tgz",
"integrity": "sha512-yfTe9HnbrE3oRUEQL9mn7BueLd7RCTb7ig/mAFI6xY4RNYOEXF26x0qHFR7mb8ZrKgfE57wxkq0N3TboyFm6UA==",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/json5": {
"node_modules/json5": {
"version": "2.2.3",
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
...
@@ -25727,6 +25742,11 @@
...
@@ -25727,6 +25742,11 @@
"schema-utils": "^3.0.0"
"schema-utils": "^3.0.0"
}
}
},
},
"file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"filelist": {
"filelist": {
"version": "1.0.4",
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
...
@@ -28763,6 +28783,11 @@
...
@@ -28763,6 +28783,11 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"dev": true
"dev": true
},
},
"json2xml": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/json2xml/-/json2xml-0.1.3.tgz",
"integrity": "sha512-yfTe9HnbrE3oRUEQL9mn7BueLd7RCTb7ig/mAFI6xY4RNYOEXF26x0qHFR7mb8ZrKgfE57wxkq0N3TboyFm6UA=="
},
"json5": {
"json5": {
"version": "2.2.3",
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
frontend/package.json
View file @
6e989979
...
@@ -3,6 +3,8 @@
...
@@ -3,6 +3,8 @@
"version"
:
"1.0.0"
,
"version"
:
"1.0.0"
,
"private"
:
true
,
"private"
:
true
,
"dependencies"
:
{
"dependencies"
:
{
"file-saver"
:
"^2.0.5"
,
"json2xml"
:
"^0.1.3"
,
"prop-types"
:
"15.7.2"
,
"prop-types"
:
"15.7.2"
,
"react"
:
"^18.3.1"
,
"react"
:
"^18.3.1"
,
"react-dom"
:
"^18.3.1"
,
"react-dom"
:
"^18.3.1"
,
...
...
frontend/src/components/weather/currentData.js
View file @
6e989979
...
@@ -5,6 +5,7 @@ import "./currentData.css";
...
@@ -5,6 +5,7 @@ import "./currentData.css";
const
Currentdata
=
(
props
)
=>
{
const
Currentdata
=
(
props
)
=>
{
const
[
query
,
setQuery
]
=
useState
(
""
);
const
[
query
,
setQuery
]
=
useState
(
""
);
const
[
data
,
setData
]
=
useState
([]);
const
[
data
,
setData
]
=
useState
([]);
const
[
weatherdata
,
setweatherData
]
=
useState
([]);
const
handleInputChange
=
(
e
)
=>
{
const
handleInputChange
=
(
e
)
=>
{
setQuery
(
e
.
target
.
value
);
setQuery
(
e
.
target
.
value
);
...
@@ -12,7 +13,56 @@ const Currentdata = (props) => {
...
@@ -12,7 +13,56 @@ const Currentdata = (props) => {
searchAPI
(
e
.
target
.
value
.
trim
());
searchAPI
(
e
.
target
.
value
.
trim
());
}
}
};
};
const
downloadData
=
()
=>
{
const
fileformat
=
document
.
getElementById
(
"
fileformat
"
).
value
;
switch
(
fileformat
)
{
case
"
json
"
:
downloadJson
(
weatherdata
);
break
;
case
"
xml
"
:
downloadXml
(
weatherdata
);
break
;
case
"
csv
"
:
downloadCsv
(
weatherdata
);
break
;
default
:
alert
(
"
Unsupported file format
"
);
}
};
const
downloadJson
=
(
weatherdata
)
=>
{
const
json
=
JSON
.
stringify
(
weatherdata
,
null
,
2
);
const
blob
=
new
Blob
([
json
],
{
type
:
"
application/json
"
});
saveAs
(
blob
,
"
weatherdata.json
"
);
};
const
downloadXml
=
(
weatherdata
)
=>
{
const
xml
=
jsonToXml
(
weatherdata
);
const
blob
=
new
Blob
([
xml
],
{
type
:
"
application/xml
"
});
saveAs
(
blob
,
"
weatherdata.xml
"
);
};
const
downloadCsv
=
(
weatherdata
)
=>
{
const
csv
=
jsonToCsv
(
weatherdata
);
const
blob
=
new
Blob
([
csv
],
{
type
:
"
text/csv
"
});
saveAs
(
blob
,
"
weatherdata.csv
"
);
};
const
jsonToXml
=
(
json
)
=>
{
let
xml
=
'
<?xml version="1.0" encoding="UTF-8"?>
\n
<root>
\n
'
;
for
(
let
prop
in
json
)
{
xml
+=
` <
${
prop
}
>
${
json
[
prop
]}
</
${
prop
}
>\n`
;
}
xml
+=
"
</root>
"
;
return
xml
;
};
const
jsonToCsv
=
(
json
)
=>
{
const
keys
=
Object
.
keys
(
json
);
const
values
=
Object
.
values
(
json
);
return
`
${
keys
.
join
(
"
,
"
)}
\n
${
values
.
join
(
"
,
"
)}
`
;
};
return
(
return
(
<
div
className
=
"
home-container
"
>
<
div
className
=
"
home-container
"
>
<
div
>
<
div
>
...
@@ -240,6 +290,15 @@ const Currentdata = (props) => {
...
@@ -240,6 +290,15 @@ const Currentdata = (props) => {
<
br
/>
<
br
/>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
/div
>
<
/div
>
<
label
for
=
"
fileformat
"
>
Choose
a
File
Format
:
<
/label
>
<
select
name
=
"
fileformat
"
id
=
"
fileformat
"
>
<
option
value
=
"
json
"
>
JSON
<
/option
>
<
option
value
=
"
xml
"
>
XML
<
/option
>
<
option
value
=
"
csv
"
>
CSV
<
/option
>
<
/select
>
<
button
className
=
"
thq-button-filled
"
onClick
=
{
downloadData
}
>
Download
<
/button
>
<
div
id
=
"
apiUrl
"
>
<
div
id
=
"
apiUrl
"
>
<
label
>
API
URL
:
<
/label
>
<
label
>
API
URL
:
<
/label
>
<
br
/>
<
br
/>
...
@@ -485,6 +544,7 @@ const Currentdata = (props) => {
...
@@ -485,6 +544,7 @@ const Currentdata = (props) => {
2
2
);
);
document
.
getElementById
(
"
apiUrloutput
"
).
value
=
apiUrl
;
document
.
getElementById
(
"
apiUrloutput
"
).
value
=
apiUrl
;
setweatherData
(
data
);
})
})
.
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
);
...
...
frontend/src/components/weather/historicalWeatherData.js
View file @
6e989979
import
React
,
{
useState
}
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
saveAs
}
from
"
file-saver
"
;
import
"
./weatherForecastData.css
"
;
import
"
./weatherForecastData.css
"
;
const
HistoricalWeatherData
=
(
props
)
=>
{
const
HistoricalWeatherData
=
(
props
)
=>
{
const
[
query
,
setQuery
]
=
useState
(
""
);
const
[
query
,
setQuery
]
=
useState
(
""
);
const
[
data
,
setData
]
=
useState
([]);
const
[
data
,
setData
]
=
useState
([]);
const
[
weatherdata
,
setweatherData
]
=
useState
([]);
const
handleInputChange
=
(
e
)
=>
{
const
handleInputChange
=
(
e
)
=>
{
setQuery
(
e
.
target
.
value
);
setQuery
(
e
.
target
.
value
);
...
@@ -12,6 +14,58 @@ const HistoricalWeatherData = (props) => {
...
@@ -12,6 +14,58 @@ const HistoricalWeatherData = (props) => {
searchAPI
(
e
.
target
.
value
.
trim
());
searchAPI
(
e
.
target
.
value
.
trim
());
}
}
};
};
const
downloadData
=
()
=>
{
const
fileformat
=
document
.
getElementById
(
"
fileformat
"
).
value
;
switch
(
fileformat
)
{
case
"
json
"
:
downloadJson
(
weatherdata
);
break
;
case
"
xml
"
:
downloadXml
(
weatherdata
);
break
;
case
"
csv
"
:
downloadCsv
(
weatherdata
);
break
;
default
:
alert
(
"
Unsupported file format
"
);
}
};
const
downloadJson
=
(
weatherdata
)
=>
{
const
json
=
JSON
.
stringify
(
weatherdata
,
null
,
2
);
const
blob
=
new
Blob
([
json
],
{
type
:
"
application/json
"
});
saveAs
(
blob
,
"
weatherdata.json
"
);
};
const
downloadXml
=
(
weatherdata
)
=>
{
const
xml
=
jsonToXml
(
weatherdata
);
const
blob
=
new
Blob
([
xml
],
{
type
:
"
application/xml
"
});
saveAs
(
blob
,
"
weatherdata.xml
"
);
};
const
downloadCsv
=
(
weatherdata
)
=>
{
const
csv
=
jsonToCsv
(
weatherdata
);
const
blob
=
new
Blob
([
csv
],
{
type
:
"
text/csv
"
});
saveAs
(
blob
,
"
weatherdata.csv
"
);
};
const
jsonToXml
=
(
json
)
=>
{
let
xml
=
'
<?xml version="1.0" encoding="UTF-8"?>
\n
<root>
\n
'
;
for
(
let
prop
in
json
)
{
xml
+=
` <
${
prop
}
>
${
json
[
prop
]}
</
${
prop
}
>\n`
;
}
xml
+=
"
</root>
"
;
return
xml
;
};
const
jsonToCsv
=
(
json
)
=>
{
const
keys
=
Object
.
keys
(
json
);
const
values
=
Object
.
values
(
json
);
return
`
${
keys
.
join
(
"
,
"
)}
\n
${
values
.
join
(
"
,
"
)}
`
;
};
return
(
return
(
<
div
className
=
"
home-container
"
>
<
div
className
=
"
home-container
"
>
<
div
>
<
div
>
...
@@ -198,6 +252,15 @@ const HistoricalWeatherData = (props) => {
...
@@ -198,6 +252,15 @@ const HistoricalWeatherData = (props) => {
<
br
/>
<
br
/>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
/div
>
<
/div
>
<
label
for
=
"
fileformat
"
>
Choose
a
File
Format
:
<
/label
>
<
select
name
=
"
fileformat
"
id
=
"
fileformat
"
>
<
option
value
=
"
json
"
>
JSON
<
/option
>
<
option
value
=
"
xml
"
>
XML
<
/option
>
<
option
value
=
"
csv
"
>
CSV
<
/option
>
<
/select
>
<
button
className
=
"
thq-button-filled
"
onClick
=
{
downloadData
}
>
Download
<
/button
>
<
div
id
=
"
apiUrl
"
>
<
div
id
=
"
apiUrl
"
>
<
label
>
API
URL
:
<
/label
>
<
label
>
API
URL
:
<
/label
>
<
br
/>
<
br
/>
...
@@ -209,7 +272,6 @@ const HistoricalWeatherData = (props) => {
...
@@ -209,7 +272,6 @@ const HistoricalWeatherData = (props) => {
<
/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
;
...
@@ -317,6 +379,7 @@ const HistoricalWeatherData = (props) => {
...
@@ -317,6 +379,7 @@ const HistoricalWeatherData = (props) => {
let
filterDailyString
=
filterDailyArray
.
join
(
"
,
"
);
let
filterDailyString
=
filterDailyArray
.
join
(
"
,
"
);
const
apiUrl
=
`http://localhost:8080/historicalweather?latitude=
${
latitude_text
}
&longitude=
${
longitude_text
}
&start_date=
${
start_date
}
&end_date=
${
end_date
}
&filterHourly=
${
filterHourlyString
}
&filterDaily=
${
filterDailyString
}
&temperature_unit=
${
temp_units
}
&wind_speed_unit=
${
wind_units
}
&precipitation_unit=
${
prec_units
}
`
;
const
apiUrl
=
`http://localhost:8080/historicalweather?latitude=
${
latitude_text
}
&longitude=
${
longitude_text
}
&start_date=
${
start_date
}
&end_date=
${
end_date
}
&filterHourly=
${
filterHourlyString
}
&filterDaily=
${
filterDailyString
}
&temperature_unit=
${
temp_units
}
&wind_speed_unit=
${
wind_units
}
&precipitation_unit=
${
prec_units
}
`
;
fetch
(
apiUrl
)
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
if
(
!
response
.
ok
)
{
if
(
!
response
.
ok
)
{
...
@@ -332,6 +395,7 @@ const HistoricalWeatherData = (props) => {
...
@@ -332,6 +395,7 @@ const HistoricalWeatherData = (props) => {
2
2
);
);
document
.
getElementById
(
"
apiUrloutput
"
).
value
=
apiUrl
;
document
.
getElementById
(
"
apiUrloutput
"
).
value
=
apiUrl
;
setweatherData
(
data
);
})
})
.
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
);
...
@@ -357,10 +421,6 @@ const HistoricalWeatherData = (props) => {
...
@@ -357,10 +421,6 @@ const HistoricalWeatherData = (props) => {
console
.
error
(
"
There was a problem with the fetch operation:
"
,
error
);
console
.
error
(
"
There was a problem with the fetch operation:
"
,
error
);
});
});
}
}
function
boolToWord
(
bool
)
{
return
bool
?
"
yes
"
:
"
no
"
;
}
};
};
const
ListItem
=
({
name
,
country
,
region
,
lat
,
lon
})
=>
{
const
ListItem
=
({
name
,
country
,
region
,
lat
,
lon
})
=>
{
const
handleClick
=
()
=>
{
const
handleClick
=
()
=>
{
...
@@ -382,4 +442,5 @@ const ListItem = ({ name, country, region, lat, lon }) => {
...
@@ -382,4 +442,5 @@ const ListItem = ({ name, country, region, lat, lon }) => {
<
/div
>
<
/div
>
);
);
};
};
export
default
HistoricalWeatherData
;
export
default
HistoricalWeatherData
;
frontend/src/components/weather/weatherForecastData.js
View file @
6e989979
...
@@ -5,6 +5,7 @@ import "./weatherForecastData.css";
...
@@ -5,6 +5,7 @@ import "./weatherForecastData.css";
const
WeatherForecastData
=
(
props
)
=>
{
const
WeatherForecastData
=
(
props
)
=>
{
const
[
query
,
setQuery
]
=
useState
(
""
);
const
[
query
,
setQuery
]
=
useState
(
""
);
const
[
data
,
setData
]
=
useState
([]);
const
[
data
,
setData
]
=
useState
([]);
const
[
weatherdata
,
setweatherData
]
=
useState
([]);
const
handleInputChange
=
(
e
)
=>
{
const
handleInputChange
=
(
e
)
=>
{
setQuery
(
e
.
target
.
value
);
setQuery
(
e
.
target
.
value
);
...
@@ -12,7 +13,56 @@ const WeatherForecastData = (props) => {
...
@@ -12,7 +13,56 @@ const WeatherForecastData = (props) => {
searchAPI
(
e
.
target
.
value
.
trim
());
searchAPI
(
e
.
target
.
value
.
trim
());
}
}
};
};
const
downloadData
=
()
=>
{
const
fileformat
=
document
.
getElementById
(
"
fileformat
"
).
value
;
switch
(
fileformat
)
{
case
"
json
"
:
downloadJson
(
weatherdata
);
break
;
case
"
xml
"
:
downloadXml
(
weatherdata
);
break
;
case
"
csv
"
:
downloadCsv
(
weatherdata
);
break
;
default
:
alert
(
"
Unsupported file format
"
);
}
};
const
downloadJson
=
(
weatherdata
)
=>
{
const
json
=
JSON
.
stringify
(
weatherdata
,
null
,
2
);
const
blob
=
new
Blob
([
json
],
{
type
:
"
application/json
"
});
saveAs
(
blob
,
"
weatherdata.json
"
);
};
const
downloadXml
=
(
weatherdata
)
=>
{
const
xml
=
jsonToXml
(
weatherdata
);
const
blob
=
new
Blob
([
xml
],
{
type
:
"
application/xml
"
});
saveAs
(
blob
,
"
weatherdata.xml
"
);
};
const
downloadCsv
=
(
weatherdata
)
=>
{
const
csv
=
jsonToCsv
(
weatherdata
);
const
blob
=
new
Blob
([
csv
],
{
type
:
"
text/csv
"
});
saveAs
(
blob
,
"
weatherdata.csv
"
);
};
const
jsonToXml
=
(
json
)
=>
{
let
xml
=
'
<?xml version="1.0" encoding="UTF-8"?>
\n
<root>
\n
'
;
for
(
let
prop
in
json
)
{
xml
+=
` <
${
prop
}
>
${
json
[
prop
]}
</
${
prop
}
>\n`
;
}
xml
+=
"
</root>
"
;
return
xml
;
};
const
jsonToCsv
=
(
json
)
=>
{
const
keys
=
Object
.
keys
(
json
);
const
values
=
Object
.
values
(
json
);
return
`
${
keys
.
join
(
"
,
"
)}
\n
${
values
.
join
(
"
,
"
)}
`
;
};
return
(
return
(
<
div
className
=
"
home-container
"
>
<
div
className
=
"
home-container
"
>
<
div
>
<
div
>
...
@@ -343,6 +393,15 @@ const WeatherForecastData = (props) => {
...
@@ -343,6 +393,15 @@ const WeatherForecastData = (props) => {
<
br
/>
<
br
/>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
/div
>
<
/div
>
<
label
for
=
"
fileformat
"
>
Choose
a
File
Format
:
<
/label
>
<
select
name
=
"
fileformat
"
id
=
"
fileformat
"
>
<
option
value
=
"
json
"
>
JSON
<
/option
>
<
option
value
=
"
xml
"
>
XML
<
/option
>
<
option
value
=
"
csv
"
>
CSV
<
/option
>
<
/select
>
<
button
className
=
"
thq-button-filled
"
onClick
=
{
downloadData
}
>
Download
<
/button
>
<
div
id
=
"
apiUrl
"
>
<
div
id
=
"
apiUrl
"
>
<
label
>
API
URL
:
<
/label
>
<
label
>
API
URL
:
<
/label
>
<
br
/>
<
br
/>
...
@@ -599,6 +658,7 @@ const WeatherForecastData = (props) => {
...
@@ -599,6 +658,7 @@ const WeatherForecastData = (props) => {
2
2
);
);
document
.
getElementById
(
"
apiUrloutput
"
).
value
=
apiUrl
;
document
.
getElementById
(
"
apiUrloutput
"
).
value
=
apiUrl
;
setweatherData
(
data
);
})
})
.
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
);
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment