Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add autocompletion for address search #258

Merged
merged 2 commits into from
Sep 2, 2024
Merged

Add autocompletion for address search #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c89230a
Add autocompletion using komoot api #253
FlorianK13 Sep 2, 2024
e8e4e60
Add photon to privacy policy #253
FlorianK13 Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 92 additions & 25 deletions src/components/PVSimulation/SearchField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
23 changes: 17 additions & 6 deletions src/pages/Datenschutz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down