frontend

frontend/src/components/weather/current.css

+.filter label {
+    display: block;
+    margin-bottom: 5px;
+  }
+  
+  .filter input[type="text"],
+  
+  .filter select {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  
+  .filter button {
+    padding: 10px 20px;
+    background-color: var(--dl-color-theme-primary1);
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  .filter button:hover {
+    background-color: var(--dl-color-theme-primary2);
+  }
+  
+  .output {
+    margin-top: 40px;
+  }
+  
+  .checkBoxFilter {
+    margin-bottom: 10px;
+  }
+  
+  #weatherData {
+    white-space: pre-wrap; /* Umbruch von langen Zeilen */
+  }
+  #apiUrl {
+    margin-top: 50px;
+  }
+  
+  #apiUrloutput {
+    width: 1250px;
+  }
\ No newline at end of file

frontend/src/components/weather/current.js

+import React from "react";
+
+import PropTypes from "prop-types";
+
+const Current = (props) => {
+  function getData() {
+    const city = document.getElementById("city").value;
+    const region = document.getElementById("region").value;
+    const country = document.getElementById("country").value;
+    const latitude = document.getElementById("latitude").value;
+    const longitude = document.getElementById("longitude").value;
+    const temperature = document.getElementById("temperature").checked;
+    const isDay = document.getElementById("isDay").checked;
+    const condition = document.getElementById("condition").checked;
+    const pressure = document.getElementById("pressure").checked;
+    const precipitation = document.getElementById("precipitation").checked;
+    const humidity = document.getElementById("humidity").checked;
+    const cloud = document.getElementById("cloud").checked;
+    const feelslikeTemp = document.getElementById("feelslikeTemp").checked;
+    const visibility = document.getElementById("visibility").checked;
+    const uv = document.getElementById("uv").checked;
+    const gust = document.getElementById("gust").checked;
+    const airquality = boolToWord(
+      document.getElementById("airquality").checked
+    );
+    const unitTemperature = document.getElementById("unitTemperature").value;
+    const unitWindSpeed = document.getElementById("unitWindSpeed").value;
+    const unitPressure = document.getElementById("unitPressure").value;
+    const unitPrecipitation =
+      document.getElementById("unitPrecipitation").value;
+    const output = document.getElementById("output").value;
+    const format = document.getElementById("format").value;
+
+    const apiKey = "1244099aeaee4b179e6111803241304";
+    const apiUrl = `https://api.weatherapi.com/v1/current.${format}?key=${apiKey}&q=${city}&aqi=${airquality}`;
+
+    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;
+      })
+      .catch((error) => {
+        console.error("There was a problem with the fetch operation:", error);
+      });
+  }
+  function searchAPI() {
+    const cityInput = document.getElementById("city").value;
+
+    const apiKey = "1244099aeaee4b179e6111803241304";
+    const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;
+
+    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
+        );
+      })
+      .catch((error) => {
+        console.error("There was a problem with the fetch operation:", error);
+      });
+  }
+
+  function boolToWord(bool) {
+    return bool ? "yes" : "no";
+  }
+
+  return (
+    <div className="home-container">
+    <div>
+      <div className="thq-grid-5">
+        <div class="filter">
+          <label for="city">City:</label>
+          <input type="text" id="city" placeholder="City" />
+          <br />
+          <label for="city">Region:</label>
+          <input type="text" id="region" placeholder="Region" />
+          <br />
+          <label>Country:</label>
+          <input type="text" id="country" placeholder="Country" />
+          <br />
+          <label>Latitude:</label>
+          <input type="text" id="latitude" placeholder="Latitude" />
+          <label>Longitude:</label>
+          <input type="text" id="longitude" placeholder="Longitude" />
+          <br />
+        </div>
+        <div>
+          <input
+            type="checkbox"
+            id="temperature"
+            className="checkBoxFilter"
+          />
+          <label> Temprature</label>
+          <br />
+          <input type="checkbox" id="isDay" className="checkBoxFilter" />
+          <label> Is it day?</label>
+          <br />
+          <input type="checkbox" id="condition" className="checkBoxFilter" />
+          <label> Condition</label>
+          <br />
+          <input type="checkbox" id="pressure" className="checkBoxFilter" />
+          <label> Pressure</label>
+          <br />
+          <input
+            type="checkbox"
+            id="precipitation"
+            className="checkBoxFilter"
+          />
+          <label> Precipitation</label>
+          <br />
+          <input type="checkbox" id="humidity" className="checkBoxFilter" />
+          <label> Humidity</label>
+          <br />
+          <input type="checkbox" id="cloud" className="checkBoxFilter" />
+          <label> Cloud</label>
+          <br />
+          <input
+            type="checkbox"
+            id="feelslikeTemp"
+            className="checkBoxFilter"
+          />
+          <label> Feelslike Temp.</label>
+          <br />
+          <input type="checkbox" id="visibility" className="checkBoxFilter" />
+          <label> Visibility</label>
+          <br />
+          <input type="checkbox" id="uv" className="checkBoxFilter" />
+          <label> UV-Index</label>
+          <br />
+          <input type="checkbox" id="gust" className="checkBoxFilter" />
+          <label> Gust</label>
+          <br />
+          <input type="checkbox" id="airquality" className="checkBoxFilter" />
+          <label> Airquality</label>
+          <br />
+        </div>
+        <div class="filter">
+          <label>Temperature Unit:</label>
+          <select id="unitTemperature">
+            <option value="temp_c">Celsius</option>
+            <option value="temp_f">Fahrenheit</option>
+          </select>
+          <label>Wind speed Unit:</label>
+          <select id="unitWindSpeed">
+            <option value="wind_kph">km/h</option>
+            <option value="wind_mph">Mph</option>
+          </select>
+          <label>Pressure Unit:</label>
+          <select id="unitPressure">
+            <option value="pressure_mb">Millibar</option>
+            <option value="pressure_in">Inch</option>
+          </select>
+          <label>Precipitation Unit:</label>
+          <select id="unitPrecipitation">
+            <option value="precip_mm">Millimeter</option>
+            <option value="precip_in">Inch</option>
+          </select>
+        </div>
+
+        <div class="filter">
+          <label>Output:</label>
+          <select id="output">
+            <option value="local">Local</option>
+            <option value="database">API</option>
+          </select>
+          <br />
+          <label>Data format:</label>
+          <select id="format">
+            <option value="json">JSON</option>
+            <option value="csv">CSV</option>
+            <option value="xml">XML</option>
+          </select>
+          <br />
+          <button className="APIButton" onClick={searchAPI}>City api</button>
+        </div>
+      </div>
+      <div>
+        <button className="thq-button-filled" onClick={getData}>
+          Generate
+        </button>
+      </div>
+
+      <div class="output">
+        <h2>Output:</h2>
+        <br />
+        <pre id="weatherData"></pre>
+      </div>
+    </div>
+    <div id="apiUrl">
+      <label>API URL:</label>
+      <br />
+      <input className="input" type="text" id="apiUrloutput" readOnly />
+    </div>
+  </div>
+  );
+};
+
+export default Current;
\ No newline at end of file

