mirror of
https://github.com/usememos/memos.git
synced 2025-12-17 14:19:17 +08:00
Fixed merge conflict
This commit is contained in:
Tiny Paws
parent
e579a02435
commit
0d0d2e6ee2
1 changed files with 97 additions and 27 deletions
|
|
@ -5,7 +5,9 @@ import toast from "react-hot-toast";
|
|||
import LeafletMap from "@/components/LeafletMap";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { Location } from "@/types/proto/api/v1/memo_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
|
@ -16,9 +18,11 @@ interface Props {
|
|||
}
|
||||
|
||||
interface State {
|
||||
initilized: boolean;
|
||||
initialized: boolean;
|
||||
placeholder: string;
|
||||
position?: LatLng;
|
||||
latInput: string;
|
||||
lngInput: string;
|
||||
}
|
||||
|
||||
interface NominatimRateLimit {
|
||||
|
|
@ -30,9 +34,11 @@ interface NominatimRateLimit {
|
|||
const LocationSelector = (props: Props) => {
|
||||
const t = useTranslate();
|
||||
const [state, setState] = useState<State>({
|
||||
initilized: false,
|
||||
initialized: false,
|
||||
placeholder: props.location?.placeholder || "",
|
||||
position: props.location ? new LatLng(props.location.latitude, props.location.longitude) : undefined,
|
||||
latInput: props.location ? String(props.location.latitude) : "",
|
||||
lngInput: props.location ? String(props.location.longitude) : "",
|
||||
});
|
||||
const rateLimit = useRef<NominatimRateLimit>({
|
||||
lastNominatimFetch: new Date(0),
|
||||
|
|
@ -47,13 +53,15 @@ const LocationSelector = (props: Props) => {
|
|||
...state,
|
||||
placeholder: props.location?.placeholder || "",
|
||||
position: new LatLng(props.location?.latitude || 0, props.location?.longitude || 0),
|
||||
latInput: String(props.location?.latitude) || "",
|
||||
lngInput: String(props.location?.longitude) || "",
|
||||
}));
|
||||
}, [props.location]);
|
||||
|
||||
useEffect(() => {
|
||||
if (popoverOpen && !props.location) {
|
||||
const handleError = (error: any, errorMessage: string) => {
|
||||
setState({ ...state, initilized: true });
|
||||
setState((prev) => ({ ...prev, initialized: true }));
|
||||
toast.error(errorMessage);
|
||||
console.error(error);
|
||||
};
|
||||
|
|
@ -63,7 +71,13 @@ const LocationSelector = (props: Props) => {
|
|||
(position) => {
|
||||
const lat = position.coords.latitude;
|
||||
const lng = position.coords.longitude;
|
||||
setState({ ...state, position: new LatLng(lat, lng), initilized: true });
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
position: new LatLng(lat, lng),
|
||||
latInput: String(lat),
|
||||
lngInput: String(lng),
|
||||
initialized: true,
|
||||
}));
|
||||
},
|
||||
(error) => {
|
||||
handleError(error, "Failed to get current position");
|
||||
|
|
@ -73,14 +87,21 @@ const LocationSelector = (props: Props) => {
|
|||
handleError("Geolocation is not supported by this browser.", "Geolocation is not supported by this browser.");
|
||||
}
|
||||
}
|
||||
}, [popoverOpen]);
|
||||
}, [popoverOpen, props.location]);
|
||||
|
||||
const updateReverseGeocoding = () => {
|
||||
if (!state.position) {
|
||||
setState({ ...state, placeholder: "" });
|
||||
setState((prev) => ({ ...prev, placeholder: "" }));
|
||||
return;
|
||||
}
|
||||
|
||||
const newLat = String(state.position.lat);
|
||||
const newLng = String(state.position.lng);
|
||||
if (state.latInput !== newLat || state.lngInput !== newLng) {
|
||||
setState((prev) => ({ ...prev, latInput: newLat, lngInput: newLng }));
|
||||
}
|
||||
|
||||
// Fetch reverse geocoding data.
|
||||
fetch(`https://nominatim.openstreetmap.org/reverse?lat=${state.position.lat}&lon=${state.position.lng}&format=json`, {
|
||||
cache: "default",
|
||||
headers: new Headers({ "Cache-Control": "max-age=86400" }),
|
||||
|
|
@ -88,7 +109,7 @@ const LocationSelector = (props: Props) => {
|
|||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data && data.display_name) {
|
||||
setState({ ...state, placeholder: data.display_name });
|
||||
setState((prev) => ({ ...prev, placeholder: data.display_name }));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -110,8 +131,20 @@ const LocationSelector = (props: Props) => {
|
|||
);
|
||||
}, [state.position]);
|
||||
|
||||
// Update position when lat/lng inputs change (if valid numbers)
|
||||
useEffect(() => {
|
||||
const lat = parseFloat(state.latInput);
|
||||
const lng = parseFloat(state.lngInput);
|
||||
// Validate coordinate ranges: lat must be -90 to 90, lng must be -180 to 180
|
||||
if (Number.isFinite(lat) && Number.isFinite(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
|
||||
if (!state.position || state.position.lat !== lat || state.position.lng !== lng) {
|
||||
setState((prev) => ({ ...prev, position: new LatLng(lat, lng) }));
|
||||
}
|
||||
}
|
||||
}, [state.latInput, state.lngInput]);
|
||||
|
||||
const onPositionChanged = (position: LatLng) => {
|
||||
setState({ ...state, position });
|
||||
setState((prev) => ({ ...prev, position }));
|
||||
};
|
||||
|
||||
const removeLocation = (e: React.MouseEvent) => {
|
||||
|
|
@ -148,29 +181,66 @@ const LocationSelector = (props: Props) => {
|
|||
)}
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<PopoverContent align="center">
|
||||
<div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
|
||||
<LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
|
||||
<div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
|
||||
<div className="flex flex-row items-center justify-start gap-2 w-full">
|
||||
<div className="relative flex-1">
|
||||
{state.position && (
|
||||
<div className="absolute left-2 top-1/2 -translate-y-1/2 text-xs leading-6 opacity-60 z-10">
|
||||
[{state.position.lat.toFixed(2)}, {state.position.lng.toFixed(2)}]
|
||||
</div>
|
||||
)}
|
||||
<PopoverContent align="center" className="w-[min(24rem,calc(100vw-2rem))] p-0">
|
||||
<div className="flex flex-col gap-4 p-4">
|
||||
<div className="w-full overflow-hidden rounded-lg border bg-muted/30 shadow-xs">
|
||||
<LeafletMap key={JSON.stringify(state.initialized)} latlng={state.position} onChange={onPositionChanged} />
|
||||
</div>
|
||||
<div className="w-full space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="memo-location-lat" className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Lat
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="Choose a position first."
|
||||
value={state.placeholder}
|
||||
disabled={!state.position}
|
||||
className={state.position ? "pl-24" : ""}
|
||||
onChange={(e) => setState((state) => ({ ...state, placeholder: e.target.value }))}
|
||||
id="memo-location-lat"
|
||||
placeholder="Lat"
|
||||
type="number"
|
||||
step="any"
|
||||
min="-90"
|
||||
max="90"
|
||||
value={state.latInput}
|
||||
onChange={(e) => setState((prev) => ({ ...prev, latInput: e.target.value }))}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="memo-location-lng" className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Lng
|
||||
</Label>
|
||||
<Input
|
||||
id="memo-location-lng"
|
||||
placeholder="Lng"
|
||||
type="number"
|
||||
step="any"
|
||||
min="-180"
|
||||
max="180"
|
||||
value={state.lngInput}
|
||||
onChange={(e) => setState((prev) => ({ ...prev, lngInput: e.target.value }))}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="memo-location-placeholder" className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{t("tooltip.select-location")}
|
||||
</Label>
|
||||
<Textarea
|
||||
id="memo-location-placeholder"
|
||||
placeholder="Choose a position first."
|
||||
value={state.placeholder}
|
||||
disabled={!state.position}
|
||||
onChange={(e) => setState((prev) => ({ ...prev, placeholder: e.target.value }))}
|
||||
className="min-h-16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={() => setPopoverOpen(false)}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
className="shrink-0"
|
||||
color="primary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
props.onChange(
|
||||
Location.fromPartial({
|
||||
|
|
@ -181,7 +251,7 @@ const LocationSelector = (props: Props) => {
|
|||
);
|
||||
setPopoverOpen(false);
|
||||
}}
|
||||
disabled={!state.position || state.placeholder.length === 0}
|
||||
disabled={!state.position || state.placeholder.trim().length === 0}
|
||||
>
|
||||
{t("common.confirm")}
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue