Skip to content

GitLab

You need to sign in or sign up before continuing.
Commit 447c97b4 authored by Weiser's avatar Weiser
Browse files

Merge branch 'devbackend' of... 

Merge branch 'devbackend' of https://transfer.hft-stuttgart.de/gitlab/22kaen1bdi/swp_ss24_wetterdaten_sammeln into devbackend
parents d96323a7 140c625e
Hide whitespace changes
Inline Side-by-side
frontend/package-lock.json
View file @ 447c97b4
......@@ -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 @ 447c97b4
......@@ -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 @ 447c97b4
......@@ -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,17 +13,61 @@ 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>
<div className="thq-grid-5">
<div class="h1">
<h1>Choose your City</h1>
<br />
</div>
<div class="field_write">
<div class="fw">
<div class="filter">
<label htmlFor="location">Location:</label>
<input
type="text"
......@@ -61,186 +106,186 @@ const Currentdata = (props) => {
</div>
</div>
<div class="h2">
<h2>Choose the variables you want.</h2>
<h2>Choose the variables you want.</h2>
</div>
<div className="dataselect">
<div class="location">
<div class="h3">
<h3>Location</h3>
</div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
<br />
<div class="location">
<div class="h3">
<h3>Location</h3>
</div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
<br />
</div>
<div class="time">
<div class="h3">
<h3>Time</h3>
</div>
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input
type="checkbox"
id="localtime_epoch"
className="checkBoxFilter"
/>
<label> Localtime Epoch</label>
<br />
<input type="checkbox" id="localtime" className="checkBoxFilter" />
<label> Localtime</label>
<br />
<input
type="checkbox"
id="last_updated_epoch"
className="checkBoxFilter"
/>
<label> Last Updated Epoch</label>
<br />
<input
type="checkbox"
id="last_updated"
className="checkBoxFilter"
/>
<label> Last Updated</label>
<br />
<div class="h3">
<h3>Time</h3>
</div>
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input
type="checkbox"
id="localtime_epoch"
className="checkBoxFilter"
/>
<label> Localtime Epoch</label>
<br />
<input type="checkbox" id="localtime" className="checkBoxFilter" />
<label> Localtime</label>
<br />
<input
type="checkbox"
id="last_updated_epoch"
className="checkBoxFilter"
/>
<label> Last Updated Epoch</label>
<br />
<input
type="checkbox"
id="last_updated"
className="checkBoxFilter"
/>
<label> Last Updated</label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Temperature</h3>
</div>
<input type="checkbox" id="temp" className="checkBoxFilter" />
<label for="temp">Temp</label>
<br />
<input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label>
<br />
<input type="checkbox"id="condition_text"className="checkBoxFilter"/>
<label for="condition">Condition Text</label>
<br />
<div class="h3">
<h3>Temperature</h3>
</div>
<input type="checkbox" id="temp" className="checkBoxFilter" />
<label for="temp">Temp</label>
<br />
<input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label>
<br />
<input type="checkbox" id="condition_text" className="checkBoxFilter" />
<label for="condition">Condition Text</label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Wind</h3>
</div>
<input type="checkbox" id="wind_degree" className="checkBoxFilter" />
<label for="wind_degree">Wind Degree</label>
<br />
<input type="checkbox" id="wind_dir" className="checkBoxFilter" />
<label for="wind_dir">Wind Direction</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label for="pressure">Pressure</label>
<br />
<input type="checkbox" id="precip" className="checkBoxFilter" />
<label for="precip">Precip</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label for="humidity">Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label for="cloud">Cloud</label>
<br />
<div class="h3">
<h3>Wind</h3>
</div>
<input type="checkbox" id="wind_degree" className="checkBoxFilter" />
<label for="wind_degree">Wind Degree</label>
<br />
<input type="checkbox" id="wind_dir" className="checkBoxFilter" />
<label for="wind_dir">Wind Direction</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label for="pressure">Pressure</label>
<br />
<input type="checkbox" id="precip" className="checkBoxFilter" />
<label for="precip">Precip</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label for="humidity">Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label for="cloud">Cloud</label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Temperature</h3>
</div>
<input type="checkbox" id="feelslike" className="checkBoxFilter" />
<label for="feelslike">Feelslike</label>
<br />
<input type="checkbox" id="windchill" className="checkBoxFilter" />
<label for="windchill">Windchill</label>
<br />
<input type="checkbox" id="heatindex" className="checkBoxFilter" />
<label for="heatindex">Heatindex</label>
<br />
<input type="checkbox" id="dewpoint" className="checkBoxFilter" />
<label for="dewpoint">Dewpoint</label>
<br />
<input type="checkbox" id="vis" className="checkBoxFilter" />
<label for="vis">Visibility </label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label for="gust">Gust </label>
<br />
<div class="h3">
<h3>Temperature</h3>
</div>
<input type="checkbox" id="feelslike" className="checkBoxFilter" />
<label for="feelslike">Feelslike</label>
<br />
<input type="checkbox" id="windchill" className="checkBoxFilter" />
<label for="windchill">Windchill</label>
<br />
<input type="checkbox" id="heatindex" className="checkBoxFilter" />
<label for="heatindex">Heatindex</label>
<br />
<input type="checkbox" id="dewpoint" className="checkBoxFilter" />
<label for="dewpoint">Dewpoint</label>
<br />
<input type="checkbox" id="vis" className="checkBoxFilter" />
<label for="vis">Visibility </label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label for="gust">Gust </label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Air Quality</h3>
</div>
<input
type="checkbox"
id="air_quality_co"
className="checkBoxFilter"
/>
<label for="air_quality_co">Air Quality CO</label>
<br />
<input
type="checkbox"
id="air_quality_no2"
className="checkBoxFilter"
/>
<label for="air_quality_no2">Air Quality NO2</label>
<br />
<input
type="checkbox"
id="air_quality_o3"
className="checkBoxFilter"
/>
<label for="air_quality_o3">Air Quality O3</label>
<br />
<input
type="checkbox"
id="air_quality_so2"
className="checkBoxFilter"
/>
<label for="air_quality_so2">Air Quality SO2</label>
<br />
<input
type="checkbox"
id="air_quality_pm2_5"
className="checkBoxFilter"
/>
<label for="air_quality_pm2_5">Air Quality PM2.5</label>
<br />
<input
type="checkbox"
id="air_quality_pm10"
className="checkBoxFilter"
/>
<label for="air_quality_pm10">Air Quality PM10</label>
<br />
<input
type="checkbox"
id="air_quality_us_epa_index"
className="checkBoxFilter"
/>
<label for="air_quality_us_epa_index">US EPA Index</label>
<br />
<input
type="checkbox"
id="air_quality_gb_defra_index"
className="checkBoxFilter"
/>
<label for="air_quality_gb_defra_index">GB DEFRA Index</label>
<br />
</div>
<div class="h3">
<h3>Air Quality</h3>
</div>
<input
type="checkbox"
id="air_quality_co"
className="checkBoxFilter"
/>
<label for="air_quality_co">Air Quality CO</label>
<br />
<input
type="checkbox"
id="air_quality_no2"
className="checkBoxFilter"
/>
<label for="air_quality_no2">Air Quality NO2</label>
<br />
<input
type="checkbox"
id="air_quality_o3"
className="checkBoxFilter"
/>
<label for="air_quality_o3">Air Quality O3</label>
<br />
<input
type="checkbox"
id="air_quality_so2"
className="checkBoxFilter"
/>
<label for="air_quality_so2">Air Quality SO2</label>
<br />
<input
type="checkbox"
id="air_quality_pm2_5"
className="checkBoxFilter"
/>
<label for="air_quality_pm2_5">Air Quality PM2.5</label>
<br />
<input
type="checkbox"
id="air_quality_pm10"
className="checkBoxFilter"
/>
<label for="air_quality_pm10">Air Quality PM10</label>
<br />
<input
type="checkbox"
id="air_quality_us_epa_index"
className="checkBoxFilter"
/>
<label for="air_quality_us_epa_index">US EPA Index</label>
<br />
<input
type="checkbox"
id="air_quality_gb_defra_index"
className="checkBoxFilter"
/>
<label for="air_quality_gb_defra_index">GB DEFRA Index</label>
<br />
</div>
</div>
<div>
<label for="units">Choose a unit:</label>
<select name="unnits" id="units">
......@@ -255,19 +300,19 @@ const Currentdata = (props) => {
Generate
</button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br />
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<br />
<pre id="weatherData"></pre>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<br />
<br />
</div>
</div>
);
......@@ -496,6 +541,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 @ 447c97b4
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 @ 447c97b4
......@@ -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