dw

frontend/src/components/weather/currentData.css

 .filter label {
   display: block;
   margin-bottom: 5px;
-  }
+}
 
-  .filter input[type="text"],
-  
-  .filter select {
+.filter input[type="text"],
+.filter select {
   width: 100%;
   padding: 8px;
   margin-bottom: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  }
+}
 
-  .filter button {
+.filter button {
   padding: 10px 20px;
   background-color: var(--dl-color-theme-primary1);
   color: #fff;
@@ -21,27 +20,63 @@
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
-  }
+}
 
-  .filter button:hover {
+.filter button:hover {
   background-color: var(--dl-color-theme-primary2);
-  }
+}
 
-  .output {
+.output {
   margin-top: 40px;
-  }
+}
 
-  .checkBoxFilter {
+.checkBoxFilter {
   margin-bottom: 10px;
-  }
+}
 
-  #weatherData {
+#weatherData {
   white-space: pre-wrap; /* Umbruch von langen Zeilen */
-  }
-  #apiUrl {
+}
+#apiUrl {
   margin-top: 50px;
-  }
+}
 
-  #apiUrloutput {
+#apiUrloutput {
   width: 1250px;
-  }
+}
\ No newline at end of file
+.list-container {
+  width: 300px;
+  margin: 20px auto;
+  font-family: Arial, sans-serif;
+}
+
+.list-item {
+  border: 1px solid #ccc;
+  margin: 10px 0;
+  padding: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+  cursor: pointer;
+}
+
+.list-item:hover {
+  background-color: #f0f0f0;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #666;
+}
+
+.APIButton {
+  display: block;
+  margin: 10px auto;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+}

frontend/src/components/weather/currentData.js

-import React from "react";
+import React, { useState } from "react";
 
 import "./currentData.css";
 
 const Currentdata = (props) => {
+  const [query, setQuery] = useState("");
+  const [data, setData] = useState([]);
+
+  const handleInputChange = (e) => {
+    setQuery(e.target.value);
+    if (e.target.value.trim() !== "") {
+      searchAPI(e.target.value.trim());
+    }
+  };
+
   return (
     <div className="home-container">
-      <div>
-        <div className="thq-grid-5">
+      <div className="thq-grid-3">
         <div class="filter">
-            <label for="location">Location:</label>
-            <input type="text" id="city_text" placeholder="Location" />
+          <label htmlFor="location">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}
+            />
+          ))}
           <br />
           <label for="region">Region:</label>
           <input type="text" id="region_text" placeholder="Region" />
@@ -59,11 +84,7 @@ const Currentdata = (props) => {
           />
           <label> Last Updated Epoch</label>
           <br />
-            <input
-              type="checkbox"
-              id="last_updated"
-              className="checkBoxFilter"
-            />
+          <input type="checkbox" id="last_updated" className="checkBoxFilter" />
           <label> Last Updated</label>
           <br />
           <input type="checkbox" id="temp_c" className="checkBoxFilter" />
@@ -98,11 +119,7 @@ const Currentdata = (props) => {
           <input type="checkbox" id="wind" className="checkBoxFilter" />
           <label for="wind">Wind </label>
           <br />
-            <input
-              type="checkbox"
-              id="wind_degree"
-              className="checkBoxFilter"
-            />
+          <input type="checkbox" id="wind_degree" className="checkBoxFilter" />
           <label for="wind_degree">Wind Degree</label>
           <br />
           <input type="checkbox" id="wind_dir" className="checkBoxFilter" />
@@ -213,15 +230,11 @@ const Currentdata = (props) => {
             <br />
             <input className="input" type="text" id="apiUrloutput" readOnly />
           </div>
-            <button className="APIButton" onClick={searchAPI}>
-              City api
-            </button>
           <br />
           <br />
         </div>
       </div>
     </div>
-    </div>
   );
 
   function getData() {
@@ -424,10 +437,9 @@ const Currentdata = (props) => {
       });
   }
   function searchAPI() {
-    const cityInput = document.getElementById("city").value;
+    const cityInput = document.getElementById("city_text").value;
 
-    const apiKey = "1244099aeaee4b179e6111803241304";
-    const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;
+    const apiUrl = `http://localhost:8080/search?city=${cityInput}`;
 
     fetch(apiUrl)
       .then((response) => {
@@ -438,12 +450,7 @@ const Currentdata = (props) => {
         return response.json();
       })
       .then((data) => {
-        // Wetterdaten anzeigen
-        document.getElementById("weatherData").innerText = JSON.stringify(
-          data,
-          null,
-          2
-        );
+        setData(data);
       })
       .catch((error) => {
         console.error("There was a problem with the fetch operation:", error);
@@ -455,4 +462,21 @@ const Currentdata = (props) => {
   }
 };
 
+const ListItem = ({ name, country, region, lat, lon }) => {
+  const handleClick = () => {
+    alert(`Element geklickt: ${name}`);
+  };
+
+  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;