frontend/src/components/weather/location.css

+.filter label {
+    display: block;
+    margin-bottom: 5px;
+  }
+  
+  .filter input[type="text"],
+  
+  .filter select {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  
+  .filter button {
+    padding: 10px 20px;
+    background-color: var(--dl-color-theme-primary1);
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  .filter button:hover {
+    background-color: var(--dl-color-theme-primary2);
+  }
+  
+  .output {
+    margin-top: 40px;
+  }
+  
+  .checkBoxFilter {
+    margin-bottom: 10px;
+  }
+  
+  #weatherData {
+    white-space: pre-wrap; /* Umbruch von langen Zeilen */
+  }
+  #apiUrl {
+    margin-top: 50px;
+  }
+  
+  #apiUrloutput {
+    width: 1250px;
+  }
\ No newline at end of file

frontend/src/components/weather/location.js

+import React from "react";
+
+import "./location.css";
+
+const Location = (props) => {
+    return (
+        <div className="home-container">
+          <div>
+            <div className="thq-grid-5">
+              <div class="filter">
+                <label for="location">Location:</label>
+                <input type="text" id="location" placeholder="Location" />
+                <br />
+                <label for="region">Region:</label>
+                <input type="text" id="region" placeholder="Region" />
+                <br />
+                <label>Country:</label>
+                <input type="text" id="country" placeholder="Country" />
+                <br />
+                <label>Latitude:</label>
+                <input type="text" id="latitude" placeholder="Latitude" />
+                <label>Longitude:</label>
+                <input type="text" id="longitude" placeholder="Longitude" />
+                <br />
+              </div>
+              <div>
+                <input type="checkbox" id="location" className="checkBoxFilter" />
+                <label> Location</label>
+                <br />
+                <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 />
+                <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 />
+                <br />
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+
+  function getData() {
+    const city = document.getElementById("city").value;
+    const region = document.getElementById("region").value;
+    const country = document.getElementById("country").value;
+    const latitude = document.getElementById("latitude").value;
+    const longitude = document.getElementById("longitude").value;
+    const temperature = document.getElementById("temperature").checked;
+    const isDay = document.getElementById("isDay").checked;
+    const condition = document.getElementById("condition").checked;
+    const pressure = document.getElementById("pressure").checked;
+    const precipitation = document.getElementById("precipitation").checked;
+    const humidity = document.getElementById("humidity").checked;
+    const cloud = document.getElementById("cloud").checked;
+    const feelslikeTemp = document.getElementById("feelslikeTemp").checked;
+    const visibility = document.getElementById("visibility").checked;
+    const uv = document.getElementById("uv").checked;
+    const gust = document.getElementById("gust").checked;
+    const airquality = boolToWord(
+      document.getElementById("airquality").checked
+    );
+    const unitTemperature = document.getElementById("unitTemperature").value;
+    const unitWindSpeed = document.getElementById("unitWindSpeed").value;
+    const unitPressure = document.getElementById("unitPressure").value;
+    const unitPrecipitation =
+      document.getElementById("unitPrecipitation").value;
+    const output = document.getElementById("output").value;
+    const format = document.getElementById("format").value;
+
+    const apiKey = "1244099aeaee4b179e6111803241304";
+    const apiUrl = `https://api.weatherapi.com/v1/current.${format}?key=${apiKey}&q=${city}&aqi=${airquality}`;
+
+    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;
+      })
+      .catch((error) => {
+        console.error("There was a problem with the fetch operation:", error);
+      });
+  }
+  function searchAPI() {
+    const cityInput = document.getElementById("city").value;
+
+    const apiKey = "1244099aeaee4b179e6111803241304";
+    const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;
+
+    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
+        );
+      })
+      .catch((error) => {
+        console.error("There was a problem with the fetch operation:", error);
+      });
+  }
+
+  function boolToWord(bool) {
+    return bool ? "yes" : "no";
+  }
+
+};
+
+export default Location;
\ No newline at end of file

