Skip to content

GitLab

Commit 6e989979 authored by EnesKarakas's avatar EnesKarakas
Browse files

dawd

parent 576b3e31
Show whitespace changes
Inline Side-by-side
frontend/package-lock.json
View file @ 6e989979
......@@ -8,6 +8,8 @@
"name": "weather-app",
"version": "1.0.0",
"dependencies": {
"file-saver": "^2.0.5",
"json2xml": "^0.1.3",
"prop-types": "15.7.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
......@@ -8569,6 +8571,11 @@
"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": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
......@@ -12726,6 +12733,14 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"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": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
......@@ -25727,6 +25742,11 @@
"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": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
......@@ -28763,6 +28783,11 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"dev": true
},
"json2xml": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/json2xml/-/json2xml-0.1.3.tgz",
"integrity": "sha512-yfTe9HnbrE3oRUEQL9mn7BueLd7RCTb7ig/mAFI6xY4RNYOEXF26x0qHFR7mb8ZrKgfE57wxkq0N3TboyFm6UA=="
},
"json5": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
frontend/package.json
View file @ 6e989979
......@@ -3,6 +3,8 @@
"version": "1.0.0",
"private": true,
"dependencies": {
"file-saver": "^2.0.5",
"json2xml": "^0.1.3",
"prop-types": "15.7.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
......
frontend/src/components/weather/currentData.js
View file @ 6e989979
......@@ -5,6 +5,7 @@ import "./currentData.css";
const Currentdata = (props) => {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
const [weatherdata, setweatherData] = useState([]);
const handleInputChange = (e) => {
setQuery(e.target.value);
......@@ -12,7 +13,56 @@ const Currentdata = (props) => {
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 (
<div className="home-container">
<div>
......@@ -240,6 +290,15 @@ const Currentdata = (props) => {
<br />
<pre id="weatherData"></pre>
</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">
<label>API URL:</label>
<br />
......@@ -485,6 +544,7 @@ const Currentdata = (props) => {
2
);
document.getElementById("apiUrloutput").value = apiUrl;
setweatherData(data);
})
.catch((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 { saveAs } from "file-saver";
import "./weatherForecastData.css";
const HistoricalWeatherData = (props) => {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
const [weatherdata, setweatherData] = useState([]);
const handleInputChange = (e) => {
setQuery(e.target.value);
......@@ -12,6 +14,58 @@ const HistoricalWeatherData = (props) => {
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 (
<div className="home-container">
<div>
......@@ -198,6 +252,15 @@ const HistoricalWeatherData = (props) => {
<br />
<pre id="weatherData"></pre>
</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">
<label>API URL:</label>
<br />
......@@ -209,7 +272,6 @@ const HistoricalWeatherData = (props) => {
</div>
</div>
);
function getData() {
const city_text = document.getElementById("city_text").value;
const region_text = document.getElementById("region_text").value;
......@@ -317,6 +379,7 @@ const HistoricalWeatherData = (props) => {
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}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
......@@ -332,6 +395,7 @@ const HistoricalWeatherData = (props) => {
2
);
document.getElementById("apiUrloutput").value = apiUrl;
setweatherData(data);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
......@@ -357,10 +421,6 @@ const HistoricalWeatherData = (props) => {
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 handleClick = () => {
......@@ -382,4 +442,5 @@ const ListItem = ({ name, country, region, lat, lon }) => {
</div>
);
};
export default HistoricalWeatherData;
frontend/src/components/weather/weatherForecastData.js
View file @ 6e989979
......@@ -5,6 +5,7 @@ import "./weatherForecastData.css";
const WeatherForecastData = (props) => {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
const [weatherdata, setweatherData] = useState([]);
const handleInputChange = (e) => {
setQuery(e.target.value);
......@@ -12,7 +13,56 @@ const WeatherForecastData = (props) => {
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 (
<div className="home-container">
<div>
......@@ -343,6 +393,15 @@ const WeatherForecastData = (props) => {
<br />
<pre id="weatherData"></pre>
</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">
<label>API URL:</label>
<br />
......@@ -599,6 +658,7 @@ const WeatherForecastData = (props) => {
2
);
document.getElementById("apiUrloutput").value = apiUrl;
setweatherData(data);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal