Skip to content
GitLab
Hide whitespace changes
Inline Side-by-side
frontend/src/components/homepage/features_about1.css 0 → 100644
View file @ cabb31c9
.features17-layout349 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.features17-max-width {
gap: var(--dl-space-space-fiveunits);
display: flex;
align-items: center;
}
.features17-image-container {
flex: 1;
display: flex;
position: relative;
align-items: center;
}
.features17-content {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.features17-section-title {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.features17-content1 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
@media(max-width: 991px) {
.features17-max-width {
gap: var(--dl-space-space-twounits);
flex-direction: column;
}
}
frontend/src/components/homepage/features_about1.js 0 → 100644
View file @ cabb31c9
import React from "react";
import PropTypes from "prop-types";
import "./features_about1.css";
const Features17 = (props) => {
return (
<div className="features17-layout349 thq-section-padding">
<div className="features17-max-width thq-section-max-width">
<div className="features17-image-container">
<img
alt={props.feature1ImageAlt}
src="/external/HFT-logo-klein-Aplustext.jpg"
className="thq-img-ratio-16-9"
/>
</div>
<div className="features17-content">
<div className="features17-section-title">
<span className="thq-body-small">{props.feature1Slogan}</span>
<div className="features17-content1">
<h2 className="thq-heading-2">{props.feature1Title}</h2>
<p className="thq-body-large">{props.feature1Description}</p>
</div>
</div>
</div>
</div>
</div>
);
};
Features17.defaultProps = {
feature1Title: "About Us...",
feature1ImageSrc: "/external/HFT-logo-klein-Aplustext.jpg",
feature1ImageAlt: "Accurate Weather Forecast Image",
feature1Description:
"We are a group of students from the Bachelor's program 'Digitalisierung und Informationsmanagement' at the University of Applied Sciences Stuttgart. Our common goal is to provide accurate and comprehensive weather data, both historical and current information. These data should be easily accessible to everyone and available for further analysis and applications.",
};
Features17.propTypes = {
feature1Title: PropTypes.string,
feature1ImageSrc: PropTypes.string,
feature1ImageAlt: PropTypes.string,
feature1Description: PropTypes.string,
};
export default Features17;
frontend/src/components/homepage/features_about2.css 0 → 100644
View file @ cabb31c9
.features17-layout349 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.features17-max-width {
gap: var(--dl-space-space-fiveunits);
display: flex;
align-items: center;
}
.features17-image-container {
flex: 1;
display: flex;
position: relative;
align-items: center;
}
.features17-content {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.features17-section-title {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.features17-content1 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
@media(max-width: 991px) {
.features17-max-width {
gap: var(--dl-space-space-twounits);
flex-direction: column;
}
}
frontend/src/components/homepage/features_about2.js 0 → 100644
View file @ cabb31c9
import React from "react";
import PropTypes from "prop-types";
import "./features_about2.css";
const Features17 = (props) => {
return (
<div className="features17-layout349 thq-section-padding">
<div className="features17-max-width thq-section-max-width">
<div className="features17-content">
<div className="features17-section-title">
<span className="thq-body-small">{props.feature1Slogan}</span>
<div className="features17-content1">
<h2 className="thq-heading-2">{props.feature1Title}</h2>
<p className="thq-body-large">{props.feature1Description}</p>
</div>
</div>
</div>
<div className="features17-image-container">
<img
alt={props.feature1ImageAlt}
src="/external/project.jpg"
className="thq-img-ratio-16-9"
/>
</div>
</div>
</div>
);
};
Features17.defaultProps = {
feature1Title: "Information about the project",
feature1ImageSrc: "/external/project.jpg",
feature1ImageAlt: "Accurate Weather Forecast Image",
feature1Description:
"Join us on a fascinating journey through the diverse weather events of recent years. In the business world, data is indispensable, and we provide it to you quickly and free of charge via our website - whether it's accessible locally or stored in a database. With us, you gain access to comprehensive weather data, and we strive to make it easily accessible to everyone. Our platform offers a user-friendly interface to quickly access local weather data, whether for research purposes, business analysis, or simply out of personal interest.",
};
Features17.propTypes = {
feature1Title: PropTypes.string,
feature1ImageSrc: PropTypes.string,
feature1ImageAlt: PropTypes.string,
feature1Description: PropTypes.string,
};
export default Features17;
frontend/src/components/navbar4.js → frontend/src/components/homepage/navbar4.js
View file @ cabb31c9
...@@ -34,9 +34,6 @@ const Navbar4 = (props) => { ...@@ -34,9 +34,6 @@ const Navbar4 = (props) => {
<span className="thq-link thq-body-small" <span className="thq-link thq-body-small"
onClick={() => (window.location.href = "/historicalweather")}>{props.link5}</span> onClick={() => (window.location.href = "/historicalweather")}>{props.link5}</span>
</nav> </nav>
<div className="navbar4-buttons">
<button className="thq-button-outline">{props.action2}</button>
</div>
</div> </div>
</header> </header>
</div> </div>
...@@ -52,7 +49,6 @@ Navbar4.defaultProps = { ...@@ -52,7 +49,6 @@ Navbar4.defaultProps = {
logoAlt: "Weather App", logoAlt: "Weather App",
logoSrc: logoSrc:
"https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original", "https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original",
action2: "Dark Mode",
imageSrc: "23887698-7562-4cff-bf5f-d07a1767f79b", imageSrc: "23887698-7562-4cff-bf5f-d07a1767f79b",
imageAlt: "image", imageAlt: "image",
imageSrc1: "23887698-7562-4cff-bf5f-d07a1767f79b", imageSrc1: "23887698-7562-4cff-bf5f-d07a1767f79b",
......
frontend/src/components/weather/currentData.css 0 → 100644
View file @ cabb31c9
.fw {
display: block;
margin-bottom: 5px;
}
.fw input[type="text"],
.fw {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.fw {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
display: grid;
text-align: center;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output {
margin-top: 40px;
}
.checkBoxFilter {
margin-bottom: 10px;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
#apiUrl {
margin-top: 50px;
}
#apiUrloutput {
width: 1250px;
}
.field_write {
margin-top: 30px;
display: flex;
}
.fw {
margin-left: 20px;
}
.h1 {
margin-bottom: -30px;
}
.thq-grid-5 {
display: flex;
flex-direction: column;
}
.h2 {
margin-top: 40px;
}
.dataselect {
display: flex;
flex-direction: row;
}
.data {
margin-top: 40px;
margin-left: 80px;
}
.h3 {
margin-bottom: 10px;
}
.generate {
margin-top: 20px;
}
.list-item {
border: 1px solid #fff;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
cursor: pointer;
}
.list-item:hover {
background-color: #0a3a44; /* Change background color on hover */
}
frontend/src/components/weather/currentData.js 0 → 100644
View file @ cabb31c9
import React, { useState } from "react";
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);
if (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) => {
var xml = jsonToXml(weatherdata);
xml =
"<?xml version='1.0' encoding='UTF-8' ?><weatherdata>" +
xml +
"</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 = (obj) => {
var xml = "";
for (var prop in obj) {
xml += "<" + prop + ">";
if (Array.isArray(obj[prop])) {
for (var array of obj[prop]) {
// A real botch fix here
xml += "</" + prop + ">";
xml += "<" + prop + ">";
xml += jsonToXml(new Object(array));
}
} else if (typeof obj[prop] == "object") {
xml += jsonToXml(new Object(obj[prop]));
} else {
xml += obj[prop];
}
xml += "</" + prop + ">";
}
var xml = xml.replace(/<\/?[0-9]{1,}>/g, "");
return xml;
};
const jsonToCsv = (json) => {
const rows = [];
// Funktion, um die Header und die Werte zu extrahieren
function processObject(obj, parentKey = "") {
const keys = Object.keys(obj);
keys.forEach((key) => {
const newKey = parentKey ? `${parentKey}_${key}` : key;
if (typeof obj[key] === "object" && !Array.isArray(obj[key])) {
processObject(obj[key], newKey);
} else {
rows.push({ key: newKey, value: obj[key] });
}
});
}
// JSON verarbeiten
processObject(json);
// Header und Werte trennen
const headers = rows.map((row) => row.key).join(";");
const values = rows.map((row) => row.value).join(";");
// CSV-Zeilen erstellen
const csv = `${headers}\n${values}`;
return csv;
};
return (
<div className="home-container">
<div className="thq-grid-5">
<div class="h1">
<h1>Choose your City</h1>
<br />
</div>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose your Location</h3>
</div>
<label htmlFor="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}
/>
))}
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Region</h3>
</div>
<input type="text" id="region_text" placeholder="Region" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Country</h3>
</div>
<input type="text" id="country_text" placeholder="Country" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Latitude</h3>
</div>
<input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Longitude</h3>
</div>
<input type="text" id="longitude_text" placeholder="Longitude" />
</div>
</div>
<div class="h1">
<h1>Choose your custom output Data</h1>
<br />
</div>
<div className="dataselect">
<div class="data">
<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="data">
<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>
<div class="data">
<div class="h3">
<h3>Wind</h3>
</div>
<input type="checkbox" id="wind" className="checkBoxFilter" />
<label for="wind">Wind Speed</label>
<br />
<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>
<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>
<div class="fw1">
<div class="h3">
<h3>Choose a unit</h3>
</div>
<select name="unnits" id="units">
<option value="world">Rest of The World</option>
<option value="american">
American units: /eagles per shool shootings
</option>
</select>
</div>
<div class="generate">
<button className="thq-button-filled" onClick={getData}>
Generate your data
</button>
</div>
<br />
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
<div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
</div>
</div>
);
function getData() {
//switch
const units = document.getElementById("units").value;
const latitude_text = document.getElementById("latitude_text").value;
const longitude_text = document.getElementById("longitude_text").value;
//Checkboxes
//location
const name = document.getElementById("name").checked;
const region = document.getElementById("region").checked;
const country = document.getElementById("country").checked;
const lon = document.getElementById("lon").checked;
const lat = document.getElementById("lat").checked;
const tz_id = document.getElementById("tz_id").checked;
const localtime_epoch = document.getElementById("localtime_epoch").checked;
const localtime = document.getElementById("localtime").checked;
//current
const last_updated_epoch =
document.getElementById("last_updated_epoch").checked;
const last_updated = document.getElementById("last_updated").checked;
const temp = document.getElementById("temp").checked;
const id_day = document.getElementById("id_day").checked;
const condition = document.getElementById("condition_text").checked;
const wind = document.getElementById("wind").checked;
const wind_degree = document.getElementById("wind_degree").checked;
const wind_dir = document.getElementById("wind_dir").checked;
const pressure = document.getElementById("pressure").checked;
const precip = document.getElementById("precip").checked;
const humidity = document.getElementById("humidity").checked;
const cloud = document.getElementById("cloud").checked;
const feelslike = document.getElementById("feelslike").checked;
const windchill = document.getElementById("windchill").checked;
const heatindex = document.getElementById("heatindex").checked;
const dewpoint = document.getElementById("dewpoint").checked;
const vis = document.getElementById("vis").checked;
const uv = document.getElementById("uv").checked;
const gust = document.getElementById("gust").checked;
const air_quality_co = document.getElementById("air_quality_co").checked;
const air_quality_no2 = document.getElementById("air_quality_no2").checked;
const air_quality_o3 = document.getElementById("air_quality_o3").checked;
const air_quality_so2 = document.getElementById("air_quality_so2").checked;
const air_quality_pm2_5 =
document.getElementById("air_quality_pm2_5").checked;
const air_quality_pm10 =
document.getElementById("air_quality_pm10").checked;
const air_quality_us_epa_index = document.getElementById(
"air_quality_us_epa_index"
).checked;
const air_quality_gb_defra_index = document.getElementById(
"air_quality_gb_defra_index"
).checked;
let filterArray = [];
if (name) {
filterArray.push("name");
}
if (region) {
filterArray.push("region");
}
if (country) {
filterArray.push("country");
}
if (lon) {
filterArray.push("lon");
}
if (lat) {
filterArray.push("lat");
}
if (tz_id) {
filterArray.push("tz_id");
}
if (localtime_epoch) {
filterArray.push("localtime_epoch");
}
if (localtime) {
filterArray.push("localtime");
}
if (last_updated_epoch) {
filterArray.push("last_updated_epoch");
}
if (last_updated) {
filterArray.push("last_updated");
}
if (temp) {
if (units == "world") {
filterArray.push("temp_c");
} else {
filterArray.push("temp_f");
}
}
if (id_day) {
filterArray.push("id_day");
}
if (condition) {
filterArray.push("condition");
}
if (wind) {
if (units == "world") {
filterArray.push("wind_kph");
} else {
filterArray.push("wind_mph");
}
}
if (wind_degree) {
filterArray.push("wind_degree");
}
if (wind_dir) {
filterArray.push("wind_dir");
}
if (pressure) {
if (units == "world") {
filterArray.push("temp_mb");
} else {
filterArray.push("pressure_in");
}
}
if (precip) {
if (units == "world") {
filterArray.push("temp_mm");
} else {
filterArray.push("precip_in");
}
}
if (humidity) {
filterArray.push("humidity");
}
if (cloud) {
filterArray.push("cloud");
}
if (feelslike) {
if (units == "world") {
filterArray.push("feelslike_c");
} else {
filterArray.push("feelslike_f");
}
}
if (windchill) {
if (units == "world") {
filterArray.push("windchill_c");
} else {
filterArray.push("windchill_f");
}
}
if (heatindex) {
if (units == "world") {
filterArray.push("heatindex_c");
} else {
filterArray.push("heatindex_f");
}
}
if (dewpoint) {
if (units == "world") {
filterArray.push("dewpoint_c");
} else {
filterArray.push("dewpoint_f");
}
}
if (vis) {
if (units == "world") {
filterArray.push("vis_km");
} else {
filterArray.push("vis_miles");
}
}
if (uv) {
filterArray.push("uv");
}
if (gust) {
if (units == "world") {
filterArray.push("gust_kph");
} else {
filterArray.push("gust_mph");
}
}
if (
air_quality_co ||
air_quality_no2 ||
air_quality_o3 ||
air_quality_so2 ||
air_quality_pm2_5 ||
air_quality_pm10 ||
air_quality_us_epa_index ||
air_quality_gb_defra_index
) {
filterArray.push("air_quality");
}
if (air_quality_co) {
filterArray.push("co");
}
if (air_quality_no2) {
filterArray.push("no2");
}
if (air_quality_o3) {
filterArray.push("o3");
}
if (air_quality_so2) {
filterArray.push("so2");
}
if (air_quality_pm2_5) {
filterArray.push("pm2_5");
}
if (air_quality_pm10) {
filterArray.push("pm10");
}
if (air_quality_us_epa_index) {
filterArray.push("us-epa-index");
}
if (air_quality_gb_defra_index) {
filterArray.push("gb-defra-index");
}
let filterString = filterArray.join(",");
const apiUrl = `http://localhost:8080/currentweather?q=${latitude_text},${longitude_text}&filter=${filterString}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
// Wetterdaten anzeigen
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
document.getElementById("apiUrloutput").value = apiUrl;
setweatherData(data);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
function searchAPI() {
const cityInput = document.getElementById("city_text").value;
const apiUrl = `http://localhost:8080/search?city=${cityInput}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
setData(data);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
};
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 Currentdata;
frontend/src/components/weather/historicalWeatherData.css 0 → 100644
View file @ cabb31c9
.fw {
display: block;
margin-bottom: 5px;
}
.fw input[type="text"],
.fw {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.fw {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
display: grid;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output {
padding: 10px 20px;
color: #fff;
border-style: dashed;
border-color: #fff;
cursor: pointer;
transition: background-color 0.3s;
}
.checkBoxFilter {
margin-bottom: 10px;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
#apiUrl {
margin-top: 50px;
}
#apiUrloutput {
width: 1250px;
}
.field_write {
margin-top: 30px;
display: flex;
}
.fw {
margin-left: 20px;
}
.h1 {
margin-bottom: -30px;
}
.thq-grid-5 {
display: flex;
flex-direction: column;
}
.dataselect {
display: flex;
flex-direction: row;
}
.data {
margin-top: 40px;
margin-left: 80px;
}
.h3 {
margin-bottom: 10px;
}
.list-item {
border: 1px solid #fff;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
cursor: pointer;
}
.list-item:hover {
background-color: #0a3a44; /* Change background color on hover */
}
frontend/src/components/weather/historicalWeatherData.js 0 → 100644
View file @ cabb31c9
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);
if (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) => {
var xml = jsonToXml(weatherdata);
xml =
"<?xml version='1.0' encoding='UTF-8' ?><weatherdata>" +
xml +
"</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 = (obj) => {
var xml = "";
for (var prop in obj) {
xml += "<" + prop + ">";
if (Array.isArray(obj[prop])) {
for (var array of obj[prop]) {
// A real botch fix here
xml += "</" + prop + ">";
xml += "<" + prop + ">";
xml += jsonToXml(new Object(array));
}
} else if (typeof obj[prop] == "object") {
xml += jsonToXml(new Object(obj[prop]));
} else {
xml += obj[prop];
}
xml += "</" + prop + ">";
}
var xml = xml.replace(/<\/?[0-9]{1,}>/g, "");
return xml;
};
const jsonToCsv = (json) => {
const rows = [];
// Funktion, um die Header und die Werte zu extrahieren
function processObject(obj, parentKey = "") {
const keys = Object.keys(obj);
keys.forEach((key) => {
const newKey = parentKey ? `${parentKey}_${key}` : key;
if (typeof obj[key] === "object" && !Array.isArray(obj[key])) {
processObject(obj[key], newKey);
} else {
rows.push({ key: newKey, value: obj[key] });
}
});
}
// JSON verarbeiten
processObject(json);
// Header und Werte trennen
const headers = rows.map((row) => row.key).join(";");
const values = rows.map((row) => row.value).join(";");
// CSV-Zeilen erstellen
const csv = `${headers}\n${values}`;
return csv;
};
return (
<div className="home-container">
<div className="thq-grid-5">
<div class="h1">
<h1>Choose your Customised Data</h1>
<br />
</div>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose your Location</h3>
</div>
<label htmlFor="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}
/>
))}
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Region</h3>
</div>
<label for="region_text"></label>
<input type="text" id="region_text" placeholder="Region" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Country</h3>
</div>
<label for="country_text"></label>
<input type="text" id="country_text" placeholder="Country" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Latitude</h3>
</div>
<label for="latitude_text"></label>
<input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Longitude</h3>
</div>
<label for="longitude_text"></label>
<input type="text" id="longitude_text" placeholder="Longitude" />
</div>
</div>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose your Time Zone</h3>
</div>
<label for="timezone_text"></label>
<input type="text" id="timezone_text" placeholder="Timezone" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Start date</h3>
</div>
<label for="start_date"></label>
<input type="date" id="start_date" name="Startdate"></input>
</div>
<div class="fw">
<div class="h3">
<h3>Choose your End date</h3>
</div>
<label for="end_date"></label>
<input type="date" id="end_date" name="Enddate"></input>
</div>
</div>
<div class="h1">
<h1>Choose your custom output Data</h1>
<br />
</div>
<div className="dataselect">
<div class="data">
<div class="h3">
<h3>Primery Data</h3>
</div>
<input type="checkbox" id="temperature_2m" class="checkBoxFilter" />
<label for="temperature_2m">Temperature 2m</label>
<br />
<input
type="checkbox"
id="relative_humidity_2m"
class="checkBoxFilter"
/>
<label for="relative_humidity_2m">Relative Humidity 2m</label>
<br />
<input type="checkbox" id="precipitation" class="checkBoxFilter" />
<label for="precipitation">Precipitation</label>
</div>
<div class="data">
<div class="h3">
<h3>Secondary Data</h3>
</div>
<input
type="checkbox"
id="surface_pressure"
class="checkBoxFilter"
/>
<label for="surface_pressure">Surface Pressure</label>
<br />
<input type="checkbox" id="wind_speed_10m" class="checkBoxFilter" />
<label for="wind_speed_10m">Wind Speed 10m</label>
<br />
<input
type="checkbox"
id="wind_direction_10m"
className="checkBoxFilter"
/>
<label for="wind_direction_10m">Wind Direction 10m</label>
<br />
<input
type="checkbox"
id="wind_gusts_10m"
className="checkBoxFilter"
/>
<label for="wind_gusts_10m">Wind Gusts 10m</label>
</div>
<div class="data">
<div class="h3">
<h3>Dayly Data</h3>
</div>
<input
type="checkbox"
id="temperature_2m_max"
class="checkBoxFilter"
/>
<label for="temperature_2m_max">Temperature 2m Max</label>
<br />
<input
type="checkbox"
id="temperature_2m_min"
class="checkBoxFilter"
/>
<label for="temperature_2m_min">Temperature 2m Min</label>
<br />
<input
type="checkbox"
id="temperature_2m_mean"
class="checkBoxFilter"
/>
<label for="temperature_2m_mean">Temperature 2m Mean</label>
<br />
<input
type="checkbox"
id="precipitation_sum"
class="checkBoxFilter"
/>
<label for="precipitation_sum">Precipitation Sum</label>
<br />
<input
type="checkbox"
id="precipitation_hours"
class="checkBoxFilter"
/>
<label for="precipitation_hours">Precipitation Hours</label>
<br />
<input
type="checkbox"
id="wind_speed_10m_max"
class="checkBoxFilter"
/>
<label for="wind_speed_10m_max">Wind Speed 10m Max</label>
<br />
<input
type="checkbox"
id="wind_gusts_10m_max"
class="checkBoxFilter"
/>
<label for="wind_gusts_10m_max">Wind Gusts 10m Max</label>
<br />
<input
type="checkbox"
id="wind_direction_10m_dominant"
class="checkBoxFilter"
/>
<label for="wind_direction_10m_dominant">
Wind Direction 10m Dominant
</label>
</div>
</div>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose a Temperature Unit</h3>
</div>
<label for="temp_units"></label>
<select name="unnits" id="temp_units">
<option value="celsius">Celsius C°</option>
<option value="fahrenheit">Fahrenheit F°</option>
</select>
</div>
<div class="fw">
<div class="h3">
<h3>Choose a Wind Speed Unit</h3>
</div>
<label for="wind_units"></label>
<select name="unnits" id="wind_units">
<option value="kmh">Km/h</option>
<option value="mph">Mph</option>
<option value="ms">m/s</option>
<option value="kn">Knots</option>
</select>
</div>
<div class="fw">
<div class="h3">
<h3>Choose a Precipitation Unit</h3>
</div>
<label for="prec_units"></label>
<select name="unnits" id="prec_units">
<option value="mm">Millimeter</option>
<option value="inch">Inch</option>
</select>
</div>
</div>
<button className="thq-button-filled" onClick={getData}>
Generate your data
</button>
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
<div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
</div>
</div>
);
function getData() {
const city_text = document.getElementById("city_text").value;
const region_text = document.getElementById("region_text").value;
const country_text = document.getElementById("country_text").value;
const latitude_text = document.getElementById("latitude_text").value;
const longitude_text = document.getElementById("longitude_text").value;
const timezone_text = document.getElementById("timezone_text").value;
const start_date = document.getElementById("start_date").value;
const end_date = document.getElementById("end_date").value;
//Checkboxes
const temperature_2m = document.getElementById("temperature_2m").checked;
const relative_humidity_2m = document.getElementById(
"relative_humidity_2m"
).checked;
const precipitation = document.getElementById("precipitation").checked;
const surface_pressure =
document.getElementById("surface_pressure").checked;
const wind_speed_10m = document.getElementById("wind_speed_10m").checked;
const wind_direction_10m =
document.getElementById("wind_direction_10m").checked;
const wind_gusts_10m = document.getElementById("wind_gusts_10m").checked;
const temperature_2m_max =
document.getElementById("temperature_2m_max").checked;
const temperature_2m_min =
document.getElementById("temperature_2m_min").checked;
const temperature_2m_mean = document.getElementById(
"temperature_2m_mean"
).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;
const temp_units = document.getElementById("temp_units").value;
const wind_units = document.getElementById("wind_units").value;
const prec_units = document.getElementById("prec_units").value;
let filterHourlyArray = [];
let filterDailyArray = [];
if (temperature_2m) {
filterHourlyArray.push("temperature_2m");
}
if (relative_humidity_2m) {
filterHourlyArray.push("relative_humidity_2m");
}
if (precipitation) {
filterHourlyArray.push("precipitation");
}
if (surface_pressure) {
filterHourlyArray.push("surface_pressure");
}
if (wind_speed_10m) {
filterHourlyArray.push("wind_speed_10m");
}
if (wind_direction_10m) {
filterHourlyArray.push("wind_direction_10m");
}
if (wind_gusts_10m) {
filterHourlyArray.push("wind_gusts_10m");
}
if (temperature_2m_max) {
filterDailyArray.push("temperature_2m_max");
}
if (temperature_2m_min) {
filterDailyArray.push("temperature_2m_min");
}
if (temperature_2m_mean) {
filterDailyArray.push("temperature_2m_mean");
}
if (precipitation_sum) {
filterDailyArray.push("precipitation_sum");
}
if (precipitation_hours) {
filterDailyArray.push("precipitation_hours");
}
if (wind_speed_10m_max) {
filterDailyArray.push("wind_speed_10m_max");
}
if (wind_gusts_10m_max) {
filterDailyArray.push("wind_gusts_10m_max");
}
if (wind_direction_10m_dominant) {
filterDailyArray.push("wind_direction_10m_dominant");
}
let filterHourlyString = filterHourlyArray.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}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
// Wetterdaten anzeigen
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
document.getElementById("apiUrloutput").value = apiUrl;
setweatherData(data);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
function searchAPI() {
const cityInput = document.getElementById("city_text").value;
const apiUrl = `http://localhost:8080/search?city=${cityInput}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
setData(data);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
};
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;
frontend/src/components/weather/weatherForecastData.css 0 → 100644
View file @ cabb31c9
.fw {
display: block;
margin-bottom: 5px;
}
.fw input[type="text"],
.fw {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.fw {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
display: grid;
text-align: center;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output {
margin-top: 40px;
}
.checkBoxFilter {
margin-bottom: 10px;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
#apiUrl {
margin-top: 50px;
}
#apiUrloutput {
width: 1250px;
}
.field_write {
margin-top: 30px;
display: flex;
}
.fw {
margin-left: 20px;
}
.h1 {
margin-bottom: -30px;
}
.thq-grid-5 {
display: flex;
flex-direction: column;
}
.dataselect {
display: flex;
flex-direction: row;
}
.data {
margin-top: 40px;
margin-left: 80px;
}
.h3 {
margin-bottom: 10px;
}
.generate {
margin-top: 20px;
}
.list-item {
border: 1px solid #fff;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
cursor: pointer;
}
.list-item:hover {
background-color: #0a3a44; /* Change background color on hover */
}

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