frontend/src/views/data.js

@@ -2,228 +2,24 @@ import React from "react";
 
 import Navbar4 from "../components/homepage/navbar4";
 import Footer15 from "../components/homepage/footer15";
+import Location from "../components/weather/location";
+import Current from "../components/weather/current";
 import "./home.css";
 import "./data.css";
 
 const Data = (props) => {
-  function getData() {
-    const city = document.getElementById("city").value;
-    const region = document.getElementById("region").value;
-    const country = document.getElementById("country").value;
-    const latitude = document.getElementById("latitude").value;
-    const longitude = document.getElementById("longitude").value;
-    const temperature = document.getElementById("temperature").checked;
-    const isDay = document.getElementById("isDay").checked;
-    const condition = document.getElementById("condition").checked;
-    const pressure = document.getElementById("pressure").checked;
-    const precipitation = document.getElementById("precipitation").checked;
-    const humidity = document.getElementById("humidity").checked;
-    const cloud = document.getElementById("cloud").checked;
-    const feelslikeTemp = document.getElementById("feelslikeTemp").checked;
-    const visibility = document.getElementById("visibility").checked;
-    const uv = document.getElementById("uv").checked;
-    const gust = document.getElementById("gust").checked;
-    const airquality = boolToWord(
-      document.getElementById("airquality").checked
-    );
-    const unitTemperature = document.getElementById("unitTemperature").value;
-    const unitWindSpeed = document.getElementById("unitWindSpeed").value;
-    const unitPressure = document.getElementById("unitPressure").value;
-    const unitPrecipitation =
-      document.getElementById("unitPrecipitation").value;
-    const output = document.getElementById("output").value;
-    const format = document.getElementById("format").value;
-
-    const apiKey = "1244099aeaee4b179e6111803241304";
-    const apiUrl = `https://api.weatherapi.com/v1/current.${format}?key=${apiKey}&q=${city}&aqi=${airquality}`;
-
-    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;
-      })
-      .catch((error) => {
-        console.error("There was a problem with the fetch operation:", error);
-      });
-  }
-  function searchAPI() {
-    const cityInput = document.getElementById("city").value;
-
-    const apiKey = "1244099aeaee4b179e6111803241304";
-    const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;
-
-    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
-        );
-      })
-      .catch((error) => {
-        console.error("There was a problem with the fetch operation:", error);
-      });
-  }
-
-  function boolToWord(bool) {
-    return bool ? "yes" : "no";
-  }
-
-  return (
-    <div className="home-container">
+  return(
+    <div>
       <div className="home-navbar1">
         <Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
       </div>
-
-      <div>
-        <div className="thq-grid-5">
-          <div class="filter">
-            <label for="city">City:</label>
-            <input type="text" id="city" placeholder="City" />
-            <br />
-            <label for="city">Region:</label>
-            <input type="text" id="region" placeholder="Region" />
-            <br />
-            <label>Country:</label>
-            <input type="text" id="country" placeholder="Country" />
-            <br />
-            <label>Latitude:</label>
-            <input type="text" id="latitude" placeholder="Latitude" />
-            <label>Longitude:</label>
-            <input type="text" id="longitude" placeholder="Longitude" />
-            <br />
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="temperature"
-              className="checkBoxFilter"
-            />
-            <label> Temprature</label>
-            <br />
-            <input type="checkbox" id="isDay" className="checkBoxFilter" />
-            <label> Is it day?</label>
-            <br />
-            <input type="checkbox" id="condition" className="checkBoxFilter" />
-            <label> Condition</label>
-            <br />
-            <input type="checkbox" id="pressure" className="checkBoxFilter" />
-            <label> Pressure</label>
-            <br />
-            <input
-              type="checkbox"
-              id="precipitation"
-              className="checkBoxFilter"
-            />
-            <label> Precipitation</label>
-            <br />
-            <input type="checkbox" id="humidity" className="checkBoxFilter" />
-            <label> Humidity</label>
-            <br />
-            <input type="checkbox" id="cloud" className="checkBoxFilter" />
-            <label> Cloud</label>
-            <br />
-            <input
-              type="checkbox"
-              id="feelslikeTemp"
-              className="checkBoxFilter"
-            />
-            <label> Feelslike Temp.</label>
-            <br />
-            <input type="checkbox" id="visibility" className="checkBoxFilter" />
-            <label> Visibility</label>
-            <br />
-            <input type="checkbox" id="uv" className="checkBoxFilter" />
-            <label> UV-Index</label>
-            <br />
-            <input type="checkbox" id="gust" className="checkBoxFilter" />
-            <label> Gust</label>
-            <br />
-            <input type="checkbox" id="airquality" className="checkBoxFilter" />
-            <label> Airquality</label>
-            <br />
-          </div>
-          <div class="filter">
-            <label>Temperature Unit:</label>
-            <select id="unitTemperature">
-              <option value="temp_c">Celsius</option>
-              <option value="temp_f">Fahrenheit</option>
-            </select>
-            <label>Wind speed Unit:</label>
-            <select id="unitWindSpeed">
-              <option value="wind_kph">km/h</option>
-              <option value="wind_mph">Mph</option>
-            </select>
-            <label>Pressure Unit:</label>
-            <select id="unitPressure">
-              <option value="pressure_mb">Millibar</option>
-              <option value="pressure_in">Inch</option>
-            </select>
-            <label>Precipitation Unit:</label>
-            <select id="unitPrecipitation">
-              <option value="precip_mm">Millimeter</option>
-              <option value="precip_in">Inch</option>
-            </select>
-          </div>
-
-          <div class="filter">
-            <label>Output:</label>
-            <select id="output">
-              <option value="local">Local</option>
-              <option value="database">API</option>
-            </select>
-            <br />
-            <label>Data format:</label>
-            <select id="format">
-              <option value="json">JSON</option>
-              <option value="csv">CSV</option>
-              <option value="xml">XML</option>
-            </select>
-            <br />
-            <button className="APIButton" onClick={searchAPI}>City api</button>
-          </div>
-        </div>
-        <div>
-          <button className="thq-button-filled" onClick={getData}>
-            Generate
-          </button>
-        </div>
-
-        <div class="output">
-          <h2>Output:</h2>
-          <br />
-          <pre id="weatherData"></pre>
-        </div>
-      </div>
-      <div id="apiUrl">
-        <label>API URL:</label>
-        <br />
-        <input className="input" type="text" id="apiUrloutput" readOnly />
+      <div className="location">
+        <Location></Location>
       </div>
-
       <div className="home-footer11">
-        <Footer15></Footer15>
+         <Footer15></Footer15>
       </div>
-    </div>
+</div>
   );
 };
 

frontend/src/views/historicalweather.js

@@ -89,7 +89,7 @@ const Historicalweather = (props) => {
   }
 
   return (
-    <div className="home-container">
+   <div className="home-container">
       <div className="home-navbar1">
         <Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
       </div>