From c89230acdbbc7a93812f3d4f712b7616562e9c29 Mon Sep 17 00:00:00 2001
From: Florian Kotthoff <74312290+FlorianK13@users.noreply.github.com>
Date: Mon, 2 Sep 2024 11:23:29 +0200
Subject: [PATCH 1/2] Add autocompletion using komoot api #253

---
 src/components/PVSimulation/SearchField.jsx | 117 +++++++++++++++-----
 1 file changed, 92 insertions(+), 25 deletions(-)

diff --git a/src/components/PVSimulation/SearchField.jsx b/src/components/PVSimulation/SearchField.jsx
index b8f53d48..b0025c76 100644
--- a/src/components/PVSimulation/SearchField.jsx
+++ b/src/components/PVSimulation/SearchField.jsx
@@ -1,47 +1,114 @@
-import { Button, Input } from "@chakra-ui/react"
-import React, { useState } from "react"
+import { Button, Input, List, ListItem } from "@chakra-ui/react"
+import React, { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { requestLocation } from "../../simulation/location"
 
-function SearchField({ callback }) {
+export default function SearchField({ callback }) {
   const [inputValue, setInputValue] = useState("")
+  const [suggestions, setSuggestions] = useState([])
+  const [isSelectedAdress, setIsSelectedAdress] = useState(false)
+
   window.searchFieldInput = inputValue
   const { t } = useTranslation()
 
+  useEffect(() => {
+    const fetchSuggestions = async () => {
+      if (!inputValue) {
+        setIsSelectedAdress(false)
+      }
+      if (isSelectedAdress) {
+        return
+      }
+      if (inputValue.length > 2) {
+        try {
+          const response = await fetch(
+            `https://photon.komoot.io/api/?q=${encodeURIComponent(
+              inputValue
+            )}&bbox=5.98865807458,47.3024876979,15.0169958839,54.983104153&limit=5&lang=de&layer=street`
+          )
+          const data = await response.json()
+          console.log("data", data)
+          setSuggestions(
+            data.features.map(
+              (feature) =>
+                feature.properties.name +
+                ", " +
+                feature.properties.postcode +
+                " " +
+                feature.properties.city
+            )
+          )
+        } catch (error) {
+          console.error("Error fetching suggestions:", error)
+        }
+      } else {
+        setSuggestions([])
+      }
+    }
+    const debounceTimer = setTimeout(fetchSuggestions, 300)
+    return () => clearTimeout(debounceTimer)
+  }, [inputValue, isSelectedAdress])
+
   const handleSubmit = async (event) => {
     event.preventDefault()
     const locations = await requestLocation(inputValue)
-    console.warn(location);
-    callback(locations);
+    console.warn(locations)
+    callback(locations)
+  }
+
+  const handleSuggestionClick = (suggestion) => {
+    setInputValue(suggestion)
+    setSuggestions([])
+    setIsSelectedAdress(true)
   }
 
   return (
     <form
+      onSubmit={handleSubmit}
       style={{
         display: "flex",
-        alignItems: "center",
+        flexDirection: "column",
+        alignItems: "stretch",
         padding: "5px",
+        position: "relative",
       }}
-      onSubmit={handleSubmit}
     >
-      <Input
-        type="text"
-        placeholder={t("searchField.placeholder")}
-        value={inputValue}
-        onChange={evt => setInputValue(evt.target.value)}
-        margin={"5px"}
-      />
-      <Button
-        isLoading={ false }
-        type="submit"
-        minWidth={"150px"}
-        margin={"5px"}
-        loadingText="Loading"
-      >
-        { t('Search') }
-      </Button>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Input
+          value={inputValue}
+          onChange={(evt) => setInputValue(evt.target.value)}
+          margin={"5px"}
+        />
+        <Button margin={"5px"} minWidth={"150px"} type="submit">
+          {t("Search")}
+        </Button>
+      </div>
+      {suggestions.length > 0 && (
+        <List
+          borderWidth={1}
+          borderColor="gray.200"
+          mt={2}
+          position="absolute"
+          top="100%"
+          left={0}
+          right={0}
+          zIndex={1}
+          bg="white"
+          boxShadow="md"
+        >
+          {suggestions.map((suggestion, index) => (
+            <ListItem
+              key={index}
+              p={2}
+              cursor="pointer"
+              _hover={{ backgroundColor: "gray.100" }}
+              onClick={() => handleSuggestionClick(suggestion)}
+            >
+              {suggestion}
+            </ListItem>
+          ))}
+        </List>
+      )}
     </form>
   )
 }
-
-export default SearchField

From e8e4e60e203c76575c66f2b651db39e0aedbf0e9 Mon Sep 17 00:00:00 2001
From: Florian Kotthoff <74312290+FlorianK13@users.noreply.github.com>
Date: Mon, 2 Sep 2024 11:29:19 +0200
Subject: [PATCH 2/2] Add photon to privacy policy #253

---
 src/pages/Datenschutz.jsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/pages/Datenschutz.jsx b/src/pages/Datenschutz.jsx
index 2d1cf10b..71f95b2a 100644
--- a/src/pages/Datenschutz.jsx
+++ b/src/pages/Datenschutz.jsx
@@ -94,12 +94,15 @@ const Datenschutz = () => {
               Adresse und Koordinaten: Die Adresse, welche Sie in die Suchmaske
               eingeben, wird an Nominatim zur Koordinatenermittlung übermittelt.
               Weitere Infos zu Nominatim finden Sie unter dem Abschnitt "Plugins
-              und Tools". Die Koordinaten werden verwendet, um die relevanten
-              Gebäude und Geländedaten von unserem Server zu laden. Die genauen
-              Koordinaten werden nicht auf unserem Server gespeichert. Zu
-              statistischen Zwecken und zur Optimierung unseres Angebotes
-              speichern wir die Region (gerundete Koordinaten) der angefragten
-              Adresse (aufgelöst auf wenige Kilometer).
+              und Tools". Zur automatischen Adressvervollständigung wird die
+              Eingabe in das Suchfeld an https://photon.komoot.io/ gesendet.
+              Weitere Infos zu Photon von Komoot finden Sie unter dem Abschnitt
+              "Plugins und Tools". Die Koordinaten werden verwendet, um die
+              relevanten Gebäude und Geländedaten von unserem Server zu laden.
+              Die genauen Koordinaten werden nicht auf unserem Server
+              gespeichert. Zu statistischen Zwecken und zur Optimierung unseres
+              Angebotes speichern wir die Region (gerundete Koordinaten) der
+              angefragten Adresse (aufgelöst auf wenige Kilometer).
             </li>
           </ul>
           <p>
@@ -156,6 +159,14 @@ const Datenschutz = () => {
             Umgang mit Nutzerdaten finden Sie in der Datenschutzerklärung von
             OpenStreetMaps: https://wiki.osmfoundation.org/wiki/Privacy_Policy
           </p>
+          <br />
+          <p>
+            Photon von Komoot <br />
+            openpv nutzt die API von komoot zur automatischen
+            Adressvervollständigung. Dabei werden die eingegebenen Buchstaben an
+            https://photon.komoot.io/ gesendet. Die Auswahl einer finalen
+            Adresse wird nicht an komoot mitgeteilt.
+          </p>
           <hr />
           <h2>Information über Ihr Widerspruchsrecht nach Art. 21 DSGVO</h2>
           <h3>Einzelfallbezogenes Widerspruchsrecht</h3>