69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import { useField } from 'payload/components/forms';
|
|
|
|
export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
|
|
const { value, setValue } = useField<string>({ path });
|
|
const [longitude, setLongitude] = React.useState(value[0] || 0);
|
|
const [latitude, setLatitude] = React.useState(value[1] || 0);
|
|
const [error, setError] = React.useState("")
|
|
|
|
const handleCityEnter = async (e) => {
|
|
if (e.key === 'Enter') {
|
|
try {
|
|
const response = await fetch(
|
|
`https://nominatim.openstreetmap.org/search?format=json&q=${e.target.value}`
|
|
);
|
|
const data = await response.json();
|
|
if (data && data.length > 0) {
|
|
const { lat, lon } = data[0];
|
|
setLatitude(lat);
|
|
setLongitude(lon);
|
|
setValue([lon, lat]);
|
|
}
|
|
} catch (err) {
|
|
setError(e)
|
|
console.error('Error fetching geolocation:', e);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleLatitudeChange = (e) => {
|
|
setLatitude(e.target.value);
|
|
};
|
|
|
|
const handleLongitudeChange = (e) => {
|
|
setLongitude(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className='field-type text'>
|
|
<label className='field-label'>
|
|
City
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className='field-name'
|
|
onKeyDown={handleCityEnter}
|
|
placeholder="Enter city to get coordinates"
|
|
/>
|
|
</div>
|
|
{error != "" &&
|
|
<p>{error}</p>
|
|
}
|
|
<div className="field-type point">
|
|
<ul className='point__wrap'>
|
|
<li>
|
|
<label className='field-label'>Location - Longitude</label>
|
|
<input id="field-longitude-location" type="number" name="location.longitude" value={longitude} onChange={handleLongitudeChange}></input>
|
|
</li>
|
|
<li>
|
|
<label className='field-label'>Location - Latitude</label>
|
|
<input id="field-latitude-latitude" type="number" name="location.latitude" value={latitude} onChange={handleLatitudeChange}></input>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|