75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
"use client";
|
|
import { MapIcon, Ruler } from "lucide-react";
|
|
import dynamic from "next/dynamic";
|
|
import { useState } from "react";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "~/components/ui/dialog";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
|
|
const MapComp = dynamic(() => import("~/components/map/Map"), {
|
|
ssr: false,
|
|
});
|
|
|
|
export const MappaDialogFullscreen = ({
|
|
lat,
|
|
long,
|
|
}: {
|
|
lat: string | null;
|
|
long: string | null;
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = useState(false);
|
|
const [isMeasuring, setIsMeasuring] = useState(false);
|
|
return (
|
|
<Dialog onOpenChange={setOpen} open={open}>
|
|
<DialogTrigger asChild>
|
|
<Button className="w-auto grow" disabled={!lat || !long}>
|
|
<MapIcon /> {t.mappa}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="h-full w-screen max-w-[100vw] p-0 **:data-[slot=dialog-close]:cursor-pointer **:data-[slot=dialog-close]:rounded-md **:data-[slot=dialog-close]:bg-white **:data-[slot=dialog-close]:opacity-100 sm:max-h-[60vh] sm:max-w-2xl [&_[data-slot=dialog-close]>svg]:size-6!">
|
|
<DialogHeader className="hidden h-0">
|
|
<DialogTitle className="sr-only">{t.mappa}</DialogTitle>
|
|
<DialogDescription className="sr-only">{t.mappa}</DialogDescription>
|
|
</DialogHeader>
|
|
<Button
|
|
className="absolute bottom-2 left-2 z-10"
|
|
disabled={!lat || !long}
|
|
onClick={() => setIsMeasuring((m) => !m)}
|
|
variant="orange"
|
|
>
|
|
<Ruler /> {isMeasuring ? "Clicca sulla mappa" : "Misura"}
|
|
</Button>
|
|
<div className="size-full">
|
|
{lat && long && (
|
|
<>
|
|
<MapComp
|
|
height="100%"
|
|
isMeasuring={isMeasuring}
|
|
markerType="home"
|
|
posix={{
|
|
popupTxt:
|
|
"Posizione esatta fornita dopo la richiesta di contatto",
|
|
pos: {
|
|
lat: Number.parseFloat(lat),
|
|
lng: Number.parseFloat(long),
|
|
},
|
|
}}
|
|
scrollWheelZoom
|
|
width="100%"
|
|
zoom={14}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|